my website's client works normally when I open it and click on my page's button. It loads dynamically inside a div. In this page I include the javascript file that handles the server messages related to it. So the first time I click the button, the page loads, and server sends data for appending in a div. Everything good so far, but when I click again in the button for loading the page, as soon as the server sends the message it will append twice on the given div, and if I click a third time, the client will append 3 times the same data to the div and so on. It's like the connection is opened multiple times, but I don't know how to handle this.
I load the page with a simple ajax call:
$.ajax({
type: "GET",
url: "items.php",
success: function(msg){
$("#container").html(msg);
}
});
And the include on the items.php:
<script src="js/items.js"></script>
Already tried including the items.js in an outer div, but this way It won't work.
Related
I'm having a problem with our ASP.NET MVC4 web application:
Our web application is used for realtime data visualization of values and parameters of different industrial devices. When a typical monitoring page gets opened in a client's browser, the page itself is static at first. When the document has finished loading, the current values for the datapoints on this page get loaded via an ajax call from the database. The call returns JSON data that feeds the viewmodel, which is then used by Knockout.js to update the UI elements with the data.
After this initial loading of current data, any upcoming changes to any of the currently displayed datapoints are transmitted from the server to the page via the WebSocket protocol and are then put into the viewmodel, replacing the old values. The new data also gets immediately written to the database, so that an ajax call would always deliver the up-to-date values.
So far, everything works really stable and fast in all HTML5-capable browsers - except for Internet Explorer 10. I'd like to add: OF COURSE ;-)
The problem in detail:
When I open a specific page with some datapoints, it loads the page. The current values get correctly fetched from the DB with ajax. Then, new values arrive and they are shown correctly with the mechanisms described above. The values in the UI get updated.
Now I change to another page, wait for it to get loaded completely, and then I go back to the first page (it doesn't matter if I do this with the "Go Back" button or by clicking a link or entering the URL manually), the page does NOT display the current values, but the values that had been loaded initially in step one via ajax.
The confusing thing is: I verified that the database DOES contain the up-to-date values and not the values shown on the page, therefore they should have get loaded with the initial ajax call when returning to the first page. The annoying thing: they DO get loaded in Firefox, Chrome, and even IE9 etc - but not in IE10.
Is there some new caching mechanism in IE10? How can I resolve this issue? Besides that: as far as I can see, it looks like there's some kind of Ajax / JSON caching going on here, are there ways to definitely prohibit HTML and JSON caching completely / globally in my ASP.NET MVC4 project or IIS?
Thanks for your help!
The jQuery AJAX method allows you to turn caching off:
$.ajax({
url: "test.html",
data: 'foo',
success: function(){
alert('bar');
},
cache: false
});
If this does not solve you can use the querystring trick:
$.ajax({
url: "test.html"+'?ts=' + $.now(),
...
cache: false
});
Anyway the cache: false will do the trick. If not maybe you are using an old jquery version and it is better to upgrade.
I have a mobile version of a website built in jQuery mobile and living on a dedicated "m.myurl" subdomain. The full desktop version of the site is in Wordpress. My goal is to have updates entered via Wordpress to the desktop site to show up dynamically on the mobile site as well. I am generating the page content from the individual pages of the desktop site via JSON feeds, and have confirmed that the JSON feeds are good (i.e.: if I enter their URL into a browser, I get a good JSON object). However, the AJAX call on the jQuery mobile site refuses to work. I have debugged to the point that I am not receiving any errors in my console, but when I attempt to log the response from the AJAX call to troubleshoot, it consistently shows in the log as undefined, so I am not receiving known good JSON objects.
The functions I'm using to make the AJAX call are as follows:
function processResponse(response){
var update = $(response).find('content');
$('.content').append($(update).html());
};//ends processResponse
function processJSON(url){
$.ajax({
url: url,
data: null,
success: processResponse,
dataType: 'jsonp',
});//ends ajax
};//ends processJSON
I've set the three JSON URL's equal to variables, but have tried calling the function with the URL passed in instead of the variable, to no effect. The 'processJSON" function is called within the content div of each page section of the jQuery mobile index.html file within a $(document).ready.I'm using 'jsonp' as the dataType, as I assume that calling from a subdomain to a main-level domain would be considered a cross-domain call. That said, I'm trying to get this to work locally, and haven't placed it on a test server yet.
Any assistance is appreciated. Thanks!
Help!
I am using jquery mobile to submit a JSON string to my rails app via an ajax post. The string contains some data that I send via the following ajax call in a JS file:
$.ajax({
url: "http://" + MyURL + ".json",
type: "POST",
data: JSON.stringify(this.form),
dataType: "json",
contentType: "application/json",
success: onSaveSuccess,
error: onFailure,
complete: onComplete
});
This code works, but as soon as I press the button to submit the form, it changes the page to my home page (NOT EVEN THE PREVIOUS PAGE). I want to set this post up so that it doesn't change pages until I tell it to (in either the success or complete functions). I don't want the user to be thrown around different pages after submitting the post. Instead, I want to show my upload spinner until it is done, and then I will redirect them to a specific page.
Does anyone know how to do this?
My login screen uses a (nearly) identical ajax script, and it does exactly what I want. I am assuming that is because there is no page to go "back" to. I don't understand this behavior, so if anyone does, your advice would be appreciated.
What I'd like to do is have a button that you can click to refresh the comments section without reloading the page.
This seems like it should be simple to do, but I just can't get my head around Ajax.
(no button just yet, just an interval)
setInterval(function(){
$(".commentswrapper").load("html");
}, 10000);
Failed to load resource: the server responded with a status of 404 (Not Found)
localhost:8888/post-title/html
(http:// omitted from link because SO won't let me wrap it in code tags or post it otherwise)
Shouldn't that just refresh the html of that div?
The jquery load method requests a page of HTML and puts it in your div. the parameter you give is a URL from your server. In your example, it is requesting a URL of "HTML", which doesn't exist in Wordpress.
To get this working, you would have to write a new server script, e.g. Getcomments.php which returns the comments for the current page.
This isn't trivial unless you've done some server side programming in php and are familiar with the Wordpress codex,
Here is the case.
I have a website built in asp.net mvc3 with custom CMS.
Is there any way by clicking a button from cms to reload the page of the website visitors?
For example, here in stackoverflow, if an admin from the backend pressed a button my page would reload automatically (or even a lightbox would appear, or redirect me to a different page).
Can we do that?
With HTML5 you can use web workers to do this for you: http://html5demos.com/worker
Without HTML5, you can set up some basic polling code in your javascript. It would call a method on the server that would tell it whether or not to reload. You can run this every 30 seconds let's say:
$(document).ready(function(){
var doRefresh = function(){
$.get('checkForRefresh', function (data) { ... handle response ... });
};
setInterval(doRefresh, 30000);
});
And then just have your checkForRefresh server side code read a value set by that CMS button.
Forcing a reload on a button click boils down to something like this (using jQuery and javascript):
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
The first answer on the following question shows two ways to refresh the page, one forcing a reload like above, and the second, much like #Milimetric describes in his answer:
Refresh (reload) a page once using jQuery?.