I want to show a message when a jQuery mobile ListView has no elements. For example: "There are no elements." How can I do it?
If you are dynamically generating your listview and find no rows to display, why not simply display a row with a message stating as much?
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Results</li>
<li>No records found</li>
</ul>
http://jsbin.com/eyozis/1/edit
Use a popup to show warning:
$('#index').live('pagebeforeshow',function(e,data){
if($('#test-list li').length === 0){
setTimeout(function(){$('#MyFirstPopup').popup('open');},100);
}
});
Here's an working example: http://jsfiddle.net/Gajotres/wy5R3/
Related
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
I'm adding rows to a split listview with jQm, and I can only get the first row (not dynamically added) to trigger a click event. I assume there's a refresh function somewhere that I need to call, but I can't figure out what - I'm already refreshing the listview, which I expected to solve it...
Here's the fiddle:
http://jsfiddle.net/z36fy/1/
and here's the code:
<ul data-role="listview" data-split-icon="minus" id="list">
<li>
Item Description
remove
</li>
</ul>
Add item
JS:
var itemcount=1;
$('#addbtn').click(function() {
var addstr = '<li>Item Description '+itemcount+'remove</li></ul>';
$('#list').append(addstr);
$('#list').listview();
$('#list').listview('refresh');
itemcount++;
});
$('#list a.ui-li-link-alt').on("click",function() {
alert('delbtn clicked');
});
What am I missing?
Because you are dynamically adding DOM elements, you can't bind ahead of time. Instead use event delegation (https://learn.jquery.com/events/event-delegation/):
$('#list').on("click", ".delbtn", function() {
alert('delbtn clicked');
});
This says bind the click event to any items with class delbtn within the list even if they don't exist yet.
Updated FIDDLE
I'm trying to use, but to no luck
$("parent").on("click","child",function(){
//
}
My HTML sits this way
<ul id="carouselRoot">
<li id="container0"><div class="highcharts-container">.....</li>
<li>
<ul id="subCarousel">
<li id="container1"><div class="highcharts-container">.....</li>
<li id="container2"><div class="highcharts-container">.....</li>
<li id="container3"><div class="highcharts-container">.....</li>
</ul>
</li>
</ul>
I'm trying to capture the click event on each chart. So, $(".highcharts-container").click() works fine but I'm also adding charts dynamically to #subCarousel.
and doing
$("#subCarousel li").on("click",".highcharts-container",function(){});
simply does not invoke the call. How do I get around this?
PS: I've also tried using body as the parent.
Why don't you use Highchart API for capturing the click
$('#container').highcharts({
chart: {
events: {
click: function(event) {
alert ('clicked');
}
}
}
});
DEMO
Wrap your code within $(document).ready(function(){.....})
$(document).ready(function(){
$("#subCarousel li").on("click",".highcharts-container",function(){
alert('fgfg');
});
});
FIDDLE
Use highcharts built-in events. But for custom events, install highcharts-custom-events.
I have a listview like the following:
<ul data-inset="true" data-filter="true" data-bind="foreach: growers" data-role="listview" id="ulGrowerList">
<li><a data-bind="click: $parent.setSelectedClassToGrowerList, attr: {id: growerId}"><span data-bind="text: growerName, attr: {id: growerId}, click: $parent.setSelectedClassToGrowerList" /></a></li>
</ul>
My setSelectedClassToGrowerList looks like this:
self.setSelectedClassToGrowerList = function (item, event) {
$(ulGrowerList).closest('ul').find('a').removeClass('highlight');
$(ulGrowerList).closest('ul').find('.selected').remove();
$(event.target).toggleClass("highlight");
if ($(event.target).hasClass("highlight")) {
$(event.target).append("<span class='selected'>Selected</span>");
//console.log(event.target.id);
replaceByValue('GrowerID', event.target.id);
postjson();
//update GrowerInfo
$.getJSON("Grower/GetGrower", function (allData) {
self.GrowerName(allData.Name);
self.GrowerCompany(allData.CompanyName);
self.GrowerAddress(allData.Address);
self.ShowGrowerCompany(allData.ShowCompany);
self.GrowerID(allData.ID);
});
} else {
$(event.target).find(".selected").remove();
}
As you see, I am binding setSelectedClassToGrowerList to both and tags because a click on the text (span) was not taking the required actions. Now, the problem is, when I click on the text itself, the "Selected" text is not displayed. The functionality I'm looking for is similar to this:
http://jsfiddle.net/czqXm/1/ except for ability to select multiple items which is already working.
The more I am working with knockout and jquery mobile, the more I am leaning towards the conclusion that they are not the best combination (sigh!).
OK. I think this is a duplicate-handler problem.
What's happening is that when you click the text, because it has a separate click handler on the SPAN, inside the click-handler for the then in actual fact TWO click events are being registered......
The first makes "Selected" appear, and the second makes it disappear again.
I think you can probably simplify your binding to this
<li><a data-bind="click: $parent.setSelectedClassToGrowerList,
attr: {id: growerId},
text: growerName"></a></li>
...But take a look at this fiddle
I have a html list as the following:
<ul>
<li id="one">
<ul id="sub_ul">
<li>sth</li>
<li>sth2</li>
<li>sth3</li>
</ul>
</li>
</ul>
I observe a click event on "one" in order to SlideUp, SlideDown "sub_ul". The problem is that when the list is open, clicking on any of the sub-elements triggers the SlideUp action. I would naturally like to avoid this. Could anybody please tell me how I can do that?
Cheers,
Manojo
In your event handler first check if an item has been clicked.
$('one').observe('click', function(event)}{
if (event.findElement('li') != document) {
event.stop;
return;
}
// continue normal processing
});