In page I use jQuery .load() to apply database changes without reloading, have 2 steps:
load change.php?id=1&change=delete
reload list of items
Its simply illustration, I have more options (change rank, change text...), but all is implemented identically.
Problem: someone script doesn't show list, if I have in list.php console.log('text'), text shows in console, but list of items are not in div.
It happens more when I have 1+ requests per second.
It is possible to reach absolute reliability?
Thank you, Rob.
PS. I use simply onclick=func() in button and the
function func(){
$('#div1').load('change.php?id=1&change=delete');
$('#div2').load('list.php');
}
did you check the response you get from the server?
If not try this snippet
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
I have solution.
Problem: delay in db update
Solution:
function func(){
$('#div1').load('change.php?id=1&change=delete', function (){
$('#div2').load('list.php');
});
It is good solution?
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.
Context
Ajax code is used to fetch data from an Sql database, so when a new message is inserted into a database that message is printed into a HTML div.
The Problem
The problem is that when the variable is inserted into the div, it replaces the existing value of the div. One possible solution is too send the whole chat log every time, however I would prefer to avoid this for obvious reasons!
Client Side Code
var newmessages = function () {
setTimeout(newmessages, 5000);
var request = $.ajax({
url: "ajaxtesting.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
if(msg !== null && msg !== "") {
$("#chat").html(msg);
scroll();
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
The message variable is used to store the Ajax response and the line:
`$("#chat").html(msg);`
Is used to print the value to the div "chat".
Try
$("#chat").append(msg);
If you need to insert new message in top then
$("#chat").prepend(msg);
You need to append to #chat rather than using html().
http://api.jquery.com/append/
You might want to check out jQuery's append() function: http://api.jquery.com/append/
This way you can append the result of the Ajax call.
After a submit event runs with prevent default (to avoid the submit page refresh) along with some algorithms, the oneStory(id) function is called on success for sending the updated .put data to the node.js API.
At this moment, the fields that were toggled-open (by the jquery below) to be updated, undesirably toggle-closed because the whole html template is refreshed (seemed the best way to give handlebars.js the new db data), but I would like these comment fields to remain in view throughout the update (thus reflecting the realtime update).. should .live be implemented somewhere?
Am sure there is a better way to do this realtime update, but thought to have all the stories refresh, and .when done, .then pass the id of the updated comment to jQuery to toggle open the comments section for the particular story that had a comment updated. Right now though, this .then jQuery logs Object (of the resJSON) comments for: Object are open (instead of the _id)
What's more, with the success call refreshStory(id) from oneStory(id) from the .put AJAX (which does .put because the update is stored in the db), the view appears to have refreshed the content because the console logs everything of the foundAllSuccess function and the story's comments toggle-close, but unless I instead call foundAllSuccess as the actual success call of the refreshStory(id) function, the async repopulation of content doesn't include the updated comment!?
function oneStory(id) {
$.ajax({
url:"http://localhost:4200/api/v1/stories/" + id,
method:'get',
success: refreshStory(id), //foundAllSuccess does work here
error: foundError
})
}
function refreshStory(id) {
var thisID = '#' + id;
console.log(thisID);
$.when($.ajax({
url:"http://localhost:4200/api/v1/stories",
method:'get',
success: foundAllSuccess,
error: foundError
}).then(function(thisID){
console.log(thisID);
$(thisID).parentsUntil( ".comments" ).parent( ".comments" ).slideToggle();
console.log("comments for: " + thisID + " are open");
})
)}
function foundAllSuccess(resJSON) {
var templateSource = $("#storiesTemplate").html();
console.log('Getting All the Stories..');
console.log(templateSource);
var template = Handlebars.compile(templateSource);
var storiesHTML = template({stories: resJSON});
$('#allTheStories').html(storiesHTML);
console.log('Got All of the Stories..');
}
Here's the HTML (maybe there's a better way to refrence this too, than the parentUntil.parent)
<div class="comments" style="display:none;">
\{{#each comments}}<div class="comments-frame">
<input type="hidden" name="id" id="\{{_id}}" />
And the jQuery that accurately toggles open the comments to begin with:
$(document).on("click", ".storyTitle", function () {
var $that = $(this).closest('.story').find('.comments')
$that.slideToggle();
});
}).then(function(thisID){
console.log(thisID);
$(thisID).parentsUntil( ".comments" ).parent( ".comments" ).slideToggle();
console.log("comments for: " + thisID + " are open");
})
thisID inside this method is NOT as same as the one outside it. Just remove the parameter and you will be fine.
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