Jquery functions not executing correctly

Question

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?

madalinivascu · Accepted Answer · 2015-11-30 17:58:34Z

1

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();
}); 
});

answered Nov 30, 2015 at 17:58

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Ellison Over a year ago

How would you run another function after IncidentManager.loadReportIncidents(); completes?

madalinivascu Over a year ago

in the success function of that ajax call

Lovey · Accepted Answer · 2015-11-30 18:10:08Z

0

Use success/ complete block of ajax function in jQuery.

answered Nov 30, 2015 at 18:10

Lovey

9303 gold badges17 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery functions not executing correctly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related