jQueryMobile make my button presses do nothing.
December 17, 2011 7:38 AM

How do I create a button within the jQueryMobile framework and have it call the URL on the remote server but not do anything on the page? I'm sure there is an answer for this but I'm at a loss for search terms.

I have a web enabled device that accepts commands in the form of http://deviceip/index.htm?cmd=xxxx
The url doesn't return any data or at least any data that I want to display. Executing the url causes the device to do something (i.e. turn a light on or off etc..)

In the old days I'd create a hidden Iframe and set it as the buttons target. I can do that with jQueryMobile but it causes a page refresh and this just seems to be the wrong way to do it.

I hope there is a very simple way to do this that I'm over looking.
posted by jmsta to Computers & Internet (8 answers total) 1 user marked this as a favorite
Try asking this on Stack Overflow.
posted by Blazecock Pileon at 7:44 AM on December 17, 2011


Trigger your URL via an ajax request, not by putting an href on the button.
posted by ook at 7:44 AM on December 17, 2011


To expand on ook's answer, you can use jQuery.get with no callback function, so whatever the server sends back gets ignored.
posted by moonmilk at 7:59 AM on December 17, 2011


So you want something like this:
$(function() {

// Bind to the click action of the button
// For more info look up "click" or "bind" in Jquery Docs
// #mylink is the id of the button you are targeting.
$("#mylink").click(function(e) {

// Peform get request look up "get" in Jquery docs
// you likely want some error handling here
// e.currentTarget.href is the link
$.get(e.currentTarget.href);

// return false prevents the default action (the click)
return false;
});
});
posted by bitdamaged at 8:44 AM on December 17, 2011


I think using AJAX will get you into cross-browser issues. Here's an approach that uses an iframe. There's 3 files described here. index.html (the main page), another-page.html (to show regular linking), and javascript.js (to show you where the binding happens)

index.html: 
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Demo Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	<script type="text/javascript" src="javascript.js"></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header">
		<h1>Demo Page</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<!-- this is a regular page call-->
		<a href="another-page.html" data-role="button">Another Page</a>
		<!-- the functionality for this page is defined in "javascript.js" -->
		<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
		<a href="#" id="perform-function" data-role="button" data-link="http://deviceip/index.htm?cmd=xxxx">Perform Function</a>
	</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
another-page.html: 
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Another Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
<div data-role="page" data-add-back-btn="true">
	<div data-role="header">
		<h1>Another Page</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p>This is another page, dude.</p>
	</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
javascript.js: 
$(document).ready(function(){

	$('#perform-function').bind('click', function(){
		// we're storing the link in an attribute
		// called 'data-link':
		var url = $(this).attr('data-link');
		
		// create iframe if not there, comment display none to see it
		if ($('#temp-iframe').length === 0) {
			$('<iframe />').attr({
				id: 'temp-iframe',
				name: 'temp-iframe',
				height: 50,
				width: 50
			}).css({
				display: 'none',
				position: 'absolute',
				left: '50%',
				bottom: 0
			}).bind('load', function(){
				alert('The non-page loaded');
			}).appendTo('body');
		}
		// call the url into the iframe
		$('#temp-iframe').attr('src', url);
		// jquerymobile already does this because the link is just "#"
		// but if you end up 
		return false; 
	});
	
});

posted by artlung at 4:48 PM on December 17, 2011


I think using AJAX will get you into cross-browser issues.

With what browser? Xmlhttprequest (ajax's ancestral form) dates back to IE5.

(I don't do much mobile dev; is there some widely used mobile browser that supports jQuery mobile but not Ajax?)
posted by ook at 7:24 AM on December 18, 2011


ook, the problem isn't that ajax is unavailable. Indeed, jQuery Mobile will not really work as intended WITHOUT ajax because of the way it handles pages and page fragments.

By "cross-browser" I am referring to the "same origin policy" problem when calling, by ajax, resources from other servers. I am presuming in my answer that jmsta is running his jQuery mobile site on one domain, say "example.com" and that the domain of some device "deviceip" are different. If that's the case, then calling, via AJAX, something on another site can cause problems because the browser will simply refuse to make that call. Tools like jsonp and easyXDM are designed to work with this policy using a variety of techniques (my iframe technique is a simplified approach which is quick and dirty, but does not really allow for robust error handling).
posted by artlung at 7:43 AM on December 18, 2011


Aah, I see! Thank you for clarifying.
posted by ook at 12:08 PM on December 18, 2011


« Older Where can I find a mug like this?   |   Relationship- am I paranoid or being used? Newer »
This thread is closed to new comments.