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' );
}
});
});
Related
I need to set the text of Paragraph or P tag to the value obtained though AJAX.
So I have the HTML page somewhat like this where I have declared the paragraph tab.
<p class="card-text">Client Type<p id="Client_Type" name = "Client_Type"></p></p>
Onclick of the button I am making the AJAX call to HOME_CARD.PHP page.
The PHP is working properly and its returning me the data to jQuery. When I use console.log(data); it displays me all the data correctly.
$.ajax({
url: "Home_Card.php",
method: "POST",
data: {
search_client_id: search_client_id
},
success: function(data) {
console.log(data);
$('#Client_Type').val(data.CLIENT_MNEMONIC);
//$('#Client_Type').text("HELLO");
//$('#Client_Type').attr(data.CLIENT_MNEMONIC);
//$('#card').show();
//$('#Client_Type').("HELLOE");
}
});
So I tried using val function to assign the value in CLIENT_TYPE to p tag in HTML page but its not assigning. When I use $('#Client_Type').text("HELLO"); it assigns the value "HELLO" properly so I am guessing nothing wrong with my program.
I wanted to know is there any other way of assigning the value to paragraph tag in jQuery?
How to assign the specific value obtained from PHP in JSON format to paragraph p tag using jQuery.
Paragraph does not take any value i think.
So you should use one of these methods
$('#Client_Type').text(data.CLIENT_MNEMONIC);
or
$('#Client_Type').append(data.CLIENT_MNEMONIC);
Use text method or html method instead:
$('#Client_Type').text(data.CLIENT_MNEMONIC)
Use html or append method
$('#Client_Type').html(data.CLIENT_MNEMONIC);
Thank you for your time and answers but I found my mistake.
During the AJAX call I did not mention the type of data I getting in return
datatype: "json",
Hope fully it will help someone who is also trying.
$.ajax({
url: "Home_Card.php",
method: "POST",
datatype: "json",
data: {
search_client_id: search_client_id
},
success: function(data) {
console.log(data);
$('#Client_Type').val(data.CLIENT_MNEMONIC);
//$('#Client_Type').text("HELLO");
//$('#Client_Type').attr(data.CLIENT_MNEMONIC);
//$('#card').show();
//$('#Client_Type').("HELLOE");
}
});
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.
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.
I have a jquery script that accesses a db and returns a numeric result and writes that result into a table cell. This scripts runs when the page loads but also when the drop down menu is changed. I want to be able to limit only 1 result per table cell.
Right now when page loads it writes the result to the cell and when the drop down menu is changed it just adds the new result to the cell instead of replacing it.
I have search quite a bit trying to figure out how to do this and can not come up with anything. Can someone help me?
Here is the jQuery:
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$count = $(this).parents('tr').find('label.count');
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
async: false,
success:(function(output) {
$.each(output, function(index, value){
//alert(value);
$count.append(output[index]);
}); // each
})
}) // ajax
}).change(); // .typeval
}); // document
Here is the table cell where I only want to show one result at a time.
<td><label class="count">5</label></td>
Please let me know if I have not provided enough info for the assistance needed.
Use .text() instead of .append():
$count.text(output[index]);
As its name implies, .append() adds the content to the end of the container. Whereas, .text() sets the text displayed in the container, overwriting any existing text.
Actually, .html(), behaves more like .append() than .text() does, but I don't recommend using .html() unless you are actually setting .html(). Since you said the result is numeric, .text() is better.
Try updating your AJAX call to clear the contents before adding new results:
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
async: false,
success:(function(output) {
$.each(output, function(index, value){
//alert(value);
$count.html(''); // Clear current content
$count.append(output[index]); // Append new content
}); // each
})
}) // ajax
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);