Jump to content

Solved: what is the worng in my code!


samerhannoun
 Share

Recommended Posts

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

Edited by Rainjo
Link to comment
Share on other sites

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?

Edited by thescientist
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

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.

Edited by thescientist
Link to comment
Share on other sites

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

Edited by Rainjo
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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???????

Edited by Rainjo
Link to comment
Share on other sites

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;	}}

Link to comment
Share on other sites

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.

Edited by thescientist
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...