I have a very peculiar issue with Firefox and I've been unable to find out why. Basically I have a system where AJAX is used to submit data to PHP API, but when file uploads are used, then it will not use XMLHttpRequest() and instead falls back to submitting the form.
This is what happens:
Request is made for file upload
Javascript finds the form that is used for upload and assigns it to variable apiSubmitForm
Hidden iFrame is created with a random ID using DOM appendChild() method inside the and is assigned to variable hiddenWindow
apiSubmitForm method is changed to POST, action is changed to API URL, enctype is changed to 'multipart/form-data' and target is changed to the ID of the hiddenWindow
hiddenWindow will have an onload() method set, which includes resetting the apiSubmitForm values to what they were in the beginning and also removing the created hiddenWindow in the end of onload().
Now, everything works. There are no JavaScript errors. Data gets submitted and I can actually submit data many times in a row without problems.
But the green and spinning loading wheel on Firefox stays on as it does so. I'm assuming that it is called to close itself after onload event as well, except since hiddenWindow gets deleted in the end of it, it does not work?
This does not happen if I comment out this line from iFrame's onload event:
apiSubmitForm.removeChild(hiddenWindow);
Every other browser (Chrome, Opera, Safari and Internet Explorer) that I tested will not have that loading wheel running. And every browser (Firefox included) works correctly, form gets properly submitted and every other part of the code works as expected.
Is there anything I can do to close the window better? I cannot call that method right after apiSubmitForm.submit() either because that form submit is 'asynchronous' and it would break the loading.
Thanks!
Well, this is the closest I have gotten, it is a complete hack though:
setTimeout(function(){apiSubmitForm.removeChild(hiddenWindow);},1);
(Place this in the iFrame onload event)
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 have a large section of code that I am using $('.data').prop('checked', false).button("refresh"); in to uncheck and refresh the jQuery UI styling on a group of checkboxes with data as their class. It works fine up until my code runs $("#div").load('output.php') which refreshes the output.php file. After this point, .prop('checked', false) works fine, but .button("refresh") stops working.
So what happens is the checkboxes keep unchecking properly, but the jQuery UI style doesn't refresh so they appear to stay checked even though they are not. Output.php is included on the page to start with, and I tried replacing the load with $("#div").load('text.txt') but it still stops working even if it is just loading the text file.
So it seems that .load() is breaking .button("refresh"). Any ideas what could be causing that or any potential solutions?
Is .data within #div? If so, the content of output.php will replace it, and the replaced elements will not carry the jQuery UI event data, as it was never bound to them.
The content that I was loading was html and had a <head> section. This was what was breaking .button("refresh"). I took what was in the head and included it in my main page's head and that solved the issue.
I haven't used much javascript before, and I'm not much of a php programmer either, come to think of it, but I'm attempting to learn by building a little website.
I've got a form which has a file upload input which I'm attempting to make all nice sexy with this great script but there doesn't appear to be a tutorial and the code isn't commented.
(I think) I know how to make it work ok but I'm interested in how it works. Does anyone fancy taking a quick look at it and telling me what all the code in the js and php file is doing?
I'd really appreciate it :)
I wouldn't recommend using this library, first of all, since there are much better ones out there, but your question was how this one worked, not whether it was a good one or not.
Here goes:
ajaxUpload is called by one of the buttons in the upload form.
ajaxUpload first ensures that all the function arguments are correct, creating an alert box (!) if there's a problem with one of them. (It would be a better idea to throw an error using throw "error message" instead.)
ajaxUpload then creates an iframe using document.createElement, and gives it zero width and height so it'll be invisible, before adding it to the document. It gives the iframe the name ajax-temp.
ajaxUpload adds the doUpload function as a onload listener on the iframe. It uses the addEvent function as a cross-browser way to do this.
Next, ajaxUpload sets the calling form's target attribute to point to the iframe, using the name that it gave the iframe earlier. This causes the form to submit into the iframe, instead of replacing the current page. The function also sets some other attributes on the form, even though it would probably be a better idea to add those attributes in the HTML source and not from Javascript.
Finally, ajaxUpload submits the form using form.submit().
The browser submits the form to the server, causing ajaxupload.php to run.
In ajaxupload.php, the script first checks that the browser did actually send a file (in case a curious user visited the url manually instead of submitting the form), then calls the uploadImage function with a bunch of parameters that it got from the $_REQUEST object.
uploadImage does a bunch of checks on the arguments it receives from the client, making sure that the file isn't too big, has the right extension, etc. If all the checks are passed, it saves the image and returns the filename where the image was saved. Otherwise it returns the list of errors.
If the result returned by uploadImage isn't an array of errors, the script returns a success message and an <img> tag with it's src set to the url of the image. Otherwise, it returns a failure message.
On the client, the return of the success or error message causes the load event on the iframe to fire. The doUpload function, which is registered as a listener, is called.
doUpload removes itself as a listener from the iframe, and runs some javascript code in the context of the iframe by setting the iframe's src attribute. This code copies the iframe's contents to the parent page.
Finally, doUpload removes the iframe from the document, waiting a short time beforehand in some browsers.
Whew, that sure took a while to write.
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.
I have a page generated by php which includes two drop-down lists (SELECTs) which contain a lot of items (about 2,000 each). The page is fine, but when it loads in Firefox, there's a delay during the load, and then it seems to refresh the entire page. If a user tries to click on anything before the "reload" occurs, it has no effect.
In Explorer, each drop-down just takes a while (a second or two) to appear, which is fine.
Anyone know what this is? And aside from using AJAX to dynamically fill the drop-down list, is there an easy way to avoid it?
EDIT: Additional information. I have got my PHP script to output to a log file whenever it is called, so I can now see that what seems to be happening is this:
A call is made to the PHP script, and the page starts to load. After a few seconds, another identical call is made to the PHP script, at which point the page starts to load again. This time it completes loading. So I guess it seems like the browser refreshes the page automatically for some reason before the page finishes loading.
Wild shot in the dark: Do you have any images or hidden image submit buttons with BLANK src? I needed to 'fake' a 'default enter' effect for a textbox and used a hidden image button before all the fields. Since it was hidden, I left the src attribute blank. Firefox loaded the page twice! Pointing the src attribute at a single-pixel but real image fixed it.
First, you should use a network sniffer like wireshark to confirm that the page really loads twice.
Then, confirm that it happens only with firefox;
Then, you are on the good way ! I experienced a variant of what n8wrl is proposing; it was in some css declarations with some empty background-image property --> Check your CSS for empty file declarations