Response title
This is preview!
Move this topic
Jquery Mobile Onclick event does not work before page reload
in jQuery Mobile
•
5 months ago
Hi,
I am calling page from main page but the onclick does not work until I reload the page.
any help?
This is my link:
<a href="#" id="mag" data-role="button" onclick="formSubmit();"><img src="images/mag.jpg" alt="" /></a>
This is javascript:
$('#mag').click(function (event) { formSubmit(); }); $(window).load(function () { $("#q").keyup(function () { var SEARCHWORD = this.value; $("#MAIN_UL li").each(function () { if ($(this). find("a"). text().toUpperCase(). indexOf(SEARCHWORD.toUpperCase()) >= 0) $(this).show(); else $(this).hide(); }); }); });
1
Replies(17)
- Really hard to help without more information. Luckily this one comes up every day.
- I would use JQuery Mobile events rather than onclick="...", just a suggestion.
My guess is the reason this would happen is you have this JavaScript in the <head> of the document, correct? Only the head of the very first page gets loaded, so you should have either a) all the JavaScript on one page where the user MUST enter or b) put the same JavaScript on every page.
I would recommend choice b) if it is not a native app. I would put all JS in external files so it's much easier to load depending on the page the user enters.
I suggest reading the scripting section of JQM.
Hi,
All the javascript is in external files and in all the pages.
Any idea?
Leave a comment on haga0054's reply
Have you tried debugging? Looked through the console? Are there any JavaScript errors? Do you have any duplicate ID's? Keep in mind JQuery Mobile keeps all the pages in the DOM so if a different page has the same ID, it would be considered duplicate. Have you tried changing to the JQuery notation?
- <a href="#" class="mag" data-role="button"><img src="images/mag.jpg" alt="" /></a>
- --JavaScript--
- $(document).on('vclick', '.mag', function(e){
- formSubmit();
- });
Note instead of IDs I use classes to help eliminate duplicate IDs. Also I use vclick to remove the 300ms delay. If you would rather keep then use click instead.
Leave a comment on haga0054's reply
Hi,
What do you mean ' if a different page has the same ID'?
I made a simple test: In the first page I wrote <body onload="javascript:alert('dumy');">. This javascript is working.
In the second page I wrote the same in body tag but it's not work until I press reload in browser.
It drives me crazy.
How can I force the page to reload every time i come into?
If you are doing what you said then you must not have understood my first post. I would not use body onload for your JQM application. You should have the JS in the <head> and make sure it's identical on every page.
If you want to test your JavaScript try this.
- $(document).on("pageshow", "#page1", function(e){
- alert("Showing page 1");
- });
- $(document).on("pageshow", "#page2", function(e){
- alert("Showing page 2");
- });
Make sure you have two pages with IDs page1 and page 2. Make sure the script is included in the <head> of the page you enter.
Now to show you behavior, try entering from the other page and notice the scripts will not run.
Please note this is the same issue you are running into when reloading fixes the scripts. They won't get loaded on page 2, only page 1.
If you still have trouble understanding I would take a read through the scripting section in the documents.
If this is not the case, then you have an error somewhere else and I get back to my original questions - have you tried debugging?
As for duplicate IDs what I am trying to say is the code below is not valid - look at the IDs for the buttons.
- <div data-role="page" id="page1">
- <div data-role="content">
- <input type="button" value="Button 1" id="button" />
- </div>
- </div>
Now on a separate document/page.
- <div data-role="page" id="page2">
- <div data-role="content">
- <input type="button" value="Button 2" id="button" />
- </div>
- </div>
Different documents, same id.
Leave a comment on zipsoft's reply
I think you meant to post this:
Copy code
- <div data-role="page" id="page1">
- <div data-role="content">
- <input type="button" value="Button 1" id="button" />
- </div>
- </div>
Now on a separate document/page.
Copy code
- <div data-role="page" id="page1">
- <div data-role="content">
- <input type="button" value="Button 2" id="button" />
- </div>
- </div>
Different documents, same id.
------
You are more likely to run into this issue with IDs inside of the page, though, rather than on an ID for the page itself.
For example, you might have one page with an input field with an id of "name". And a different page, also, with an input field with an id of "name", as well.
This will not fly in JQM, because it might load both pages in the Document at the same time, and HTML does not allow two elements in a document to have the same ID. The browser behavior is undefined, and different browsers will punt in different ways.
------
You are more likely to run into this issue with IDs inside of the page, though, rather than on an ID for the page itself.
For example, you might have one page with an input field with an id of "name". And a different page, also, with an input field with an id of "name", as well.
This will not fly in JQM, because it might load both pages in the Document at the same time, and HTML does not allow two elements in a document to have the same ID. The browser behavior is undefined, and different browsers will punt in different ways.
Hi,
Unfortunately the problem still exists.
Here is a link to test project that simulate the problem.
I would like to remind, the problem is that press on magnifying glass button (page2) popup alert message only after page reload.
thanks
Leave a comment on watusiware's reply
I can see 'Uncaught ReferenceError: formSubmit is not defined ' error in console onclick of magnify icon.
Its because the function defined in page2.aspx dont have scope.
This is already explained by 'haga0054' above.
It makes an ajax request for second page and add that as a new page (<div data-role="page") in the existing DOM. And ignore content of the head.
You can see that 'inspect elements'
Remember
1.jquery UI is not officialy compatible with jQM.
2. Listen to jQM suggested events.
$(function () {
$(":checkbox").checkbox();
});
is equivalent to document.ready(?) which is not suggested as per docs.
Hi,
I realy do not understand.
If I browse to Page2.aspx it works fine and I get alert messages when I press button.
If I go to page2 from a link in page1 I must reload the page manualy before I can get the alert messages.
Can you please advice me what I have to change in my page in order to fix the problem.
Leave a comment on John Chacko's reply
I suggest reading this
Leave a comment on John Chacko's reply
Unfortunately we have all told you what the issue is. I think you need to read through the documentation. It's the placement of the scripts that are the issue. Not just the JQM scripts, but your scripts as well. ALL scripts.
Leave a comment on haga0054's reply
Hi,
Thank you for your help.
rel=external in the link solved the problem.
As simple as that.
Leave a comment on zipsoft's reply
For the benefit of others, I will point out that while rel="external" "solves the problem" it introduces a host of others. It's rarely a real solution. You'll likely be back complaining about lack of transitions and performance issues.rel=external in the link solved the problem.As simple as that.
It you were willing to read through the documentation and understand how jQuery Mobile loads pages, you wouldn't need to resort to using rel="external".
(It has legitimate uses - primarily when the user is leaving your site.)
Exactly this. This is why no one recommends using rel="external" as you should rarely use it, especially if you are navigating to a page within your site. Every time you use this, everything has to get reloaded.
Linking without Ajax
Links that point to other domains or that haverel="external",data-ajax="false"ortargetattributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external"anddata-ajax="false") have the same effect, but a different semantic meaning:rel="external"should be used when linking to another site or domain, whiledata-ajax="false"is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
Leave a comment on watusiware's reply
Not sure what your quote is trying to tell us. We know what this does. If you don't want advice that's fine, it just isn't what you are really looking for.
Leave a comment on haga0054's reply
You can jump off of the edge of the Grand Canyon.
It doesn't mean that you should, or that you will be happy with the result.
You can use rel="external", and actually should if you are linking off-site.
If you are using it within your own site, there are severe drawbacks to doing so (albeit less severe that broken bones), such that I would question whether it makes sense to use jQuery Mobile at all, since you lose many of the key features and benefits of JQM in the process.
(If you jump off of the edge of the Grand Canyon, you lose many of the key benefits of your visit, viz. enjoying the sights and being able to enjoy fond memories and tell your friends about your visit...)
It can be useful if you have a part of your site that does not use JQM, and that the user will spend some time at. For example, a completely separate section of your site (maybe a Forum, or a chat page, or a map that isn't integrated with JQM, etc.)
If you use this on every page of your site, the result will be unsatisfactory to your users.
It doesn't mean that you should, or that you will be happy with the result.
You can use rel="external", and actually should if you are linking off-site.
If you are using it within your own site, there are severe drawbacks to doing so (albeit less severe that broken bones), such that I would question whether it makes sense to use jQuery Mobile at all, since you lose many of the key features and benefits of JQM in the process.
(If you jump off of the edge of the Grand Canyon, you lose many of the key benefits of your visit, viz. enjoying the sights and being able to enjoy fond memories and tell your friends about your visit...)
It can be useful if you have a part of your site that does not use JQM, and that the user will spend some time at. For example, a completely separate section of your site (maybe a Forum, or a chat page, or a map that isn't integrated with JQM, etc.)
If you use this on every page of your site, the result will be unsatisfactory to your users.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to zipsoft's question
{"z7664639":[14737000003745239,14737000003745691,14737000003745813],"z2070601":[14737000003742418,14737000003742432],"z8535338":[14737000003745097,14737000003744190,14737000003745223,14737000003744808,14737000003745783,14737000003742476],"z23605538":[14737000003744149,14737000003744188,14737000003744314,14737000003743600,14737000003743626,14737000003743696,14737000003743782]}
Statistics
- 17 Replies
- 2567 Views
- 0 Followers
