Search jQuery

jQuery Forum

Screen name:
ahutchjq

ahutchjq's Profile

2 Posts

2 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Returning to the root page - back button, #page_id, or data-ajax=false
[2Replies]
- 18-Aug-2011 11:45 PM
- Forum: jQuery Mobile
I put on my JQM page

<a href="/" data-role="button" data-rel="back" >Home</a>
- If this page is the first page loaded then the back button is clicked which is NOT "/"

<a href="/" data-role="button" >Home</a>
- If this page is the second page (sub page) and the first is "/" then JQM loads a second "/" as a sub page.

<a href="#home" data-role="button" >Home</a>
- Only works if #home is already loaded and the current page is not #home

So what home link do I put on a page that can be loaded by itself or as a sub page? The only way I can be sure to get to the home page is to turn off JQM loading!
<a href="/" data-role="button" data-ajax="false" >Home</a>

Why cant I have
<a href="/" data-role="button" data-rel="back-check" >Home</a>
Where JQM will try to perform a back if the back button keeps you within the current JQM page. Otherwise it will perform a full reload of the href? Or <a href="/" data-role="button" data-rel="firstpage" >Home</a>

Any ideas?

Replacing and injecting HTML into a page, (dynamic page, dynamic dialog)
[1Reply]
- 10-May-2011 12:15 AM
- Forum: jQuery Mobile
I have read a lot of posts about updating form elements and injecting html into an already loaded page. To me this seems an important part of any dynamic site. For example, on a form submission I either want to return a dialog indicating the next step or return the user to the form with errors indicated. The problem is that any new/replaced HTML elements are not styled.

I have read that using $(#element).page will work, but this does not work on an existing page and should not be used in general unless you are creating a page. I have also read that you should change the content of an element and use xxx("refresh"). Refreshing an element is only useful if you only need to update its content. Refreshing elements does not work well with partials or if you need to add/remove/change elements.

The code to re-parse an element is already written. Is just not exposed in a useful way. I propose that a function for re-parsing a portion of a page (or current active page) be added to the API. That way when I am updating more than just a list I can easily re-style the page.

By the time I identified all of the elements I update I ended up pulling the code from page.. Please make the styling code available for me to call from jquery mobile
1. function refreshElem(element) {
3. var keepNative = ":jqmData(role='none'), :jqmData(role='nojs')"
5. //some of the form elements currently rely on the presence of ui-page and ui-content
6. // classes so we'll handle page and content roles outside of the main role processing
7. // loop below.
8. element.find( ":jqmData(role='page'), :jqmData(role='content')" ).andSelf().each(function() {
9. $(this).addClass( "ui-" + $(this).jqmData( "role" ) );
10. });
12. element.find( ":jqmData(role='nojs')" ).addClass( "ui-nojs" );
14. // pre-find data els
15. var $dataEls = element.find( ":jqmData(role)" ).andSelf().each(function() {
16. var $this = $( this ),
17. role = $this.jqmData( "role" ),
18. theme = $this.jqmData( "theme" );
20. switch(role) {
21. case "collapsible":
22. case "fieldcontain":
23. case "navbar":
24. case "listview":
25. $this[ role ]();
26. break;
27. }
28. });
31. var allControls = element.find("input, textarea, select, button");
32. var nonNativeControls = allControls.not(keepNative);
34. var textInputs = allControls.filter( "input[type=text]" );
35. if (textInputs.length && typeof textInputs[0].autocorrect !== "undefined") {
36. textInputs.each(function(){
37. // Set the attribute instead of the property just in case there
38. // is code that attempts to make modifications via HTML.
39. this.setAttribute("autocorrect", "off");
40. this.setAttribute("autocomplete", "off");
41. });
42. }
44. // enchance form controls
45. nonNativeControls
46. .filter( "[type='radio'], [type='checkbox']" )
47. .checkboxradio();
49. nonNativeControls
50. .filter( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
51. .button();
53. nonNativeControls
54. .filter( "input, textarea" )
55. .not( "[type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset'], [type='image'], [type='hidden']" )
56. .textinput();
58. nonNativeControls
59. .filter( "input, select" )
60. .filter( ":jqmData(role='slider'), :jqmData(type='range')" )
61. .slider();
63. nonNativeControls
64. .filter( "select:not(:jqmData(role='slider'))" )
65. .selectmenu();
67. //links in bars, or those with data-role become buttons
68. element.find( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a" )
69. .not( ".ui-btn" )
70. .not(keepNative)
71. .buttonMarkup();
73. element
74. .find(":jqmData(role='controlgroup')")
75. .controlgroup();
77. //links within content areas
78. element.find( "a:not(.ui-btn):not(.ui-link-inherit)" )
79. .not(keepNative)
80. .addClass( "ui-link" );
82. }

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend