MO30 Qari MO30 Qari - 4 months ago 13
Ajax Question

jquery doesn't run after AJAX call

I have a problem with JQuery in dynamic page .
I have a select input:

<select id="select">
<option value="1">1</option>
<option value="2">2</option>
</select>


and a text input:

<input id="input" type="text" value="123456789"></input>


and i wrote in my scripts:

function changeLength(){
var place = document.getElementById('input');
var placeText = 0;
placeText = place.value;
if(placeText.length > 5){
place.style.fontSize = "10px";
}
}

$(body).on("change","#select",function(){//AJAX is called
changeLength();
});

$(document).ready(function(){
changeLength();
});


function
changeLength
is working before Ajax calling but after isn't.

Answer

That is usually because the html select input is deleted and reconstructed in the page after the ajax request and you will need to register the handler again by doing another call to the following after the ajax is completed:

$(body).on("change","#select",function(){//AJAX is called
    changeLength();
});

For example, in ASP.net, you use RegisterStartupScriptBlock to execute such code after ajax postback is completed:

Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "selectHandler", " $(body).on('change','#select',function(){//AJAX is called changeLength();});", true);

If you are using jQuery to do the ajax request and reconstruct the html select input in the page, you'll need to execute the same code block again and so on.