Develop Reference

Capture the parent link and child link as one into the Label paramater seperated with a colon

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>

Pass value of list view to ajax

I have a list that is being created dynamically. Part of code that creates a list is:
<ul>
<?
foreach ($folders as $folder)
{
$folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
$folder2 = str_replace("[Gmail]/", "", $folder);
?>
<li>
<a><div id="box"><? echo $folder2; ?> </div></a>
</li>
<?}
</ul>
<div id="maillist"></div>
o/p of $folder
GMAIL/All Mail
GMAIL/Drafts
GMAIL/Important
o/p of $folder2
All Mail
Drafts
Important
what i want is that when a user clicks on All Mail, value corresponding to it (in this case: GMAIL/All Mail) should get pass to another script through ajax. The same process should follow for the other values in list also
ajax code
<script>
$(document).ready(function(){
$('#box').change(function(){
var boxid = $('#box').val();
console.log($('#box'))
if(boxid != 0)
{
$.ajax({
type:'post',
url:'a_fetchmaillist.php',
data:{id:boxid},
cache:false,
success: function(returndata){
$('#maillist').html(returndata);
console.log(returndata)
}
});
}
})
})
</script>
Can anyone tell if its possible to do what i want and if yes then how will it be done

First of all do not assign the same id multiple times, instead, set a class (eg box).
Then assign a data attribute for the specific folder ( eg. box-allMails ) and select that attribute on change:
foreach ($folders as $folder)
{
$folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
$folder2 = str_replace("[Gmail]/", "", $folder);
?>
<li>
<div class="box" data-folder="<? echo $folder2 ?>"><? echo $folder2; ?></div>
</li>
<?}
Then on change:
$(document).on('click', '.box', function() {
var folder = $(this).attr('data-folder');
// ajax call..
});
UPDATE
Important: You have to listen to 'click' event instead of 'change' because you click on a div, not on an input (I've changed the code).
Event delegation: Take note at the code:
$(document).on('click', '.dynamic-element', function() { .. })
instead of:
$('.element').on('click', function() { .. });
The second will not work because you are creating the elements dynamically.
Clickable: You do not have to insert an anchor tag to make the list item clickable unless you want to redirect to another page. In your case, you can style the .box div in order to get a cursor-pointer like this:
CSS
.box { cursor:pointer }
jQuery will take care of the rest (Check the example)
$(document).on('click', '.box', function() {
var folder = $(this).attr('data-folder');
alert('You clicked on: ' + folder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><div class="box" data-folder="folderOne">Folder One</div></li>
<li><div class="box" data-folder="folderTwo">Folder Two</div></li>
<li><div class="box" data-folder="folderThree">Folder Three</div></li>
<li><div class="box" data-folder="folderFour">Folder Four</div></li>
</ul>

How to remove a list element containing a particular link attribute from an unordered list

I have this unordered list and would like to get the data-file attribute value of a link element inside the list element of the unordered list, then delete the whole list element in which it lies if it is not in array z.
<ul id="hithere"class="image-list">
<li class='image-list'>
<div class='controls'>
<a href='#' class='image-list' data-name='myname'><img src='stop.png' ></a>
</div>
<span class='name'>myname12</span
</li>
<li class='image-list'>
<div class='controls'>
<a href='#' class='image-list' data-name='myname2'><img src='stop.png' ></a>
</div>
<span class='name'>myname1312</span
</li>
</ul>
And this is my jQuery but it deletes all the list elements
var z = ["myname", "yourname"];
$("li.image-list a.image-list ").filter(function () {
if ($.inArray($(this).attr('data-name'), z) == -1) {
$(this).parent("li.image-list").empty().remove();
}
});
here is the code recieving from server:
var box = $('#drone');
box.f_drop({
url: 't_file.php',
check_data:function(i,file,response){
z=[];z.push(response.Oname);
$("li.image-list ").filter( function () {
return $.inArray($(this).find('a[data-name]').attr('data-name'), z) == -1
}).remove();
},
});
why is it that all the lists are now being removed instead of just one ie the one not in array?? Also, how can i rename the data-name attribute,to say "xyz" instead.

There are few problems in your script
The array is called z not _out
The anchor element does not have a class
the data property is called name, not filename
Try
var z = ["myname", "yourname"];
$("li.image-list").filter(function () {
return $.inArray($(this).find('a[data-name]').attr('data-name'), z) == -1
}).remove();
Demo: Fiddle

How to check element does exist after mustache templating

I have this mustache setup:
$.getJSON('data/data.json', function(data) {
var template = "<ul>{{#"+elements+"}}<li class=\"selector {{.}}\"></li>{{/"+elements+"}}</ul>";
var html = Mustache.to_html(template, data);
panel.html(html);
});
After this I need to add some action on my <li> element with class selector. But there is a little problem with this element rendering to DOM. So I use small function to check this element does exist, but something is wrong and I have no results...
$.fn.doesExist = function(){
return $(this).length > 0;
};
var picker = $('li.selector');
if (picker.doesExist()) {
$(this).click(function(){
console.log('log');
})
}
and my html:
<div class="panel">
<ul>
<li class="selector 01"></li>
<li class="selector 02"></li>
<li class="selector 03"></li>
</ul>
</div>

Try this :
$.getJSON('data/data.json', function(data) {
var template = "<ul>{{#"+elements+"}}<li class=\"selector {{.}}\"></li>{{/"+elements+"}}</ul>";
var html = Mustache.to_html(template, data);
panel.html(html);
//*******************
// PERFORM TEST HERE
//*******************
});
//*******************
// $.getJSON() is asynchronous so
// performing test here is too early.
// The response from the server is guaranteed
// not to have arrived yet.
//*******************

try with
if($('li.selector').length>0){
$('li.selector').click(function(){
alert("wow")
})
}
jsFiddle

Javascript / jQuery - Parse returned 'data' as HTML for further selecting?

a webservice returns some data to me. The data is actually just raw HTML (so no XML header, or tags around it, but just a piece of html).
<div class="Workorders">
<div id="woo_9142" class="Workorder">
<span class="Workorder">S1005</span>
<span class="Pn">30-2</span>
<span class="Description">Cooling Fan</span>
<span class="Shortages">3616-1 (SV)</span>
<span class="Company">xxx</span>
</div>
<div id="woo_9143" class="Workorder">
<span class="Workorder">S1006</span>
<span class="Pn">30-2</span>
<span class="Description">Cooling Fan</span>
<span class="Shortages">3616-1 (SV)</span>
<span class="Company">xxx</span>
</div>
</div>
If this were XML like so:
<workorders>
<workorder id="woo_9142">
<partnumber>30-2</partnumber>
</workorder>
</workorders>
I could go like this in jQuery:
$('/workorders/workorder', data).each(function() {
//This would give every partnumber $('partnumber', this).text();
});
How can I parse the returned HTML (like described at the beginning)?
myNamespace.onSuccess = function(request) {
//request contains the raw html string returned from the server
//How can I make this possible:
$(request).find('div.Workorders div.Workorder').each(function() {
//Do something with the Workorder DIV in 'this'
});
}

something like
myNamespace.onSuccess = function(request) {
$(request.responseText).filter('div.Workorder').each(function() {
$('span.Pn', $(this)).text();
});
}

Have you tried adding the html to the dom, hiding it and then process it:
myNamespace.onSuccess = function(request) {
var hidden = document.createElement ( 'div' );
hidden.id = 'hiddenel';
$("body").append ( hidden );
$("#hiddenel").css ( 'visibility', 'hidden' );
$("#hiddenel").html ( resp );
$("#hiddenel").find ( 'div.Workorders div.Workorder').each(function() {
.....
});
}

You can specify explicitly the return type you are expecting: http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests