CODEWITHSUNDEEP
jqueryajaxhtmljquery-mobile
bdz
bdz

Reputation: 321

strange issue of jquery mobile page reference and click function

I have this strange issue, if go to my index.html page(Website built with jQuery Mobile) which has a form with a button, then it's possible for me to click multiple times on the button which will generate an alert(to see if button is working) and also go to another page called main.html. I receive the alert when I click the button and I also go to the other page. Now if i go to main.html and then back again to the index.html and click the button again then it won't produce an alert nor goes back to the main.html page..

I have the following code for the button:

    $(document).ready(function() {    
     //event handler for submit button
     $("#btnSubmit").click(function () {
          alert('fdfs');
          window.location.replace("main.html");
          return false;
    });
});

Summarized: When I click the button then it produces a alert and it will take me to main.html,, but if I go back to the page with this button then it won't do the alert nor the page changing anymore..

ANWSER: instead of using:

window.location.replace("main.html");

I used: 

$.mobile.changePage('main.html');

This because i use Jquery Mobile.

I thank Valjas also for the extra information on navigating.

Upvotes: 0

Views: 413

Answers (2)

Valjas
Valjas

Reputation: 5004

You're using window.location.replace which replaces the HTML in the current file with the HTML from the file you link to. You need to use window.location.href which will instead go to the other page.

More info here: http://www.w3schools.com/jsref/obj_location.asp

-- Update --

The format is different then on window.location.replace.

window.location.href = 'main.html';

If you still have problems with that than try:

window.open('main.html', _blank);

That will open the page in a new tab.

-- Update --

Since you're using jQuery Mobile, rather than going about it with jQuery click bind, you should just use the jQuery Mobile API.

Here are a few pages that should be helpful:

http://jquerymobile.com/demos/1.0a4.1/docs/pages/link-formats.html

http://jquerymobile.com/demos/1.0a4.1/docs/pages/link-formats.html#docs-navmodel.html

http://jquerymobile.com/test/docs/pages/page-navmodel.html

Upvotes: 2

arkihillel
arkihillel

Reputation: 322

Using window.location.replace() is a mistake as @jackwanders said.

Using this variable sends an HTTP request that isn't registered in the browser (or PhoneGap) history. Your app will still think it is inside index.html even if you clicked on #btnSubmit.

The solution is to use another function: window.location.href = "main.html"

Also, you don't need to write your binding inside the document.ready function. This is only useful if you want to perform an action as soon as the page has loaded -- but since you wait further on that the user clicks the link, you don't need it

Upvotes: 2

Related Questions