Hi dear community,
I'm trying to find a way to solve a strange, yet understandable
problem. I'm now working on a private website, that's going to be used
by about 50-100 users, not more. Project manager asked me to make it
full ajax, including loading of external forms, Json responses, etc
etc...
I decided to make this interface as empty as I can, to be fully
session dependant, and 100% user reactive. Basically, my major problem
here is the 'change' event support in IE (network users cannot use
FF); I admit I made a mistake coding under FF, but using Firebug and
other plugins is so much easier... And now, i'm stuck. My code works
great under FF (except for a couple of minor bugs), but under IE ,
it's just embarrassing...
Here's the full code :
<script type="text/javascript">
$(function(){
if ($('#coordonneesFacturation').length!=0) {
var target = $('#coordonneesFacturation');
$.ajax({
url:
"/actions/commande/editerCoordonneesFacturationCommande",
success: function(reponseFormulaireFacturation){
$('#coordonneesFacturation').html(reponseFormulaireFacturation);
validerSubmitCoordsFacturation();
}
});
}
function validerSubmitCoordsFacturation(){
$("#formulaireFinalCreationCompte").change(function(){
$(this).validate({
errorPlacement: function(error, element){
error.appendTo(element);
},
rules: {
facturationCivilite: "required",
facturationNom: "required",
facturationPrenom: "required",
facturationAdresse1: "required",
facturationCodePostal: {
required: true,
rangelength: [5, 5],
number: true
},
facturationVille: "required",
facturationTel: {
number: true,
required: true
},
facturationEmail: {
required: true,
email: true
}
},
submitHandler: function(form){
var action = $(form).attr('action');
var data = $(form).serialize();
$.ajax({
url: action,
data: data,
success: function(reponseJSON){
$('#coordonneesFacturation').empty();
$('#coordonneesFacturation').html
(reponseJSON);
validerSubmitCoordsFacturation();
}
});
}
});
if ($(this).valid()) {
$(this).submit();
}
});
}
$.getJSON("/actions/formulaireArticles?
referenceVitrine=CARTEBESTCADEAUX", function(reponse){
generationTable(reponse);
});
function generationTable(reponse){
//loop through all items in the JSON array
for (var x = 0; x < reponse.articles.length; x++) {
var articleRow = $("<tr>").addClass
("ligneArticlePrincipal").appendTo("#panierDetail tbody");
$("<td>").addClass("libelleArticlePrincipal").text
(reponse.articles[x].libelle).appendTo(articleRow);
var prixAffiche = parseInt(reponse.articles
[x].prixAffiche);
if (prixAffiche != 0) {
$("<td>").addClass('prixTotalLigne').text
(reponse.articles[x].prixAffiche).appendTo(articleRow);
}
else {
$("<td>").html('<input type="text"
id="prixUnitaireArticle" value="0" name="prixCommandeCarte"/
>').appendTo(articleRow);
}
var inputText = $("<td>").html('<input type="text"
id="quantitePrincipal" class="quantite" value="' + reponse.articles
[x].quantite + '" name="quantiteLigneCommande(' + reponse.articles
[x].id + ')"/>').appendTo(articleRow);
var inputHidden = $("<input type=\"hidden\"/>").attr
('value', reponse.articles[x].id).attr('id',
'articlePrincipalCourantId').attr('name',
'articlePrincipalCourantId');
var remiseLigneArticle = $("<td>").addClass
('remiseLigneArticle').html('<span id="remiseLigneArticle">' +
reponse.articles[x].montantRemise + '</span>').appendTo(articleRow);
$(inputHidden).appendTo(inputText);
var prixTotalArticle = "00,00";
if (reponse.articles[x].prixTotal != "") {
prixTotalArticle = reponse.articles[x].prixTotal;
}
var totalLigneArticle = $("<td>").addClass
('prixTotalLigne').html('<span id="totalArticle">' + prixTotalArticle
+ '</span>').appendTo(articleRow);
}
if (reponse.totalPanier) {
var totalPanier = $("tfoot td.prixTotalLigne").html
(reponse.totalPanier);
}
//On appelle la fonction destinée à la gestion des evts
sur les inputs, après chargement de tous les objets 'cibles'
calculs();
}
function calculs(){
$("form input.quantite").each(function(){
var formulaire = $(this).parents("form:first");
var action = $(formulaire).attr('action');
var articleEnCoursVal = parseInt($(this).val());
$(this).change(function(){
action = $(formulaire).attr('action');
var nouvelleValeur = parseInt($(this).val());
var articleId = $(this).next('input:hidden').val
();
var quantite = $(this).val();
var data;
if (articleEnCoursVal != 0 && articleEnCoursVal !=
nouvelleValeur) {
action = '/actions/actualierPanierCommande';
data = '';
$("form[name=panierCommandeForm] input.quantite
[value!=0]").each(function(){
data += $(this).attr('name');
data += "=";
data += $(this).val();
data += "&";
})
}
else {
data = "articleId=";
data += articleId;
data += "&";
data += "quantite=";
data += quantite;
if ($(this).parents("tr:first").find
('#prixUnitaireArticle').length != 0) {
var prixUnitaireArticle = $(this).parents
("tr:first").find('#prixUnitaireArticle').val();
data += "&";
data += "prixUnitaireArticle=";
data += prixUnitaireArticle;
}
}
var rowEncours =
$(this).parents("tr:first");
var largeur= $(rowEncours).width();
var hauteurN= $(rowEncours).height();
var hauteur= ($(rowEncours).height())/2;
var positions= $(rowEncours).position();
var imgActualisation = "<img
src='/images/ajax-loader.gif'/>";
$.ajax({
url: action,
data: data,
dataType: "json",
beforeSend:function(){
$(imgActualisation)
.appendTo(rowEncours)
.attr("position","relative")
.attr("top",positions.top)
.attr("left",positions.left)
.attr("z-index","800");
},
success: function(reponseJSON){
$(imgActualisation).fadeOut("slow", function () {
$("#panierDetail
tbody").empty();
generationTable(reponseJSON);
});
}
});
});
});
}
var adresseDelivraison="/actions/commande/
adresseDestinataireFormulaireCommande";
function rafraichirCoordonnesLivraison(){
$.ajax({
url: adresseDelivraison,
success: function(reponseFormulaire){
$(reponseFormulaire).appendTo("div#coordoneesLivraison");
gestionCheckboxesLivraison();
eventHandlersFormulaireLivraison();
}
});
}
function gestionCheckboxesLivraison(){
if($("#beneficiaire").is(':checked')){
$("#renseignementLivraison").show();
$("#renseignementAcheteur").hide();
$("#domicile").attr('checked', false);
$(".lieuLivraison").html("Au domicile du bénéficiaire");
}
if($("#domicile").is(':checked')){
$("#renseignementAcheteur").show();
$("#renseignementLivraison").hide();
$("#beneficiaire").attr('checked', false);
$(".lieuLivraison").html("A domicile");
}
$("#beneficiaire").click(function(){
if ($(this).is(':checked')) {
$("#renseignementLivraison").show();
$("#renseignementAcheteur").hide();
$("#domicile").attr('checked', false);
$(".lieuLivraison").html("Au domicile du
bénéficiaire");
}
else {
$(this).attr('checked', true);
$("#renseignementLivraison").hide();
}
});
$("#domicile").click(function(){
if ($(this).is(':checked')) {
$("#renseignementAcheteur").show();
$("#renseignementLivraison").hide();
$("#beneficiaire").attr('checked', false);
$(".lieuLivraison").html("A domicile");
}
else {
$(this).attr('checked', true);
$("#renseignementAcheteur").hide();
}
});
}
function eventHandlersFormulaireLivraison(){
$("form#adresseLivraison
input[type=text]").each(function(){
$(this).change(function(){
var formulaireEncours = $(this).parents
("form#adresseLivraison:first");
var adresseDelivraison =
'/actions/commande/
enregistrerCoordonneesLivraisonCommande';
var data =
$(formulaireEncours).serialize();
$.ajax({
url: adresseDelivraison,
data: data,
success:
function(reponseFormulaire){
$("div#coordoneesLivraison").empty();
$(reponseFormulaire).appendTo("div#coordoneesLivraison");
gestionCheckboxesLivraison();
eventHandlersFormulaireLivraison();
}
});
})
});
}
rafraichirCoordonnesLivraison();
});
</script>
As you can see, basically, any of my forms is submited as soon as user
changes values, wether in input[type="text"] or checkboxes. Some of
them are submited via ajax only after validating, but they finally all
need the change event firing IE dosen't support... bummer...
Thanks for your help, greatly appreciated you know ^^
--
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en.
