Jasmine Jasmine - 2 months ago 12
Ajax Question

Same Ajax called twice..JQuery

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

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.