I want to retrieve the value of a text field on a another page on my website (prices.html)
Using http://api.jquery.com/jQuery.get/, how can I accomplish this?
How can I do this?
var price = $('input:price').val(); <- the value of price from prices.html (i'm not on this page so i need to request it)
How can I do this?
Thanks in advance.
You could try .load().
.load('price.html input[name="price"]', function(data) {
alert(data);
});
I didn't try it out myself, but it should work.
One of the last examples on the jQuery get page provides you a clue:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
Assuming that you get your page correctly, you should get a data payload, which you can then parse to get the price information that you're looking for. Using another example, if you have your data processed as JSON, you can extract data like so:
$.get("test.php",
function(data){
$('body').append( "Name: " + data.name ) // John
.append( "Time: " + data.time ); // 2pm
}, "json");
Without more information, it'll be hard to put together a working example.
Before you live prices.html page, will be good to store/transfer (post/get) input:price in hidden textfield in new page and than read hidden textfield with jquery
Related
I'll make this short.
Basically the problem I'm facing right now is that I have a task where data from database is needed to update some texts in browser (I have some sliders that have text under them and depending on the position of the slider the text needs to update according to what's in database). Now I can get the texts to jquery with ajax but I can't seem to get it out to a variable.
This is how the code in jquery looks like:
$.get('ajax.php', getData('send'), function(html) {
console.log(jQuery.parseJSON(html));
});
Before you start merging this question with others, I did look through a ton of them but all I didn't quite see what I was looking for because I actually have to do a lot of different things with that data, not just display it. If there's anyone kind enough to explain how I can get that 'html' to a variable I would be very grateful.
So yeah, end goal is to have something like var data = jQuery.parseJSON(html); and that it behaved like a normal variable with some data in it from there on.
Thanks in advance and have a nice day!
Have a look to Official documentation of AJAX calls in Jquery.
https://api.jquery.com/jquery.get/
Furthermore you can always parse the JSON object in response.
Example:
$.get( "test.php", function( data ) {
$( "body" )
.append( "Name: " + data.name ) // John
.append( "Time: " + data.time ); // 2pm
}, "json" );
Alright, I figured out the answer now thanks to 'kapil yadav'.
$.get('ajax.php', getData('send'), function (html) {
//$('.slider' + value).html(html);
$( "body" ).data( "sliderData", html);
}, "json");
console.log($( "body" ).data());
This is what I used to get what I needed in case anyone else stumbles here.
I am trying to make a get request once the user enters an value and pass that value as parameter however nothing happens. The alert outside theget function works fine. here is my code
$(document).ready(function(){
$( "input[type='text']" ).change(function() {
$.get("http://example.com/get.php?number=1234", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
$("#result").html( data );
});
alert("end of script");
});
});
https://jsfiddle.net/4rrous4y/3/
To send a parameter along to get.php you need to append a query string.
In your $.get after the URL add ?parameter=value and change the values accordingly.
I think you are having a cross origin issue here. Basically if the resource you are trying to load is in a different domain than the origin of the request, it won't let you access to it.
Check the console in Google Chrome, some error should be appearing there.
I've been working with PHP for a while. I just started learning how to work with JSON.
I was able to create a PHP file that returns JSON. In my main file, I reference the PHP file and get the JSON objects.
I can display the objects in a dropdown select menu like this:
$.getJSON( "folder/services.php", function( data )
{
$.each(data, function(index, item)
{
$('#service').append($("<option>" + item.SERVICE + "</option>"));
});
});
The above code works fine. I can display the SERVICE values in the dropdown SELECT options.
What I am trying to figure out is how to get the SERVICE into the VALUE of the OPTION. I hope I am saying that correctly.
Typically, the OPTION tag would look like this:
<option value="SERVICE_A">Service A</option>
<option value="SERVICE_B">Service B</option>
...
But since I'm using JSON, I am not sure how to get the value into the OPTION.
I attempted to use PHP inside of the JQuery, but was unsuccessful. I'll show you what I attempted:
$('#service').append($("<option value='".+ item.SERVICE +."'>" + item.SERVICE + "</option>"));
****** EDIT ******
I attempted this piece of code submitted by LShetty below:
$.getJSON( "folder/services.php", function( data )
{
var strToAppend = "";
$.each(data, function(index, item)
{
strToAppend += $("<option/>",
{
'value': item.SERVICE,
'text': item.SERVICE
});
});
$('#service').append(strToAppend);
});
I only came up blank with this code. Does anyone see what I did wrong?
You're on the right track. Don't try to use . for concatentation in JS, though; it's a PHP thing. And .+ doesn't work in either language.
A safer, more jQuery-ish way to do this (it will work when ", ', <, etc. are present in the SERVICE value):
$('<option>').
attr('value', item.SERVICE).
text(item.SERVICE).
appendTo($('#service'));
Paul has the answer above. This is more of an optimization take. Modifying DOM in a loop is costly! it may be okay in this specific question as I only see 2 items. Hence, always construct your string outside of the loop and append all at once when you are ready.
var strToAppend = "";
$.each(data, function(index, item) {
strToAppend += $("<option/>", {
'value': item.SERVICE,
'text': item.SERVICE
});
});
$('#service').append(strToAppend);
Hope that helps :)
I have a form which submits data via AJAX to an external server.
The data which gets sent is then validated and if correct the user can then advance onto the next step of the form.
If the data is not valid, then the server returns an error which is outputted as a JSON object.
I can see the JSON object in FIDDLER.
My aim is to grab that JSON data and output it on the page and notify the user.
Ideally, i would do this as part of an error handler on the AJAX request(found below).
Is this achievable?
PS:
Unfortunately, I can't set up a demo because the link that the data is posted to is only available on my network.
It is also worth pointing out that the error that the back-end script outputs is actually stored in the link that the data is posted to.
AJAX REQUEST:
var setUpVrmData = function() {
$("#getvrmdata").click(function () {
var p_vrm = $('#p_vrm').val();
$.ajax({
dataType: "JSON",
type: "POST",
url: "http://217.35.33.226:8888/l4_site/public/api/v1/BC8F9D383321AACD64C4BD638897A/vdata",
data: {
vrm: p_vrm,
},
success: function(data) {
//Empty the dropdown box first.
$("#p_model").empty();
appendString = "<option value='none'>-- Select your model --</option>";
$.each(data['vehiclemodel'], function (k, v) {
// += concatenate the string
appendString += "<option value='" + k + "'>" + v + "</option>";
});
$("#p_model, #ent_mileage").show();
$('.js-find-my-car').hide();
$('.js-get-price').show();
$("#p_model").append(appendString);
$("#p_model").prop("disabled", false);
$('#skey').val(data['skey']);
},
error: function() {
console.log("We return error!");
}
});
});
The Error function will return an XHR object that you may be able to parse to get the message you want. I don't know what is serving the data so depending on how that's setup your mileage may vary. I've done this using PHP as well as C# and writing to Console, but in both cases I was able to control the returned data.
I used this article : http://encosia.com/use-jquery-to-catch-and-display-aspnet-ajax-service-errors/ as a starting point.
You'll need to update:
error: function() {
console.log("We return error!");
}
to
error: function(xhr, status, error) {
console.log("We return error!");
}
Set a break point there in Firebug to check if an XHR object is passed, if not you'll need to find a way to get it.. You mention you can see the JSON in fiddler, it should be available to you. If it is, just use the eval posed in the article and you should be okay. If not you'll have to go and figure out how to get it, depending on your platform difficulty will vary.
A few things to note, eval is messy and can get you into trouble. In the cases I've done this, I removed the eval in production.
Also as of jQuery 1.8 success error and complete are deprecated. Use done fail and always if you plan on updating jQuery in the future.
jQuery API reference, for reference.
http://api.jquery.com/jquery.ajax/
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html
I want to implement something like the link above. Now this pops up the box's fetching data from some page, using PageID and what not. I want the content of that popup box to have simple HTML stuff in it and it will be bound later. The one above has got Ajax that I am not familiar with.
What do I need to change in the code? All I want is a simple pop up box that looks exactly like the one above, opens up the same way and all, BUT has got simple HTMl stuff in it. What and where do I make changes?
Although you haven't posted any of your attempts at doing this yourself, I will try to help you out.
If I understand correctly, you want to get rid of the AJAX and just add normal HTML right?
Well, I will at least tell you where to put your HTML to get you started.
You see on their website, at line 51 it says:
$('#personPopupContent').html(' ');
You can change the nbsp bit to any HTML you want.
For example:
$('#personPopupContent').html('<strong>My strong text</strong>');
You can also delete from lines 53 to 74 where it says:
$.ajax({
type: 'GET',
url: 'personajax.aspx',
data: 'page=' + pageID + '&guid=' + currentID,
success: function(data)
{
// Verify that we're pointed to a page that returned the expected results.
if (data.indexOf('personPopupResult') < 0)
{
$('#personPopupContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '.Please have your administrator check the error log.</span>');
}
// Verify requested person is this person since we could have multiple ajax
// requests out if the server is taking a while.
if (data.indexOf(currentID) > 0)
{
var text = $(data).find('.personPopupResult').html();
$('#personPopupContent').html(text);
}
}
});
Since you won't be using it.
I hope that helped you.