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.
Related
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 wonder if it is possible to run a PHP file in the background on my website?
What I want to do is to show a form with inputs and dropdowns. The content of the dropdown is taken from a table in a MySQL database. Next to the dropdown is an Edit button which opens a Bootstrap Modal and shows all the content in the table for the dropdown. Here I can make changes to the table. Then I want to go back to the form and apply the changes I jsut made (i.e. select a new post from the dropdown).
I know how to do all of this - BUT - when I save the changes to the dropdown table, a php file is called to perform the SQL syntax and then redirects the user back to the form. Every input you have made in the form is lost since the page is reloaded.
Is there a way to make it work like I want?
I understand that you need to implement Ajax to do the background operation. Ajax request runs in background, its entry and exit is handled through Javascript functions . See here : http://www.w3schools.com/ajax/
As some already noted, Ajax is the way to go in this case.
An idea would be to use ajax to send the modal data to the server (saving the new options for the dropdown) when the user clicks in the "save" button (or anything equivalent). When this ajax call finish successfully, you could reload the dropdown with another ajax call (or even better, save the modal data in a temporary structure in JavaScript and use it to update the dropdown once the first ajax call is successful, hence avoiding some work on the server)
Note that the page won't reload in the whole process.
The simplest and the easiest way to do this is to open the modal in a new window.
example
Modal
And you can attached this to your select option value with a on-click event.
I'm implementing a twitter like news system on my website. It loads all news items on page load with an ajax call fine. But how do I show a new item without having a trigger like a page load or a click on something? So when a new item is added to the database, It should automatically be added to an open page, like an auto-update or something.
you can look into
ajax polling
reverse ajax
comet
server polling
here is a useful link http://www.zeitoun.net/articles/comet_and_php/start
edit
you can achieve the effect by using jquery alone below are some useful links
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
Timeout jQuery effects
If you don't have an event, you have to generate one. A common practise to archive this is to have a timer running on the client/browser which fires an event in certain intervals to generate ajax requests.
Here are a few jquery plugins which might help you:
http://plugins.jquery.com/project/timers
Some SO posts which are in a similar direction:
Use AJAX to watch SQL database for changes
jQuery - If a database is updated, update the page
Sending notification to the user on database change
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.
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.