CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel Ellison
Daniel Ellison

Reputation: 1349

Jquery functions not executing correctly

I'm having a problem with the timing execution of my jquery functions. my function dosent always fire correctly or sometimes not at all.I also have a datable that I execute seperately but nothing is synchronizing correctly. The way I have it setup at the moment is that I have all my functions on a seperate html page named modal_form.html. I did this way as I have many pages that call upon these functions and loads other similar content.

Here is an example of the function on my modal_form.html

var IncidentManager = {
    // Returns the url of the application server of a demo web app.
    basePath: function () { return '../../../../_vti_bin/listData.svc'; },
    // Loads all incidents closed or opened. This is mainly used for the report page.
    loadReportIncidents: function () {
        $.ajax({
            url: this.basePath() + '/GDI_PROD_Incidents?$orderby=PrioritéValue desc',
            dataType: 'json',
            cache: false,
            success: function (data) {

                $.each(data.d.results, function (index, incident) {

                $('#example tbody').append(
                "<tr>" +
                "<td class='over_flow_control'> <button class='edit_button btn btn-info btn-circle btn-xs' name ='btnSubmit' type='button' value='Edit' data-ID='"+incident.ID+"'><i class='glyphicon glyphicon-edit'></i></button></td>" +
                "<td class='over_flow_control'>" + incident.Incident + "</td>" +
                "<td class='over_flow_control'>" + incident.PrioritéValue + "</td>" +
                "<td class='over_flow_control'>" + incident.Composante + "</td>" +
                "<td class='over_flow_control text-left'>" + incident.Description + "</td>" +
                "<td class='over_flow_control'>" + incident.Date_de_début + "</td>" +
                "<td class='over_flow_control'>" + incident.ResponsableValue + "</td>" +
                "</tr>");                   
                })
            }
        });
    },  
};

Here some of the code in my reports page:

<script type="text/javascript">  
$("#load_modal").load("pages/modal_form.html");  

$( document ).ready(function() {
setTimeout(function() { 
IncidentManager.loadReportIncidents();
}, 500);
</script>

I had to use a a setTimeout to load the IncidentManager.loadReportIncidents();without it it was not loading at all. But what happens is that my function dosent seem to be always firing correctly and ususally needs a few refreshes for it t work. I keep increasing the delay but dosent seem to be the most efficent method to approach.

I would imagine that loading an HTML file externally is what is causing my problems but Id ont see any solutions to this. Would anyone have any ideas or suggestions?

Upvotes: 0

Views: 50

Answers (2)

Lovey
Lovey

Reputation: 930

Use success/ complete block of ajax function in jQuery.

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Ajax load is async, use the success function to execute the function when modal finished loading

try:

$( document ).ready(function() {
$("#load_modal").load("pages/modal_form.html",function(){
IncidentManager.loadReportIncidents();
}); 
});

Upvotes: 1

Related Questions