Strange Ajax / Jquery behaviour in Internet Explorer 9 - asp.net

I have an ajax call inside a javascript function that update a div with the result. This function is called every 2 seconds.
function RefreshNbrMsg() {
$.ajax({
url: 'helper/NewMessages.aspx',
success: function (data) {
$('#nbr_msg').empty().append(data);
}
});
}
$(document).ready(function () {
setInterval(RefreshNbrMsg, 2000);
});
My problem is that it's working perfectly with Chrome but not IE. In IE the div won't update.
I don't have any script error or messages. I can see in the network analyzer that the ajax call is done every 2 seconds.
/helper/NewMessages.aspx GET 304 text/html 108 B < 1 ms JS Library XMLHttpRequest
Any ideas ?


Try this :
function RefreshNbrMsg() {
$.ajax({
cache: false,
url: 'helper/NewMessages.aspx',
success: function (data)
{
$('#nbr_msg').empty().append(data);
}
});
}
$(document).ready(function () {
setInterval(RefreshNbrMsg, 2000);
});

Related

How can refresh the page every minute with ajax?

I want to update a div with the minute of the match on my page every 15 seconds. How can i do that ? I just want to refresh the area where that div is.
<script>
setInterval(function () {
$.ajax({
#*url: '#Url.Action("_List", "Home",new { match_id=Model.match.match_id})',*#
cache: false,
success: function (result) {
$("#test").html(result);
console.log(result)
//alert(result);
}
});
}, 20000);
</script>

Use partial views for this. They will allow you to update only a part of the DOM without having to perform a full page refresh or a postback and they are strongly typed.
For example I created below partial view
function loadPartialView() {
$.ajax({
url: "#Url.Action("ActionName", "ControllerName")",
type: 'GET', // <-- make a async request by GET
dataType: 'html', // <-- to expect an html response
success: function(result) {
$('#YourDiv').html(result);
}
});
}
$(function() {
loadPartialView(); // first time
// re-call the function each 5 seconds
window.setInterval("loadPartialView()", 5000);
});
After every 5 seconds it goes to controller and executes the action
public class ControllerName: Controller
{
public ActionResult ActionName()
{
.
. // code for update object
.
return PartialView("PartialViewName", updatedObject);
}
}
For more information
https://cmatskas.com/update-an-mvc-partial-view-with-ajax/

setTimeout calls function repeatedly and causes page to hang

