Hi I have a method that accepts an id as a parameter for my function:
function exportDetails($div) {
$($div).each(function () {
alert(this.id);
});
I need to get all the table's id's that are within this div, something similar to this:
function exportDetails($div) {
$($div > table).each(function () {
alert(this.id);
});
Here is how I am calling the function and each of the itemDetails have dynamically generated tables and I need to get their id's since they are all unique:
exportDetails.apply(this, [$('#itemDetails')]);
Thanks!
Something like this should work:
function exportDetails($div) {
return [].map.call($div.children('table'), function(table) {
return table.id;
});
}
i.e. just return an array containing the .id of every table element found as an immediate descendant of $div.
You code is not formatted correctly. Also, I don't know if you are feeding this function a group of tables that are inside of your $div parameter. Here are some options.
// this works if you pass in an element with nested table that have ids.
function exportTableToCSV($div) {
$($div+ ' > table').each(function () {
alert( $(this).attr('id') );
});
}
// this works if you want to get all the HTML elements with an id or if you want to get all the ids of elements which also have the same class assigned to them.
function exportTableToCSV($div) {
$($div).each(function () {
alert( $(this).attr('id') );
});
}
exportTableToCSV('div');
// or
exportTableToCSV('.yourClass');
Related
I am trying to iterate through a list of children elements and pass their encrypted IDs via AJAX to my controller to update display order on drop using jQuery Sortable. jQuery is selecting the correct amount of child elements but it is assigning the same ID from the dragged and dropped item to both items in my array. I'm not sure what's going on.. I would really appreciate the help! Thanks
JS Code:
$(document).ready(function () {
$(".reqconsentList").sortable({
axis: 'y',
update: function (event, ui) {
var consentForms = [];
$(this).children().each(function (index) {
consentForms.push({ 'id': $('#ConsentID').val(), 'position': index + 1 });
});
var data = { 'sortedConsentForms': consentForms };
//debugger;
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: '#Url.Action("UpdateConsentDisplayOrder", "Check", new { Area = "Administration" })'
});
}
});
});
First problem is that $('#ConsentID').val() would return the value from the first element with that id. ID needs to be Unique.
Changing the jquery to class would be correct, but the code would still not know what "element" it should get the data from.
So we need to tell it search for the .reqconsentList, to look for child with the class .ConsentID
This is done this way: $(this).find('.ConsentID').val()
I have a table in which I can click the rows () with the class .details. This will show a div with id="details" with extra information about the element in the row.
I have the following code.
$('.details').click(function () {
$('#details').slideUp('slow');
$('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
$(this).slideDown('slow');
});
});
However I would like the loading (.load()) to happen after the .slideUp() due to the fact that the load starts while the element is sliding up (which looks wierd). I have tried to add it as a callback function the following way:
$('#details').slideUp('slow', function () {
$('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
$(this).slideDown('slow');
});
});
However that stops the code from working. Does anyone have an idea on how to solve this?
Thanks.
EDIT:
My table row looks as follows:
<tr class="details" data-id="#item.VehicleID" data-url="#Url.Action("Details", "Vehicle")">
</tr>
My div looks as follows:
<div id="details"></div>
One problem i see with your code is, you are using $(this).data('url') to get the url data attribute value set to the tr which was clicked. but $(this) is actually the $('#details') there because you are accessing it inside the slideUp of $('#details'), which does not have the url data attribute. So you must be getting an error
The solution is to assign the $(this) (clicked row) to a local variable and use that inside your other callback function.
This should work.
$(function () {
$('.details').click(function () {
var _this = $(this);
$('#details').slideUp('slow', function () {
$('#details').load(_this.data('url'), { id: _this.data('id') }, function () {
$('#details').slideDown('slow');
});
});
});
});
I have a css class (.SideOption) which has multiple instances on a page and I want to have something to differentiate between them (so I chose ID), but I can't get JS to get the ID, it just returns undefined in the alert box.
JS;
function CreateBox()
{
$MyID = this.id;
alert($MyID);
}
$(document).ready(function()
{
$(".SideOption").click(function()
{
CreateBox();
})
})
This is what the SideOption looks like for example.
<div class="SideOption" id="1">
</div>
You could use the call() method to invoke the function with the context of this (example)
function CreateBox() {
$MyID = this.id;
alert($MyID);
}
$(".SideOption").click(function () {
CreateBox.call(this);
});
Alternatively, you could pass a reference to the CreateBox function when the element is clicked (example)
function CreateBox() {
$MyID = this.id;
alert($MyID);
}
$(".SideOption").click(CreateBox);
(For what it's worth, a CSS selector cannot begin with a number.)
You have to fix your JS like this: http://jsfiddle.net/csdtesting/ajnm3o4m/
Pass the element to CreateBox function and then take the attribute "id" with element.id or with $(element).attr("id").
function CreateBox(element) {
$MyID = element.id;
alert($MyID);
}
$(".SideOption").click(function () {
CreateBox(this);
})
Hope it helps!
I'm totally newbie in jQuery and i wonder if it is possible to combine these two functions.
As you can see, the first function is used to load json data to trigger a click.
The second function is used to toggle view for the list items.
Could you help me, and show me the good way to combine these functions!?
When the json file is loaded, it will be create the list elements (li), and the toggle will be able to toggle these list elements (li).
IMPORTANT: actually, my code don't work (the toggle function not work fine).
Here is the code of 1st functions :
$(document).ready(function() {
// ----------------------
// JSON INFOS
// ----------------------
$(".color-list.one li:first-child").on('click', function() {
$.getJSON("result.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
//alert(data);
});
});
});
The code of 2nd function :
$(document).ready(function() {
// ----------------------
// TOGGLE BULLZ
// ----------------------
$(".tog").click(function(){
var obj = $(this).next();
if($(obj).hasClass("hidden")){
$(obj).removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
$(obj).addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});
When you use $(".tog").click() it only binds to whatever elements match the ".tog" selector at that moment so won't work on elements that you add dynamically later. You can instead use the delegated syntax of .on() like this:
$('ul.elements-list').on("click", ".tog", function(){ ...
...which will bind the click handler to your list, but only execute your function if the click occurred on an element in that list that matches the ".tog" selector in the second parameter at the time of the click. And within the handler this will be set to the ".tog" element that was clicked.
Also you can put all your code in a single document ready handler assuming all the code is in the same file.
Also your obj variable is a jQuery object, so you can call jQuery methods on it directly like obj.hasClass() rather than wrapping it in $() again as $(obj).hasClass().
So try this instead:
$(document).ready(function() {
$(".color-list.one li:first-child").on('click', function() {
$.getJSON("result.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
});
});
$('ul.elements-list').on("click", ".tog", function(){
var obj = $(this).next();
if(obj.hasClass("hidden")){
obj.removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
obj.addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});
I'm wondering how is possible to call a function with parameters inside a method.
I have 2 functions and i'd like to call function deleteCode() when clicked on list element which is created by addCode() function.
I'm sure the solution is really simple, but i just can't see it right now.
Many thanks!
function addCode(code) {
$('#codeList').append('<li class="codeList" onClick="deleteCode(code);">' + code + '</li>');
}
function deleteCode(code) {
$('#'+code).remove();
}
Do it unobtrusive and you're fine.
function addCode(code) {
$('#codeList').append($('<li>', {
'class': 'codeList',
'text': code,
'click': function(e) {
deleteCode(code);
}
}));
}
Ref.: $()
Create the <li> element via code rather than appending raw HTML.
function addCode(code) {
// Create the <li>
var newEl = document.createElement("li");
newEl.className = "codeList";
// Assign the click function via jquery's event helper.
$(newEl).click(function(code) {
// Call your deleteCode function and pass in the given parameter.
deleteCode(code);
});
// Append the new element to the codeList node.
$(#codeList).append(newEl);
}
You can try:
function addCode(code) {
$('#codeList').append('<li class="codeList" onClick="deleteCode(' + code + ');">'+code+'</li>');
}
You can do that like this:
function addCode(code) {
$('<li class="codeList">' + code + '</li>').click(function() {
deleteCode(code);
}).appendTo('#codeList');
}
function deleteCode(code) {
$('#'+code).remove();
}
...or more simply:
function addCode(code) {
$('<li class="codeList">' + code + '</li>').click(function() {
$('#'+code).remove();
}).appendTo('#codeList');
}
When using a library like jQuery (or even when not, frankly), there's virtually never any reason to use the old-style onclick attributes for setting up handlers. In the above, I've replaced it with the click function, which sets up a handler when the user clicks the element.
Note: Lazarus notes that your code is removing an element by id using the code value:
$('#' + code).remove();
...but that the code doesn't produce an element with that ID. I assume you've added that element with some other code elsewhere, and that the goal isn't to remove the li you've added with this code.
If you did want to remove that same li on click, no need for an ID at all:
function addCode(code) {
$('<li class="codeList">' + code + '</li>').click(function() {
$(this).remove(); // <== Changed here
}).appendTo('#codeList');
}