Develop Reference

Add HTML5 DATA attributes to Element stored in Javascript variable

I am looping through an AJAX request and adding a list of <li> to a <ul> from the results.
What I am having trouble with is storing DATA being returned from the AJAX request on these items as HTML5 DATA attributes. Here is some example code:
function load_items(json_url, callback) {
// Set a variable to contain all the items
var all_the_items = $('<ul class="all_items_cont"></ul>');
$.ajax({
type: 'GET',
cache:false,
url: json_url,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
$.each([].concat(data.item), function(i, post){
// Create An Item
var current_item = $('<li><a>'+ post.title + '</a></li>');
// This is how I tried to add the data... not working
current_item.find('a').data('description',post.description)
// Append Item to <ul>
$(all_the_items).append(current_item);
});
if (typeof callback === 'function') {
callback(all_the_items.html());
}
}
});
}
Ten I call the function and append the HTML to a target <div>:
load_items('http://jsonurl.com',function(html){
$('div#container').append(html)
})
I've found that if I write the DATA into the HTML explicitly than it works just fine, but if I use jQuery to store the data attributes than I cannot retrieve them later.
I can't write the Data Attributes out explicitly in the HTML because sometimes they are an entire JSON feed or really complicated description.
Any ideas?
------ EDIT 5/21/15 3:38pm -------
I am accessing the data using the jQuery data function as such:
$('div#container ul li:first a').data('description')
This is just an example as the code I am actually utilizing is jQuery Droppable and retrieving the content on DROP. This is a lot of unnecessary code for the questions sake.

If I gather your question correctly, what you're trying to do (set arbitrary data on a DOM element, then pull it out as a data-foo="" attribute) isn't something that JQuery was meant to do.
data-foo attributes are not the same as what the .data method sets. Data can flow in one direction, from the attribute to the element's data store (done automagically by JQuery), but not the other way around
If you really want to pull it out as part of the HTML, you'll have to set the data-foo attribute manually.
// attach the data to the DOM element
$(myElement).data('description', post.description);
// set the data-description attribute so we can pull it out as HTML
$(myElement).attr('data-description', post.description);
Another problem I see with your code is that if post.title contains malformed HTML it could break the <a> element when you call $('<a>'+post.title+'</a>').

When setting callback(all_the_items.html()); it will remove the DATA associated with the DOM element and variable and turn it into straight HTML. By changing it to this: callback(all_the_items); it will work.

Cannot change response element

I can excess a td element from AJAX response but can't change it.
$('#addjob').click(function(){
$.ajax({
type:"POST",
url: 'invoicelist.php',
success: function(response){
$('#forajax').append(response);
$(response).find('.heading').html();
}
});
});
this code works well and selects the text from the <td class='heading'>123</td> but if I want to change this 123 result I write $(response).find('.heading').html('456'); but it doesnt really change anything.
any suggestions?

You're writing the raw HTML into your #forajax container, then creating a new jQuery object with the contents of response. Any changes to the new object will be discarded; they have nothing to do with the HTML you wrote.
Get the object first, modify it, then append:
// create a jQuery object wrapping the returned HTML
var r = $(response);
// update the contents of our new object
r.find('.heading').html('456');
// add the new, updated object to our container
r.appendTo('#forajax');

Change it, then append. That content isn't linked to that variable:
$(response).find('.heading').html('456');
$('#forajax').append(response);

Changing in repsonse will change in the response text but not the appended DOM object. so instead search for dom element where u appended and do there
$('#addjob').click(function(){
$.ajax({
type: "POST",
url: 'invoicelist.php',
success: function(response){
$( '#forajax' ).append(response);
$( '#forajax' ).find('.heading').html( '456' );
}
});
});

jQuery AJAX : How to query an returned HTML document

My question is as follows: I have started using the $.ajax function with jQuery and I am wondering how I work with the return of an HTML page. The request completes and I can console.log the returned HTML page however I would now like to select a single element from that page. I have had several attempts which included:
$(data).find('p');
$('button').click(function() {
$.ajax(funciton() {
dataType: 'html',.
url: 'localhost/sw',
success: function(data) {
// This is where I would like to select a element or node from the complete
// returned html document
});
});
I know i can simply use .load() which you can provide select criteria but .ajax is the root function to begin with and I would like to learn that way as well for more complicated queries. Second half of this would be should I not be trying to select elements this way and just serve up json or a single key phrase instead of the entire html page? All help is appreciated.

Just pass the returned HTML to jQuery, and treat it like a regular jQuery collection:
$.ajax({
dataType: 'html',.
url: 'localhost/sw',
success: function (html) {
var paragraphs = $(html).find('p');
// Manipulate `paragraphs` however you like. For example:
$(document.body).append( paragraphs );
}
});

Joseph's answer above is correct if you just want to get the objects.But if you want to load the content of that element, you may change this:
var paragraphs = $(html).find('p');
to
var paragraphs = $(html).find('p').html();
Hope it helps.

Adoption of ResponseTree from Ajax is not considered HTML elements

I load an HTML snippet by Ajax and adopt it into a container. The elements are being represented correctly. But, I can't run any method on them i.e. any method that should work on an HTML element.
var Req = new Request.HTML({'onSuccess':function(responseTree){
$('form').innerHTML='';
$('form').adopt(responseTree);
$('form').getElemets('ul').each(function(e){e.setStyle('display','none');});
}
}}).get(href);
returned html is:
<ul><li><span>ssss</span></li></ul>
I might have forgotten a parenthesis in this example, but the real code is OK, when I alert the found elements inside the each function, I get [object Element] and not [object HTMLUIElement] as I should

Seems to work perfectly fine to me. See example: http://www.jsfiddle.net/mXmjr/
new Request.HTML({
url: '/echo/html/',
data: {
html: "<ul><li><span>ssss</span></li></ul>"
},
method: 'post',
onSuccess: function(response) {
document.body.empty();
document.body.adopt(response);
document.body.getElements('ul').each(function(list){
list.highlight();
});
}
}).send();

Help removing appended data

Hello I am using jquery to do some ajax that calls in some data from a database, on the mouseover and element the method runs and I get the expected results, however when I then mouse over another element, the method runs again, however I need to delete the first lot of data from the screen first, this is what I have so far,
$("a.contentlink").mouseover(function(){
var url = $(this).attr("href");
$.ajax ({
url: url,
type: "POST",
success : function (html) {
$('#abstract').append(html);
}
});
});
Can anyone help?

You need to call the empty method first, which removes all children from the matched elements.
For example:
$('#abstract').empty();
Alternatively, you can call the html function, which replaces the contents of the matched element with a string of HTML.
For example:
$('#abstract').html(html);