I use Signalr to show real time updates of long processes happening on the server.
The idea is that the user can see how many items have been processed out of a set amount.
An AJAX post request sends the call to the server to start the process through a controller, at the end of this a partial view is returned and the container element is populated with this result.
$("body").on("click", "#process-button", function ()
{
var hub = $.connection.myHub;
$.connection.hub.start().done(function ()
{
connectionId = $.connection.hub.id;
$.ajax({
type: "POST",
url: "StartProcess/MyController"+ "&connectionId=" + connectionId,
cache: false,
success: function (data) {
$(".modal #container").empty();
$(".modal #container").html(data);
}
})
});
hub.client.sendMessage = function (message) {
$(".modal #container").empty();
$(".modal #container").append(message);
}
});
I cant show the controller ActionResult method for legal reasons but im 100% sure the problem is in the above code. I just cant figure out why.
Ive tested this in Chrome, Firefox, IE10,11 and edge all fine (presumably cos they use websockets) but on IE9 which is using ForeverFrames the process is stalling.
Its worth noting that I tested IE9 using the document mode emulator through IE11.
Here is the output from the network trace.
Excuse the blacked out entries, trying not to broadcast the code.
As you can i have highlighted where the request simply stalls and to my knowledge the partial view is not returned because of this.
Anyone encountered this before?
You can try adding
$.connection.hub.start({ transport: ['webSockets', 'serverSentEvents', 'longPolling'] });
To your script to disallow the use of ForeverFrames.
Related
Trying to send form data to a PHP page, all parameters are sending successfully except data:imagesBase64
this imagesBase64 is an array which I am trying to send, a few hours ago everything was fine but now it is not working I really don't know why.
All values are Posting successfully only this value is not posting also I am not able to see error in console because it redirected to URL where I am posting the data
var imagesBase64 = ['abcdfd','dhydsu333ud','djhbsd'];
$(function () {
var frm = $("#saveform");
frm.submit(function (ev) {
$.ajax({
type: frm.attr("method"),
url: frm.attr("action"),
data: {
data: imagesBase64,
PubId: $("#Publications").val(),
sdate: $("#datepicker").val(),
pnumber: $("#pnumber").val()
},
cache: false,
error: function (err, data) {
console.log("There was an error. Try again please!" + data, err);
},
success: function (data) {
alert("New message received");
},
});
ev.preventDefault();
});
});
In PHP page -
print_r($_POST['data']);
it gives an error undefined data, though when I tried with postman everything is working fine.
also I am not able to see error in console because it redirected to URL where I am posting the data
That's the problem.
You are submitting data to the server using a regular form submission and not with Ajax. Since your Ajax code isn't used, the data added in from outside the form isn't included.
This is usually caused by the regular form submission interrupting the Ajax request, but since you have ev.preventDefault(); that shouldn't be the case here.
Possible reasons that might apply are:
var frm = $("#saveform") fails to find the form because the selector is wrong or the form is added after the document is loaded with other JS
You don't have jQuery loaded so the call to $ fails
You have jQuery Slim loaded which doesn't include an ajax method (moving the call to preventDefault so it is before the call to ajax would help catch this).
Your browser's developer tools should have an called something like "Persist Logs" which will prevent it from clearing the console when you navigate to a new page. Turn it on to aid your debugging. Here's what it looks like in Firefox:
I use JEasyUI framework in a page, and I have a form that calls an URL on submit which does some DB work.
Here is the function calling URL (which is defined in another function earlier in the code):
function saveClientItem() {
console.log("Save Client Item, url:" + url);
$('#formClientItem').form('submit', {
url: url,
onSubmit: function() {
return $(this).form('validate');
return false;
},
success: function(result) {
console.log("Success saving client item with url:" + url);
$('#windowClientItem').dialog('close');
$('#tableClientsList').datagrid('reload');
}
});
};
On some computers the page works fine, but on other computers it sporadically calls the URL, but always returns "success". Here is an excerpt from the Chrome console and network log on the computer where it works as it should:
I marked the "clients.php" which is called to do the DB work.
Here is an excerpt from the Chrome console and network log on the computer where it doesn't work as expected:
I have tried clearing the cache on the second computer, refreshing with Ctrl+F5, after that the page works a few times, and then back to not calling the URL. So far I tried on 4 computers with various results, 50-50 works-fails.
I need a hint on what to check with the computers where it doesn't work, or maybe another fail-proof way of submitting the form to a PHP page.
I added "error" event to function,
error: function(result) {
console.log("error saving client item with url:" + url);
}
...and what puzzles me is that "success" is always called. I realise that something is preventing URL to be called (guessing some network issue), but shouldn't "error" event be raised?
After trying:
Changing jEasyUI version from 1.9.7 to 1.4.2
Changing jQuery versin from 1.13.1 to 3.5.1
...with the same problem occurring every time (even after emptying cache and all browser data), I tried putting the function in a loop and called it up to 100 times with some random values to be posted, and the "clients.php" file was called randomly: sometimes after 1 try, sometimes after 17 tries, sometimes it was never called.
I ended up modifying my function to look like this:
function saveClientItem() {
$('#formClientItem').form('submit', {
url: url,
onSubmit: function() {
$.ajax({
type: 'POST',
url: url,
data: $(this).serialize()
})
.done(function(data) {
console.log("Posting success:" + data);
$('#windowClientItem').dialog('close');
$('#tableClientsList').datagrid('reload');
})
.fail(function() {
console.log("Posting failed.");
});
// prevent refreshing the page
return false;
}
});
};
Put in a loop of 100 consequent submits it submits every time (tested about 10 times so far), whereas the old function is still quirky.
I hope this helps someone.
I am rendering some stats on my page, as this takes a bit of time I made this request an ajax call after the page loads
<script type ="text/javascript">
$(document).ready(function () {
$.ajax({
url: '#Url.RouteUrl(Routes.MyAds.AjxCallFoAbc, new {advertId = Model.CreateAdvertHeader.SelectedAdvert.Id})',
type: 'GET',
cache: false,
success: function(response) {
$('.advert-performance').replaceWith(response);
}
});
});
</script>
This works perfectly for me, its causing grief when the user installs a ad-blocker, this content is being blocked, I have debugged the code-base and found the ajax call route is never being hit when the ad-blocker is enabled on the browser
What is the work-around for this, I need show the stats even if the ad-blocker is installed
Resolved it
The reason being, my route which the ajax was pointed to had a advert-stats as part of the url, which caused the blocker to block it,
simply changing the route has fixed it
Following is the exact scenario in my ASP.NET MVC application:
The parent page is having 3 tabs, and following javascript is written to bind click event to each of the tabs:
Each function invokes a controller action (specified in the data-url attribute), and renders the result in the partial view which is expected to be displayed within "ContactMainContainer" div.
jQuery(document).ready(function () {
$('#ContactTabs a').on('click', function () {
var dr = $(this).closest('li');
var url = $(this).attr("data-url");
if (url != undefined && url != '') {
var projectDetailTabModel = $("#ContactID").val();
$('#successDiv').hide();
$('#errorDiv').hide();
$.ajax({
type: "POST",
url: getUrlWithTabId(url),
data: projectDetailTabModel,
success: function (result) {
$('#ContactMainContainer').html(result);
},
error: function (errMessage) {
if (errMessage != null && errMessage.length > 0) {
$("#errorDiv").show();
$("#errorText").html(errMessage);
}
}
});
}
});
});
Contents of one of the partial view is built using javascripts (mostly ajax calls). (I am unable to put the whole javascript here as it is a client project and confidentiality agreement, and the javascript library is too large to place here).
The issue is that when a user navigates to that particular tab (having Ajax call), it takes a long time to execute and render the result. But after that if user clicks on any other tab the browser stucks and hangs for infinitely.
This issue is only in IE11, and works very well in all other browsers (Chrome, firefox, and all).
Could anyone please suggest what could be the reason?
It's a caching issue and IE is well known for caching. You need to make sure in your Ajax call to set the catching as false
Setting the cache property in an AJAX call
$.ajax(url, {
dataType: 'json',
cache : false,
//Other things ...
}
I prefer to use cache buster in the request URL, that is adding the current timestamp as parameter, so that it cant be cached
I had jQuery autocomplete working perfectly with CodeIngiter when inexplicably it just stopped functioning completely. When I visit the controller for the autocomplete I still see the correct array - Javascript just isn't returning the JSON data. What makes this weird is that it was working fine, and then out of the blue just stopped working.
Here's my Javascript:
$( "#clubs-complete" ).autocomplete({
source: function(request, response) {
$.ajax({
url: 'http://www.myurl.com/create/autocomplete',
data: 'term='+$("#clubs-complete").val(),
dataType: "json",
type: "POST",
success: function(data){
alert(data);
response(data);
}
});
},
minLength: 1
});
Here's my controller:
public function autocomplete()
{
// Search term from jQuery
$term = $this->input->post('term');
$this->db->select('name','address2');
$this->db->from('clubs');
$this->db->like('name', $term);
$suggestions = $this->db->get()->result();
if (count($suggestions) > 0) {
$data = array();
foreach ($suggestions as $suggestion) {
array_push($data, $suggestion->name);
}
// Return data
echo json_encode($data);
}
}
Does anyone have any idea what's going on? The alert in the javascript function returns nothing now, and it used to. When I visit the URL directly I still see the full array.
Please help, I'm tearing my hair out.
In IE there are developer tools available if you press F12. There's something similar in Firefox called Firebug. In either of these you can debug in-browser javascript. Set breakpoints inside the source fn and also within the success function, it may give you some insight.
You also may want to get an http debugging proxy, something like Fiddler2 or Charles, which will let you see outgoing HTTP requests and their corresponding responses. Fiddler2 runs on Windows and works with FF and IE, and pretty much every other http client. This will let you see the messages that your AJAX service is returning to the in-browser javascript.
Those things ought to give you insight into the "not working" problem.