I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code.

    &lt;script type=text/javascript&gt;
      function validate(){
        if (remember.checked == 1){
          alert(&quot;checked&quot;) ;
        } else {
          alert(&quot;You didn&#39;t check it! Let me check it for you.&quot;)
        }
      }
    &lt;/script&gt;

    &lt;input id=&quot;remember&quot; name=&quot;remember&quot; type=&quot;checkbox&quot; onclick=&quot;validate()&quot; /&gt;

But for some reason or another it doesn&#39;t execute it.

Please help !


----EDIT-----
This is what I have for the moment.

    &lt;DIV data-role=&quot;content&quot; data-theme=&quot;g&quot;&gt;
    	&lt;DIV class=ui-grid-g-login&gt;
    		&lt;FORM method=post action=[$=PROBE(266)/] data-theme=&quot;C&quot;&gt;
    			&lt;P&gt;~DATA_ERROR~&lt;/P&gt;
    			&lt;div id=&quot;mail&quot; data-role=&quot;fieldcontain&quot;&gt;
    				&lt;label for=&quot;mail&quot;&gt;Email:*&lt;/label&gt;		
    				&lt;input id=&quot;mail&quot; name=&quot;mail&quot; type=&quot;email&quot; /&gt;
    			&lt;/div&gt;
    			&lt;div id=&quot;pass&quot; data-role=&quot;fieldcontain&quot;&gt;
    				&lt;label for=&quot;pass&quot;&gt;Paswoord:*&lt;/label&gt;		
    				&lt;input id=&quot;pass&quot; name=&quot;pass&quot; type=&quot;password&quot; /&gt;
    			&lt;/div&gt;
     			&lt;div id=&quot;remember&quot; data-role=&quot;fieldcontain&quot;&gt;
    				&lt;label for=&quot;remember&quot;&gt;Onthoud mij&lt;/label&gt;		
    				&lt;input id=&quot;remember&quot; name=&quot;remember&quot; type=&quot;checkbox&quot; onclick=&quot;validate()&quot; /&gt;
    			&lt;/div&gt;
    			&lt;P&gt;&lt;INPUT class=btn name=submit value=Login type=submit  onclick=&quot;validate()&quot;&gt;&lt;/P&gt;	
    		&lt;/FORM&gt;
    	&lt;/DIV&gt;
    &lt;/DIV&gt;&lt;!-- /content --&gt;
    
    &lt;script type=text/javascript&gt;
    function validate(){
        var remember = document.getElementById(&#39;remember&#39;);
        if (remember.checked){
            alert(&quot;checked&quot;) ;
        }else{
            alert(&quot;You didn&#39;t check it! Let me check it for you.&quot;)
        }
    }
    &lt;/script&gt;

----EDIT--

Solved it, the problem was that the fieldcontain was also named &#39;remember&#39;

How can I check if a checkbox is checked?

I am using jQuery Mobile, and I am having trouble understanding differences between classic document ready and jQuery Mobile page events.

1. What is the real difference?

    Why should

        &lt;!-- language: lang-js --&gt;

        $(document).ready() {

        });

    be better than

    &lt;!-- language: lang-js --&gt;

        $(document).on(&#39;pageinit&#39;) {

        });

2. What is the order of page events, when you transition from one page to another?

3. How can I send data from one page to another and is it possible to access data from previous page?


jQuery Mobile: document ready vs. page events

Is it possible to implement &quot;long press&quot; in JavaScript (or jQuery)? How?

[![alt text][1]][1]  
&lt;sub&gt;(source: [androinica.com](http://androinica.com/wp-content/uploads/2009/11/longpress_options.png))&lt;/sub&gt;  


**HTML**

    &lt;a href=&quot;&quot; title=&quot;&quot;&gt;Long press&lt;/a&gt;

**JavaScript**

    $(&quot;a&quot;).mouseup(function(){
      // Clear timeout
      return false;
    }).mousedown(function(){
      // Set timeout
      return false; 
    });

[1]: https://i.stack.imgur.com/7QiwZ.png

Long Press in JavaScript?

What is the difference between [jQTouch][1] &amp; [jQuery Mobile Framework][2] ?

Are they related (other than being both based on jQuery) ?

Do they have the same goal ?


  [1]: http://jqtjs.com/
  [2]: http://jquerymobile.com/

**Edit:** jQTouch is now jQT

Difference between jQTouch and jQuery mobile

I am linking to the jQuery Mobile stylesheet on a CDN and would like to fall back to my local version of the stylesheet if the CDN fails. For scripts the solution is well known:

    &lt;!-- Load jQuery and jQuery mobile with fall back to local server --&gt;
    &lt;script src=&quot;http://code.jquery.com/jquery-1.6.3.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      if (typeof jQuery == &#39;undefined&#39;) {
        document.write(unescape(&quot;%3Cscript src=&#39;jquery-1.6.3.min.js&#39;%3E&quot;));
      }
    &lt;/script&gt;

I would like to do something similar for a style sheet:

    &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css&quot; /&gt;

I am not sure if a similar approach can be achieved because I am not sure whether the browser blocks in the same way when linking a script as it does when loading a script (maybe it is possible to load a stylesheet in a script tag and then inject it into the page) ?	


So my question is: How do I ensure a stylesheet is loaded locally if a CDN fails ?


How to fallback to local stylesheet (not script) if CDN fails

I&#39;m wondering if someone can give some advice as to which is &#39;better&#39;.  Twitter-bootstrap or JQuery mobile?

Thanks,
-peter

twitter-bootstrap vs jquery-mobile

What is the correct way (to this date) to use JQuery Mobile and Phonegap together?

Both frameworks need to load before they can be used. How can I be sure that both are loaded before I can use them?

Correct way of using JQuery-Mobile/Phonegap together?

I have a page with a section to sketch a drawing in.  But the touchmove events, at least the vertical ones, are also scrolling the page (which degrades the sketching experience) when using it on a mobile browser.  Is there a way to either a) disable &amp; re-enable the scrolling of the page (so I can turn it off when each line is started, but turn it back on after each is done), or b) disable the default handling of touchmove events (and presumably the scrolling) that go to the canvas the sketch is drawn in (I can&#39;t just disable them completely, as the sketching uses them)?

I&#39;ve used jquery-mobile vmouse handlers for the sketch, if that makes a difference.

**Update**: On an iPhone, if I select the canvas to be sketched in, or just hold my finger for a bit before drawing, the page doesn&#39;t scroll, and not because of anything I coded in the page.

Disable scrolling when touch moving certain element

I&#39;m new to web development and there are just too many j* stuff out there. I wonder what are the differences between these frameworks? 

Moreover, why do people talk a lot about making a plugin using jQuery? Isn&#39;t it supposed to be a JavaScript library to make your web page more interactive?

jQuery vs jQuery Mobile vs jQuery UI?

I&#39;m new to mobile web development, and I just made a mobile-app with PhoneGap, employing frequent use of jQuery.

But there were naturally a couple of glitches related to how I formatted things and the way they actually appeared on the mobile device screens I was testing with, and in trying to work these out I stumbled across many suggestions to make things easier on myself by using jQuery mobile.

Now this confuses me-- jQuery had no roll in formatting. That was just my beginner&#39;s level knowledge of mobile CSS that caused the problems.

So what exactly does jQuery mobile do, and how is it different from ordinary jQuery? If I already know jQuery, what&#39;s going to be new to me?

Difference between jQuery and jQuery Mobile?

I&#39;ve read that [ mobile Safari has a 300ms delay on click events][1] from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends to double-click, but from a UX perspective waiting 300ms is often undesirable.

[One solution][2] to eliminate this 300ms delay is to use jQuery Mobile &quot;tap&quot; handling. Unfortunately I&#39;m not familiar with this framework and don&#39;t want to load some big framework if all I need is a line or two of code applying `touchend` in the right way.



Like many sites, my site has many click events like this: 

    $(&quot;button.submitBtn&quot;).on(&#39;click&#39;, function (e) {   
      $.ajaxSubmit({... //ajax form submisssion
    });

    $(&quot;a.ajax&quot;).on(&#39;click&#39;, function (e) {   
      $.ajax({... //ajax page loading
    });

    $(&quot;button.modal&quot;).on(&#39;click&#39;, function (e) {   
          //show/hide modal dialog
    });
    

and what I&#39;d like to do is to get rid of the 300ms delay on **ALL** those click events using a single code snippet like this:

    $(&quot;a, button&quot;).on(&#39;tap&#39;, function (e) {
     $(this).trigger(&#39;click&#39;);
     e.preventDefault();
    });

Is that a bad/good idea? 


  [1]: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE.
  [2]: http://www.mikedellanoce.com/2012/09/10-tips-for-getting-that-native-ios.html

Eliminate 300ms delay on click events in mobile Safari

I would like to build a mobile app, brewed from nothing more but html/css and JavaScript. While I have a decent knowledge of how to build a web app with JavaScript, I thought I might have a look into a framework like jquery-mobile.

At first, I thought jquery-mobile was nothing more then a widget framework which targets mobile browsers. Very similar to jquery-ui but for the mobile world. But I noticed that jquery-mobile is more than that. It comes with a bunch of architecture and let&#39;s you create apps with a declarative html syntax. So for the most easy thinkable app, you wouldn&#39;t need to write a single line of JavaScript by yourself (which is cool, because we all like to work less, don&#39;t we?)

To support the approach of creating apps using a declarative html syntax, I think it&#39;s a good take to combine jquery-mobile with knockoutjs. Knockoutjs is a client-side MVVM framework that aims to bring MVVM super powers known from WPF/Silverlight to the JavaScript world.

For me MVVM is a new world. While I have already read a lot about it, I have never actually used it myself before.

So this posting is about how to architecture an app using jquery-mobile and knockoutjs together. My idea was to write down the approach that I came up with after looking at it for several hours, and have some jquery-mobile/knockout yoda to comment it, showing me why it sucks and why I shouldn&#39;t do programming in the first place ;-)

**The html**

jquery-mobile does a good job providing a basic structure model of pages. While I am well aware that I could have my pages to be loaded via ajax afterwards, I just decided to keep all of them in one index.html file. In this basic scenario we are talking about two pages so that it shouldn&#39;t be too hard to stay on top of things.

	&lt;!DOCTYPE html&gt; 
	&lt;html&gt; 
	  &lt;head&gt; 
	  &lt;title&gt;Page Title&lt;/title&gt; 
	  &lt;link rel=&quot;stylesheet&quot; href=&quot;libs/jquery-mobile/jquery.mobile-1.0a4.1.css&quot; /&gt;
	  &lt;link rel=&quot;stylesheet&quot; href=&quot;app/base/css/base.css&quot; /&gt;
	  &lt;script src=&quot;libs/jquery/jquery-1.5.0.min.js&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;libs/knockout/knockout-1.2.0.js&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;libs/knockout/knockout-bindings-jqm.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;libs/rx/rx.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;app/App.js&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;app/App.ViewModels.HomeScreenViewModel.js&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;app/App.MockedStatisticsService.js&quot;&gt;&lt;/script&gt;
	  &lt;script src=&quot;libs/jquery-mobile/jquery.mobile-1.0a4.1.js&quot;&gt;&lt;/script&gt;  
	&lt;/head&gt; 
	&lt;body&gt; 

	&lt;!-- Start of first page --&gt;
	&lt;div data-role=&quot;page&quot; id=&quot;home&quot;&gt;

		&lt;div data-role=&quot;header&quot;&gt;
			&lt;h1&gt;Demo App&lt;/h1&gt;
		&lt;/div&gt;&lt;!-- /header --&gt;

		&lt;div data-role=&quot;content&quot;&gt;   

		&lt;div class=&quot;ui-grid-a&quot;&gt;
			&lt;div class=&quot;ui-block-a&quot;&gt;
				&lt;div class=&quot;ui-bar&quot; style=&quot;height:120px&quot;&gt;
					&lt;h1&gt;Tours today (please wait 10 seconds to see the effect)&lt;/h1&gt;
					&lt;p&gt;&lt;span data-bind=&quot;text: toursTotal&quot;&gt;&lt;/span&gt; total&lt;/p&gt;
					&lt;p&gt;&lt;span data-bind=&quot;text: toursRunning&quot;&gt;&lt;/span&gt; running&lt;/p&gt;
					&lt;p&gt;&lt;span data-bind=&quot;text: toursCompleted&quot;&gt;&lt;/span&gt; completed&lt;/p&gt;     
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;fieldset class=&quot;ui-grid-a&quot;&gt;
			&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button data-bind=&quot;click: showTourList, jqmButtonEnabled: toursAvailable&quot; data-theme=&quot;a&quot;&gt;Tour List&lt;/button&gt;&lt;/div&gt;  
		&lt;/fieldset&gt;

		&lt;/div&gt;&lt;!-- /content --&gt;

		&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
			&lt;h4&gt;by Christoph Burgdorf&lt;/h4&gt;
		&lt;/div&gt;&lt;!-- /header --&gt;
	&lt;/div&gt;&lt;!-- /page --&gt;

	&lt;!-- tourlist page --&gt;
	&lt;div data-role=&quot;page&quot; id=&quot;tourlist&quot;&gt;

		&lt;div data-role=&quot;header&quot;&gt;
			&lt;h1&gt;Bar&lt;/h1&gt;
		&lt;/div&gt;&lt;!-- /header --&gt;

		&lt;div data-role=&quot;content&quot;&gt;   
			&lt;p&gt;&lt;a href=&quot;#home&quot;&gt;Back to home&lt;/a&gt;&lt;/p&gt; 
		&lt;/div&gt;&lt;!-- /content --&gt;

		&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
			&lt;h4&gt;by Christoph Burgdorf&lt;/h4&gt;
		&lt;/div&gt;&lt;!-- /header --&gt;
	&lt;/div&gt;&lt;!-- /page --&gt;

	&lt;/body&gt;
	&lt;/html&gt;

**The JavaScript**

So let&#39;s come to the fun part - the JavaScript! 

When I started to think about layering the app, I have had several things in mind (e.g. testability, loose coupling). I&#39;m going to show you how I decided to split of my files and comment things like why did I choose one thing over another while I go...

*App.js*

	var App = window.App = {};
	App.ViewModels = {};

	$(document).bind(&#39;mobileinit&#39;, function(){
		// while app is running use App.Service.mockStatistic({ToursCompleted: 45}); to fake backend data from the console
		var service = App.Service = new App.MockedStatisticService();    

	  $(&#39;#home&#39;).live(&#39;pagecreate&#39;, function(event, ui){
			var viewModel = new App.ViewModels.HomeScreenViewModel(service);
			ko.applyBindings(viewModel, this);
			viewModel.startServicePolling();
	  });
	});

App.js is the entry point of my app. It creates the App object and provides a namespace for the view models (soon to come). It listenes for the *mobileinit* event which jquery-mobile provides.

As you can see, I&#39;m creating a instance of some kind of ajax service (which we will look at later) and save it to the variable &quot;service&quot;.

I also hook up the *pagecreate* event for the home page in which I create an instance of the viewModel that gets the service instance passed in. This point is essential to me. If anybody thinks, this should be done differently, please share your thoughts!

The point is, the view model needs to operate on a service (GetTour/, SaveTour etc.). But I don&#39;t want the ViewModel to know any more about it. So for example, in our case, I&#39;m just passing in a mocked ajax service because the backend hasn&#39;t been developed yet.

Another thing I should mention is that the ViewModel has zero knowledge about the actual view. That&#39;s why I&#39;m calling ko.applyBindings(viewModel, this) from within the *pagecreate* handler. I wanted to keep the view model seperated from the actual view to make it easier to test it.
 
*App.ViewModels.HomeScreenViewModel.js*

	(function(App){
	  App.ViewModels.HomeScreenViewModel = function(service){
		var self = {}, disposableServicePoller = Rx.Disposable.Empty;

		self.toursTotal = ko.observable(0);
		self.toursRunning = ko.observable(0);
		self.toursCompleted = ko.observable(0);
		self.toursAvailable = ko.dependentObservable(function(){ return this.toursTotal() &gt; 0; }, self);
		self.showTourList = function(){ $.mobile.changePage(&#39;#tourlist&#39;, &#39;pop&#39;, false, true); };        
		self.startServicePolling = function(){  
			disposableServicePoller = Rx.Observable
				.Interval(10000)
				.Select(service.getStatistics)
				.Switch()
				.Subscribe(function(statistics){
					self.toursTotal(statistics.ToursTotal);
					self.toursRunning(statistics.ToursRunning); 
					self.toursCompleted(statistics.ToursCompleted); 
				});
		};
		self.stopServicePolling = disposableServicePoller.Dispose;      

		return self; 
	  };
	})(App)

While you will find most knockoutjs view model examples using an object literal syntax, I&#39;m using the traditional function syntax with a &#39;self&#39; helper objects. Basically, it&#39;s a matter of taste. But when you want to have one observable property to reference another, you can&#39;t write down the object literal in one go which makes it less symmetric. That&#39;s one of the reason why I&#39;m choosing a different syntax. 

The next reason is the service that I can pass on as a parameter as I mentioned before.

There is one more thing with this view model which I&#39;m not sure if I did choose the right way. I want to poll the ajax service periodically to fetch the results from the server. So, I have choosen to implement *startServicePolling*/*stopServicePolling* methods to do so. The idea is to start the polling on pageshow, and stop it when the user navigates to different page.

You can ignore the syntax which is used to poll the service. It&#39;s RxJS magic. Just be sure I&#39;m polling it and update the observable properties with the returned result as you can see in the *Subscribe(function(statistics){..})* part.

*App.MockedStatisticsService.js*

Ok, there is just one thing left to show you. It&#39;s the actual service implementation. I&#39;m not going much into detail here. It&#39;s just a mock that returns some numbers when *getStatistics* is called. There is another method *mockStatistics* which I use to set new values through the browsers js console while the app is running.

	(function(App){
		App.MockedStatisticService = function(){
			var self = {},
			defaultStatistic = {
				ToursTotal: 505,
				ToursRunning: 110,
				ToursCompleted: 115 
			},
			currentStatistic = $.extend({}, defaultStatistic);;

			self.mockStatistic = function(statistics){
				currentStatistic = $.extend({}, defaultStatistic, statistics);
			};

			self.getStatistics = function(){        
				var asyncSubject = new Rx.AsyncSubject();
				asyncSubject.OnNext(currentStatistic);
				asyncSubject.OnCompleted();
				return asyncSubject.AsObservable();
			};

			return self;
		};
	})(App)


Ok, I wrote much more as I initially planned to write. My finger hurt, my dogs are asking me to take them for a walk and I feel exhausted. I&#39;m sure there are plenty things missing here and that I put in a bunch of typos and grammer mistakes. Yell at me if something isn&#39;t clear and I will update the posting later.

The posting might not seem as an question but actually it is! I would like you to share your thoughts about my approach and if you think it&#39;s good or bad or if I&#39;m missing out things.


**UPDATE**

Due to the major popularity this posting gained and because several people asked me to do so, I have put the code of this example on github:

https://github.com/cburgdorf/stackoverflow-knockout-example

Get it while it&#39;s hot!


How to architecture a webapp using jquery-mobile and knockoutjs

I was wondering how can I enhance dynamically jQuery Mobile page?

I have tried to use these methods:

1. `$(&#39;[data-role=&quot;page&quot;]&#39;).trigger(&#39;create&#39;);`

   and

2. `$(&#39;[data-role=&quot;page&quot;]&#39;).page();`

Also how can I prevent enhancement markup of check boxes only?

jQuery Mobile: Markup Enhancement of dynamically added content

Does anyone know of a really good tutorial or sample project where Phonegap and jQuery Mobile is used for a real world example?

All the examples I found were showing fancy transitions or theming in jQuery Mobile. The Phonegap examples mostly showcases the Phonegap API.

I could not find a single example where Phonegap and jQuery Mobile was used to solve real world problems, such as writing a app that combines Phonegap and jQuery Mobile to do user input validation, saving the data, uploading data to a web service, etc.

Phonegap + jQuery Mobile, real world sample or tutorial

Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height.

As it stands the height of a jQuery page will change, especially as devices are rotated portrait to landscape, so the solution would have to take this into account.

Just to clarify - I don&#39;t need the footer to be at the bottom of viewport, just working so that the default page height doesn&#39;t drop below the viewport height.

Thanks.

jQuery Mobile: Stick footer to bottom of page

I wonder if I were to develop a mobile Web app (now, in two weeks, or in a month), which one should I go for? Which one would you mobile Web developers go for?

If jQM 1.0 were officially released today, I would most likely embrace it (as long as it actually delivers what it promises). Now that it is in alpha, I wonder whether it is worth to jump into it yet for a commercial grade project? Would Sencha Touch be a better alternative?

Sencha Touch or jQuery Mobile?

I am struggling somewhat with pre-compilation of templates in Handlebars. My jQuery Mobile project is getting pretty big template-wise and I wish to pre-compile the templates I use.

However I can&#39;t seem to find a good explanation (like a step by step tutorial) of how to do this with Handlebars.

I still have my templates all inline using the script tags. I have handlebars installed using NPM. But now I am kinda lost in how to proceed. 

I am guessing doing something like

    handlebars -s event.handlebars &gt; event.compiled

and somehow including the event.compiled contents? But then, how to call it.

I am calling my templates like so

    var source = $(&#39;#tmpl_profile&#39;).html(),
	template = Handlebars.compile(source),
	context = user.profile()),
	html    = template(context);

Hope someone can shed some light on this for me.

Using pre-compiled templates with Handlebars.js (jQuery Mobile environment)

I disable the button like this on my jQuery Mobile webpage:

    $(document).ready(function() {
        $(&quot;#deliveryNext&quot;).button();
        $(&quot;#deliveryNext&quot;).button(&#39;disable&#39;);
    });

and i can enable it with

    $(&quot;#deliveryNext&quot;).button(&#39;enable&#39;);

But how do i check if the button is disabled or enabled? 

This command gives &quot;undefined&quot;:

    $(&quot;#deliveryNext&quot;).attr(&#39;disabled&#39;)

Some ideas?

Edit: i find out that $(&quot;#deliveryNext&quot;).button(&#39;disable&#39;) only seams to change the style on the button, the clicking works fine after so i need to disable the button some how also.. i tried .attr(&#39;disabled&#39;, &#39;disabled&#39;) but when i then test .attr(&#39;disabled&#39;) i get undefined... 

Edit2: more about my &quot;real&quot; problem at https://stackoverflow.com/questions/6438659/how-to-disable-a-link-button-in-jquery-mobile

jQuery Mobile how to check if button is disabled?

**This is for jQuery Mobile. Not all regular jQuery answers will work.**

I can&#39;t get my buttons to disable in jQuery Mobile.

jQuery Mobile says to use

    $(&#39;input&#39;).button(&#39;disable&#39;);	

But I get an error message in Firebug:

&gt;uncaught exception: cannot call methods on button prior to initialization; attempted to call method &#39;disable&#39;.

It&#39;s in the document ready section of my page so I dont know how it&#39;s not initialized yet.

I&#39;ve tried calling the button directly by its id but that doesn&#39;t work.

I&#39;ve tried:

    $(&#39;button&#39;).attr(&quot;disabled&quot;, &quot;disabled&quot;);

Doesn&#39;t work.

I also have a switch command that will enable one button based on what the value is. I&#39;ve got that part to where its routing to right &quot;case&quot; statements, but the enable/disable buttons thing in jQuery mobile is not working.


code: http://pastebin.com/HGSbpAHQ


Disable Buttons in jQuery Mobile

My phonegap/jquery mobile application flickers most of the time when I navigate between the pages. Is this normal or is there a solution for this?



Flickering when navigating between pages

I am using JQuery Mobile version 4.1a and using:

    data-position=&quot;fixed&quot;

on both header and footer.

  When I scroll the content it disappears and then appears again.

Is there any way to make it stay in it&#39;s position and not disappear everytime I scroll the page?

Thanks


JQuery Mobile Fixed Toolbar and Footer Bar disappears?

I&#39;m diving into writing a mobile app with jQuery Mobile/PhoneGap. I&#39;m using [this sample template][1] to start from, which uses HTML/JS to create the pages. Rather than have all the `&lt;page&gt;` tags in one single html file, he&#39;s got it split up so it&#39;s easier to edit.

**Since I will have a separate file for each page, what&#39;s the best way to include the tempated header/footer?** I&#39;ve only seen it where you need to copy and paste the whole footer-&gt;navbar code into each HTML page. This doesn&#39;t seem like it should be. For example, if you want to change one menu item, you need to go into each page and change it. 

What&#39;s the solution that I&#39;m missing?

Maybe I&#39;m just not understanding jQuery Mobile. For example, their sidebar they use for their docs - is that sidebar code copy and pasted onto each page? That doesn&#39;t make sense. It&#39;s the same idea as the question I&#39;m asking here about the footer. 

http://jquerymobile.com/test/docs/pages/page-cache.html


This is what I&#39;ve got that doesn&#39;t seem right (and `$.live(&#39;pageinit&#39;)` isn&#39;t working). This HTML is what goes on each HTML page:

    &lt;div id=&quot;mainFooter&quot; data-position=&quot;fixed&quot; data-id=&quot;mainFooter&quot; data-role=&quot;footer&quot; class=&quot;ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline&quot; role=&quot;contentinfo&quot; style=&quot;top: 58px;&quot;&gt;
  &lt;/div&gt;

And the JS

    $.live(&#39;pageinit&#39;, function (event) {
        displayFooter();
    });
    
    function displayFooter() {
        $(&#39;#mainFooter&#39;).html(&#39;&lt;div data-role=&quot;navbar&quot; class=&quot;nav-glyphish-example&quot; data-grid=&quot;d&quot;&gt;&#39; +
            &#39;&lt;ul&gt;&#39; +
            &#39;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;menuitem1&quot; data-icon=&quot;custom&quot;&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;&#39; +
            &#39;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;menuitem2&quot; data-icon=&quot;custom&quot;&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;&#39; +
            &#39;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;menuitem3&quot; data-icon=&quot;custom&quot;&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;&#39; +
            &#39;&lt;/ul&gt;&#39; +
            &#39;&lt;/div&gt;&#39;);
    }


  [1]: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/

Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

I’m working on a web app that has its own look and feel. I want to use jQuery Mobile for the touch events support only. 

When I link jquery.mobile.min.js (without linking the css), then the layout of my page is broken. 

How can I configure (initialize) jQuery Mobile to only use touch events support? Would I bind the events in the jQuery document ready hook since I&#39;d not have any JQM page related event?

**Edit**

See this example in jsfiddle: http://jsfiddle.net/redhotsly/JGgrw/. The html contains a `&lt;button&gt;` but jQuery Mobile created a `&lt;span&gt;` to its left. If you inspect the resulting markup (F12) you will see that jQuery Mobile also added a CSS class to my button.

**Edit:**

I need a solution where I&#39;ll not have modify the JQM script. I need to use the official script off a CDN.

How to use jQuery Mobile for its touch event support only (no UI enhancements)?

EDIT: The solution was to add this to the profile page instead of the gender page.

    $(&#39;#profile&#39;).live( &#39;pageinit&#39;,function(event){
    $(&#39;p#pTest&#39;).text(localStorage.getItem(&#39;gender&#39;));

});


I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save. 

EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page. 

    &lt;ul data-role=&quot;listview&quot;   &gt;
        &lt;li&gt;&lt;a href=&quot;gender.html&quot;&gt;
            &lt;img src=&quot;images/gender2.jpg&quot; /&gt;
            &lt;h3&gt;Gender&lt;/h3&gt;
            &lt;p id=&quot;pTest&quot;&gt;Male&lt;/p&gt;
        &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;


The gender html page is just basic stuff with two radio buttons and a save button. 
Here is my javascript code(in a seperate file): 

    $(&#39;#gender&#39;).live(&#39;pageinit&#39;, function(event) {

        var gender = localStorage.getItem(&#39;gender&#39;);
        var boolMale = true;
        if (gender == &quot;female&quot;) boolMale = false;
        $(&#39;#radio-choice-male&#39;).attr(&quot;checked&quot;,boolMale).checkboxradio(&quot;refresh&quot;);
        $(&#39;#radio-choice-female&#39;).attr(&quot;checked&quot;,!boolMale).checkboxradio(&quot;refresh&quot;);
    
        $(&#39;#saveGenderButton&#39;).click(function() {
            if ($(&#39;#radio-choice-male&#39;).is(&#39;:checked&#39;))
                localStorage.setItem(&#39;gender&#39;, &quot;male&quot;);
            else localStorage.setItem(&#39;gender&#39;, &quot;female&quot;);
    
            $(&#39;#pTest&#39;).html(&#39;test&#39;); //does not work
             //$(&#39;p#pTest&#39;).text(&#39;test&#39;); //does not work
             //$(&#39;#pTest&#39;).text(&#39;test&#39;); //does not work
            $.mobile.changePage(&quot;profile.html&quot;);
        });
    });

I have tried this with javascript: `$(&#39;p#pTest&#39;).text(&#39;test&#39;);`

The text does not change however. (I know that the save button works). Is this possible?


Jquery change &lt;p&gt; text programmatically

I&#39;m building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.

So, when I load the page, some content gets visually duplicated. The DIVs are not really duplicated, it is just visual.


&gt;  - **This bug only appears on Safari (Windows + OSX).**
&gt;  - If I click and slide to select the page, the bug disappears.
&gt;  - If I switch page *(with jQuery Mobile slide transition)*, it also disappears.

Here is a screenshot:

![Good and Bad screenshot examples][1]

My code is massive so I cannot really post it fully here. I&#39;ve just spent 2 hours playing around with my code to try to fix this. I really have no clue. 

If you have an idea and need more information, then please let me know.


  [1]: http://i.stack.imgur.com/hJRGh.jpg

Visual bug in Safari using jQuery Mobile - Content duplication

I have created a sample index.html file and included the latest jquery (3.1.0) and jquery mobile (1.4.5). 

On the loading page the error console outputed:

&gt; jquery.mobile-1.4.5.js:3337 Uncaught TypeError: Cannot read property &#39;concat&#39; of undefined`

on this line:

    mouseEventProps = $.event.props.concat( mouseHookProps ),

When I tried include jquery-1.11.2 there was no issue. Can any one tell me why?

jquery.mobile 1.4.5 Uncaught TypeError: Cannot read property &#39;concat&#39; of undefined

Anyone know how to unselect all radio buttons in a radio group ?

**HTML:**

    &lt;div id=&quot;emptimfields&quot;&gt;
    	          &lt;label id=&quot;lbl_emptim&quot;&gt;How regulary do you employ people to help cultivate your land? &lt;/label&gt;&lt;br/&gt;&lt;br/&gt;
    	          
    	         &lt;fieldset data-role=&quot;controlgroup&quot; data-type=&quot;vertical&quot; id=&quot;emptim&quot;&gt;
    	          
    	          &lt;input name=&quot;emptim&quot; id=&quot;radio1&quot; value=&quot;fromtimetotime&quot; type=&quot;radio&quot; openmrs-valuecoded=&quot;&quot; /&gt;
    	          &lt;label for=&quot;radio1&quot;&gt; From time to time &lt;/label&gt;
    	          
    	          &lt;input name=&quot;emptim&quot; id=&quot;radio2&quot; value=&quot;allthetime&quot; type=&quot;radio&quot; openmrs-valuecoded=&quot;&quot; /&gt;
    	          &lt;label for=&quot;radio2&quot;&gt;All the time&lt;/label&gt;
    	          
    	          &lt;input name=&quot;emptim&quot; id=&quot;radio3&quot; value=&quot;dontknow&quot; type=&quot;radio&quot; openmrs-valuecoded=&quot;&quot; /&gt;
    	          &lt;label for=&quot;radio3&quot;&gt; Don&#39;t know &lt;/label&gt; 
    	        &lt;/fieldset&gt;
            &lt;/div&gt;

**JQuery side:**

    $(&#39;input:radio[name=emptim]:checked&#39;).prop(&#39;checked&#39;, false); // doesn&#39;t work 

I&#39;m certainly missing something basic, but I can&#39;t figure out what is the problem.


First, I check Yes and then check a value of the second radio group : 

![enter image description here][1]

Then, I check No to hide the second radio group:

![enter image description here][2]

Then, If I click on next, I get the value of what I&#39;ve checked (but I checked no previously, so here I don&#39;t want an alert, I want the radioButton &quot;From time to time&quot; to be unchecked) :

![enter image description here][3]

Finally, if I come back, nothing happend :

![enter image description here][4]


  [1]: http://i.stack.imgur.com/dI8UA.png
  [2]: http://i.stack.imgur.com/aS6E1.png
  [3]: http://i.stack.imgur.com/rvTfS.png
  [4]: http://i.stack.imgur.com/qXyMr.png



Jquery, How to unselect all radio button in radio group

**Objective:**   Load HTML content via `$.ajax`, insert it into the DOM, have jQuery Mobile apply theme styles to it.

**Problem:**   Content gets inserted but lacks jQuery Mobile theming.

**Code:**

    $.ajax({
        ...
        success: function(html) {
            $(&#39;#container&#39;).append(html);
            $(&#39;#page&#39;).page(&#39;refresh&#39;, true);
        }
    });


The HTML returned includes `data-role` tags which jQM should style...

    &lt;a data-role=&quot;button&quot;&gt;Do Something&lt;/a&gt;

Instead of applying the styles like it should, I get the following error:

&gt; uncaught exception: no such method
&gt; &#39;refresh&#39; for page widget instance

-----------------------------------------

Above code tested using `http://code.jquery.com/mobile/latest/jquery.mobile.js`

-----------------------------------------

Similar questions which brought me to the above error message:

https://stackoverflow.com/questions/5157386/consistently-update-page-with-appropriate-jquery-mobile-styles

https://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is

https://stackoverflow.com/questions/4039428/jquery-mobile-dynamically-creating-form-elements

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

I&#39;m using jquery-mobile with Ruby On Rails.

I want to create a button link which implies to have `data-role=&quot;button&quot;` appear in the generated HTML. 

I&#39;ve tried:

    &lt;%= link_to &quot;Play&quot;, game_play_path, :data-role =&gt; &quot;button&quot; %&gt;

But then, I get an error

    undefined local variable or method `role&#39; for #&lt;#&lt;Class:0x007fdc25668ee8&gt;:0x007fdc25658610&gt;

Is there a way to escape the dash using the `:xxx` notation or should I just use the `&quot;xxx&quot;` notation?

(I agree it&#39;s a cosmetic question, but I want my code to be consistent and don&#39;t like exceptions)

How to escape a dash &quot;-&quot; in a Ruby symbol?

Does the jQuery Mobile framework have a way of centering elements, specifically buttons? It looks like it defaults to left-aligning everything and I can&#39;t find a way (within the framework) to do this.

Centering elements in jQuery Mobile

I am developing a Android app using Jquery Mobile/Phonegap. I have the following code to control the phone&#39;s back button:

    document.addEventListener(&quot;backbutton&quot;, backKeyDown, true); 


    function backKeyDown() { 
        // Call my back key code here.
        $.mobile.changePage(&quot;#homepage&quot;, &quot;slideup&quot;);
    }

This all works fine, but I would like the app to close when pressing the back button on the homepage only, is this possible?

Phonegap Android Back Button - close app with back button on homepage

I need remove the attribute &quot;checked&quot; of one checkbox when errors occur.

The .removeAttr function not work. Any idea? :/

HTML

    &lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; data-mini=&quot;true&quot; style=&quot;margin-left: auto; margin-right: auto; width: 100%; text-align: center;&quot;&gt;
    	&lt;input type=&quot;checkbox&quot; id=&quot;captureImage&quot; name=&quot;add_image&quot; class=&quot;custom&quot; /&gt;
    	&lt;label for=&quot;captureImage&quot; data-icon=&quot;checkbox&quot;&gt;Image&lt;/label&gt;
    	&lt;input type=&quot;checkbox&quot; id=&quot;captureAudio&quot; name=&quot;add_audio&quot; class=&quot;custom&quot; /&gt;
    	&lt;label for=&quot;captureAudio&quot; data-icon=&quot;checkbox&quot;&gt;Audio&lt;/label&gt;
    	&lt;input type=&quot;checkbox&quot; id=&quot;captureVideo&quot; name=&quot;add_video&quot; class=&quot;custom&quot; /&gt;
    	&lt;label for=&quot;captureVideo&quot; data-icon=&quot;checkbox&quot;&gt;Video&lt;/label&gt;
    &lt;/div&gt;

Javascript

    $(&quot;#captureImage&quot;).live(&quot;change&quot;, function() {
    	// $(&quot;#captureImage&quot;).prop(&#39;checked&#39;, false); // Here Work
    
    	if($(&quot;#captureImage:checked&quot;).val() !== undefined) {
    			navigator.device.capture.captureImage(function(mediaFiles) {
    	        console.log(&quot;works&quot;);
        	}, function(exception) {
        		$(&quot;#captureImage&quot;).prop(&#39;checked&#39;, false); // Not Works Here
        		_callback.error(exception);
        	}, {limit: 1});
    	}
    });

    /*
    $(&quot;#captureAudio&quot;).live(&quot;change&quot;, function() {
    	if($(&quot;#captureAudio:checked&quot;).val() !== undefined) {
    			navigator.device.capture.captureAudio(function(mediaFiles) {
    	        console.log(&quot;audio&quot;);
        	}, function() {
        		$(&quot;#captureAudio&quot;).removeAttr(&#39;checked&#39;);
        		_callback.error;
        	}, {limit: 1});
    	}
    });

    $(&quot;#captureVideo&quot;).live(&quot;change&quot;, function() {
    	if($(&quot;#captureVideo:checked&quot;).val() !== undefined) {
    			navigator.device.capture.captureVideo(function(mediaFiles) {
    	        console.log(&quot;video&quot;);
        	}, function(exception) {
        		$(&quot;#captureVideo&quot;).prop(&#39;checked&#39;, false);
        		_callback.error(exception);
        	}, {limit: 1});
    	}
    });
    */

Remove attribute &quot;checked&quot; of checkbox

I have read many &quot;bootstrap vs. jQuery mobile&quot; articles. It is quite clear that they both have different aims. So what about combining them?

Besides other, I like the responsive layout features of bootstrap. On the other hand I also like the &quot;page&quot; approach and the possibilities of jQuery mobile (including swipe events etc.) and transitions.

**Are there professional projects combining both? Or anybody tried to do so and failed?**

I know https://stackoverflow.com/questions/9599110/using-bootstrap-with-jquery-mobile looks like a similar question but it is outdated (refering to bootstrap 2).

Can I use bootstrap 3 together with jQuery Mobile?

I believe I read somewhere there is a setting in one of the project files that will allow you to compile the `.cshtml` files when building your Visual Studio project. 

Just getting started with `MVC/Razor/Query` Mobile, and am getting annoyed with the &quot;Error loading page&quot; when I have an error in a code block inside a `.cshtml` file


How to compile cshtml before runtime

I recently build an android app using html, css, javascript and running them through phonegap to create the actual app. One of the problems I encountered in one phone is that the text looks too small. Also some images are a little small as well. I added a viewport meta tag but it doesnt seem to work either. Here are the meta tags:


        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
        &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi&quot; /&gt;`


This is how it looks  
![This happens in a particular phone(Samsung Galaxy)][1]&lt;br&gt;

This is how its supposed to look:  
![This is how it looks in htc wildfire s][2]


  [1]: http://i.stack.imgur.com/QeacM.jpg
  [2]: http://i.stack.imgur.com/LRJ9H.jpg

Phonegap Application text and layout too small

I am developing an app that runs on Android/iOS and desktop computers.

Should I use the `click` or the `tap` event?

What are the differences between them?

Will the &#39;tap&#39; work on desktop? if not, (and I have to use `click`) am I missing any advantages that the `tap` has over the `click`?

All Jquery Mobile Solutions on Gang of Coders

Total of 36 Jquery Mobile Solutions