Link to home
Start Free TrialLog in
Avatar of dan henderson
dan hendersonFlag for United States of America

asked on

display data from multiple ajax calls

I am running 3 ajax get calls which work perfectly until I try to update different <div> elements on the form.  Here is my code: ( the ajax calls occur on the SelectRow function:
    $(document).ready(function () {
        //debugger;
        var grid_selector = "#grid-table";
        var pager_selector = "#pager";

        $(grid_selector).jqGrid({
            url: '/Residents/GetResidents',
            async: true,
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            loadonce: true,
            width: 600,
            colNames: ['ID', 'First Name', 'Last Name',
                'Street Address', 'Home Phone', ''],
            colModel: [
                { name: 'id', width: 20, search: false, sortable: false, search: false },
                { name: 'firstName', width: 90, sortable: false, search: false },
                { name: 'lastName', width: 90 },
                { name: 'streetAddress', width: 200 },
                { name: 'homePhone', width: 75 },
                { name: 'officerWarning', width: 50, search: false, formatter: 'checkbox', align: 'center' }
            ],
            iconSet: "fontAwesome",
            ignoreCase: true,
            rowNum: 20,
            pager: pager_selector,
            pgbuttons: true,
            sortable: false,
            viewrecords: false,
            caption: "Residents",
            emptyrecords: 'No data for the applied filter',
            height: 450,
            gridview: true,
            rowattr: function (rd) {
                if (rd.officerWarning) {
                    return { "class": "rowClass" };
                }
            },
            [b]onSelectRow: function (id) {
                if (id > 0 && id != null) {
                    RID = id;
                    var target = '/Residents/Details1/' + id;
                    var oot = '/ResidentOOTs/Details/' + id;
                    var pets = '/ResidentPets/Index/' + id;
                    var requests = [ //this will be the dynamic part
                        $.get(target),
                        $.get(oot),
                        $.get(pets)
                    ]

                    $.when.apply($, requests).done(function (resData, ootData, petData) {
                        //console.log(arguments); //array of responses [0][data, status, xhrObj],[1][data, status, xhrObj]...\
                        //alert(resData);
                        //alert(petData);
                        //alert(ootData);

                        $('#divResident').replaceWith(resData),
                        $('#divPets').replaceWith(petData),
                        $('#detailsOOT').replaceWith(ootData)
                    })
                }
            }
[/b]        });

        $("#grid-table").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, ignoreCase: true });
        $("#pager_left, #pager_center", "#pager").width(50);

    });

Open in new window


Once I try to write the data to the div elements, I receive the following javascript error:
jquery-3.1.1.js:9425 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Also, the resData and petData show up in the same div, even though they are targeted to seperate div elements (these are part of bootstrap tabs control).  the whole page code is below (BTW these are razor views, not json partialviews);

@model IEnumerable<RPIA.Models.Resident>

@{
    ViewBag.Title = "Index";
}




<div class="container" style="margin-top: 15px;">
    <div style="float:left;">
        <table id="grid-table"></table>
        <div id="pager"></div>
        
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="panel panel-success">
                <div class="panel-heading">Notes</div>
                <div class="panel-body" id="divNotes" style="max-height: 250px;overflow-y: scroll;"></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="panel panel-danger">
                <div class="panel-heading">Emergency Contact</div>
                <div class="panel-body" id="detailsEMC" style="max-height: 75px;overflow-y: scroll;"></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="panel panel-warning">
                <div class="panel-heading">Out of Town</div>
                <div class="panel-body" id="detailsOOT" style="overflow-y: scroll;"></div>
            </div>
        </div>
    </div>
</div>

<br />
<div class="container">

        <div class="row">
            @* NEW PANELS *@

            <div class="col-lg-12 col-md-12 col-sm-12">
                <div id="tabs">
                    <ul class="nav nav-tabs tabs-up">
                        <li><a href="#divResident" data-toggle="tab" data-target="#divResident" data-url="ResidentURL">Resident</a></li>
                        <li><a href="#divPets" data-toggle="tab" data-target="#divPets" data-url="/ResidentPets/Index/">Pets</a></li>
                        <li><a href="#divCalls" data-toggle="tab" data-target="#divCalls" data-url="/Dispatches/FetchSummary/">Calls</a></li>
                    </ul>
                    <div id="divResident" class="active">

                    </div>
                    <div id="divPets" class="active">

                    </div>
                    <div id="divCalls" class="active">

                    </div>
                </div>

            </div>


        </div>

    </div>


<link href="~/Content/themes/cupertino/jquery-ui.cupertino.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Scripts/free-jqGrid/jquery.jqgrid.src.js"></script>

