I'm having trouble using AJAX page updates along with other AJAX scripts.
During a normal page load, the AJAX scripts (picture scrolling and picture thumbnails) work fine. But when I update a page with AJAX, these scripts (usually loaded in the header of the initial page load) stop working.
I am wondering if this is specific to these scripts and I need to look into them deeper to resolve/re-write or if I am missing something more generic in combining AJAX page updates with AJAX scripts the returned code relies on.
Embedded javascript runs fine.
Thanks for your ideas!
PS: The scripts I am using are from www.dynamicdrive.com are:
1) stepcarousel (http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm) and
23) thumbnailviewer (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm) from the
Try doing this on Firefox, using the Firebug debugger, so you can single-step through and determine what is going on with the javascript. If you are using IE8 then you can hit F12 and bring up the debugger for that environment also.
Once you have some idea what is going on then you can explain what you are seeing, what browsers you have tried and you will get more help.
Related
I just started using Underscores and I love it, but I noticed that when I use anything that requires ajax (like Contact Form 7), page will reload instead of handling it on the spot.
I've included jQuery with functions (even tried with plugin to do so) and while jQuery scripts works, I can never get page to NOT refresh.
Both wp_head() and and wp_footer() are present so it's not that.
What am I missing here?
Please check console maybe you have some jQuery error find and fix it or please attach a screenshot of your console.
Thank you
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
My site is http://armandwho.com/site
I'm using the Adv. Ajax Page Loader Plugin in order to keep my background vid & music uninterrupted while browsing.
I'm having trouble with the "LOOK" page. When navigating to it from the homepage (1st link), the gallery doesn't load at all. However, when you refresh or go directly to the page URL it works.
Within the plugin, there is an area for jQuery reload codes, which I think will load the needed scripts that don't get loaded when using the nav.
Can anyone make sense of what script I might need to "reload" to get my gallery working with this Ajax plugin?
Help is supremely appreciated!
Joe
I loved the music, so I decided to look into the problem a bit.
I stepped through the code for the plugin as it tried to load the page and came across this line:
//Nothing like good old pure JavaScript...
document.getElementById(AAPL_content).innerHTML = output;
..which is a problem because the javascript in the script tags isn't going to be run. You could change it to:
//Nothing like good old pure JavaScript...
jQuery(document.getElementById(AAPL_content)).html(output);
..and jQuery will handle the dirty work.
I've search high and low for an answer to this but unfortunately I'm stuck. The problem is only occuring in Firefox (tested IE, Chrome and Safari also - works fine, no errors of any sort). I'll detail the sequence of events to save posting all my code.
ASP.NET MVC 3 application, basic form loads into a jQuery UI dialog
Custom jQuery to hijax the form submit (serialize the form and then $.post to the server - no compiler errors when debugging and post shows up in Firebug without errors)
Http GET (automatically happens) getting the response object from the server (+ success text and XHR), response is plain HTML in this case (again, shows up in Firebug with no errors)
Custom jQuery to change the HTML of the UI dialog from it's current HTML to the response Html - this is where it fails.
I've used javascript alerts to debug the sequence of events and as soon as the post (and get) is complete, everything just... sort of stops.
As I say, only in firefox! Very odd, just wondering if there's any known bugs with ajax and firefox or anybody has heard of a similar situation?
I must also add, that on other parts of my site, this works perfectly in all browsers! The only difference between this form and the other forms that do successfully complete the function is that the response from this form is the same "page" again but updated rather than a new "page". (I use "page" as I got all this working with Javascript turned off first and for graceful degredation)
HELP! Or laugh, either is fine.
UPDATE
I have tried sending a view with a blank model back as the action result - works in every browser except firefox - firefox retains the values from the previous post! And then I got to thinking - that's a trait of firefox isn't it? And maybe that's why the original "re-direct" html response doesn't work?? I think it's time to give up and let people know they can't use Firefox for that particular function!
Ok so I'm answering my own question.
The only way I found to get round it is to use $.ajax instead of $.post and to use the option async : false
Hope this helps somebody.
Rob
Have you tried adding the attribute [OutputCache(Location = System.Web.UI.OutputCacheLocation.None)] to your Action for your GET? It sounds to me like a caching issue.
The problem is this:
When I change the content on a page via AJAX and then use the browsers back and forward button to go to the same page, then I will be presented with the content of the page before the AJAX was executed.
This seems to be specific to IE (confirmed on version 8), as Firefox will render the last version of the page.
Just to clarify, I don't need (nor want for usability reasons) to replay the AJAX calls when clicking back/forward.
We were thinking about firing the last AJAX call on page load (if that event is even triggered), but we would like not to force everyone to wait through the additional AJAX call when going to the page the second time, also this would cause the first real load of the page to be slower as well.
Maybe someone has a good solution for this?
I think it will be useful : http://www.ibm.com/developerworks/library/os-php-rad2/ ;)