CODEWITHSUNDEEP
jqueryhtmlajax
MO30 Qari
MO30 Qari

Reputation: 67

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.

Upvotes: 1

Views: 70

Answers (1)

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

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.

Upvotes: 1

Related Questions