<style type="text/css">
    .rowClass {
        background-color: orange;
        background-image: none;
    }

    .body {
        font-size: 12px;
    }

    tabs-smaller .ui-tabs-nav li {
        margin-top: 0.6em;
        font-size: 80%;
    }
</style>
<script language="javascript">
    var RID = 0;

    $(document).ready(function () {
        //debugger;
        var grid_selector = "#grid-table";
        var pager_selector = "#pager";

        $(grid_selector).jqGrid({
            url: '/Residents/GetResidents',
            async: true,
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            loadonce: true,
            width: 600,
            colNames: ['ID', 'First Name', 'Last Name',
                'Street Address', 'Home Phone', ''],
            colModel: [
                { name: 'id', width: 20, search: false, sortable: false, search: false },
                { name: 'firstName', width: 90, sortable: false, search: false },
                { name: 'lastName', width: 90 },
                { name: 'streetAddress', width: 200 },
                { name: 'homePhone', width: 75 },
                { name: 'officerWarning', width: 50, search: false, formatter: 'checkbox', align: 'center' }
            ],
            iconSet: "fontAwesome",
            ignoreCase: true,
            rowNum: 20,
            pager: pager_selector,
            pgbuttons: true,
            sortable: false,
            viewrecords: false,
            caption: "Residents",
            emptyrecords: 'No data for the applied filter',
            height: 450,
            gridview: true,
            rowattr: function (rd) {
                if (rd.officerWarning) {
                    return { "class": "rowClass" };
                }
            },
            onSelectRow: function (id) {
                if (id > 0 && id != null) {
                    RID = id;
                    var target = '/Residents/Details1/' + id;
                    var oot = '/ResidentOOTs/Details/' + id;
                    var pets = '/ResidentPets/Index/' + id;
                    var requests = [ //this will be the dynamic part
                        $.get(target),
                        $.get(oot),
                        $.get(pets)
                    ]

                    $.when.apply($, requests).done(function (resData, ootData, petData) {
                        $('#divResident').replaceWith(resData),
                        $('#divPets').replaceWith(petData),
                        $('#detailsOOT').replaceWith(ootData)
                    })
                }
            }
        });

        $("#grid-table").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, ignoreCase: true });
        $("#pager_left, #pager_center", "#pager").width(50);

    });

    function getData(url) {
        return $.get(url);
    }

    // tab click operations
    $('#tabs a').on('click', function (e) {
        e.preventDefault();

        var url = $(this).attr("data-url") + RID;
        //alert(url);
        var target = $(this).attr("data-target");
        alert(target);

        if (!$(target).html.length > 0) {
            //$(target).load(url);
        }
        $(target).show();        

    });
</script>

Open in new window


I really need some guidance here.  I am using jquery 3.1.1.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

As a matter of interest why are you using replaceWith() against ID selectors - which should only yield one result?

Onto your problem - what does the returned data from those calls look like?
Avatar of dan henderson

ASKER

they look like web pages.  they are razor  views returned from mvc 5.  should I turn them into partial views?
No but there is some documentation to say that if the pages include <script src=""> then that is what could be triggering the async error.
well, each page has buttons to edit / cancel / update,  but I have them calling a function on the main (index) page that holds the fqgrid control.
ok, I changed the call to load the divs like this:
$.when.apply($, requests).done(function (resData, ootData, petData) {
                        $('#divResident').html(resData),
                        $('#divPets').html(petData),
                        $('#detailsOOT').html(ootData)
                    })

but I still get the error from my original post.  Also the resData and petData write to the same div in the tab control.  I made sure there is no javascript in any of the views.  They are the razor views that visual studio creates for details, edit, etc.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
here is the petData view that is returned:
"<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">RPIA CIS</a>
                
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>True</li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                    <li><a href="/Residents">Residents</a></li>
                    

                        <li><a href="/AspNetUsers">Users</a></li>
                </ul>
                    <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="J_-2IVxKjVRAXAUOWUK8a3a2_C-SplnkFD-JEQZsa6Sp6wj6EttzI4SYJnNTGm3s-sh6qDj2I1EsvGPUxvKokDFUak4xrZ_kr16P2P1c2TTjZT_vTkT6wYTiNjrYGvdDMCn_CjioJOfEH1qhCJaZ7w2" />    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="/Manage" title="Manage">Hello dan!</a>
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
</form>
            </div>
        </div>
    </div>
    <div class="container body-content push">
        


<h2>Index</h2>

<p>
    <a href="/ResidentPets/Create">Create New</a>
