How to grab just one part of a page in jQuery? - javascript

I have an form being submitted via AJAX. The response from the server in an entire web page (HTML). I would like to alert only the content within a span tag with the id "message" which exists on that response page. I don't want to alert the entire page. How to do this?
$.ajax({
url: '/accounts/login/',
data: $(this).serialize(),
success: function(output) {
alert(output)
}
});
My code alerts the whole page.

$.ajax({
url: '/accounts/login/',
data: $(this).serialize(),
success: function(output) {
alert($(output).find('#message').html());
}
});

Try this:
$.ajax({
url: '/accounts/login/',
data: $(this).serialize(),
success: function(output) {
alert($('#message', output).text());
}
});

Easiest way would probably be to add the page to your page within a hidden element and select the span using getElementById. Alternately if it is xhtml, you could load it into an xml document and use xpath. And, possibly the hardest, you could parse the string and find the part that matches up to the html you want.
Or, either of these fine examples :)

Related

Assign value to Paragraph or P tag through jQuery for the data obtained from PHP

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

Populating HTML div using PageMethods/AJAX

My problem is little strange. Of course I checked many examples before I write here.
I have a div element at aspx i am sending Post with AJAX to populate it
<script>
function send(inputa, inputb) {
var dataString = JSON.stringify({
Id: inputa,
Opt: inputb
});
$.ajax({
type: "POST",
url: "my.aspx/Myfunction",
data: dataString,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
$("divtable").val(result.d);
},
error: function () {
alert("Problem Occured");
}
});
}
</script>
At alert I can see my response is good with no problem, but I could not send it to my div element. I tried many scripts
$("divtable").val(result.d);
$("#divtable").val(result.d);
$("divtable").html(result.d);
$(.divtable).val(result.d);
and I could not success. Every searh I made I found different answers.
Can someone good at this give us the correct answer please.
You can't call val() on a div, because it is not an input, select, etc. And you probably should not use html() if you're not inserting markup. Try text() instead.
Also, your selector may not be correct: could you post your div HTML as well?
Try
document.getElementById("divtable").innerHTML = result.d
or
$("#divtable").html(result.d);
You cant use val with div, but You can use innerHtml or Jquery's html but use a valid selector like an id "#divtable" or a class ".divtable" not sure what your html looks like :)
JSFIDDLE;

jQuery's .html() does not return the value of an input element

I want to get value of hidden element named "login" on http://ts1.travian.ro/'s login page, in order to create a fake login for my Chrome extension.
I would like to do it without jQuery if possible. If not here is my not working example:
var url = 'http://ts1.travian.ro/';
$.ajax({
type: "GET",
dataType: 'html',
url: url,
success: function(data) {
loginValue = $(data).find('input[name=login]').html();
console.log(loginValue);
},
});
I expected to see the login name in the console, but nothing appeared. How can I solve it?
Try with $("element").val() method.
var url = 'http://ts1.travian.ro/';
$.ajax({
type: "GET",
dataType: 'html',
url: url,
success: function(data) {
loginValue = $(data).find('input[name=login]').val();
console.log(loginValue);
},
});
The html() method (which wraps the innerHTML DOM property) returns the HTML source for the elements inside the current element.
<input> cannot have children, so this always returns an empty string.
You want .val() (which wraps the value DOM property), which returns the current value of an input element.

jQuery and XML: Is this the last element?

I have grabbed some XML data using this piece of jQuery:
$.ajax({
type: "POST",
url: "siteList.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('wrapper').each(function(){
$(this).find('site').each(function(){
//check whether this is the last element...
});
});
}
});
What I would like to do is:
Check whether I am parsing the last site element from the XML I pulled in.
edit:
I cannot (as far as I'm aware), do this:
$(this).find('site').each(function(){
$(this).last(); //nope
$(this).find('site').last(); //nope
});
Just use something like this to get the last site:
$(this).find('site').last()
Hope it helps!
Take a look at the ':last' selector or the .last() function. You could do a test to see if the current site is the same as the last one.

maintain function order in jQuery ajax callback function

I have a jQuery ajax function. the callback function consists of two functions:
1) Take the ajax result (which is an html form) and insert it as an html span's inner html.
2) Submit this form
How can I ensure that the form is loaded before JavaScript tries to submit it?
Code:
$("select").live("change", function(){
FormUpdate();
})
function FormUpdate() {
$.ajax({
type: "POST",
url: "index.php?UpdateForm=Yes",
data: $("#Form").serialize(),
success: function(msg){
$("span#Content").html(msg);
$("#Form").submit();
}
});
}
My problem comes because javascript tries to submit the form before it has loaded and my data submitted.
Just simply put the function for taking ajax result and insert into the DOM in front and the form submission function at the back.
Only after insertion is done, the next function will be called.
Example:
$.ajax({
type: "POST",
url: "backend.php",
data: "name=John",
dataType: "json"
success: function(msg){
$("#thediv").html(msg.html);
$("form#theform").submit();
}
});
DOM manipulations are synchronous so the form wont be submitted until afterwards. Are you having a specific problem with this scenario? Please post tons of code, if so :)

Categories

Resources