I have few DataTables in hidden <div>s. This tables are works and sortable. When I insert this tables in other places of my page using .html() jQuery method (so I am dynamically copying HTML of each table to the other place) this tables becomes unsortable.
How can I force them to be sortable again?
Your initialization with .DataTable() has to be attached to something that is already on the page after the initial loading of the DOM elements.
Try $("body").find(".yourTable").DataTable() for initializing.
(If you have a more specific static container that contains all you DataTables at any point in time, replace body with that one for better performance.)
Don't use an ID if you end up having multiple elements with the same ID on the page, use a class instead. Otherwise the jQuery selector might only pick up the first occurrence.
Try with this:
var table = $('#yourTable');
table.clone().appendTo('#newParent');
table.remove();
The .clone() method, should clone all JS events with it.
(Be carefull, I removed the original table because you would have duplicated IDs, if its not the desired result you might need to change IDs with some JS)
.clone()
Related
I'm trying to select the 3rd element of a JQuery object, by using eq() method. But for some reason the 2nd and 3rd selections pop out in changed order:
var selection = $("[name=input0], [name=input1], [name=input2], [name=input3]");
selection.eq(1); //turns out to be input2!!
What could be the reasons for this behavior? Can I trust acessing it by index in my script?
According to:
https://api.jquery.com/multiple-selector/
The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.
With the help of the answers and comments and a bit of reading on the documentation.
Turns out that jQuery selects elements in the order they appear in the DOM (HTML), so:
Using a direct array access to a jQuery selection will work if you use that order, but you can only trust it if you are also responsible for the HTML, and you would need to remember this if you are ever going to change the layout.
Bottom line: not the best way to select a specific element.
This is my jquery scenario:
User click on div
It triggers an ajax call to save some data on DB
when callback received, we show an update msg <--everything good
until here
Now, when user click on the same element, it shows the information
from the DB, the same should happen with the other divs!
Noticed that when you click, the same text that you saved later is showing up in all the divs!!! it is not refreshing, but the actual source IS showing
the changes!
It looks like only the DOM is not reflecting the changes!
I am trying to put the text in the divs using .text();
All the divs are using the same element id!, I am just updating its data!
Thanks,
Marco
All the divs are using the same element id! - never ever should two elements have the same ID, because it breaks the principles on which HTML is built on and 3rd party libraries rely on.
If you need to target multiple elements use classes.
In case your elements have the class yourClass and you want to set them the text "foo", then
var yourResponseText = "foo";
$('.yourClass').text(yourResponseText);
Especially if you use jQuery - the ID selector is implemented in such way, that when it finds an element with that ID it doesn't look for another - the settings will only affect the first (from the viewpoint of DOM) element. On the other hand, when you're using the class selector, then simply said you're doing a forEach cycle through the elements with that class.
Every time I use JQuery's AppendTo(), it duplicates the items that I want appended. And every time I load in the page with AJAX (which includes the script) it duplicates it even more times! It only works normal for the first time after the entire page is reloaded.
$("<tr><td><input name='quantity[]'/></td><td><input type='text' name='ItemDescription[]'/></td><td><span class='remove'>X</span></td></tr>")
.appendTo('.tbody');
Please note that I've also tried append(),
and
$('.tbody').html($('.tbody').html() + 'string');
and the same issue persists.
From your description it looks like you are running the script which is registering the event handler multiple times. The best solution is not to do that, ie try to run the script only once.
If you are doing to handle dynamic elements look at event delegation.
If that is not possible, another solution is to remove any handler before adding a new handler so that any given time there will be only one handler. Also you can use event namespace to make sure that you won't remove some other handlers
$('some-selector').off('click.duplicate').on('click.duplicate', function(){})
Try to have a copy initially before doing the appending process,
var copy = $('.tbody').html(); //This should be done initially before making any calls
$('.tbody').html(copy + 'string');
So that you wont append your elements repeatedly.
When you use append(), it will be appended to the existing body (btw I dont know why you append a row to a body. This should be appended to a table). So if you call append() the second time, you will have two rows. Thats exactly what append() does. If you want to redesign the table after each load you have to clear all existing rows with
$('.tbody').html("");
But better use a table in the body and append the row to the table and clear the table.
At first, I'm trying to create a basic tcg in jQuery, Ajax and PHP.
The following fiddle is my try to append the card to empty places and change the data attribute value, but When I click in a card, it creates other "cards" and the value doesn't changes.
http://jsfiddle.net/bNB89/1/
The code I tried to use for data changing:
$(this).data('place', 'field');
How can I fix this?
The problem in your code is that you are using append in a class, so the content is being created in every element containing that class. You should instead fetch for the first element with the class, append to it and then remove the class so it won't be selected again. I set up a fiddle demonstrating it http://jsfiddle.net/bNB89/2/
You get other cards because there are multiple .myslot elements and each one will get a copy.
Use a selector that will give you one item to append to. e.g. .myslot:empty:first.
.data() does not change data attributes it uses its own internal mechanism to store the data. If you really want to change the attribute you can use attr.
http://jsfiddle.net/bNB89/3/
I'm curious if anyone knows why this piece of jQuery code doesn't remove the images?
var a = $('#tblMain').clone().remove('img');
The table is being selected. This is trying to take the table on the webpage and export to excel but I do not want the images to export.
Thank you,
Do it like this:
$("#tblMain").clone().find("img").remove();
EDIT: Okay, here's the problem:
selector: A selector expression that
filters the set of matched elements to
be removed.
http://api.jquery.com/remove/
The img in .remove('img') is to filter the set of items in the jquery object, NOT to find elements within the items themselves. In this case, the jquery object contains only one item, the cloned table. Therefore, .remove('img') removes nothing, since the jquery object does not contain any images (only images within items it contains).
I don't know what's happening behind the scenes, but you're referring to some variable called img whilst you most probably just want to select all img elements. In that case, you ought to use a selector as a string:
var a = $('#tblMain').clone().remove('img');
EDIT: .clone.remove does not seem to work indeed. I used this workaround which actually works:
.find('img').each(function() {$(this).remove()});