jQuery Forum

I have div, which is set to "display: none" via css.  When a user pushes a button I make the div visible

I have a thumbnail image, which I like to link to a bigger image.  With my initial attempt, clicking on the thumbnail would go to the proper link, but I wouldn't see the image.  Instead I would just see is "undefined" show up as text in the browser.  If I refresh the page the image displays fine.

Here's the code:

<a href="/images/users/317_profile_orig.jpg"> <img id="myimg" class="profile_img" src="/images/users/317_thumb.jpg" alt = "img"/></a>

My app is quite large, therefore I'm going to move content that isn't frequently accessed (like settings, for example) into other files.  One problem with doing this however, is that if you reload a sub page with a web browser the jqm style won't get applied.  To get around this, I'd like to redirect the user back to the main page if they've tried reloading the subpage with their browser.

My web app is about a 445 KB download when the cache is empty.  To reduce this size and increase the loading time I'd like to initially serve a subset of javascript and fetch more javascript when needed.  For example, I could fetch more javascript when someone clicks on the settings button.  I've researched a little bit and I believe this is referred to as lazy loading.

It seems like this should clear form elements:

Guys, I apologize for such a vague request, but I'm wondering if some of the experts wouldn't mind checking out my site to recommend some performance enhancements?  The site runs fast on my macbook pro with safari, but when I use my iPod touch it runs painfully slow. 

When I choose a select menu option with iPhone, the entire page zooms in, which is quite annoying because this forces users to manually pinch-zoom-out after they make a selection.  I thought I might have a bug in my code causing this until I tried the jquery mobile demo page, which is located here:

I'm using JQM 1.0 RC2 and seeing button click events fire twice on my android phone.  Is anyone else experiencing this?  I can provide more detail if necessary.  Thanks...

