toddthomson / jquery-mobile-subpage-widget Goto Github PK

View Code? Open in Web Editor NEW

99.0 99.0 40.0 695 KB

JavaScript 100.00%

jquery-mobile-subpage-widget's People

Contributors

Stargazers

Watchers

Forkers

roadlabs adammessinger westcoast heyanshukla lorenzosfarra sunny021 ansonurpants bdukes sndpuz gyujinnoh cw-user blacktale sarahgavraboland mastasushi appscarvajal jaredmrhodes changhaobyu vozols esalsano vixmobile onlybygrace lohyaoming webcrb manuelfc1 u00r1v1 raphealdabney slupin tearona jbaquero jasonpen pinzler logiciells mhh12121 zhuying016 sangkyunyoon kaviarasankk iuli1478 gijpelaar misha-ds

jquery-mobile-subpage-widget's Issues

Invalid reference.

Line #67 has:

t._createSubPage();

which should be:

self._createSubPage();

Exception with jQueryMobile 1.3.0

With the advent of jQueryMobile 1.3.0, I am getting an exception on line 98 of the plugin. This code:

        if ( this.parentPage.is(":jqmData(external-page='true')") &&
             this.parentPage.data("page").options.domCache === false) {

causes an exception on some page transitions, because 'this.parentPage.data("page")' is undefined. I've added a check in my version of the plugin for this, but I'm curious as to whether this is part of a larger problem that I'm not seeing?

problems with phonegap?

Hi,
I have a main "page" with 4 "subpage"s.
If I open this page with a normal browser, I can navigate through the various subpages without problems.
Instead, when I open this page as part of a phonegap-based app in Android, I can navigate to a subpage only once, then I can't go anywhere else.
For example, I can navigate from page to subpage1 (or from page to subpage2,3,4), but then when I click a link to another subpage nothing happens (I can't see any logs).
Is there any known problem or is it an unexpected behavior?
Thanks,
Lorenzo

doesn´t work

Hi!!
This widget doesn´t work for my app. I put the js archive in my head of the page and I changed the data-role to subpage. But doesn´t work.
All the subpages loads at the same time on the parents page and the css is missing. I´m doing something wrong?

We are using iscroll is that a problem??

Thank you in advance.

Persistent headers broken with subpages

Hi,

JQM 1.1.0 introduced fixed headers / footers that work pretty well, and it would be awesome if your plugin could handle it.
I didn't dwell into JQM and your code (and I apologize), but set up two Fiddles to show you the issue :

How it should work (i.e without subpages) : http://jsfiddle.net/Vinky/YJBQR/
How it actually works (with subpages) : http://jsfiddle.net/Vinky/LMB2y/

I think it could be a real improvement to your plugin.
Cheers,

Vinky

FOUC when loading subpage-dialog

I get a flash of unstyled content when I load subpage-dialog. The unstyled content is the dialog's markup.

I've tried various things to suppress it (adding and removing ui-mobile-rendering to html on different events) but no luck so far.

Happy to try out any suggestions you may have!

(Great plugin, btw. Thanks!)

Not sure if I'm coding wrong or what...

I'm trying to incorporate the Subpage Widget into my jQm app, but I'm not having any luck. I thought I understood things correctly that I add the script, then add subpages to pages, like so,

<html>
 <head>
  <script jQuery.js>
  <script subpage.js>
  <script jQm.js>
 </head>
 <body>
  <div data-role="page">
   page 1
   <div data-role="subpage">
    subpage 1
   </div>
   <div data-role="subpage">
    subpage 2
   </div>
  </div>
  <div data-role="page">
   page 2
   <div data-role="subpage">
    subpage 1
   </div>
   <div data-role="subpage">
    subpage 2
   </div>
  </div>
 </body>
</html>

Is it not this simple?

1st Subpage does not get back button using data-add-back-btn="true"

Hi Todd,
Thanks for this widget - it's been essential for dynamic sites.
I've found an issue when adding back buttons to subpages.

I've got two subpages within a page. Each subpage has the attribute:
data-add-back-btn="true".
The first page doesn't get the back button, the second does.

Here's a jsfiddle that demonstrates it: http://jsfiddle.net/bluescrubbie/aEPPL/2/
The same code set up as separate pages works: http://jsfiddle.net/bluescrubbie/pqzzp/2/

notes:

The listview ul/li is there for convenience - it still happens if you take it out.
If you wish, you can find less stripped down versions if you go back earlier fiddle versions.

Sub page is added every time event fires

Every time $.mobile.changePage fires - copy sub-page is added to DOM stacking all copies on top of each other. Is there a way to check if sub page was already added to the DOM and prevent duplicates ?

Subpage ( and parent page ) Removal

Subpages are not removed properly by the DOM. The parent page is also not removed at the correct time.
I am working on this issue right now.

Please update the Subpage Widget to use the latest JQM and provide a working sample other than MVC

If anyone else stumbles on this, it doesn't work, at least not with JQM 1.4.5.

While the page data-role=subpage does get converted to data-role=page and a few classes get added, $.mobile.changePage() can't find the page.

Also, unless you're an MVC coder (I'll bet 90% of the JQM developers aren't), don't bother with the examples.

with jqm 1.4.0

it's with error like this

Uncaught TypeError: Object [object Object] has no method 'enhanceWithin'

it works fine with 1.3.2

am i the only one who use 1.4.0?

as of 1.4, jqm doesn't need it anymore?

interlink between any two subpages?

I saw this comment by ganeshbanoth on the issue of interlink between any two subpages. I've encountered the same problem as well. Can each page have only one subpage?

Refresh doesn't take you back to subpage

On your demo site, if you go to http://m.integra-international.net/home/about and then click about, you are redirected to http://m.integra-international.net/home/about#&ui-page=mid-mobile-about.

However, if you now hit refresh, the URL stays the same, but the actual page displayed is http://m.integra-international.net/home/about.

How to create nested pages

I just want to create a nested page structure like

The first sub page works fine here but the second sub page is not working.

Sample code here:

Can I use $.mobile.changePage() to switch between pages?

Before this plugin, I was forced to use data-ajax=false to properly load multiple jqm pages into the DOM. I would like to start "ajaxing in" my multi-page template, so I tried this plugin.

Unfortunately, I seem to have lost the ability to programmatically switch between the pages. I was previously using $mobile.changePage("#pageDivName"); to move from one jqm "page" to the next, but it isn't working after implementing the plugin. jQuery mobile is throwing an error stating "Unable to get property '_trigger' of undefined or null reference." This is on line 4065 of jquery.mobile-1.3.1.js.

Is there a trick to getting changePage to work with this plugin? Thanks.

Change page programmatically with dialog type subpage

All is in the title. I cannot change page with code to a dialog subpage. It seems that $.mobile.changePage() does not work. Any idea? I nees to do some check in js before opening the dialog...

On trying to link to the subpage, it goes to previous page

I am not sure if I have coded correctly. Could you please help me out.
I have included your subpages.js in my app.

And the page with multiple subpages, looks like this.

  <div data-role="page" id="index1">
  <div data-role="header">
      <h6>Welcome...</h6>
      </div>
    <div data-role="content">
       <a href="#vj1">Go to subPage 1</a>
    </div>
    <div data-role="subpage" id="vj1">
        <div data-role="header">
        <h6>Welcome...</h6>
        </div>
         ...
         ...
   </div>
 </div>

On clicking on the "Go to subpage 1" link, it takes me to the previous page. This was the same behavior I experienced before knowing that link to multipage document with Ajax navigation active will load only the first page.

Please help.

(Endless) loop when submitting form via AJAX

When you try to submit form which is placed inside subpage via default AJAX interface, which submits to the URL of the original page which contains that subpage, page refreshes almost endlessly depending on the number of times you used form to submit data. Is this a know limitation?

Problem with fixed+persistant footers & headers?

Hello Todd,

first of all thanks for a great widget.

I am now working (or trying to work) on a web-app and use JQM for the first time. It should have many different pages, with many different subpages each, and since it's not possible to do in JQM without disabling ajax navigation I am really happy that there is such a widget.

But, there is one problem though. I use persistent fixed headers and footers on each page, that should give user a feeling that he stays on the same page all the time. As per default in JQM user always can click on the content to dismiss both fixed header & footer.

And somehow it seems that when I try to open a subpage header & footer stop working as they should. They overlap the content and stay fixed all the time, even if I try to dismiss them by clicking on the content.

So far I only tried it with desktop versions of FF and GC, but with same results.

Here is a little demo I prepared:
http://aluserex.vshost.ru/jqm-subpage/

I hope you can reproduce my problem and know what the reason is or could be. Maybe I am just doing something wrong.

Origin null is not allowed by Access-Control-Allow-Origin.

I got the error : "XMLHttpRequest cannot load file://localhost/test/www/subpages.html. Origin null is not allowed by Access-Control-Allow-Origin." when using jquery.mobile.subpage.js.

I'm not sure why there is access-control-allow-origin error since all of pages should be read locally. BTW, i'm using emulator to test.
thanks.

How have I to come back to the main page?

I've created subpages like you've shown

... ...

Now, if the user is in the subpage called "sub", how can he come back to the main page? I've tried with but it doesn't work...

Thank for the good widget

Example site not mobile

Is anyone else unable to get the example site (integra-international.com) to show in mobile view? I've tried with a user-agent switcher and also with a native mobile phone (android based) and it's not displaying a mobile-specific view.

Linking to subpages with data-rel="dialog" doesn't work

I've created a work-around for this that uses a new subpage-dialog role to determine what gets shown as a dialog and what doesn't. Not sure if that's the best way to do it since I was figuring out the jQM internals as I went, but it works. Interested in a patch?

Script snippets embedded in subpages get executed twice

Reproduce with:

<div data-role="page">
    <div data-role="subpage">
        <div data-role="content">
            Subpage content
            <script type="text/javascript">
            <!--
                console.log("I'm executed.");
            //-->
            </script>
        </div>
    </div>
    <div data-role="content">
    Page content
    </div>
</div>

I was able to fix this by introducing the following line in your plugin right before the subpage gets created as page via .page():

            // filter out script tags as those are already executed
            newPage.contents().filter('script').remove();

Can't detect JQM version.

Line #51 has the following:

if ($.mobile.version >= 1.3) {

However, on my system. this returns false because $.mobile.version == "1.3.0".

Can't auto-show first sub-page.

I'd like for the first sub-page to automatically show itself when the page loads. For the life of me, I can't find a way to do this consistently.

My setup is:
Page A has link to Page B
Page B has several subpages (e.g. SubPage 1, SubPage 2). It also has a link back to Page A.

So first, I can get the "default sub-page" working if I browse directly to "Page B" (so that Page A was not hit first). I add some script to the page's "pageinit" event:

$(document).delegate("#PAGEA", "pageinit", function (event, data) {
$.mobile.changePage("#SUBPAGE1");
});

Note that if I add it to the subpage's pageinit event, it gets called waaaaaay too often. The behavior is too sporadic for me to nail down.

But second, if I browse to "Page A" first, and then click the link to "Page B", my script runs, but it doesn't actually show SubPage1.

I've tried every combination of pageinit and pagechange events on both "Page A" and "SubPage 1", and nothing works.

However, I can get my code to select SubPage1 if I click around enough. Again, this is too sporadic for me to nail down. But it has something to do with the URL portion before the hash ("#") changing.

Based on my observation in the above paragraph, I could conclude that I can only set the default subpage if the URL before the hash is whatever it was on the first page hit.