Solved: what is the worng in my code!

[samerhannoun]

Hi guysI am developing something like the following link http://www.flexistore.co.uk/vault-estimator/I mean FLEXISTORE VAULT ESTIMATORin the website developed using flash,, but I attend to develop it using Jquery and AJAX.The Wall Idea 1. Drop Down Menu Contains sections names and this is technically equal folders names that is contain the images.2. when the user select a section from the drop down menu the images inside it appears.3. when the user click on the image I take the required information from the image click, and add it in a html <select> if the user click on the element inside the select menu the element should be removed and affect all related data.I do it,, but there is something wrong with my Jquery code.

if (Drupal.jsEnabled){				  $(document).ready(function () {				  			  $("select").change(function(){    				 var txt= $("#edit-display-section option:selected").text();			  var fire = function(data) {			$("#samer").html(data);				 $(".tocalc").click(function() 			 { 			  update($("span#volum"), $(this).attr("id"),$(this).attr("alt"),'inc'); 			 } 			 							);			 $(".tocalcd").click(function() 			 { 			 update($("span#volum"), $(this).attr("id"),$(this).attr("value"),'dec'); 			 });	   									  }	$.ajax({	  url: "calc/ajax/"+txt,	  type: 'POST',	  success:fire,	});  });    // here is the calc functionfunction update(total,object,volum,op){		switch(op){		case'inc':		var volum_value = parseInt(total.text(), 10);		volum_int= parseInt(volum);		volum_value+=volum_int;		total.text(volum_value);		var number_of_boxes=Math.ceil(volum_value/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		$("#type").append("<option id="+object+" class='tocalcd' value="+volum+">"+object+" (Remove)</option>");		break;				case 'dec':		var volum_value1 = parseInt(total.text(), 10);		volum_int1= parseInt(volum);		volum_value1=(volum_value1)-(volum_int1);		total.text(volum_value1);		var number_of_boxes=Math.ceil(volum_value1/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		var x=document.getElementById("type");		x.remove(x.selectedIndex);		break;		default: return;	}}     }); }

in some cases it works fine, but the error thats happen in the calc. exampewhen the user click on an chair 3 times the volume should be 15 that is fine, but when he delete them one by one the volume being -5.I think there is something wrong in the <select> element.!!!note: the first click on the select element to remove something didn't respond so the first remove action needs 2 click,, so what is that!!please help

[samerhannoun]

guysalso this code not working on IE7 oh my god any help please

[thescientist]

are you checking for errors in the console? are you alerting the values of your variables or writing them to the console to verify that they are what they should be? In other words, what debugging techniques have you tried to solve your problem?

[samerhannoun]

hi thescientistI am checking by alert,, I don't know how to use console ,,, I hear about it,, but I don't know to how to working with!!!but what about the big problem IE7???

[thescientist]

who's to say it's errors are not happening in all browsers? Have you looked up how to open the error console of your browser?

[samerhannoun]

thanks for your replies I tried the error console, but In fact I am not very will in debugging and tracing,,, really its a big problem.I don't know from where I should start,, may be re-write the code is an option????I am very confused about that!!!

[thescientist]

well, the simplest thing is to see if there are errors. Clear the console and then reload the page. do some stuff and if there are errors they will appear. Do you have this site live anywhere? How about your alerts? Do they make sense given the context of what you are trying to do? Where does it go wrong? Trace back to the last alert that made sence and then see wherein those lines there might be a problem.

[samerhannoun]

big thanks thescientist I have 2 main problem the first : A logical error in the functionality of the script,, I mean this

//this is where the update function called...if (Drupal.jsEnabled){				  $(document).ready(function () {				  			  $("select").change(function(){ 					var txt= $("#edit-display-section option:selected").text();			  var fire = function(data) {			$("#samer").html(data);				 $(".tocalc").click(function()			 {			  update($("span#volum"), $(this).attr("id"),$(this).attr("alt"),'inc');			 }										);			 $(".tocalcd").click(function()			 {			 update($("span#volum"), $(this).attr("id"),$(this).attr("value"),'dec');			 });											 }	$.ajax({	  url: "calc/ajax/"+txt,	  type: 'POST',	  success:fire,	});  });//this function of calculation switch(op){		case'inc':		var volum_value = parseInt(total.text(), 10);		volum_int= parseInt(volum);		volum_value+=volum_int;		total.text(volum_value);		var number_of_boxes=Math.ceil(volum_value/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		$("#type").append("<option id="+object+" class='tocalcd' value="+volum+">"+object+" (Remove)</option>");		break;				case 'dec':		var volum_value1 = parseInt(total.text(), 10);		volum_int1= parseInt(volum);		volum_value1=(volum_value1)-(volum_int1);		total.text(volum_value1);		var number_of_boxes=Math.ceil(volum_value1/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		var x=document.getElementById("type");		x.remove(x.selectedIndex);		break;		default: return;

the second problem: with I.E 7,, thats my script not working here never.I know I seems stupid but I am under stress and I can't thinking very will. best regards

[justsomeguy]

You need to find the error messages, without knowing what the problem is you're just guessing. Look in the error console and copy and paste any errors you see. If there are no errors in the console, say so.

[samerhannoun]

Hi guys,,Thank you very much for your replies and help.Today I re-fine my code,,

$(document).ready(function (){$("#edit-display-section").change(function(){ var txt= $("#edit-display-section option:selected").text();var fire = function(data) {		// here I replace the Jquery method $(#div).html with this 		 document.getElementById('samer').innerHTML=(data);   }      $.ajax({	  url: "calc/ajax/"+txt,	  type: 'POST',	  success:fire	});}); 	  $('.tocalc').click(function()	   {		update($("span#volum"), $(this).attr("id"),$(this).attr("alt"),'inc');	   });	 	 $('.tocalcd').click(function()			 {			 update($("span#volum"), $(this).attr("id"),$(this).attr("value"),'dec');	   });		  	});    function update(total,object,volum,op){		switch(op){		case'inc':		var volum_value = parseInt(total.text(), 10);		volum_int= parseInt(volum);		volum_value+=volum_int;		total.text(volum_value);		var number_of_boxes=Math.ceil(volum_value/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		$("#type").append("<option id="+object+" class='tocalcd' value="+volum+">"+object+" (Remove)</option>");		break;				case 'dec':		var volum_value1 = parseInt(total.text(), 10);		volum_int1= parseInt(volum);		volum_value1=(volum_value1)-(volum_int1);		total.text(volum_value1);		var number_of_boxes=Math.ceil(volum_value1/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		var x=document.getElementById("type");		x.remove(x.selectedIndex);		break;		default: return;	}}

Now this code working fine for displaying the images when the user change the selection of the menu.but the problem now thats the calling for update function not working by: $('.tocalc').click(function() { update($("span#volum"), $(this).attr("id"),$(this).attr("alt"),'inc'); }); and $('.tocalcd').click(function() { update($("span#volum"), $(this).attr("id"),$(this).attr("value"),'dec'); });in all browsers nowwhen I click on the displayed images with "tocalc" class nothing happen, even the nothing on the console.log(); maybe the function or event not seen for the browser... any suggestion !!!thanks again

[samerhannoun]

hi guysafter searching on the net,, the problem now is that the event not working after the ajax callback,, and I should use event delegation with jquery,, I read about that, but I can't get it!!!

[samerhannoun]

hi guys now I do it,, the problem was as I said, thats the elements created by ajax callback didn't take the event, so I should do the following to call the function:

$(function() {	 $('.tocalc').live("click",function(event)	   {	    				update($("span#volum"), $(this).attr("id"),$(this).attr("alt"),'inc');	  	   });  });       $(function() {	 $('.tocalcd').live("click",function(event)			 {			 update($("span#volum"), $(this).attr("id"),$(this).attr("value"),'dec');			 	   });  });

thats works fine for firefox and google chrome,, IE just the first function called but the anther one not working and didn't show any errorthe second function called for select element option onclick may the ie7 and higher doesn't support the event on click for options of select element???????

[samerhannoun]

guysie7 doesn't support the click event for option fo select element,, so i give the class name for the select and do the following with jquery

  $(function() {	  	 $('.tocalc').live("click",function(event)	   {		update($("span#volum"), $(this).attr("id"),$(this).attr("alt"),'inc');	   }); 		 $('.tocalcd').live("click",function(event)			 {			update($("span#volum"), $(this).attr("id"),$(this).attr("value"),'dec');	   });  });	});    function update(total,object,volum,op){		switch(op){		case'inc':		var volum_value = parseInt(total.text(), 10);		volum_int= parseInt(volum);		volum_value+=volum_int;		total.text(volum_value);		var number_of_boxes=Math.ceil(volum_value/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		$("#type").append("<option id="+object+"  value="+volum+">"+object+" (Remove)</option>");		break;				case 'dec':		if(volum=='')		{			alert("there is nothing to remove");			return;		}			var volum_value1 = parseInt(total.text(), 10);		volum_int1= parseInt(volum);		volum_value1=(volum_value1)-(volum_int1);		total.text(volum_value1);		var number_of_boxes=Math.ceil(volum_value1/150);		$("span#result").html("The number of boxes you need is: "+number_of_boxes);		var x=document.getElementById("type");		x.remove(x.selectedIndex);		break;		default: return;	}}

[thescientist]

I think you want to use the onchange event for select/options rather than onclick.

[samerhannoun]

Hi thescientistin my case I use select with specific length not dropdown menu, so the onchange will not serve my script.thank you again.

[thescientist]

oh. well this

Drop Down Menu Contains sections names and this is technically equal folders names that is contain the images

and this

option fo select element

and this

$("#type").append("<option id="+object+"  value="+volum+">"+object+" (Remove)</option>");

to me implied you were using a dropdown menu.

[samerhannoun]

aha I am sorry for weak description I give I use 2 select,, on if them is dropdown the other one with pre-defined length,, you will understand me if you see this page,, I am trying to do something like it exactly http://www.flexistore.co.uk/vault-estimator/FLEXISTORE VAULT ESTIMATOR,, something develop here with flash,, I do it all with jquery/ajax