Same Ajax called twice..JQuery

Question

Hi, i have a question in JQuery..I m using $.ajax() in my code (Function 1)to send the fieldname and the sequence number to the ctrller which gets its data by $_POST['name'] and $_POST['sequenceno'] and updates the fieldname in the table with sequence no given..And generates the Preview Display Panel with the inserted fields .. Now i m trying the change the field name again tat is Now when i click on the generated display panel fields ,the corresponding settings will open and i will try to change the name of the field now(Function 2)

Both Function1 and Function2 are same ..In the FUnction 1 i m sending the fieldname and the sequence no In the Funciton 2 ,i want to send the same fieldname and (but the other value)sequenceno..

But in Function1 (sequenceno is the counter value) Whereas in the Function2 (sequenceno is the clicked div id (display Panel))

How can i make use of the same func for both ..Or could i need to use separate funcs..

Even i tried with 2 separate funcs with different urls but not updated correctly

My code is //This is what i insert the field initially

          $(".TextFieldSettings #fieldTitle").change(function (){
         fieldname=$(".TextFieldSettings #fieldTitle").val();
$.ajax({
    type: "POST",
    url: "./server",
 data: "name="+fieldname+"&sequenceno="+counter,

            success: function(msg){
                  }//success
       });//ajax

 });//change

//After inserting to get the updated values in JSON format

 var htm = $.ajax({
   type: "GET",
      url: "./viewforms",
     async: false
   }).responseText;
    var myObject = eval('(' + htm + ')');


gettype=myObject.attributes[0]["type"];

getlabel=myObject.attributes[0]["labels"];

//showing in my DisplayPanel view

  $("#labelstr"+counter+"").html(getlabel);
 });//change

Now When i click the DisplayPanel view

     $("#displayPanel div").live("click", function(){
                         div_id=$(this).attr("id");

       var htm = $.ajax({
         type: "GET",
         url: "./getattributes/"+div_id+"",
         async: false
        }).responseText;
       var myObject = eval('(' + htm + ')');


       gettype=myObject.attributes[0]["type"];
       getlabel=myObject.attributes[0]["labels"];
       getsize=myObject.attributes[0]["size"];

if(gettype=='Text')
 {
$(".TextFieldSettings").show(function(){
$(".TextFieldSettings #fieldTitle").val(getlabel);//showing the updated value
                         if(getsize=='100')
                       {
      $("#fieldSize option:contains(Small)").attr("selected",true);
                       }
                         else if(getsize=='200')
                        {
 $("#fieldSize option:contains(Medium)").attr("selected",true);
                     }
    else 
  {
   $("#fieldSize option:contains(Large)").attr("selected",true);
  }

//Again i m changing the fieldname

   $(".TextFieldSettings #fieldTitle").change(function (){
  fieldname=$(".TextFieldSettings #fieldTitle").val();


       alert(div_id);
         $.ajax({
            type: "POST",
            url: "./editsettings",



                                                                     data: "name="+fieldname+"&sequenceno="+div_id,
            success: function(msg){

          }//success
               });//ajax

});//change in text value later*/

    });//show
    }//if type = TEXT

            });//displaypanel Div clicked

But now if i try to change the fieldname again i m writing another POST function editsettings but the execution comes inside Func1(changing initially) instead of FUnc2(changing in the fieldname again)... Please anyone get out the answer for this.... Note: $(".TextFieldSettings #fieldTitle").change() is used twice inside my prg ..May be because of this the updation goes wrong

Answer 1

It seems like the problem is that both of your event handlers are firing, and you only want the latter one to fire.

The jQuery .change() function adds an event handler to the change event. It doesn't replace existing ones. If you want to remove the previous handler, you need something like:

$(".TextFieldSettings #fieldTitle").unbind('change')

before you attach a new handler.

please note that I'm not sure this works (I just found it from the api docs) and I can't test it right now. However, the general idea is that if you want an event handler to stop responding to an event, you have to remove the handler.

Answer 2

dude this was really helpful. scratched my head the whole day trying to prevent multiple ajax requests. this did the trick.