I am trying to implement the click of the first item of the selectable list.I can add the CSS
but unable to get the click event working when i try to pre select the first item (I need the click since ,onclick event has an ajax call to populate related information on another div..)
I even tried to use the the trigger method , but couldnt get this working on the fist item on the list. The code is standard stuff.
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<ol>
Jquery function
$(function() {
$( "#selectable" ).bind("mousedown", function (e) {
e.metaKey = false;
}).selectable({
selected: function(event, ui) {
alert("selected");
},
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
I can apply the css to the first list item like this
$('li:first-child').select().addClass("ui-selected");
But i cant get the click function to work (The click would invoke the 'selected' anonymous call back.) Any pointers would be helpful/.
After some trying i managed to get it working.Posting the solution as it may be useful.
I want to simulate the mouse click on the first item on the selectable list.For that we first need to bind
$( "#selectable" ).bind( "selectableselected", function(event, ui) {
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
alert("test");
});
});
Once you do that we need to fire the click.I put this in the create callback which is called as soon as the selectable is formed.
create: function(event, ui) {
setTimeout( function() {
$('li:firstchild').addClass("uiselected").trigger('selectableselected');
}, 100 );
the great thing about Jquery is that its so intutive.
Related
I am trying to create a dynamic sub-menu. For example, the top-level items are load and edit. Whenever the menu is focused, a get JSON is called and the result used to populate the possible items to load under the load menu item. However, the ui parameter for the select event handler no longer seems to correspond to the item clicked and calling ui.item.text() will instead return the entire text to the sub-menu.
HTML:
...
<ul id="menu">
<li><div>load</div><ul id="load"></ul></li>
<li><div>edit</div></li>
</ul>
...
javascript:
var load_populate = function ( json ) {
var ul = $( "#load" );
ul.empty();
for ( let item of json ) {
ul.append ( $( "<li>" ).append ( $( "<div>" ).text ( item.name ) ) );
}
};
var menu_focus = function ( event, ui ) {
$.getJSON ( load_options_url )
.done ( load_populate );
};
var menu_select = function ( event, ui ) {
console.log ( ui.item.text() );
};
$( "#menu" ).menu ({
"focus" : menu_focus,
"select" : menu_select
});
Clicking an item in the load sub-menu logs
loaditem1item2item3, etc.
Refreshing the menu did not work.
How do I go about this?
Here is an example based on your code.
Example Fiddle
This uses POST just to simulate the AJAX activity
https://jsfiddle.net/Twisty/qpky9ht1/53/
HTML
<ul id="menu">
<li>
<div>load</div>
<ul id="load">
</ul>
</li>
<li>
<div>edit</div>
</li>
</ul>
JavaScript
Adjusted to be more similar to your code.
$(function() {
function makeListItem(o, n) {
$(o).append("<li><div>" + n + "</div></li>");
}
$("#menu").menu({
focus: function(e, ui) {
console.log("FOCUS", e, ui.item);
if (ui.item.parent().is("#menu")) {
$.getJSON (load_options_url,
function(json) {
console.log("LOAD");
$("#load").empty();
$.each(json, function(i, m) {
console.log("ITEM", i, m);
makeListItem("#load", m.name);
});
$("#menu").menu("refresh");
});
}
},
select: function(e, ui) {
console.log("SELECT", ui.item);
}
});
});
This will gather the list data in focus and append them. Once this is done, refresh method is executed on the Menu. This will assimilate all the new list items into the menu. Since focus can be executed on all menu items, you want to ensure you are not rebuilding the menu while focusing on sub-menu items. Hence the if statement.
This is probably a simple question, but how can I replace the thing I am dragging with html from an ajax call?
So, if the draggable items are just 'text' items (as below in the html snippet), and when I drag the thing I use a 'image' via the helper method, how can I 'on drop' not use either of them but insert the html as returned from a ajax call.
Where do I make the call (btw, using the 'input-type' value to the ajax call to get the correct html)?
How to I prevent the default 'dragged item' from being inserted? I.e. I don't want the div put in or the helper method image....
Do I need to add like a droppable or do I do this in the sortable on like the received event (kind of works, can't remove image but from help method)??? (I have been trying both, and whilst the ajax call worked and I get the data etc, given that I don't know how to prevent the default stuff being dropped I am not sure 'what' I am replacing with the 'result' from the call...)
$("#desktoplayout").sortable({
receive: function (event, ui) {
$(this).append('<div>html from ajax call</div>'); // kind of works... but the image from the 'helper method' on the 'draggable' is still there.
}
}); // A sortable list of stuff into which things are dragged.
var input-type;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function (event, ui) {
input-type = $(this).find('.preview').data("input-type");
},
drag: function(e, t) {
},
stop: function(e, t) {
}
});
and
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
Update
This seems to do what I wanted... is calling remove on the helper the correct way of doing this?
receive: function(event, ui) {
ui.helper.remove();
var $this = $(this);
$.get("somewhere", function(data) {
// Note: presume more logic here.....
$($this).append(data);
});
}
Here is a working example of one solution:
https://jsfiddle.net/Twisty/zh9szubf/
HTML
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
<ul id="desktoplayout">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JQuery
$(function() {
$("#desktoplayout").sortable({
receive: function(event, ui) {
var newItem;
$.post("/echo/html/", {
html: "<li class='newItem'>From Ajax</li>"
}, function(data) {
ui.helper.replaceWith(data);
});
}
});
var inputType;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function(event, ui) {
inputType = ui.helper.find('.preview').data("input-type");
}
});
});
This will work with $.get() too, but for the example, it had to be $.post(). Basically, whatever you want top be the result, That code should be in the ui.helper.replaceWith() section.
I'm using jQuery mobile 1.9.1 min on PhoneGap.
I have a list where each iten on click opens an actions popup:
function showActions(index){
selectedIndex = index;
$("#actionPopup").popup("open", {positionTo: '#list li:nth-child('+ index +')'});
}
<div data-role="popup" id="actionPopup" data-overlay-theme="a">
Close
<ul data-role="listview">
<li data-role="divider">Actions</li>
<li data-icon="false" onclick="showDetails();">action1</li>
<li data-icon="false">action2</li>
<li data-icon="false">action3</li>
<li data-icon="false">action4</li>
</ul>
</div>
When I press on action1 with showDetails() them method is called but the second popup isn't shown.
function showDetails(){
console.log("showDetails");
$("#infoPopup").popup("open");
}
<div data-role="popup" id="infoPopup">
Close
<div id="infoContent">
<table>
<tr id="eventcode">
<td>test1:</td>
<td> </td>
</tr>
<tr id="eventtype">
<td>test2:</td>
<td> </td>
</tr>
</table>
</div>
</div>
What can I do?
My solution
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
var afterClose = function() {
destinationElement.popup("open");
sourceElement.off("popupafterclose", afterClose);
if (onswitched && typeof onswitched === "function"){
onswitched();
}
};
sourceElement.on("popupafterclose", afterClose);
sourceElement.popup("close");
};
I used this simple function for the work-around:
function myPopup(myPage) {
history.back();
setTimeout(function () {
$(myPage).popup('open');
}, 100);
}
#Rakoo has a nice answer. Here is a leaner version:
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
sourceElement.one("popupafterclose", function() {
destinationElement.popup("open")
!onswitched || typeof onswitched !== "function" || onswitched()
}).popup("close")
};
If you don't need the onswitched feature and aren't adding it to $.mobile, It can be this short and simple:
$('#popup1').one("popupafterclose", function(){$('#popup2').popup("open")}).popup("close")
It seems that chaining popups is not possible.
The solution:
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});
I used this code to switch popup from popup it works fine.
function switchpop()
{
$( '#popupMenu' ).popup( 'close' );
$( "#popupMenu" ).bind({popupafterclose: function(event, ui)
{
$( "#notes" ).popup( "open" );
}
});
}
After four hours of fighting with this I reduced the problem to this:
This is in a button click function on the first popup
$('#popupCall').popup('close');
window.setTimeout(function () { $('#popupContact').popup('open') }, 50);
I have 2 lists with items, I add UI sortable to it.
How can I select and do some fun with just moved element?
When I'm trying this code - it add a class to all elements from first UL, but I need to add this class to just moved element to second UL.
<ul class="moveMe" id="ul1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="moveMe" id="ul2">
<li></li>
</ul>
<script>
$(".moveMe").sortable({
connectWith: ".moveMe",
stop: function (event, ui) {
$('li', this).addClass('justMoved');
}
}).disableSelection();
</script>
Thanks!
Just use ui.item instead of this.
$(".moveMe").sortable({
connectWith: ".moveMe",
stop: function (event, ui) {
ui.item.addClass('justMoved');
}
}).disableSelection();
See this jsfiddle
And the corresponding doc entry.
ui
item
Type: jQuery
The jQuery object representing the current dragged element
I have a list:
<ul id="selector">
<li id="1">One</li>
<li id="2">Two</li>
</ul>
and then I have:
$("#selector li").draggable({
revert: "valid"
});
$("#xyz tr").droppable({
drop: function(event, ui) {
console.log(ui.draggable.text());
}
});
Q: How do I determine that it was id=1 or id=2 that was dropped?
The text property is giving me "One" or "Two", but I need "1" or "2".
Use this method:
ui.draggable.attr('id')