I am having troubles with changing pages across my website with jquery mobile. Tough i switched back to the standard window.location, i would like to use changePage() og jquery mobile, but im facing some issues.
When i click the link, the page changes, but the js attached doesn't reload, so im stuck with the content of the preveious page(or not event this). Ive tried different approches: pageReload:true (not working), changing the position of the script tag(works, but creates duplicate content). If anyone has some answers for my question, i'd be grateful. I dont think this issue needs snippets, but here they are:
HTML:
<div class='ui-block-b'>
<a href='nota.php' data-role='button' class='buton_no_bg right' style='color:#b21908; font-family:'Segoe WP Semibold''>190 lei</a>
</div>
Thank you.
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
Solutions:
Put all of your javascript into first HTML/PHP file
Put your javascript into BODY, basically into page div
Turn ajax off
Related
I'm experiencing some issues regarding an AJAX script I'm working on.
The page loads perfectly well, and all needed scripts are loaded the same for basic page functionality inside AJAX script, but after hash change, jQuery behaves awkwardly.
Let's take this example.
The custom jQuery script writes an inline CSS propriety for a specific DIV at page loading:
Now, I load the login page for example:
I get back to the main page and inline style disappears as well as the basic loaded functionalities cease to exist after Ajax call:
*
Any experience on this? Does anyone have a clue why this happens? Or even near it... Seems the script unloads on page/hash change, which I don't believe. Or enters in double loop, therefore doubling the classes for HTML. I don't get it.
Already searched a lot and went trough the coding and is fine becasue it works fine alongside with basic HTML. Would appreciate some thoughts on this matter.
Thanks!
I have tried to implement this kind of script (Page Transition): here
Everything is going fine as demo provided. But only 1 problem that I cant figure out is:
I have 2 HTML files which is index.html & index2.html. On index.html I put the link with the page transition effect after clicked it goes to index2.html which is on index2.html I was put in some alert script using body on-load method.
Supposedly in normal practice, the alert will appear as normal we seen for debuging. But it doesn't appear anything. Seem like it doesn't load any script after page transition done.
Can somebody give me a clue to solve this? What I have tried is using :
location.reload(); window.location.reload(); etc.. till I don't have idea to fix this :(
*location.reload() works on desktop browser but doesn't work on mobile. My priority target browser is on mobile version.
Please help & Many Thanks
for demo purpose and needs help : here
It wasn't executed because the page never really loaded. The way that page transition script worked is by loading the content of the target page via ajax, replacing the entire content of the page with it.
From the page you provided, it seems like the script accepts a callback function to be called when the page finishes loading, you can put your 'loaded' script there. But keep in mind, what is being executed is the script on that first page.
I don't know what you are trying to make, but I guess it would be better for you to look into a proper single page app with URL matching. There are frameworks like Backbone.js that can help you with this.
Here is my situation. I have a new navigation menu built on an entirely different php framework than the actual site is running. Both the new navigation and the existing site are on the same domain. I tried removing the old bar and adding the new bar via an iframe:
<iframe src="/new/menu" width="100%" scrolling="no"></iframe>
This works perfectly fine except some of the menu elements have submenus. When the menu drops down, it's stuck inside the iframe and doesn't overflow the parent page.
I've looked into it and it makes sense this is a security issue with an iframe. But is there some other trick that would allow this external url to load AND overflow it's parent page?
Also, just so it's out there, this is a temporary visual upgrade the client is pushing me for. They want me to "splice" elements into place as they're completed so I definitely need to find some type of solution to make this work properly.
Any ideas will help!!
Some things you could do is First of all a php call something along the lines
$menu= file_get_contents('http://www.menuurl.com/');
echo $menu;
Second thing you could do is a javascript call preferable with jquery
$('#divToLoadInto').load('file.html');
Source:
http://api.jquery.com/load/
http://php.net/manual/en/function.file-get-contents.php
Here is some alternative solution:
- A Fully javascript solution using ajax
According to the jQuery documentation for $.ajax, "included script tags are evaluated when inserted in the DOM.". When I use ajax to grab the content of a dialog box, which in turn contains a script tag for displaying a ReCaptcha box, the ReCaptcha box does not appear when added to the DOM. According to FireBug, the script tag is also now missing from the added content. Navigation directly to the dialog content displays the ReCaptcha just fine.
Does anyone know why this may be occuring and/or know a work around? Any help would be greatly appreciated.
Code in action can be viewed here:
https://dustinhendricks.com/
Then click "Register Now".
Does the script try to do things like document.write()? That won't work when loaded dynamically, only on the initial page load.
In general, scripts contained in HTML that is innerHTML'd is not evaluated consistently across browsers. To fix that, jQuery actually looks for script tags and executes them manually.
But that doesn't really matter. Even if jQuery didn't do that, the script would be running in a different type of context than it normally is when a page is loading for the first time. It's not really an 'inline script' anymore, and a lot of 3rd party scripts were written with it being 'inline' as an assumption. You'll have to figure out what the script is doing and find a way to call it with dynamic content.
Take a look at the Google reCAPTCHA AJAX API. Using the CAPTCHA this way should fix your problem.
I hope it helps!
I have 2 html page (main and details): the main page consists of a table and a empty div. When the user clicks one a table row, the empty div is filled via AJAX from another page (details page).
On the details page I want to load a Google Map. Also I would like the page to be operational by itself (standalone), not just via AJAX.
So here is my problem:
To use Google maps I have to include this script in head of html:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
If I include this in the details page, it works fine standalone. But it doesn't work when I try to get it via AJAX from main page. Google server hangs, and doesn't progress.
On the other hand, if I include it in the main page, AJAX works fine, but the details page is not operational on its own, since its missing a vital include.
I'd really like to leave it in the details page, since it has much more logic to be there. Is there any way I can load the script in the main page, from the details page?
Generally what is the best approach with javascript including and AJAX? Keep everything in main page? Or is there any mechanism to load everything into main page, but keep the code in ajaxed pages?
Btw. I'm using jQuery, but it is not really important. This is a design issues, not a library problem.
Since you are not using IFRAME, it is best that you include the JAVASCRIPT in the main page rather than detail page - since you can do and the js will work. This I think will fix the ajax issue for you and the script is loaded once.