dan henderson
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:
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);
I really need some guidance here. I am using jquery 3.1.1.
$(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);
});
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>
I really need some guidance here. I am using jquery 3.1.1.
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.
ASKER
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.
ASKER
ok, I changed the call to load the divs like this:
$.when.apply($, requests).done(function (resData, ootData, petData) {
$('#divResident').html(res Data),
$('#divPets').html(petData ),
$('#detailsOOT').html(ootD ata)
})
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.
$.when.apply($, requests).done(function (resData, ootData, petData) {
$('#divResident').html(res
$('#divPets').html(petData
$('#detailsOOT').html(ootD
})
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
here is the petData view that is returned:
here is the resData 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>© 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>
"
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 "Molly" & "Beau"*** Call out of town number 631-298-7305Larry Jenkin's Lawn service 954-520-8196Dependable Lawn Service 954-263-8178 MR.& MRS. FYFENEW YORK ADDRESS : P.O. BOX 281 METTITUCK, NY 11952
</dd>
<dt>
EmergencyContactName
</dt>
<dd id="emcName">
John Minch "DO ALL "
</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>
ASKER
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.
Onto your problem - what does the returned data from those calls look like?