</p>
<table class="table">
    <tr>
        <th>
            ResidentId
        </th>
        <th>
            Animal
        </th>
        <th>
            Breed
        </th>
        <th>
            Color
        </th>
        <th>
            Weight
        </th>
        <th>
            Notes
        </th>
        <th>
            Name
        </th>
        <th>
            Image
        </th>
        <th></th>
    </tr>

    <tr>
        <td>
            1
        </td>
        <td>
            dog
        </td>
        <td>
            chihuahua
        </td>
        <td>
            tan
        </td>
        <td>
            10
        </td>
        <td>
            
        </td>
        <td>
            Pete
        </td>
        <td>
            
        </td>
        <td>
            <a href="/ResidentPets/Edit/1">Edit</a> |
            <a href="/ResidentPets/Details/1">Details</a> |
            <a href="/ResidentPets/Delete/1">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            1
        </td>
        <td>
            dog
        </td>
        <td>
            german shepard
        </td>
        <td>
            black
        </td>
        <td>
            30
        </td>
        <td>
            
        </td>
        <td>
            Fred
        </td>
        <td>
            
        </td>
        <td>
            <a href="/ResidentPets/Edit/2">Edit</a> |
            <a href="/ResidentPets/Details/2">Details</a> |
            <a href="/ResidentPets/Delete/2">Delete</a>
        </td>
    </tr>

</table>

        <hr />

    </div>
    <div>
        <footer class="footer">
            <p>&copy; 2017 - RPIA CIS Application</p>
        </footer>
    </div>
    
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    
    

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"a5c47433f89042239af5c311d224d997"}
</script>
<script type="text/javascript" src="http://localhost:50429/7ad421eb952a479fb6165b6cd76fa5e4/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
"

Open in new window


here is the resData view that is returned;
"<form action="/Residents/Details1/1" method="post"><div>
    <h4>Joan h Fyfe</h4>
    <hr style="width:200px;"/>
    <dl class="dl-horizontal" id="data-list"> 
        <dt>
            StreetAddress
        </dt>

        <dd>
            2398 Cherry Palm Road
        </dd>

        <dt>
            Spouse
        </dt>

        <dd>
            George
        </dd>

        <dt>
            ResidentType
        </dt>

        <dd>
            
        </dd>

        <dt>
            OfficerWarning
        </dt>

        <dd>
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
        </dd>

        <dt>
            Account
        </dt>

        <dd>
            369
        </dd>

        <dt>
            Lot
        </dt>

        <dd>
            01
        </dd>

        <dt>
            Block
        </dt>

        <dd>
            12
        </dd>

        <dt>
            DeggyLocation
        </dt>

        <dd>
            Electric Meter Box
        </dd>

        <dt>
            AlarmCode
        </dt>

        <dd>
            
        </dd>

        <dt>
            AlarmPassword
        </dt>

        <dd>
            
        </dd>

        <dt>
            WestGateHasKey
        </dt>

        <dd>
            <input class="check-box" disabled="disabled" type="checkbox" />
        </dd>

        <dt>
            Directions
        </dt>

        <dd>
            
        </dd>

        <dt>
            HomePhone
        </dt>

        <dd>
            
        </dd>
        
        <dt>
            BusinessPhone
        </dt>

        <dd>
            
        </dd>
        <dt>
            CareGiver
        </dt>

        <dd>
            <div class="col-md-2 col-sm-2">
                
            </div>
        </dd>
        <dt>
            CareGiverPhone
        </dt>

        <dd>
            
        </dd>

        <dt>
            ContactName
        </dt>

        <dd>
            
        </dd>

        <dt>
            ContactPhone
        </dt>

        <dd>
            
        </dd>

        <dt>
            Notes
        </dt>

        <dd id="notes">
            ***Owner has 2 Boston Terriers &quot;Molly&quot; &amp; &quot;Beau&quot;***          Call out of town number 631-298-7305Larry Jenkin&#39;s Lawn service 954-520-8196Dependable Lawn Service 954-263-8178                                      MR.&amp; MRS. FYFENEW YORK ADDRESS : P.O. BOX 281                                      METTITUCK, NY 11952
        </dd>

        <dt>
            EmergencyContactName
        </dt>

        <dd id="emcName">
            John Minch   &quot;DO ALL &quot;
        </dd>

        <dt>
            EmergencyContactPhone
        </dt>

        <dd id="emcPhone">
            561 843-0735
        </dd>

        <dt>
            EmergencyContactRelation
        </dt>

        <dd id="emcRelation">
            
        </dd>

    </dl>
    <input id="CurrentTab" name="CurrentTab" type="hidden" value="Resident" />
</div>
</form>
<div class="col-sm-offset-1" style="margin-top: 15px;">
    <button onclick="TabLoad('Edit', 'Residents', 'divResident', 1, 'GET', '');return false;">Edit</button>
    
</div>

Open in new window

Thank you!!  I saw the error in the returned view.  I changed them to partial views and the error cleared.  I appreciate the guidance.
You are welcome. I am assuming that in changing them to partial views it left out the header and script content - which means it probably was the <script> inclusion that was triggering the error.