Same Ajax called twice..JQuery

Question

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

Are you sure you are not including the same script twice? For example:

Viewstart:

Scripts/jquery-1.6.1.js

Partial view:

<script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>

I got the same problem and I solved it by deleting the min-version.

I hope this will help.

Answer 3

I have another case. I got twice send post ajax when bind click a button. It caused by I have two id that has same name, so the trigger detected twice.