This is my code:
$("#showing").append("<ul id='vrijemeObjava'");
for(i=0;i<App.vrijemeObjavljivanja.length;i++) {
$("#showing").append("<li><strong>" + App.vrijemeObjavljivanja[i] + "</strong></li>");
}
$("#showing").append("</ul>");
This is made inside a FB.api call. The "App.vrijemeObjavljivanja is an array of dates which I want to put in an ul. The array is put in <li></li> but not in <ul>.
The end result looks like this.
<ul id='vrijemeObjava'></ul>
<li>...</li>
<li>...</li>
<li>...</li>
Can someone please tell me why are the list items coming after the </ul>.
try this :
$("#showing").append("<ul id='vrijemeObjava'></ul>");
for(i=0;i<App.vrijemeObjavljivanja.length;i++) {
$("#vrijemeObjava").append("<li><strong>" + App.vrijemeObjavljivanja[i] + "</strong></li>");
}
(in your exemple your ul open tag is not correctly built .append("<ul id='vrijemeObjava'"); missing a > )
better version, storing the ul in a variable :
$ul = $('<ul/>', {id : 'vrijemeObjava'}).appendTo("#showing");
for(i=0;i<App.vrijemeObjavljivanja.length;i++) {
$ul.append("<li><strong>" + App.vrijemeObjavljivanja[i] + "</strong></li>");
}
When you append, you append entire elements (both the opening and closing tags). Try this instead:
$ul = $("<ul id='vrijemeObjava'></ul>");
for(i=0;i<App.vrijemeObjavljivanja.length;i++) {
$ul.append("<li><strong>" + App.vrijemeObjavljivanja[i] + "</strong></li>");
}
$("#showing").append($ul);
Related
I'm trying to achieve the following:
Capture the mega menu link that's being clicked. If the link is a sub link, capture the parent link and child link as one into the Label paramater seperated with a colon.
This is the jsbin link to the HTML:
http://jsbin.com/kuliberefi/edit?html,output
I have managed to get the following code to console log the li's that I click on, but I am stuck on getting the parent link of the category. eg. When I go into the Mens section and click on shirts its meant to console log 'Mens: Shirts'.
my code:
$(".megaMenuList li").mousedown(function () {
var value = $(this).attr('href');
console.log(value);
});
Thank you to anyone that can give me some advise.
You can split the href value and take second and third item (first one will be empty). Updated bin
$(".megaMenuList a").click(function (e) {
e.preventDefault();
var value = $(this).attr( "href" );
var items = value.split("/");
console.log( items[1] + " : " + items[2] );
});
If you want the values in the URL, #gurvinder372 answer will do. If you want the actual values printed on your screen this solution will work.
$(function(){
$('.megaMenuList li a').click(function (e) {
e.preventDefault()
// get the text of the link clicked
var subcat = $(this).text();
// find the H2 that is on top of this megaMenuList
var cat = $(this).closest('.megaMenuList').find( "h2" ).text() ;
// output your cat & subcat
if( cat ){
console.log( subcat + ' : ' + cat );
} else {
console.log( subcat );
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="megaMenuList">
<ul>
<li>Shirts</li>
<li>Dresses</li>
<li>Trousers</li>
<li>Skirts</li>
<li>Socks</li>
<li>Underwear</li>
</ul>
</div>
<div class="megaMenuList">
<h2>Clothing</h2>
<ul>
<li>Shirts</li>
<li>Dresses</li>
<li>Trousers</li>
<li>Skirts</li>
<li>Socks</li>
<li>Underwear</li>
</ul>
</div>
<div class="megaMenuList">
<h2>Accessories</h2>
<ul>
<li>Jewelry</li>
<li>Handbags</li>
<li>Shoes</li>
<li>Tights</li>
</ul>
</div>
Would just like to get and set different attributes when a list item is moved to the other list on my mvc page... I can't access anything so far. The problem is in the javascript, it hits the onchange event fine. I didnt post the "available list" in the cshtml for brevity. this is what the console.log as the bottom reads:
SpecialNeedInActiveList change: Meds per tube newIndex: -1 oldIndex: 5 action: remove
SpecialNeedActiveList change: Meds per tube newIndex: 3 oldIndex: -1 action: receive
Any help would be appreciated, this has taken way too long for me.
HTML:
<div class="col-md-6" id="SpecialNeedContainerLL">
<ul id="SpecialNeedActiveList" class="col-md-6">
#if (Model.SelectedSpecialNeeds.Any())
{
foreach (var y in Model.SelectedSpecialNeeds)
{
<li class="list-item" selected-personspecialneed="#y.PersonSpecialNeedId" selected-need-type="#y.SpecialNeedTypeId"> #y.SpecialNeedDescription </li>
}
}
</ul>
</div>
#(Html.Kendo().Sortable()
.For("#SpecialNeedActiveList")
.ConnectWith("#SpecialNeedInActiveList")
.PlaceholderHandler("placeholder")
.Events(events => events.Change("onChange"))
)
Javascript:
function onChange(e) {
var id = e.sender.element.attr("id"),
text = e.item.text(),
newIndex = e.newIndex,
oldIndex = e.oldIndex;
if (id == 'SpecialNeedActiveList' && newIndex > -1) {
//add item to selected list
//remove item from availables list
/*NONE of the following works...*/
//var oldPersonSpecialNeedId = e.sender.element.getAttribute('available-personspecialneed');
//var oldSpecialNeedTypeId = e.sender.element.getAttribute('available-need-type');
//e.sender.element.removeAttribute('available-personspecialneed');
//e.sender.element.removeAttribute('available-need-type');
//e.sender.element.setAttribute('selected-personspecialneed', oldPersonSpecialNeedId);
//e.sender.element.setAttribute('selected-need-type', oldSpecialNeedTypeId);
}
console.log(id + " change: " + text + " newIndex: " + newIndex + " oldIndex: " + oldIndex + " action: " + e.action);
}
When you are in the change event handler(onChange()), e.sender.element is NOT the item that was dragged, it is the list that sent the change event, the <ul> element.
The item being drag/dropped is contained in the e.item field, which you should be able to manipulate as normal, for example using jQuery(but you may use whatever DOM manipulation technique you like):
var $item = $(e.item);
var oldPersonSpecialNeedId = $item.attr('selected-personspecialneed');
var oldSpecialNeedTypeId = $item.attr('selected-need-type');
$item.attr("selected-personspecialneed", "new" + oldPersonSpecialNeedId);
$item.attr("selected-need-type", "new" + oldSpecialNeedTypeId);
Here's a working example showing the attributes being changed:http://dojo.telerik.com/#Stephen/arUpO
It is based on single list from the code in your question rather than 2 lists but it simply demonstrates how to access the dragged element from the sortable change event, which is the core of your problem.
Having said that, I would probably investigate using a DataSource-bound list so that you can manipulate fields of a model instead of attributes of a DOM element. http://demos.telerik.com/aspnet-mvc/sortable/integration-listview is a good place to start.
I would like to know how to create a JSON or serialize (both is fine) from a ul including
<ul class="menu send ui-sortable">
<li id="pageid_1" class="ui-sortable-handle">Inscription
<ul class="menu send ui-sortable">
<li id="pageid_2" class="ui-sortable-handle">Joueurs en ligne
<ul class="menu send ui-sortable"></ul>
</li>
</ul>
</li>
I cannot find how to create something like this:
pageid[]=1&pageid[1]=2 OR [{"pageid":1,"children":[{"pageid":2}]}]
Meaning, including parent ID in [].
Thank you for your help!
This code will produce the output required
var result = [].map.call(document.querySelectorAll('ul.menu.send.ui-sortable li.ui-sortable-handle'), function(li) {
var parent = '';
if (li.parentNode && li.parentNode.parentNode && li.parentNode.parentNode.nodeName == 'LI' && li.parentNode.parentNode.matches('li.ui-sortable-handle')) {
parent = li.parentNode.parentNode.id.replace(/\D+/g, '');
}
return "pageid[" + parent + "]=" + li.id.replace(/\D+/g, '');
}).join('&');
console.log(result); // pageid[]=1&pageid[1]=2
I haven't thought about how to do the second format, because the first format is easier to produce
Say I have a list like so:
<ul id="my-list">
<li class="list-item" data-role="collapsible">List Item</li>
<li class="list-item" data-role="collapsible">List Item</li>
<li class="list-item" data-role="collapsible">List Item</li>
</ul>
I want to be able to add another li element with the class list-item and maybe the data-role collapsible at the end of the list. But, I want to pass the contents of a variable to the inside of the new li tag. Say the variable is var myVariable = "Contents of Variable"; Is there a way to do this using jQuery and/or JavaScript?
You could clone one of the existing tags:
$('#my-list li').first().clone().text(myVariable).appendTo('#my-list');
And with plain JavaScript:
var list = document.getElementById('my-list');
var elem = list.firstChild.cloneNode();
elem.textContent = myVariable;
list.appendChild(elem);
Try this:
var myVariable = "Contents of Variable";
$("#my-list").append("<li class='list-item' data-role='collapsible'>" + myVariable + "</li>");
Are you trying to do this FIDDLE ?
var myVariable = "Contents of Variable";
x(myVariable);
function x(obj) {
$('#my-list').append('<li class="list-item" data-role="collapsible">' + obj + '</li>');
}
Also
function create(content){
$('<li />', {
class: 'list-item',
'data-role': 'collapsible'
}).html(content).appendTo('#my-list')
}
create('my content')
Demo: Fiddle
You can use
$('#my-list').append('<li class="list-item" data-role="collapsible">' + myVariable + '</li>');
I am programming an AJAX web page (using IE 8) and need to dynamically build a list in jQuery from the data returned. Later, I will be converting list to jQuery accordian.
I am also trying to learn the proper way to use these jQuery functions and chaining. I am just a jQuery NOOB, but understand JavaScript. I found a good article on jQuery dom functions: http://www.packtpub.com/article/jquery-1.4-dom-insertion-methods
I want to add as much as possible using the jQuery dom functions, and jQuery chaining, without resorting to HTML source code using text. I want to mostly use .wrap(), .appendto(), .attr(), .text(), and .parent().
I don't think that the ".attr("class", "CC_CLASS"). is the best way to add a class.
Given the HTML code:
<div id="outputdiv"></div>
Use jQuery dom functions to change it to be the following:
<div id="outputdiv">
<ul id="JJ_ID">
<li> AAA_text </li>
<li id="BB_ID"> BBB_text </li>
<li class="CC_CLASS"> CCC_text </li>
<li id="DD_ID">DDD_text<br/>
<ol id="EE_ID">
<li> FFF_text </li>
<li id="GG_ID"> GGG_text </li>
<li class="HH_CLASS"> HHH_text </li>
</ol>
</li>
</ul>
</div>
Some code I figured out (ignoring the spaces in text).
var aObj = $('<li></li>').text("AAA_text")
var bObj = $('<li></li>').attr("id", "BB_ID").text("BBB_text");
var cObj = $('<li></li>').attr("class", "CC_CLASS").text("CCC_text");
var dObj = $('<li></li>').attr("id", "DD_ID").text("DDD_text");
var fObj = $('<li></li>').text("FFF_text");
var gObj = $('<li></li>').attr("id", "GG_ID").text("GGG_text");
var hObj = $('<li></li>').attr("class", "HH_CLASS").text("HHH_text");
Somehow add (fObj + gObj + hObj) into eObj ?
var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);
Somehow add (aObj + bObj + cObj+ dObj + eObj) into jObj ?
var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);
jObj.appendTo("#xmlOutputId")
The .append method returns the same container object you called it on -- make use of this to chain methods pleasantly:
var inner_list = $('<ol/>', {id: "EE_ID" })
.append( $('<li/>', {text: "FFF_text" })
.append( $('<li/>', {id: "GG_ID", text: "GGG_text" })
.append( $('<li/>', {"class": "HH_CLASS", text: "HHH_text" });
var outer_list = $('<ul/>', {id: "JJ_ID" })
.append( $('<li/>', {text: "AAA_text" })
.append( $('<li/>', {id: "BB_ID", text: "BBB_text" })
.append( $('<li/>', {"class": "CC_CLASS", text: "CCC_text" })
.append(
$('<li/>', {id: "DD_ID", text: "DDD_text"})
.append(inner_list)
);
outer_list.appendTo('#xmlOutputId');
You could actually do the entire thing in a single statement with no vars, but in my opinion that would be getting too ugly.