Search jQuery

jQuery Forum

Disable Href in a Listview.

in jQuery Mobile • 4 months ago

Hi, if I have a list view with an <href> tag, is it possible after I disable the <li> item how do I stop it calling the event function that is associated with it?

And how would I reactivate it?

Thanks in advance.

Replies(7)

watusiware

Re: Disable Href in a Listview.

4 months ago

How are you disabling it?

watusiware

Re: Disable Href in a Listview.

4 months ago

Not at all sure what you are trying to accomplish here. You've added a click handler to the <ul> element, which is going to trigger when you click anywhere in the list. Why?

Just what is it that you are trying to disable?

I don't see any code to disable anything.

Once you click on an item, the page should transition, so there should not be any need to disable the link. The page won't be displayed any more at that point.

Edit: oh, there are no URLs specified, so no transition.

Again, what is it you are really trying to do?

lammie71

Re: Disable Href in a Listview.

4 months ago

Ok, thanks for the reply.

Basically I have a list and on that list each item has a it calls another page. Once that list item has been clicked I want to a) grey out the list item and b) stop the link from working.

I hope this helps.

Lammie.

lammie71

Re: Disable Href in a Listview.

4 months ago

Thanks for the replies. I think this code may be better to show what I am trying to achieve:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
$ad=0;
$('#countries li').bind('click',function(){
alert('clicked '+$ad);
$ad++;
$('#a1').addClass('ui-disabled');
return false;
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<div id="searchPickPlace">
<ul data-role="listview" id="countries">
<li><a href="#page2"name="uk" id="a1">Disable this buttom and stop the alert message appearing when it is clicked after disabling</a></li>
<li><a href="#">Ok</a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>

I hope this makes it clearer, so when a user clicks on the link item it is disabled and adds a one to the $ad variable - presently when clicking on the link it increments each time.

Thanks in advance, Lammie.

bagman

Re: Disable Href in a Listview.

4 months ago

To start with, you need to use a recent version of jQuery Mobile such as 1.2.0. Don't expect too much help if you're using a pre-release alpha build of version 1.0 that's two years old. There have been significant changes and fixes since that time and I don't know why you would be using a 1.0 alpha version for a production application.

Secondly,

$(document).ready(function(e) {

Please read the big yellow box at the top of the page: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Here is a basic example that shows how you can disable a list item when it's clicked: http://jsbin.com/iruxeg

Please note that this example would only work for a multi-page document and would need to be implemented differently in order to support single page documents.

lammie71

Re: Disable Href in a Listview.

4 months ago

Thankyou all for the reply. I have added the code that I hope will make it a little clearer on what I am trying to achieve. I can disable individual list items but how would I then reset them.