I have a page which reloads a DIV with AJAX every 5 seconds. I also have an AJAX sorting script (you can see it here). The sorting script works great when I visit the page for first time, but when the page is refreshed it doesn't work.
Am I doing something wrong? I have the sorting script in the HEAD tag, and the refresh on the bottom because I want to use some PHP variables there.
If your refresh code repopulates the <div>, it's probably destroying the event handler associations that your table sorter established. Perhaps you need to re-run the table sorter initialization after each refresh.
Related
I am working on a app with a drag and drop function that on drop, posts a set of variables to a handler to change the status of the item being dropped. I also have an AJAX script running to auto refresh the div with the updated database ID's.
The issue I have is that whilst the AJAX is reloading the div, I loose the ability to interact with the object. Is there a way to pause the AJAX whilst MouseDown is active or another way to handle this. I need the refresh of the Div to be every 100ms or so.
Thanks in advance.
It's another late night and another seemingly simple issue that's causing a headache!
So, here's the situation. I have a simple HTML form that's in a Bootstrap modal. When this form is submitted, there's an AJAX POST to a receiving page, SESSIONS are set and the request is then forwarded to a simple DB query. This all works.
What I want to do is show the sessions on the original page without a page refresh.
I thought this would be easy so I tried using this on the original page;
$('#filteroptions').on('hidden.bs.modal', function () {
$("#breadcrumbs").load('includes/files/private/breadcrumb.php');
});
breadcrumb.php holds the output format and the file is populated immediately after the POST from the modal (called filteroptions)
I also tried to attach it to the POST success with a simple success process to load the file but each time, the breadcrumb.php fils to be loaded.
Curiously, if I ctrl+F5 the page after the first POST, there is no value shown BUT if I search again the DIV is updated each time I search after that.
Why would the request not fire the first time that the search is performed? Why do I need to refresh the page for everything to start working?
There is no caching to it's not a case of a dependantr file being cached after the refresh.
Thanks
The solution was to populate the div with nothing and then update it.
Previously, the div was only being drawn when it was populated thanks to the code in the breadcrumb file looking for a specific POST or SESSION variable.
It now allows for a blank value.
I want to create a page where people can insert some text, hit enter, and the text be stored in a MySQL database. I can do this, but I want to be able to load a page, enter a password, and see a list of all the info in said database, then whenever something is added to the database, it's added to the list on the page, without me needing to refresh the page or setup some javascript code to refresh the page every five seconds.
I believe Satya has it correct in suggesting that you use Ajax in order to refresh the data without refreshing the page. You can have it request updated information from a php script which queries your database for the data you wish to display, and then sets the elements on your page accordingly.
this is probably the best way for you to implement ajax calls using javascript
http://api.jquery.com/jQuery.ajax/
Or you an simly do it with the help of setInterval() function. You can call an html code in a div using
$('#id').html("<htmlcode></htmlcode>");
Example : http://jsfiddle.net/ipsjolly/995PJ/6/
I'm trying to find a solution to this problem: I have a page on a php application that can't be opened more than once to avoid session overwrite.
I'm spending a lot of time without finding any solution!
The last one I tried is to use the jquery "load" and "unload" events on the window. It works fine if I open the same page in a new window or a new tab but it also blocks the page if I refresh it!
I really don't know how to go on! I thought this was a simple example of semaphore usage...but I can't code it in the right way.
Any suggestions? (both php and js solutions are welcome)
You could try with a cookie:
The first page load, the cookie is set(by the server for the session)
The next time the same page is loaded, it reads the cookie
If the cookie is there, do not overwrite session variables
I don't think the browser will be able to make a difference between a refresh and a load in another tab/window.
Can't be opened more than once by the same user, I presume.
How did you use jquery's load and unload events? Brainstorming here, how about using load to set in the user's session a semaphore, which is removed by unload. Ofcourse I'm not sure if that event fires even when the browser crashes or similar unforseen technical issue. In that case you might have a stuck one that you'd need a specific timeout for, or to wait for the session to time out.
To fix that perhaps after the page loads have a timer that executes every 10 seconds, basically updating the semaphore sort of like "The page is still open", along with current timestamp. If on load the semaphore exists but the timestamp is older than 10 seconds, then the user is refreshing.
The problem is that you do not have access to the end user's pages that are currently open in a browser. So the only solution is for you to keep tracking the pages the user opened/closed/switched to another page/etc. Even that isn't perfect as the user can open another browser process. So there is no perfect solution to this.
sorry guys...you're right!
A bit of code will help all of us :)
suppose my script is script.php
in the html of script.php i put
$(window).bind('load',
function(){
$.post(PATHTOLOCK.php);
});
$(window).bind('unload',
function(){
$.post(PATHTOUNLOCK.php);
});
In the file PATHTOLOCK.php i do this:
$_SESSION['flag']=true;
And in the file PATHTOUNLOCK.php i do this:
$_SESSION['flag']=false;
At the beginning of script.php i put
if($_SESSION['flag']==true){
echo "error";exit;
}
If I open script.php in two windows/tabs everything works fine. If I refresh the page it doesn't work because I suppose the events sequence is the following:
click on refresh
unload event is not invoked because the page is not completely left
the script.php is reloading
the check at the beginning of script.php fails because flag=true
script.php goes in error
the unload event is invoked because the page is left and flag=false
click on refresh
now it works!
and so on...every two refresh it works!
I'm writing an app that uses ajax to retrieve data from a mysql db using php. Because of the nature of the app, the user clicks an href link that has an "onclick" event used to call the javascript/ajax. I'm retrieving the data from mysql, then calling a separate php function which creates a small html table with the necessary data in it. The new table gets passed back to the responseText and is displayed inside a div tag. The tables only have around 10-20 rows of data in them. This functionality is working fine and displays the data in html form exactly as it needs to be on the page.
The problem is this. the HREF "onclick" event needs to run multiple scripts one right after the other. The first script updates the "existing" data and inside the "update_existing" function is a call to refresh a section of the page with the updated HTML from the responseText. Then when that is done a "display_html" function is called which also updates a different section of the page with it's newly created HTML table. The event looks like this:
Update
This string gets built dynamically using php with parameters supplied, but for this example I simply took the parameters out so it didn't get confusing.
The "update_existion() function actually calls the display_html() function which updates a section of the page as needed. I need to update a different section of the page on the same click of the mouse right after the update, which is why I'm calling the display_html() again, right after it. The problem is only the last call is being updated on my screen. In other words, the 2nd function call "display_html()" executes and displays the refreshed data just fine, but the previous call to update_existing() runs and updates the database properly, but doesn't display on the screen unless I press the browsers "refresh" button, which of course displays the new data exactly how I want it to, but I don't want the users to have to press the "refresh" button. I tried adding multiple "display_html() calls one right after the other, separating all of them with the semicolon and learned that only the very last function call actually refreshed the div element on the html page with the table information, although all the previous display_html() calls worked, they couldn't be seen on the page without a refresh of the browser.
Is this a problem with javascript, or the ajax call, or is this a limitation in the DOM that only allows one element to be updated at a time. The ajax call is asynchroneous, but I've tried both, only async works period. This is the same in both Firefox and Internet Explorer
Any ideas what's going on and how to get around it so I can run these multiple scripts?
I'd recomment you to use jQuery javascript library. It has some funcions, like live() that can "wait" for that table to appear on the browser and apply the remaining functions on it.
Also, it's a great set of functions that will certainly help you out reducing the ammount of code you write, making it more human-readable.