I have three javascript functions defined that creates ajax calls to my java controller. I set timeouts for two of the functions to update the ping status every 3 seconds and to update performance status every 5 min. The ping update every 3 seconds seems to be working correctly but when the updatePerformance method gets called my controller method gets executed 5 or so times in a row until the app hangs. Any ideas why one is working and the other setTimeout isn't? Here's my javascript functions:
<script type="text/javascript">
function updateReachability() {
$.ajax({
url: 'updatePing.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
}
setTimeout(updateReachability, 3000);
function updatePerformance() {
$.ajax({
url: 'updatePerformance.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
}
setTimeout(updatePerformance, 300000);
function updateSiteList() {
$.ajax({
url: 'connector.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
}

you may want to wrap you function in the setTimeout itself, so that the settimeout is specific to that function and nothing else.
<script type="text/javascript">
function updateReachability() {
setTimeout(function() {
$.ajax({
url: 'updatePing.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
},3000);
May be this will work for you.

Don't know why this works but created a separate function that sets the two timeout values then called it on body onload:
<script type="text/javascript">
function updateSiteList() {
$.ajax({
url: 'connector.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
}
function updateReachability() {
$.ajax({
url: 'updatePing.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
}
function setTimeouts() {
setInterval(updateReachability, 3000);
setInterval(updatePerformance, 300000);
}
function updatePerformance() {
$.ajax({
url: 'updatePerformance.htm',
type: 'GET',
success: function(data) {
$('#site').html(data);
}
});
}

Asp.Net MVC/jQuery tools overlay: How to close it in an ajax return

I've an Ajax form in the popup I display with your overlay. I submit the popup through ajax, and I need to close the overlay IF the ajax call has been successfull.
Here is currently my JS code:
<script type="text/javascript">
$(function () {
// Handle form submit ...
$("#AddVariableForm").live("submit", function (event) {
event.preventDefault();
var form = $(this);
$.validator.unobtrusive.parse('#AddVariableForm');
$.ajax({
url: form.attr('action'),
type: "POST",
data: form.serialize(),
success: function (data) {
if(data.Success){
$("#adm-form-addVariable").data("overlay").close();
}
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
},
complete: function () {
alert('complete');
}
});
return false;
});
});
</script>
The problem is that it currently don't close anything. I double checked with chrome debug mode, it comes in the method but don't do anything. I also checked, no JS errors.
I tried to do the
$("#adm-form-addVariable").overlay({ api: true }).close()
but same problem.
Here is how I declare it:
$(".adm-btn-overlay-trigger[rel]").overlay(
{
mask: {
color: '#111',
loadSpeed: 300,
opacity: 0.9
},
closeOnClick: true
}
);
If I do this:
$("#adm-form-addVariable").overlay({ api: true }).isOpened()
I get an undefined.
What am I doing wrong?

I'm pretty sure you need to call close on the trigger element, not the overlay:
http://jsfiddle.net/Fwzwc/2/
In your case $(".adm-btn-overlay-trigger[rel]").overlay().close();
Disclaimer: I've never used jquery tools before, but as you see in my js fiddle, it seems to work.
Update: to make this work with multiple triggers you seem to need to find the exact trigger that opened the overlay. See http://jsfiddle.net/Fwzwc/3/ for an example for this.
It boils down to finding the id of the overlay div and then call .overlay().close() on the trigger where rel=overlayId:
$("img[rel='#" + overlayId + "']").overlay().close();

Fire a controller action from a jQuery Autocomplete selection

I have a jQuery autoselect box displaying the correct data. Now I would like to fire an ASP.NET MVC 3 controller when an item is selected. The controller should then redirect to a View. Here's my jQuery autocomplete code (I'm sure something is missing in the 2nd Ajax call, but I haven't found it yet):
<script type="text/javascript">
$(function () {
$("#Client").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Entity/GetClientAutoComplete', type: 'POST', dataType: 'json',
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
})
},
minLength: 1,
select: function (event, ui) {
$.ajax({
url: 'Entity/GetApplicationsByName/' + ui.item.value, type: 'POST'
})
}
});
});
</script>
And here's the controller I'm trying to call:
public ActionResult GetApplicationsByName(string id)
{
ViewBag.Client = id;
var apps = _service.GetDashboardByName(id);
return View("Dashboard", apps.ToList());
}
When I watch the Ajax call fire in Firebug, I see the correct URL configuration, but nothing else happens. It's acting as though it wants to load something rather than send something. I'm confused. Thank you for any guidance.

Well you sent an id by POST to the GetApplicationsByName controller and the controller is sending back the view.
If you want redirection, you can use the following:
select: function (event, ui) {
window.location.href = 'Entity/GetApplicationsByName/' + ui.item.value;
}

jsTree causes that links on whole page are broken

Greetings,
I have the following problem. In my asp.net mvc page (which is a partial view) I create an instance of jsTree as follows:
<script type="text/javascript">
$(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
$("#SelectedIndustryROWGUID").val($(NODE).attr("id"));
$("#resultMessage").append($(NODE).attr("rel"));
}
},
data: {
type: "json",
async: true,
opts: {
method: "GET",
url: "/CreateMessage/GetIndustries/"
}
}
});
});
this works fine but then, when I click on any link on the page, it does not work. The links are executed when I choose "open in new tab" option from context menu. When I remove the above part, everything is working fine
Can someone please help me with this?
EDIT
I've changed the code above to be as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
$("#SelectedIndustryROWGUID").val($(NODE).attr("id"));
$("#resultMessage").append($(NODE).attr("rel"));
}
},
data: {
type: "json",
async: true,
opts: {
method: "POST",
url: "/CreateMessage/GetIndustries/"
}
}
});
});
(I've added $(document).ready(function() { ...
but it also didn't helped
EDIT2
I also asked this question on jsTree discussion group and I received an answer. Upgrading jquery to version 1.4.2 solved the problem!

<script type="text/javascript">
$(function() { <--- here change to --> $(document).ready(function(){
$("#industries").tree({
when you do $(something), jquery expects the "something" to be a selector, in your code your directly giving it a function instead of anything jquery considers to be a selector.

Resources