Is it better to register event handlers for your app from within mobileinit ( i.e. $(document).bind('mobileinit', function(){  ) or from within pageshow events?

I have a signup page that does form validation on the username and password inputs and I've found some odd behavior with it.  I'm wondering if this is something to do with the jquery mobile framework or if it's a bug of my own.

My app has 4 pages, each of which are loaded by clicking a button on a navbar.  This is pretty standard.

Hi, I don't know if anyone can help with this one or not, but it's driving me nutty....

My login page is rendered as a dialog by using data-rel="dialog" on the link like this:

1. <a id="login" href="pages/login.php" data-rel="dialog" class="ui-btn-right login">Login</a>

The problem I''m having is that closing the dialog by clicking on the round x in the upper left hand corner doesn't always close the dialog.  It's seems to work fine if do this sequence:

1. Load my main page with a web browser (by main page I mean that this file has a lot of data-role="page" divs in it)  The url is http://www.mysite.com/feed/1.php
   
2. Click on the login button.  The url is http://www.mysite.com/feed/1.php#feed&ui-state=dialog
   
3. Click close on the login page.  The url is http://www.mysite.com/feed/1.php.
   

This works great, in that I see the first page again.

If, instead, I do this, it doesn't work:

1. Load my main page with a web browser.  The url is http://www.mysite.com/feed/1.php
   
2. Click on a link in my navbar that loads a different page.  The url is http://www.mysite.com/feed/1.php#weather
   
3. Click on the login button. The url is http://www.mysite.com/feed/1.php#weather&ui-state=dialog
   
4. Click close.  The dialog page doesn't close.  Firefox shows this in the address bar: http://www.mysite.com/feed/1.php#weather

If I click close again (after step 4) I get back to the first page and the address in the address bar is this:
http://www.mysite.com/feed/1.php

I don't see any errors reported in the firebug console.  Does anyone have any ideas?  I'm happy to explain further if anything is unclear.  Thank you.

Hi,
I have a navbar with 4 buttons.  One of the buttons links to a "settings" page.  If the user is not logged in I'd like to redirect them to a login page.

The code below redirects them okay, but it makes the navbar behave oddly in that the settings button in the navbar gets highlighted  sometimes when I push on other buttons.

1.   $('.settings_button').live('tap',function(event) {
2.       event.preventDefault(); //Prevent the normal link action
3.       if(!user_logged_in) {
4.          $(".settings_button").removeClass("ui-btn-active ui-state-persist");
5.          $.mobile.changePage("pages/login.php");
6.       } else {
7.          $.mobile.changePage($("#settings"));
8.       }
9.   });

Any ideas as to what would cause the settings button to be highlighted when I'm on other pages?

This is the navbar code that I have on page one.  All the other pages have the same code except that the classes ui-btn-active and ui-state-persist are applied to which ever page is loaded.

1.     <div data-role="navbar">
2.         <ul>
3.             <li><a href="#one" class="ui-btn-active ui-state-persist">One</a></li>
4.             <li><a href="#two">Two</a></li>
5.             <li><a href="pages/three.php">Three</a></li>
6.             <li><a href="#" class="settings_button">Settings</a></li>
7.         </ul>
8.     </div><!-- /navbar 1 -->

Update: I just used firebug and verifeied that the ui-btn-active class is active on the Settings page when I navigate away from that to the "One" page.

If anyone can think of an alternative to redirecting the user please let me know.  Thanks...

I use ajax to fetch data then create some elements of my webpage dynamically.  I've not been able to get the jquery mobile css applied to the textarea.  Refreshing form elements is covered at the bottom of this page, but I don't see anything about textareas: http://jquerymobile.com/test/docs/api/events.html#/test/docs/forms/docs-forms.html

Does anyone know how to do this?

My main page is here:
http://www.mydomain.com/main/main.php

My login page is here:
http://www.mydomain.com/main/pages/login.php

Main.php uses ajax to fetch data in response to a tap event.  This works fine until I navigate to my login page and then back to my main page.  After going to the login page and back, the relative paths get messed up such that the ajax looks for server file in the wrong place.

here is the ajax:

1. function get_more_data() {
2.    more_data_index += 15;
3.    var formData = "index=" + more_data_index;
4.     $.ajax({
5.       type: "POST",
6.       url: "genxml.php", // file located here:  http://www.mydomain.com/main/genxml.php
7.       cache: false,
8.       data: formData,
9.       dataType: "xml",
10.       success: showFiles3,
11.       error: onErrorMoreData
12.     });
13. }

After I navigate back to main.php from login.php the ajax tries posting to the wrong location:
http://www.mydomain.com/main/pages/genxml.php

(genxml.php is not in the "pages" subdirectory; it's in the main directory.)

I tried updating the ajax to use an absolute path:
url: "http://www.mydomain.com/main/genxml.php"

This made the post successful, but my data parsing failed because relatives paths are used in the main file for things like images.  So instead of getting images from here: http://www.mydomain.com/main/ the script was trying to get images from here: http://www.mydomain.com/main/pages/.

This must be a common issue.  I've tried reading the jquerymobile docs and forum, but I've not found a solution yet.  It's very possible that the jquery developers attempt to cover this issue here, but I admit I don't completely understand everything on this page:
http://jquerymobile.com/demos/1.0b3/#/demos/1.0b3/docs/pages/page-navmodel.html

If anyone can help I would really appreciate it.  Thanks.

P.S. This issue happens on Android and Google Chrome, but not in Firefox. 

P.S.S. I found some other people having similar issues but I didn't see any solutions:
https://github.com/jquery/jquery-mobile/issues/663

http://stackoverflow.com/questions/5338244/assets-loaded-using-ajax-based-jquery-mobiles-page-navigation-model-have-wrong-u

I have a collapsible container that contains a form.  If the user is logged in I want to show the form.  If they are logged out I want to show a dialog page instead, which has a login form.  Does anyone know how I can stop the collapsible content from showing when the user is logged out?

I've tried this:

1. $('#mypage').live('pageshow',function(event, ui){
   
2.   $("#mybutton").live('tap',function(event) {
3.     if(user_logged_in) {
4.       $.mobile.changePage( "pages/login.php", 'dialog');
5.       return false;  // I tried this to prevent the collapsible content from showing.  it was just
6.                        // a guess and it didn't work
   
7.     }
8.   });
9. }); // .live('pageshow'...
   

And here's the html:

1. <div data-role="collapsible" data-collapsed="true" data-theme="a">
2. <h3 id="mybutton">Show Content</h3>
   
3. // form stuff here...
4. </div>
   

Any help is greatly appreciated.  Thanks

update: I just tried putting the id on the div instead of the button (I think this makes more sense), but  still no luck:

1. <div id="mybutton" data-role="collapsible" data-collapsed="true" data-theme="a">

ah... wait: putting the id on the div doesn't seem to be good because the tap handler gets called when I click on form elements too.  Guess I'll put the id back on the h3 element for now.

I've made my own popup div by toggling the css display of a div from none to block.  I'd like to apply the same styling that the jqm dialog page uses on (data-rel="dialog").  Is there a simple way to go about applying the style or do I need to manually go about it using something like Firebug to copy and paste the css?  (it looks quite complicated in Firebug)

By the way, I'm doing this because the dialog page takes too long to load compared to a simple popup.

Thanks.

I'm trying to use a dialog to show info when a google map marker is clicked on:

1.  $.mobile.changePage("popup.html", {role: "dialog"} );

One problem that I'm having with this is that when I close the dialog and return to the map page the pagecreate event is triggered.  This causes my page to hit the server again to fetch the map markers and redraw the map:

1.     $('.page-map').live("pagecreate", function() {
2.       initialize();  // this function uses ajax to get map markers
3.     });

It's inefficient to hit the server again to create the map - it's slows things down.  Also, my map ends up getting repositioned back to its initial center and zoom values, which is annoying.

Does anyone have any ideas on what I could try to make this work better?  Is it possible to stop the pagecreate from firing when I dismiss the dialog?  Is there another alert dialog method that I should try?  (I've implemented my own in the past, but would prefer not to do that.)

By the way, initially I tried using a plain 'ole javascript alert.  That worked very fast (and didn't reload the map, which I liked) but I couldn't figure out how to format the data within the alert window with html and css (maybe you can't).

Thanks...

I have a form which has an input button in place of a submit button.  I have a click event associated with the button which submits the form via .ajax.  This all works fine if the input button is pushed, but it doesn't work if the iphone GO button is pushed instead.

For example:

1. page initially loads at this url: http//mywebsite.com/dir/example.php.
2. click "page2" button on navbar and url is: http//mywebsite.com/dir/example.php#page2.
3. click on an input text field, then click the iphone "GO" button and url becomes  http//mywebsite.com/dir/example.php#/dir/example.php (which is not the desired url)

If I click the input button instead of clicking the iphone's GO button the url remains as http//mywebsite.com/dir/example.php#page2, as it should.

I think the iphone may need a real submit button in the form to work properly.  I tried changing the input button to a submit and changed my "click" handler to a "submit" handler, but I got the exact same behavior.  Suspecting this might have something to do with jquery mobile's ajax I tried adding data-ajax="false" to my form element, but this didn't change anything.

Any suggestions on how to get my form submit to work regardless of which method is used?  (iphone GO or button push.)

Here's an example of the code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <title>Page Title</title>
7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
8. <script src="/A2EB891D63C8/avg_ls_dom.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
9. <script type="text/javascript">
10. var data="";
11. $( function() {
12.   $("#my_submit").submit(function(){
13.     $.mobile.pageLoading();
14.     data = "some_data_to_pass_to_script";
15.     do_ajax();
16.   });
17. });
18. function do_ajax() {
19.   $.ajax({
20.     type: "POST",
21.     url: "my_script.php",
22.     cache: true,
23.     data: encodeURIComponent("some_data_to_pass_to_script"),
24.     success: onSuccess,
25.     error: onError
26.   });
27. }
28. function onError(data, status) {
29.   $.mobile.pageLoading( true );
30.   alert('error');
31. }    
32. function onSuccess(data, status) {
33.   $.mobile.pageLoading( true );
34.   alert('success');
35. }
36. </script>
37. <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
38. </head>
39. <body>
40. <div data-role="page" id="page1">
41. <div data-role="header">
42. <h1>Header</h1>
43. <div data-role="navbar">
44. <ul>
45. <li><a href="#page1" class="ui-btn-active ui-state-persist">Page 1</a></li>
46. <li><a href="#page2">Page 2</a></li>
47. </ul>
48. </div><!-- /navbar -->
49. </div><!-- /header -->
50. <div data-role="content">   
51. <p>content...</p>
52. </div><!-- /content -->
53.    
54. <div data-role="footer">
55. <h4>Footer content</h4>
56. </div><!-- /footer -->
57.    
58. </div><!-- /page -->
59. <div data-role="page" id="page2">
60. <div data-role="header">
61. <h1>Header</h1>
62. <div data-role="navbar">
63. <ul>
64. <li><a href="#page1">Page 1</a></li>
65. <li><a href="#page2" class="ui-btn-active ui-state-persist">Page 2</a></li>
66. </ul>
67. </div><!-- /navbar -->
68. </div><!-- /header -->
69. <div data-role="content" data-theme="a">
70. <form>   
71. <input type="text" data-theme="a"/>
72. <input id="my_submit" type="submit" value="My submit" data-theme="a" action="post"/>
73. </form>
74. </div>
75.    
76. <div data-role="footer">
77. <h4>Footer content</h4>
78. </div><!-- /footer -->
79.    
80. </div><!-- /page -->
81. </body>
82. </html>

EDIT: Actually just realized this issue can be generalized to desktop browsers too.  The form doesn't submit properly if I click Enter from the browser.

I have a select menu, which is used to choose a location.  I also have a button which is used to get information about the chosen location.  Ajax is used to fetch the data, and the data is shown within a div element on my page.  I've found that I need to click the button twice for the div element to update properly.  Oddly, if I add an alert function to display the data the div always updates fine (without needing to push the button twice).

Here's is the code:

1. $( function() {
2.   $("#weather_submit").click(function(){
3.     $.mobile.pageLoading();
4.     var formData = $("#getWeatherForm").serialize();
5.     $.ajax({
6.       type: "POST",
7.       url: "weather.php",
8.       cache: false,
9.       data: formData,
10.       success: onSuccessWeather,
11.       error: onError
12.     });
13.     return false;
14.   });
15. });
16. function onError(data, status) {
17.   $.mobile.pageLoading( true );
18.   alert('error');
19. }    
20. function onSuccessWeather(data, status) {
21.   $.mobile.pageLoading( true );
22. //alert(data);  // if I use this line of code I never have a problem (i.e. the weatherSummary div updates appropriately
    
23.   data = $.trim(data);
24.   $("#weatherSummary").html(data);
25. }

Any ideas about what might be causing this?

I'm attempting my first submit with jquery, but it's not going well.

I've got two ajax calls.  One happens when the page loads.  That one is successful.  The other is associated with a submit click event, but it never fires.  Instead, when I click on submit, the whole page reloads.

Here's the relevant javascript:

1. $(document).bind('mobileinit', function(){
2. 
   
3.   $('#weather').live('pageshow',function(event, ui){  //this works when the page loads
   
4.     $.mobile.pageLoading();
5.     var mydata = '&lat='+lat+'&lng='+lng;
6.     $.ajax({
7.       type: "GET",
8.       url: "http://mywebsite/get_location_list.php",
9.       data: mydata,
10.       cache: false,
11.       dataType: "html",
12.       success: onSuccessLocationList
13.     });
14.   });
15.   $("#resultLog").ajaxError(function(event, request, settings, exception) {
16.     $("#resultLog").html("Error Calling: " + settings.url + "<br />HTPP Code: " + request.status);
17.   });
18. 
    
19.   $("#weather_submit").click(function(){
20.    alert("submit handler called");  // this function doesn't get called when i click on submit
    
21.     var formData = $("#getWeatherForm").serialize();
22.     $.ajax({
23.       type: "POST",
24.       url: "weather.php",
25.       cache: false,
26.       data: formData,
27.       success: onSuccessWeather,
28.       error: onError
29.     });
30.     return false;
31.   });
32. });
33. 
    
34. function onSuccessWeather(data, status) {
35. alert("hi");  // have not seen this happen
    
36.   data = $.trim(data);
37.   $("#weatherSummary").text(data);
38. }
39. function onSuccessLocationList(data) {
40.   $.mobile.pageLoading( true );
41.   alert(data);
42.   $("#resultLog").html("Choose location: " + data);
43.  $("#location").selectmenu();
44.  $("#location").selectmenu("refresh",true);
45. }
46. 
    
47. function onError(data, status) {
      alert('error'); // haven't seen this happen
    }
    

and the relevant html:

1.   <div data-role="content" data-theme="a">
2.     <form id="getWeatherForm"">   
3.       <div id="resultLog"></div>
4.       <div class="spacer"></div>
5.       <input id="weather_submit" type="submit" value="Get Weather" data-theme="a"/>
6.     </form>
7.   <div id="weatherSummary"></div>
8.   </div><!-- /content -->

Any ideas?

Thanks.

I'm trying to add some space between form elements.

I would have thought something as simple as this would have done it.

my css rule:

1. .ui-button-custom {
2.   margin-top:100px;
3. }

my html:

1. <input id="callAjax" type="button" value="Get Weather" data-theme="a" class="ui-button-custom"/>

But that doesn't work.  I've searched through this forum and the documentation, but haven't found out how to do this yet.

Any ideas?

Thanks...