I can't figure out how to get data from the selected element once a user selects a box from the widget.
I'm using the selectable widget from jquery:
https://jqueryui.com/selectable/#display-grid
my html:
<ol id="Numbers">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
</ol>
I don't understand how to use the selected api at:
https://api.jqueryui.com/selectable/#event-selected
Tried to use an onclick on the li's but that didn't seem to work:
function testvar() {document.getElementByClass('.ui-selected').innerHTML = "CLICKED ME!";
}
It would help if you said what you want to do with it:
http://jsfiddle.net/MfegM/2088/
$( "#Numbers" ).selectable({
selected: function( event, ui ) {
var el = $(ui.selected);
var num = el.html();
$('#result').html("You've selected "+num);
}
});
Not sure how much help you'll get without more info on what you're trying to accomplish...
<head>
<script>
$( "#Numbers" ).selectable({
selected: function( event, ui ) {}
});
$( "#Numbers" ).on( "selectableselected", function( event, ui ) {} );
</script>
</head>
$("#Numbers").on('click', '.ul-state-default ', function(){
alert($(this).val());
})
Related
I have got an ajax page load working on my wordpress site with both the official twenty sixteen and storefront themes.
The only hitch is that the mobile nav menu does not close once a link has been clicked and the new page has been fetched and loaded by the ajax script.
I've looked through most of the other similar topics and tried various snippets of jquery but have not been able to get it working.
The code for the menu toggle button on twentysixteen is :
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
The menu container html is :
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293">Labels
</li></ul>
</div>
From my research into the matter it would seem that there is potentially two ways to achieve what I'm after.
Changing the aria attribute on click from expanded="true" to expanded="false" could do the trick?
I found this code snippet but have no idea how I would actually implement
$(function () {
$('li').on('click', function (e) {
var menuItem = $( e.currentTarget );
if (menuItem.attr( 'aria-expanded') === 'true') {
$(this).attr( 'aria-expanded', 'false');
} else {
$(this).attr( 'aria-expanded', 'true');
}
});
});
Use a jquery click function to trigger the toggle button.
$( "#menu-main" ).click(function() {
$( "#menu-toggle" ).click();
});
Any help would be greatly appreciated! Thank you!
try this
$(function () {
$('#menu-main li>a').on('click', function (e) {
$( "#menu-toggle" ).click();
});
});
or
$(function () {
$('#menu-main li>a').on('click', function (e) {
// i set $(".toggled-on") because i dunno which is your main menu
//<div class="menu-main-container">
// or
//<ul id="menu-main" class="primary-menu">
$(".toggled-on").attr("aria-expanded","false");
$(".toggled-on").removeClass(".toggled-on");
});
});
Hope this is solves your problem,thanks
$("#menu-toggle").click(function(e){ /*for click on menu*/
$('.menu-main-container').toggle()
})
$('.menu-item').click(function(e){ /*for click on link*/
$("#menu-toggle").trigger('click')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293">Labels
</li></ul>
</div>
When the page in load/reloaded, I need to loop over each each list item in the order list and apply some logic to it.
Here is what I have done but nothing is being printed in the console as expected.
$(function() {
$(window).load(function(){
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$( "ul.selected_sortable_control_570_0 > li").each(function(index)
{
console.log( $( this ).attr('id') );
});
});
});
Here is my HTML markup
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
How can I correctly loop over each item?
UL has id -> id="selected_sortable_control_570_0"
Use ul#selected_sortable_control_570_0 > li as selector in $ function.
Working snippet
$(function() {
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$("ul#selected_sortable_control_570_0 > li").each(function(index) {
console.log($(this).attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
Note: Window load is not needed. Run the snippet it works.
selected_sortable_control_570_0 is an id in HTML but in your jQuery you are using a class selector. Change .selected_sortable_control_570_0 to #selected_sortable_control_570_0.
$( "li").each(function(index,value)
{
console.log(value.id);
});
COdepen URL for reference- http://codepen.io/nagasai/pen/rLxzJE
added value and value.id will give id of each li and you can logic using each id
I've got a scenario where (I won't bore you with the details) I need to convert the text of a series of li's into clickable links (all going to the same destination URL). For instance:
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
I'd like for the countries to be converted into clickable links.
Using:
$( ".link" ).each(function() {
$( this ).css( "color", "red" );
});
I can loop through the li's (although ideally I'd like to be able to 'target' the UL and then it's children removing the need for the class="link"...but that's another matter!) and in this instance simply change the colour of the text but I don't know how to change the text into a link.
Any chance someone could give me some pointers please?
Thanks,
craig
You can use html() to write the inner anchor elements without each() using a callback
$('.link').html(function() {
return '' + $(this).text() + '';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
You can use click since you are using jquery
$( ".link" ).click(function(){
//do something here
alert('clicked');
});
https://api.jquery.com/click/
Consider this:
$( ".list-inline li" ).each(function() {
$( this ).css( "color", "red" ).html(''+$(this).text()+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
But maybe you do not want real links, but just clickable <li>s?
$('.list-inline').on('click', 'li', function(event) {
alert("Go to link");
})
.find('li').css({cursor:'pointer'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
You can use callback function of .html() method:
$( ".link" ).html(function(i , oldhtml) {
return "<a href='someref"+oldhtml+"'>"+oldhtml+"</a>"
});
You can use the 'wrapInner' function to do this:
$("ul.list-inline li").wrapInner(function() {
return "<a href='somepage.html'></a>";
});
Although if you have access to the source to change the classes, not sure why you don't just code the links in place...
Is this what you're looking for?
<ul class="list-inline">
<li>Australia</li>
<li>Fiji</li>
<li>Oman</li>
<li>Venezuela</li>
</ul>
$( ".list-inline li" ).each(function() {
$( this ).css( "color", "red" );
var country = $(this).text();
$(this).html(''+country+'');
});
Demo: http://jsfiddle.net/6cjex8b2/
I am using jQuery UI draggable and sortable functions and I am new to this.
I have list of items in left (generated from database ) and I have boxes on right where user can drag and drop them.
While/after dropping user can sort them.
Here is full preview : http://jsbin.com/oBeXiko/3
Problem: How can I get array of IDs of elements in each box after sorting?
I have tried .sortable("toArray") and sortable("serialize") but both return empty string.
Simple HTML
<div id="raspored">
<div class="left">
<ul id="kanta">Delete</ul>
<ul id="lista_predmeta" class="droptrue">
<li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
<li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
<li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
<li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
</ul>
</div>
<div class="right">
<ul class="raspored" razred="1">I</ul>
<ul class="raspored" razred="2">II</ul>
<ul class="raspored" razred="3">III</ul>
<ul class="raspored" razred="4">IV</ul>
</div>
</div>
My jQuery functions
$(document).ready(function() {
var url = "";
var raz = 0;
$( ".raspored" ).sortable({
cursor: 'move',
opacity: 0.65,
stop: function ( event, ui){
var data = $(this).sortable('toArray');
console.log(data); // This should print array of IDs, but returns empty string/array
}
});
$(".raspored").droppable({
accept: ".predmet",
drop: function(event, ui){
ui.draggable.removeClass("predmet");
ui.draggable.addClass("cas");
raz = $(this).attr("razred");
}
});
$(".predmet").draggable({
connectToSortable:".raspored",
helper: "clone",
revert: "invalid",
stop: function(event, ui){
var predmet = $(this).attr("predmet-id") ;
console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
}
});
$("#kanta").droppable({
accept: ".cas",
drop: function(event, ui){
ui.draggable.remove();
}
});
$( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
});
When you call toArray, you can pass an options object with an attribute field. This attribute field defines what attribute is used in the toArray call. For example:
var data = $(this).sortable('toArray', { attribute: 'predmet-id' });
That will give you an array of the predmet-id attributes of the items. See the toArray documentation.
Note that the default attribute is id, which is why your array returned empty strings before - none of your elements have id attributes!
use serialize that work for me. below are sample code that may help you.
<ul id="sortable">
<li id="ID_11" class="ui-state-default">sai</li>
<li id="ID_21" class="ui-state-default">2</li>
<li id="ID_3" class="ui-state-default">3</li>
<li id="ID_4" class="ui-state-default">4</li>
<li id="ID_5" class="ui-state-default">5</li>
<li id="ID_6" class="ui-state-default">6</li>
<li id="ID_7" class="ui-state-default">7</li>
<li id="ID_8" class="ui-state-default">8</li>
<li id="ID_9" class="ui-state-default">9</li>
<li id="ID_10" class="ui-state-default">10</li>
<li id="ID_11" class="ui-state-default">11</li>
<li id="ID_12" class="ui-state-default">12</li>
</ul>
Save
<span id="categorysavemessage"></span>
Javascript code are :
<script>
$(function() {
$( "#sortable" ).sortable();
});
function saveDisplayChanges()
{
var order = $("ul#sortable").sortable("serialize");
var a = "hello";
var b = "hi";
$.post("update_displayorder.php?"+order+"&a=hello"+"&b=developer",{abc:a,xyz:b},function(theResponse){
$("#categorysavemessage").html(theResponse);
});
}
</script>
Php script for fetch order data with other info
update_displayorder.php script are :
<?php
echo "<pre>";
print_r($_REQUEST);
$newOrder = $_POST['ID'];
$counter = 1;
foreach ($newOrder as $recordIDValue) {
echo $counter .' '. $recordIDValue .'<br/>';
$counter ++;
}
?>
I want to arrange values in a text field according to the order of the list items in an unordered list.
List is as following:-
<ul id="sort">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
I am using sortable() function of Jquery UI on the list mentioned above.
I need to copy the same arrangement in a textbox value:-
<input type="text" value="" />
For example - If the list is rearranged as 3,2,5,4,1, textbox value should be 3,2,5,4,1 :-
<input type="text" value="3,2,5,4,1" />
Thanks in advance!
For example like this:
$('#sort').sortable({
update: function(e, ui) {
var val = $(this).children().map(function() {
return $(this).text();
}).get().join();
$('#text').val(val);
}
});
http://jsfiddle.net/wzsuH/1/
use sortable's stop events to check the changes.. toArray to get the array of the <li> list position... and join it with , and append to input
here you go..
HTML
<ul id="sort">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
</ul>
jquery
$('#sort').sortable({
stop: function( event, ui ) {
var sortedVal=$(this).sortable( "toArray" );
var inputVal=sortedVal.join(',');
$('#inputid').val(inputVal);
}
});
working fiddle here
$( "#sort li" ).each(function(){
$("#idOfYourTextField").val( $("#idOfYourTextField").val()+ $(this).text() );
});
http://jsfiddle.net/yRRLJ/1/