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
});
Related
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 have a functional dropdown:
<li data-dropdown="publish-dropdown-menu">
<a href="#" id="publish">
Publish
<img alt="" border="0" src="/assets/publish-arrow.jpg">
</a>
</li>
And the elements for this dropdown are(HAML):
.home-dropdown-menu.publish-dropdown-menu#publish-dropdown-menu
.top-arrow
%a.your-services{:href => new_service_path}
.icon-drop
%span
Your
%br>/
Service
%a.your-event{:href => new_event_path}
.icon-drop
%span
Your
%br>/
EVENT
But when this is replaced by AJAX this won't work anymore.
This is what I tried:
$('#publish').dropdown()
$('#publish').parent().dropdown()
But none of these worked.
Any advice on how to reset dropdown behaviour after page has been loaded.
Update
This is how I am replacing content:
$('#header').html('<%= escape_javascript(render 'layouts/header') %>')
Header has a lot of other content so is not easy for me to replace some parts.
The dropdown function or any events which were attached when DOM was loaded for the first time does not work for newly added elements. You need to reattach any events that were initially attached and re-call functions that you had called on those elements.
The reattachment of events can be achieved using jQuery on() method, but as dropdown is not an event and is a function we need to implement something like the following:
Trigger an event e.g. 'show' where you update the content of #header like follows:
$('#header').html("<%= escape_javascript(render 'layouts/header') %>").trigger('show');
Then call dropdown on the element in the show event handler in your javascript:
$(document).ready(function(){
$(document).on('show', '#header', function() {
$('#publish').dropdown();
});
});
I have an asp.net mvc4 solution.
I have a menu on the left side. By default this menu is closed.
If I click on an item, a sub-menu is showed.
The problem is when I navigate to another page, the opened/closed state of sub-menus are forgotten. The new page is showed and all sub-menus are still closed. I would like to preserve the opend/closed state of these sub-menus. How can I proceed?
Here is a portion of my left side menu:
<div class="page-sidebar">
<ul>
<li class="dropdown" data-role="dropdown">
<a><i class="icon-flip-2"></i> Transports</a>
<ul class="sub-menu light sidebar-dropdown-menu">
<li>#Html.ActionLink("En cours", "SearchTransportsAA", "Transp")</a></li>
<li>#Html.ActionLink("Passés", "SearchTransportsBB", "Transp")</a></li>
<li>#Html.ActionLink("Factures", "SearchTransportsCC", "Transp")</a></li>
</ul>
</li>
<li class="dropdown" data-role="dropdown">
<a><i class="icon-drawer-2"></i> Autorisations</a>
<ul class="sub-menu light sidebar-dropdown-menu open">
<li>#Html.ActionLink("Valides", "SearchAutorisAA", "Transp")</a></li>
<li>#Html.ActionLink("Périmés", "SearchAutorisBB", "Transp")</a></li>
<li>#Html.ActionLink("Recherche", "SearchAutorisCC", "Transp")</a></li>
</ul>
</li>
...
...
As you can see above, when 'open' is added to the class, the menu is marked to be open.
One way you could do it, is to have your Views that have this side menu inherit from a model that have property that contains the selected sub-menu item
public class ViewWithSideMenu
{
public ViewWithSideMenu(string menuItem)
{
MenuItem = menuItem;
}
public string MenuItem { get;set; }
}
ViewModel:
public class MyViewmModel : ViewWithSideMenu
{
public MyViewmModel() : base("someMenu") {}
}
View:
<ul class="sub-menu light sidebar-dropdown-menu#(Model.MenuItem == "someMenu"? " open" : "")">
this approach will only open a menu based on the page we are on, it doesn't really remember what the user clicked on, if it's very important for you to keep the user selections, you have 2 options,
keep sending them back to the server with every request (not very good, too much overhead)
keep updating the content using ajax requests and not a full reload of the page, in which case you keep the menu unchanged, and convert all your requests to ajax, and replace the content with the ajax response
You can try this, it worked for me :D
<script type="text/javascript">
$(document).ready(function () {
$("a[href='"+ window.location.pathname +"']").parents(".hidden-ul").css("display", "block");
});
</script>
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/
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