Re: The page go back automatically

8 years ago

Do not use href="#" .

For some reason, many developers seem to believe that this means "no-op". It doesn't. It means "same page".

If you are using the "back" option, just leave href out.

I notice on another back button, you just have an href attribute with no value. Just leave it out.

---

I notice you used a multi-page document. This is over-used, IMO, and is appropriate for maybe 1% of web sites. (Those that are very small and will never get bigger.) Yours is not one of those!

I would not recommend using a multi-page document for a catalog! There is no way you are going to fit your entire catalog into one document without running out of memory on many browsers. Plus, the user has to wait for everything to download before they see anything.

This is very costly and time-consuming to correct (I know - I've done it twice! No, I didn't write these apps - I fixed them...) if you build-out a site like this, and then realize when you add the 20-th page all of a sudden things break. It's much easier to correct now.

otta88.box

Re: The page go back automatically

8 years ago

Dear friend, i removed all the href="#" in the back button but nothing changed.

(it is not a hug catalog). I put the category in multi page document just because theme are not too many.

Could be related to a page history problem?

Omar

Re: The page go back automatically

8 years ago

in custom.js line 26

replace

$(document).on( "pagecreate", function() {

with

$(document).off("pagecreate", "#man").on( "pagecreate", "#man", function(e) {

otta88.box

Re: The page go back automatically

8 years ago

Hi, thank you for the answer. The problem is that you can go to list.php not only from "man" but from "child", "woman","manwearing" and "womanwearing".

Why you gave that kind of code? Have i to turn of the action when creating page again? Why?

Omar

Re: The page go back automatically

8 years ago

the code you have wrapped in pagecreate event is multiplied whenever pagecreate event is fired. Your problem is change page function to list.php is duplicated several times and thus on second click, it will go back to list.php.

otta88.box

Re: The page go back automatically

8 years ago

Thank you!

Is possible to gave the same code to other page?

$(document).off("pagecreate", "#man").on( "pagecreate", "#man", function(e) {

example

$(document).off("pagecreate", "#man").on( "pagecreate", "#man #woman #child", function(e) {

Should it work?

watusiware

Re: The page go back automatically

8 years ago

When I see this:

$(document).off("pagecreate", "#man").on( "pagecreate", "#man", function(e) {

It almost always means it is a hack to fix some problem elsewhere. You should never need .off() for page events. I've never found that .off() is necessary for page events in properly-written code. It usually means that you've registered the same binding or delegation more than once.

Your original code was fine, IF you want that code to apply to all pages. Do you? However, I would normally write it as a delegation, rather than as a binding.

$(document).on("pagecreate", ".ui-page", function...

If you want to apply to to only some pages, use some selector other than ui-page .

You can use this if you like (but you need the commas):

$(document).on("pagecreate", "#man,#woman,#child", function()...

You can use any valid CSS selector.

However it is better to add some CSS class to the pages:

$ (document).on("pagecreate", ".person", function()...

You likely will have trouble due to the many unscoped selectors you have used, e.g.

$("a.gotolist").on("tap", function()...

What elements do you think this applies to?

A. It applies to every <a class="gotolist"> element in the document. Not in some specific page, but in ANY page that might be loaded!

You have these kind of unscoped selectors throughout your code. You should never do this.

If you want to do something within a particular page or pages:

$(document).on("pagecreate", ".person", function() {

var $page = $(this); // This is always handy to have!

$(page).find("a.gotolist").on("tap", function()...

I see that later in the code you seem to have caught-on that global or unscoped selectors are bad:

$("#promo .promo-image").attr( "src", "http://fancyroad.com/upload/promo/normal/"+promo_image );

$("#promo .promo-name").text( promo_name );

$("#promo .promo-mess").text( promo_mess );

$("#promo .shop-distance").text( shop_distance );

$("#promo .promo-desc").text( promo_desc );

$("#promo .shop-name").html( shop_name );

$("#promo .shop-home").html( shop_home );

Instead, I would write:

$(document).on("pagecreate, "#promo", function(event, ui) {

var $page = $(this);

var $promoName = $page.find(".promo-name");

$promoName.text(promo_name);

Etc.

(Where is the variable promo_name ? I don't see where it is defined...)

Your problems are almost certainly due to these overly-broad selectors.

Aside: I would avoid XML if you have a choice. JSON is a much better choice to work with in Javascript.

otta88.box

Re: The page go back automatically

8 years ago

Thank you for the scooping, i'm doing on it.

In the last part this is the only way to pass correctly vars because that vars come from the server (i use PHP to pass vars throught the pages) and the only way to get the value is to put PHP code in the physical page where it is. Is that right to pass vars throught pages?

This is in #promo page

// PROMO PARAM

var promo_id = <?php echo $_REQUEST['promo_id']; ?>;

var promo_name = "<?php echo $_REQUEST['promo_name']; ?>";

var promo_desc = "<?php echo $_REQUEST['promo_desc']; ?>";

var promo_mess = "<?php echo $_REQUEST['promo_mess']; ?>";

var promo_image = "<?php echo $_REQUEST['promo_image']; ?>";

// SHOP PARAM

var shop_name = "<?php echo $_REQUEST['shop_name']; ?>";

var shop_distance = "<?php echo $_REQUEST['shop_distance']; ?>";

var shop_latitude = <?php echo $_REQUEST['shop_latitude']; ?>;

var shop_longitude = <?php echo $_REQUEST['shop_longitude']; ?>;

var shop_home = "<?php echo $_REQUEST['shop_home']; ?>";

</script>

watusiware

Re: The page go back automatically

8 years ago

If you want to incorporate some data into a page, I would not define vars like that. Use a data- attribute or attributes. You can even use JSON and jQuery will parse it for you.

<div data-role="page"

data-promo-id="123"

data-promo-name="sale"

</div>

Or, alternately:

<div data-role="page"

data-promo='{id: 123, name: "sale"}'

</div>

Use single quotes around the string, because JSON requires double-quotes only. So, if you use single quotes around the whole string, you don't need messy escaping of quotes. \"

You can access this from the $page variable I suggest you add in each page event callback.

$promoName.text($page.data("promo-id") (for first example)

$promoName.text($page.data("promo").id (for second example)

otta88.box

Re: The page go back automatically

8 years ago

Thank you, but the problem is how to get the data:

I explain: when tapping on a category of the list I call a changepage that send with ajax some value. The list.php page (target) get data and print it. Is that correct? Or I was wrong in the way i print the vars in the target page?

watusiware

Re: The page go back automatically

8 years ago

I can't help you with your PHP. I don't know PHP, and it's off-topic for this forum.

Does your PHP code get the data? If so, there's no jQuery problem. Your PHP code can do whatever it likes with the data.

Can you explain what you are trying to do with this data? You get some XML from your server then you parse it. Why would you want to send the same data back to the server?

I don't understand what you are trying to do with this code at all.

Don't use

$(this).attr('data-id')

Use

$(this).data('id')

But don't keep repeating $(this). Create a variable:

var $item = $(this);

var promo_id = $item.data('id');

There is nothing "wrong" with the way you have written it, except that it is bad practice. You should always create variables to cache jQuery objects, rather than creating them over and over repeatedly.

otta88.box

Re: The page go back automatically

8 years ago

My mistake. I don't need php help, my question was to know if the good way to pass data from a page to another is to use a server side language or if exist a jquerymobile way to do it without use the server side language.

watusiware

Re: The page go back automatically

8 years ago

I wouldn't bother with variables for promo_id, etc. though. Just write:

var $item = $(this);

$( ":mobile-pagecontainer" ).pagecontainer( "change", "promo.php", {type: "get", data: { promo_id: $item.data('promo_id') promo_name: $item.data('promo_name'), etc.

But I guess it's a matter of taste.

If I use something more than once, or think I might, I create a variable.

If I think I will never use it more than once, I dispense with the variable.

I always create a meaningful variable name for $(this). Like $page, $item, $button, etc The $ reminds me that the variable holds a jQuery object. This is commonly-used good practice.

Finally, if you just use a single object for your data, populate it using a JSON string, and adjust your server code, this can be much more simple.

var $item = $(this);

var $promo = $item.data('promo');

$( ":mobile-pagecontainer" ).pagecontainer( "change", "promo.php", {type: "get", data: { promo:promo }

watusiware

Re: The page go back automatically

8 years ago

I see now you have a big problem. I warned you about this, but you told me you would never have more than these few pages that you have put into one document.

You cannot mix a multi-page document with single-page documents. You are trying to load an external page, promo.php. This will not work correctly from your multi-page document! If you use a multi-page document, you have to include ALL of the pages that are possible!

How many pages might the entire catalog contain? It is not 6 pages. I'd imagine it is hundreds, or at least dozens.

It would be OK with 6 pages, if you use Ajax for everything. You could have a single "product" (or "promo") page where you load the content dynamically using Ajax as you have for your lists.

But if you want to load additional jQuery Mobile pages into your multi-page document, you either have to use data-ajax="false" (not a good user experience) or re-write to use single-page documents.

This is why I said it is better to re-write now than to wait till you have 200 pages.

otta88.box

Re: The page go back automatically

8 years ago

I think too that is a question of taste. Server side "echo" way is good enought (and however it's called web app ;) ). Thank you for the assitance.

otta88.box

Re: The page go back automatically

8 years ago

Hi, thanks for the warning. Really? I cannot mix multipage with singlepage? I did not know that. My bad.

Thank's god i don't see error during my app working for now. The problem you are talking about is for what? (However is a catalog of 6 pages, not more).

watusiware

Re: The page go back automatically

8 years ago

My bad! Sorry!

Yes, you can load an external single-page into a multi-page. You cannot, however, do the inverse. You would only get the first page:

http://demos.jquerymobile.com/1.3.2/faq/why-is-only-the-first-page-loaded.html

(Sorry for referring to the 1.3 FAQ. The documentation team is obstinate that they think they no longer need an FAQ...)

This is still true in 1.4.

Question:

Why is only the first page of my multi page document loaded?

Answer:

jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget

otta88.box

Re: The page go back automatically

8 years ago

No man, I explain better the structure:

- main page category
- man category
- man wearing category
- woman category

- woman wearing category

- child category

Tapping on a final tree item list you pass to the page "list.php" a cat ID. When page is loaded it does a ajax call to an API and pass some data (cat ID included). The page retreive XML and print data as a list.

Now, you are in "list.php" with list printed. Tapping on a list item you pass to another page "promo.php" the parameters of the promotion that you want view.

There are 6 + 2 pages. List.php and Promo.php are dynamic.

Or there is something wrong?

watusiware

Re: The page go back automatically

8 years ago

I would call that 6 + n pages. Not 6 + 2.

Presumably, each Promo page is distinct. You have as many promo pages as you have products.

However, this is not a problem, unless you attempt to load main.php. That will get you only the first page! You cannot load a "package of pages" (multi-page document) into an existing document, whether it is single-page or multi-page. It doesn't seem you do this, so it's OK.

You might have a problem with duplicate IDs. You cannot duplicate an ID in a document. All your list pages have ID list. I try never to use IDs in jQuery Mobile. (They are OK, for your 6 built-in pages, though. I presume you will never duplicate those in another page.)

If you use a CSS class instead of an ID (for list and promo) then you can use $page to find stuff on a particular list or promo page.

You are OK probably if you never navigate directly from one list page to another. But if you do, now during the transition you have two pages with the same ID. If you search for $('#list') for any reason, you will find the one that is first in the document. This may not be the one you are interested in...

otta88.box

Re: The page go back automatically

8 years ago

In the last part of your answer: <div data-role="page" id="main" >, i red in some jquery mobile books that is the "ordinary" way to declare a page. But you say is better to declare it with class and not id, right?

If i create a unique multipage web app, when i pass the variables thorught server side language (ex PHP), it becomes impossible to use a echo $_REQUEST['name'] (for example) in the multidocument pages, isn't it? I think is impossibile because the page as been already served and there is no way to send a piece of the page to server. Right?

watusiware

Re: The page go back automatically

8 years ago

I'm afraid I don't understand your question(s). Is it one question or two?

HTML doesn't allow duplicate IDs, regardless of what any book says is the "normal way to declare jQuery Mobile pages".

The docs have set a bad example by using IDs extensively. There is an acknowledgement in the latest docs that it's not really a good idea to use IDs. There is a short discussion of the problems that brings. And if you come from jQuery, it is not so easily understood why duplicate IDs on different pages are bad, because normally each document stands alone. (You don't have multiple "pages" in the document.) Still, I often see problems where developers try to use the same ID more than once on the same page!

If you have duplicate IDs, you will get unexpected results when you attempt to use those IDs.

I always use CSS classes to identify and locate pages. There might be more than one page with the same CSS class. That is fine, because I always create a $page variable in page callbacks, and use that to find things in that particular page. This avoids any potential problems with duplicate IDs.

Duplicate ID problems can be very tough to diagnose. The problems only occur in certain edge cases. For example, if you are transitioning from one page to another, and both pages have the same ID, and you try to use the ID during the page transition. (For example, pageinit is during the page transition.)

Because it is only certain edge cases, that makes it hard to find these problems. Everything seems to work. Until it doesn't.

The safe thing is just to avoid using IDs and always scope to a specific page when doing searches.

BTW, these two are equivalent. It's a matter of taste:

$page.find('.something')

$('.something', $page)

I think the first is more clear to read, but the second is more compact. The second parameter is called the "context". Curiously, some developers have done some performance tests, and the first form is slightly faster (not that it's anything to worry about). Just looking at it, one would expect the second to be faster, because it is only a single function call, where the first takes two function calls.

I'll take faster AND more clear to read any day.

watusiware

Re: The page go back automatically

8 years ago

Ah, I guess it was two questions.

If i create a unique multipage web app, when i pass the variables thorught server side language (ex PHP), it becomes impossible to use a echo $_REQUEST['name'] (for example) in the multidocument pages, isn't it? I think is impossibile because the page as been already served and there is no way to send a piece of the page to server. Right?

Correct.

I think, though, you mean, "there is no way to send a pice of the page to the browser ." Correct.

You can make an Ajax request from your JS code and then replace parts of pages, though.

I'm still not quite sure I understand your question. PHP echo just copies some text into whatever document you are serving.

otta88.box

Re: The page go back automatically

8 years ago

MMhhh. Example: I wanna do a unique multipage document (6+2 or 6+n). But as I explained to you, the #list and #promo page require an input of some data ( cat for #list, cat, id_promo, latitude, etc... for #promo). Which code should I use to pass that data from page to page without using server side code?

watusiware

Re: The page go back automatically

8 years ago

It's hard to answer abstract questions. Can you point out exactly what data you want to pass from page to page, and mention which data and between which pages?

You do have a problem mixing multi-page document with single-page documents, though. While what I said earlier is true (you can load single-page documents into a multi-page) as a practical matter, this does not work out for websites. (It will work for hybrid apps using PhoneGap, etc. if they are properly written.)

The problem comes when some user bookmarks a promo page, or some other site has a "deep link" to a promo page, or the store or some customer emails a deep link to a promo page, or the user hits browser refresh while on a promo page.

Go ahead and try it. Drill down to a promo page then hit your browser refresh. This will simulate any of the above conditions.

(The reason it would be OK for PhoneGap - no browser refresh, no bookmarks, no emailing of links, no links from other website. No problem.)

A couple of ways around:

- Refactor using all single-page documents

- Add two more pages to your already 6. Populate the promo page using Ajax similar to the way you do your lists now. XML probably isn't suitable, because the layout of these pages may not follow a simple formula. So, have your server provide an HTML fragment that you load into the content area of the page.

otta88.box

Re: The page go back automatically

8 years ago

Maybe i was not clear:

1) If I put the external (promo and list) pages into the index.php (which contains the 6 pages) it is not a problem (because listview and promoview is served with ajax), but the only problem is that i can't pass the vars(ex. cat for list) with get or post because being a unique multipage document the server side has already served everypage with index.php (that contains all page). So the only solution is to store the vars that i want to pass in a global variable/s and make a simple changePage? And when page is changed call this variable/s?

2) Is not possible to make a web app 100% compatible with browser refresh, etc, because external single page do not need in the header .css .js include. If you put it them are ignored, and if I put the same code header in each single page I have the same code that repeats and is not a good solution.

watusiware

Re: The page go back automatically

8 years ago

If you put it them are ignored, and if I put the same code header in each single page I have the same code that repeats and is not a good solution.

There is nothing wrong with this if properly done. And it's the way jQuery Mobile was designed and meant to be used.

When jQuery Mobile loads a page using Ajax, yes, the <head> section is completely ignored (other than <title> ).

But by completely ignored, I really mean completely ignored! The browser does NOT load the assets (CSS and JS).

So, there is some small overhead because you load a bit of text in the <head> section that is ignored.

On a production site, you should NOT have dozens of CSS and JS files loaded in <head> . I try to have only one of each. (There are easy tools that will combine and minify CSS and JS files.)

So, yes, if you do that (dozens of CSS and JS files, plus maybe some inline CSS and JS in <head> ...) then you might be wasting thousands of bytes on this ignored text. But if you keep it small, it can be just a couple hundred bytes, which is worth preserving the ability to bookmark, etc.

I would think that for any retail store , losing the ability to email links to product pages, deep-link, and to have the users bookmark would be a non-starter. In fact, I would think they would "freak out".

Your problem now is that your initial document is a multi-page. To allow the user to bookmark, now, you would have to include not only the assets in head, but all of the pages, as well. But - Catch-22 - that can't be done, because you cannot load a multi-page using Ajax. You've just negated any small advantage you gained by using a multi-page in the first place.

Every advantage a multi-page might give you can be achieved using data-dom-cache and data-prefetch judiciously.

I'll restate that multi-page is suitable for only a small number of projects. It can be great for some PhoneGap projects and for sites that really do have only a very small number of pages, or that have a small number of pages that populate themselves dynamically using Ajax.

It's probably less than 5% of sites.

Frankly, I think one of the main reasons for it's over-use is that it makes a very convenient way to create examples in documentation and jsFiddles that show multiple pages. That's unfortunate. It's a tail wagging a dog.

What usually happens next is that the developer gets frustrated and disables Ajax. Read the forum history...

watusiware

Re: The page go back automatically

8 years ago

Maybe i was not clear:

Can you point me to some specific variables names and/or a line number?

otta88.box

Re: The page go back automatically

8 years ago

I'm keeping 2 different page for list and promo. I get vars with $_REQUEST in php and pass it to page to page with GET method, so user can save links or send it.

To avoid bad refresh i'm just includeing all the same header code in all the page-file with the php function include(), so i have to edit the header.php only. Is it for you a smart way or not logical?

otta88.box

Re: The page go back automatically

8 years ago

Infact, if with unique header file you avoid bad refresh, persist the navigation history problem, and a back button to a multipage file won't work correctly.

watusiware

Re: The page go back automatically

8 years ago

^ Right. Catch-22.

This is why I recommend not using multi-page at all.

If you really did have only 6 pages (but you don't) somebody would come to you next week and say "we need to add 10 more pages! ;)

You cannot - as a practical matter - mix single-page and multi-page documents. Pick one or the other.

If you pick multi-page, make sure you project has a very small number of pages and will never get bigger.

- If you try to load a multi-page from a single-page, it will only load the first of the pages in the multi-page. FAIL .

- If you load a single-page from a multi-page, that will work initially. But you will either lose browser reload, bookmark, and deep-linking (if you do not include scripts and styles in head) or else you will lose the ability to navigate back to the multi-page (if you do include scripts and styles in head). FAIL .

Let me ask you a question: what advantage do you think you are gaining by using a multi-page document?

otta88.box

Re: The page go back automatically

8 years ago

Advantage? Faster navigation from category to category... nothing else... was a good feature work with a page that contains more than one. But maybe i'm in wrong for this kind of project.

I think about have understood that multipage is only for little or static project and make loose to you some advantages like history and correct refresh.

Ok, i'll pass to single page project (better now than later). We are developing WEB APP, so I think we have to care bout user need to bookmark somethink or want to reload and so the correct thing is do this possible. Am i right?

watusiware

Re: The page go back automatically

8 years ago

^ That's what I would do. It is easier to fix now than later! A *lot* easier!

You can still get faster navigation from category to category. You can choose to dom-cache certain pages. You can choose to pre-fetch certain pages so that they are already loaded when the user navigates to them.

There is nothing that multi-page brings to the table that cannot be achieved with single-page documents.

Yes, use PHP include to duplicate <head> that way you know they are all the same.

I think about have understood that multipage is only for little or static project.

As well, it's great for documentation and demos! Which, I think, has ultimately misled developers.

otta88.box

Re: The page go back automatically

8 years ago

jQuery Mobile is a great project and this thing i've learned from you should be implemented on documentation.... the talk about multipage but don't tell clearly what is suggested to...

Is there a function to pre-fetch some page?

watusiware