Element duplicates when append - javascript

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/

Related

Datatable dynamically created table not sortable

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()

jquery .text() updating "source" but not the DOM

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.

jquery .html() function does not give data attribute set value

i have a piece of js code that takes the html code of an element in order to send it over for saving at the server side. The html itself is dynamically generated and the elements inside it have each a data-target attribute which is also set dynamically. So before sending the string of html to be saved the .html() of jquery is used like:
var SaveString = $('#ElementID').html();
the html I get, does not include the values of the data-target attribute of each child element and instead those appear blank
data-target=""
anyone could have a clue about what's going on there?
This is because when you use the data() method to store information with an element it is stored in an object which jQuery uses internally as a cache. The information is not added to the DOM.
If you want to add the data-* attribute to the DOM, you would need to use attr() to set it, eg:
$element.attr('data-target', 'foo');
It will then be accessible when you retrieve the html() of a parent element.
Example fiddle

How to reset the field style in jQuery-Form-Validator?

I'd like to reset the style any element in jQuery-Form-Validator.
I've seen that the next following is used to do it:
$('#exportMapForm').get(0).reset();
But the only thing that has been removed is the data and not its style.
The .reset() function removes the data and does not alter the style. To access the style of a particular DOM node (which in your case, looks like $('#exportMapForm')) you can use something like
$('#exportMapForm').className = '.myResetStyleClass';
Also, since the hash/pound symbol is an ID selector, and there should only ever be one element with that particular ID, there is no need for .get(0) after $('#exportMapForm').
UPDATE:
Finally I could to solved it and the answer was writting by #ChristynCanada Link to Answer
Basically, we need to add the following code:
// To register all properties the `form` before resetting
form('exportMapForm').registerReset();
// Reset
form('exportMapForm').Reset();

JQuery remove images

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()});

Categories

Resources