All geek questions in one place

"data-url" jQuery Mobile is confusing

Can anyone refresh the "data-url" attributes in jQuery Mobile now, I read the documentation . I found this to be too confusing. there is a working demonstration or something like that.

Please avoid copying paste content from the jQuery mobile site, this could definitely help someone else looking for the same in the same state as me.

+4
source share
2 answers

You are looking at a rather old documentation link. The latest documentation contains additional information about the purpose of the data-url attribute. You can check version 1.0 on the corresponding page at the following link: http://jquerymobile.com/demos/1.0/docs/pages/page-navmodel.html

I really honestly believe that the documentation, especially the 1.0 documentation, will explain this better, but I will try anyway: to really understand the data-url attribute, you need to understand the jQuery Mobile model that combines all your HTML pages into one HTML document for your mobile site. These pages usually load lazily into the same document. When you go to an HTML document loaded on a jQuery Mobile page, the HTML will be parsed and only one page will be displayed.

A data url is an attribute that you put on a jQM page to enable Ajax navigation. When you click on the link, jQM navigation will first look for the corresponding url attribute on the page. For example, if you go to a jQM-enabled page with the URL "example-host / some / path # / features / 123", jQuery Mobile will first look at the current document for the jQM page that has the data-url="/features/123" attribute data-url="/features/123" . If he finds it, he hides the current jQM page and displays the found one. If he doesn't find it, he tries to execute an Ajax request to the URL "example-host / features / 123", loading the content as another jQM page if he finds a valid page.

These jQM documentation links should provide additional help:

Page anatomy

JQM Page Model

+8
source

There is another very important use case for data-url - which during redirection:

Say the user goes to /store/youraccount , but they are not logged in. Perhaps your server will redirect them to the login page /store/login . This returns to the browser as a 301 redirect that loads without jQuery Mobile, even knowing the changes. The page will display correctly, but the URL at the top will be store/youraccount .

By setting data-url on the login page like this, jQuery mobile can correctly update the URL after the redirect, which means that it can be bookmarked and <form> tags without action will work.

How data-url stops <form> from breaking:

If your page contains a <form> tag defined without an action attribute, then it will return to the current page by default - if you guessed that the browser still thinks we are on /store/youraccount

Therefore, when you put data-url='/store/login , it can correctly update the url.

 <div data-role="page" data-url="/store/login" class="ui-page ui-body-c ui-page-active" id="page_">

Note. Even if your form has an action , you still need to set the data url. This is just an example showing how dropping url data can break things.

+3
source

Source: https://habr.com/ru/post/1390845/

More articles:


All Articles