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
Related
I have form with id push-message-form and ajax call to server returns new form html to replace with. push-message-form id set on form itself, like:
<form id='push-message-form'>form content</form>
and ajax response html looks same.
From jQuery docs I understood that: html() will replaces the contents of the element, while replaceWith() replaces the actual element.
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/
But I'm using
$('#push-message-form').html('<form id='push-message-form'>content</form>')
and it replaces form itself (whilst it should add another form inside current one).
The question is why html() works as replaceWith() in this case?
Update
Some answers suggests use append, sorry if it's not clear. But I don't want to append. I want to replace form with new one returned from server (keeping it's id), and replaceWith() does work just fine.
The question is why html() works too here. Since it should replace only content, but it replaces tag too.
You should be using .append() to add content to the container calling .html() is going to replace whatever is inside that container with the value you enter:
Also you're trying to append the form with the same id so you should use a class or change the id name
This:
$('#push-message-form').append('<form class="push-message-form">content</form>')
Instead of this:
$('#push-message-form').html('<form id='push-message-form'>content</form>')
.html() acutally clears the HTML inside the element & then places your new HTML in it. While you need .append() to actually make you new HTML added in the Current HTML
$('#push-message-form').append('<form id='new-form-id'>content</form>')
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/
Is there any way I can get the id (or any other reference to) the element I've just appended using jQuery .append() ?
I'm receiving an html string with ajax and injecting in a div.
$.get(URL, args).success(function (response) {
$('#mainDiv').append(response);
});
Now I have to change something to the newly appended div (like a css property).
Please note! These solutions are not accepted, reasons are provided.
append to a temporary unique div - reason: the response contains javascript which works only if the injected html is in its environment. Calling .append will make this js run and it must be inside of mainDiv.
using a known id for the injected div - reason: the div I'm receiving in response has an id but it could be a random string and, for the moment, I need to assume I don't know it.
Perhaps anybody know a secure, reliable and consistent way to access the node I've just created in mainDiv. If .append always attach at the end, perhaps refering last node is ok: am I wrong?
You can have jQuery object reference like: var j =$(response); , and then append it : $('#mainDiv').append(j); and change its css: j.css("border":"0");
I want to make the following use .attr();
selectbox.options[selectbox.selectedIndex].value
sadly,
selectbox.options[selectbox.selectedIndex].attr("value")
is not the same, and seems to defeat the purpose of the .attr altogether. My main question is: How should one use nested .attr()s?
To get the value of any type of input element (including <textarea> and <select>) use .val():
var value = $(selectbox).val();
The .attr() translation would roughly be:
$(selectBox).find(":selected").attr("value");
....but just use .val() :)
The basic problem is that .attr() is a jQuery method. It's on jQuery objects, not on DOM elements directly, the same goes for almost all jQuery methods and plugins.
When using attr(), you have to be working with a jQuery object. So first select the relevant select box, then call attr() (or val() in this case, when you need the value of an input element).
var value = $(selectbox).val();
If you would like to retrieve the selected box's value using your current code simply pass it into the jquery object like so.
$(selectbox.options[selectbox.selectedIndex]).attr('value');
The reason they are not the same is because attr('value') gets the value of the value attribute directly from the original HTML code, it is not updated with the DOM, meaning if the value of value is changed after the page has loaded, either by user input (typing into an <input> element, or via manipulation with JavaScript, these changes will not be reflected in the returned value of .attr().
A better way is to use the .val() method of the jQuery object.
Edit
To get the attribute of the value from a DOM Element (i.e. not returned by the $() or jQuery() function) use the element.getAttribute() method, which is native, you would use it like this:
selectbox.options[selectbox.selectedIndex].getAttribute("value");
I have JSF code like:
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
I would like to get this element from JavaScript by ID (from), but I can't, because in generated HTML it is j_idt8:from
How can I get this element in e.g. jQuery? Is there any way to force JSF2 not to change ids?
You can either use a custom class which you only assign to this element and use css selectors or assign an id to the form and get the element with the id formid:from.
Is there any way to force JSF2 not to change ids?
You can set prependId="false" This way in generated HTML it will be from in place of j_idt8:from.
prependId : Flag indicating whether or not this form should prepend
its id to its descendent's id during the clientId generation
process. If this flag is not set, the default value is true.
How can I get this element in e.g. jQuery?
You can use ancestorComponent:from in jQuery to get this element.
Actually j_idt8 in j_idt8:from is auto generated id of ancestor component of your <h:inputText/>
for example
<h:form id="form">
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
</h:form>
Now generated id of input text would be form:from
If you don't provide id to a component than your browser generates that dynamically. So don't forget to provide ids to components.
In JSF 1.2 you can use forceId="true". I'm not sure if you can use t:input in JSF 2, but you should be able to. Then it's ID in HTML will be what you expect.
In order to achieve full ID for a component, use EL implicit objects and their properties such as #{cc.clientId} and #{component.clientId}. Source: Acquire full prefix for a component clientId inside naming containers with JSF 2.0.
You can use jquery. Simply, use a selector defining the text it should contains. Something like this:
$( "input[name*='from']" )
'*=' is used to say that the name attribute contains some string. Also there exist '~=' with similar meaning.
For detailed explanations and examples visit http://api.jquery.com/attribute-contains-selector/