I'm trying to delay the GET request from the POST. Basically, with this code, my backend server send the response as a JSON array before it computed the POST request. I'd like my server to handle the POST request first, and with a five second delay, call the GET request.
(For your information, this code put the content of an HTML form in a Django db and then request all the content from this DB and display it on an HTML page. This is where the problem is, because when a user submit the form, he will have all the content from the DB without his last sent because the 'screenshot' of the DB was taken before the server put his submit).
$(document).on('submit','#post-form',function(e){
clearInterval(loop)
e.preventDefault();
$.ajax({
type:'POST',
url:'/send',
data:{
room_name:$('#room_name').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success: function(data){
//alert(data)
}
});
document.getElementById('room_name').value = ''
$(document).ready(function com() {
function imgMarkup(model) {
if (model.media) {//mediasrc
return `<img class='imgchat' src=${window.location.origin}/static/${model.mediasrc}.png>`
}
return '';
}
function csvMarkup(model) {
if (model.excel) {
return `<p>[Download]</p>`
}
return '';
}
function botCheck(model) {
if (model.bot) {
return 'FinanceUIp.png'
}
return 'Y.png';
}
loop = setTimeout(setInterval(function() {
$.ajax({
type: 'GET',
url: "/trafic",
success: function check(response) {
//CODE WORKSPACE //
}
//CODE checkview //
},
error: function(response){
//setTimeout(clearInterval(loop),10000)
}
});
}, 1000), 5000)
})
});
I tried the setTimeout function but it does not work. Like there is no delay at all.
Here's a simple example snippet (you can run it) that you can adapt to your use case.
An endless get request loop starts.
When a post request is made, the get request loop is stopped.
When the post request is done (or fails in this case), the get request loop starts.
etc.
As a suggestion though, using Promises would save you a lot of headaches as it provides easy chaining between actions.
let getLoop;
function stopGetRequestLoop() {
console.log(`*********\nGet loop stops`);
clearInterval(getLoop)
}
function getRequestLoop() {
console.log(`*********\nGet loop starts`);
const start = Date.now();
getLoop = setInterval(() => {
// the actual get operation
const end = Date.now();
console.log(`Request made after ${end - start}ms`);
}, 1000);
}
const postRequest = () => {
stopGetRequestLoop()
console.log(`*********\nPost request starts`);
fetch("/")
// This specific request fails so catch is used. But you can use then or finally
.catch((e) => {
// This delay is just a simulation of a post request delay, you can either ignore it or use it if you need a timeout.
const delay = Math.floor(Math.random() * 3000) + 1000;
console.log(`> The get request will resume in ${delay}ms`);
setTimeout(() => {
getRequestLoop();
}, delay);
});
};
getRequestLoop();
document.getElementById("start-button").addEventListener("click", getRequestLoop);
document.getElementById("post-button").addEventListener("click", postRequest);
document.getElementById("stop-button").addEventListener("click", stopGetRequestLoop);
<button id="start-button">Start get request loop</button>
<button id="stop-button">Stop get request loop</button>
<br/>
<br/>
<button id="post-button">Make a post request</button>
Related
I am experiecing some issues with AJAX updating the page. The actual data in the database is updated but this is not always reflecting in real time on the web page.
For example, I have the following event:
$("#add_note").click(function(e) {
//e.preventDefault();
$("#add_note_form").validate({
rules: {
contact_note: {
required: true
}
},
submitHandler: function(form) {
contact.modal_update({
'obj' : $('#add_note_form'),
'uri' : '/contact/add_note/'
});
}
});
});
This function when a new note is created calls a callback to validate the form fields first and then if successful calls a callback inside a seperate class to conduct the update. See the modal_update class below:
// Update modal
this.modal_update = function(data)
{//
// Declare a few variables for the data object we've received
obj = data.obj // The form element to serialize
uri = data.uri;
// Get the form ID from the data-target attribute
id = obj.attr('data-target');
// URL to send to
url = this.site_url + uri + id;
// The form object
this.post_data(obj.serialize(),url);
// Hide Modal
obj.closest('.modal').modal('hide');
// Refresh
this.refresh();
}
This then figures out the correct route to ajax and calls a ajax call back inside the same class:
// AJAX post
this.post_data = function(obj,uri)
{
$.ajax({
data: obj,
dataType: 'json',
type: 'post',
url: uri,
headers: { "cache-control": "no-cache" },
cache: false,
success: function (response) {
if (response.success == true)
{
$("#alert_success .msg").html(response.message);
$("#alert_success").fadeIn(200).delay(2000).fadeOut(200);
}
else
{
$("#alert_error .msg").html(response.error);
$("#alert_error").fadeIn(200).delay(2000).fadeOut(200);
console.log(response.error);
}
}
});
}
I am then running another class callback to "refresh" the data in all the elements on the page:
this.refresh = function()
{
// Refresh the ajax requests
this.get_contact_data();
this.get_notes();
this.get_contact_log();
this.get_contact_tasks();
}
This class re loads the functions which run on page load to get the inial data into the tables/fields on the page. See "get_notes" below:
// Get notes
this.get_notes = function()
{
// Get all notes and populate table
var log_uri = this.site_url + "/contact/get_notes/" + this.contact_id;
this.get_data(log_uri,function(data) {
notes = $("#contact_notes ul");
notes.empty("");
// Populate the contact fields, assuming there is a result to play with
if (data != false) {
//alert(JSON.stringify(data));
$("#notes-tab .count").html("(" + data.length + ")");
$.each( data, function( key, value ) {
notes.append("<li class='list-group-item' modal-id='editNoteModal' data-target='" + value.ID + "'><div class='row'><div class='col-lg-3'><i class='fa fa-sticky-note mr-3'></i>" + value.timestamp + "</div><div class='col-lg-7'>" + value.note + "</div><div class='col-lg-2'><a href='#' class='edit mr-3'><i class='fa fa-edit mr-1'></i>Edit</a><a href='#' class='delete'><i class='fa fa-times mr-1'></i>Remove</a></div></div></li>");
});
console.log('Notes loaded');
} else {
notes.append("<li>There are currently no notes for this contact</li>");
}
});
}
Now the problem:
For some reason this does not update consistently in real time. The data is updated fine on the server side but on the client side the update/refresh does not always update. I might add a note and get a correct update response but the refresh method seems to be receiving the old data and always be one note behind. So the next time I add a note, the one I added before then appears and so forth.
Another problem I am experiencing is the methods seem to stack on each event so if I add one note (or one of the other methods) I will see the console say "notes loaded" but on the second note it says "notes loaded" twice, then on the 3rd note added 3 times and so forth.
I am sure there must be something fatal flaw in the design of my code here but I am not experienced enough with javascript/jquery to notice what direction I am going wrong so I can fix it.
I thought that this was an issue with ajax caching and not refreshing the result so I have adjusted the ajax request as cache none and also to send no cache headers. I am running in wamp.
In your case, your refresh code will always run before your data got updated. Because ajax is asynchronous so the code behind and below ajax will always execute nearly the time your ajax running.
At the time you run your post_data function to call the API, the refresh function got run too. So it's done before your data got updated.
You should run refresh function inside ajax callback. For example:
this.post_data = function(obj,uri, callback)
{
$.ajax({
data: obj,
dataType: 'json',
type: 'post',
url: uri,
headers: { "cache-control": "no-cache" },
cache: false,
success: function (response) {
if (response.success == true)
{
$("#alert_success .msg").html(response.message);
$("#alert_success").fadeIn(200).delay(2000).fadeOut(200);
}
else
{
$("#alert_error .msg").html(response.error);
$("#alert_error").fadeIn(200).delay(2000).fadeOut(200);
console.log(response.error);
}
callback();
}
});
}
And in modal_update, you pass refresh function to post_data as a callback:
this.modal_update = function(data)
{//
// Declare a few variables for the data object we've received
obj = data.obj // The form element to serialize
uri = data.uri;
// Get the form ID from the data-target attribute
id = obj.attr('data-target');
// URL to send to
url = this.site_url + uri + id;
// The form object
this.post_data(obj.serialize(),url, this.refresh);
// Hide Modal
obj.closest('.modal').modal('hide');
}
You should read more about asynchronous ajax. You can use other tricky solution is setTimeout to run this.refresh but I do not recommend that because you not sure when the update is done.
How to auto refresh a partial view?
public PartialViewResult Chat(string people)
{
if (User.Identity.IsAuthenticated)
{
var model = new MessageVM()
{
realReceiver = people,
messageList = db.messages.Where(x => x.sender == User.Identity.Name || x.sender == people).ToList().Take(30)
};
return PartialView("_Chat", model);
How to auto refresh this partialview
Just to test quickly, change your controller action for Chat from POST to GET. Then call it by pasting the address in your browser address bar. You can include the value for people parameter like this at the end of the URL:
?people=valueForPeople
Check the returned HTML and ensure that is what you are expecting. Once you have confirmed the action is returning the HTML you want, then you can change back to POST if you prefer. Then use the jQuery code below.
One option is to setup a timer on the client side which will call your controller and then you can do whatever you need with the returned data.
window.setInterval(function() {
// send get request to server
$.ajax({
url: '/Chat',
type: "POST", // or use GET
data: whateverYourArgumentsAre, // people
success: function (partialViewHtml) {
$("#divLt").html(partialViewHtml);
});
},
error: function () {
alert('Something went wrong');
}
});
}, 5000); // Every 5 seconds, 5000 ms
Html.Action("Messages","Chat", new { people= "give some data"})
I have an application that displays a YouTube video and has a rate button to allow a user to like or unlike the video. On the click event 3 functions are called chained together through the success function of the ajax. The flow is this: ytvRate() -> getRating() -> showRating()
When I log the actions and results the response from getRating() does not have the value that I sent in ytvRate(). If I wait a while and refresh the page, the result of getRating() comes back correct. I call getRating() inside the success function of the ajax in ytvRate(). Doesn't that mean the function should not be called until a success response is received?
Here is an example of my logs:
rating sent: like
call get rating
this is my rating: none
call show rating
As you can see, the rating returned from the API is not correct - it should be the rating I just sent. Upon refresh the same call does return the correct rating... so, is there a delay or something to the data api updating the correct information? How can I get the correct rating on the same button click that sends the request?
Here are the functions (showRating does not seem relevant to the problem. It works fine as long as it gets the correct rating - which it is not.)
function ytvRate(id, rating, event){
event.preventDefault()
var apiKey = 'This is a valid key';
var client_id = 'This is a valid client id';
var redirect_uri = 'This is a redirect uri';
var scope = 'https://www.googleapis.com/auth/youtube';
var rateUrl = 'https://www.googleapis.com/youtube/v3/videos/rate?id='+id+'&key='+apiKey+'&rating='+rating;
if(getHash().access_token){
var token = getHash().access_token;
$.ajax({
type: "POST",
url: rateUrl,
beforeSend: function (request){
request.setRequestHeader('Authorization', 'Bearer ' + token);
},
success: function(data){
console.log('rating sent: '+rating);
getRating(id);
},
error: function(e) {
console.log(e);
}
});
} else{
window.location = 'https://accounts.google.com/o/oauth2/v2/auth?client_id='+client_id+'&redirect_uri='+redirect_uri+'&scope='+scope+'&response_type=token&prompt=consent&include_granted_scopes=false';
}
return false;
}
function getRating(id){
var getRatingUrl = 'https://www.googleapis.com/youtube/v3/videos/getRating?id='+id;
console.log('call get rating');
if(getHash().access_token){
var token = getHash().access_token;
$.ajax({
type: "GET",
url: getRatingUrl,
beforeSend: function (request){
request.setRequestHeader('Authorization', 'Bearer ' + token);
},
success: function(data){
var rating = data.items[0].rating;
console.log("this is my rating: " + rating);
showRating(rating, id);
}
});
}
}
function showRating(response, id){
console.log('call show rating');
numLikes(id);
if(response == 'like'){
document.getElementById("notliked").className = "hide";
document.getElementById("liked").className = "";
document.getElementById("like-btn").style.color = "#87CEFA";
document.getElementById("like-btn").setAttribute("onclick", "ytvRate('"+id+"', 'none', event)");
} else{
document.getElementById("notliked").className = "";
document.getElementById("liked").className = "hide";
document.getElementById("like-btn").style.color = "inherit";
document.getElementById("like-btn").setAttribute("onclick", "ytvRate('"+id+"', 'like', event)");
}
}
Edit:
Interestingly, if I call the youtube/v3/videos resource in a new method instead of youtube/v3/videos/getRating and access the statistics.likeCount, the number is instantly updated. Why can I not receive the user rating with the same efficiency?
After the discussion in the comments I suggest you to take a different approach. When ytvRate success you don't need to fetch getRating as you already know what is the rating set by the user.
The rate method is like a setter in regular programming language - if it successed (didn't throw an exception or returned an error) you can assume the current value is the one you set without fetching it again. This might be wrong assumption in multithreaded/distributed enviroments but might be ok in your case.
function ytvRate(id, rating, event){
...
success: function(data){
console.log('rating sent: '+rating);
showRating(rating, id);
}
...
}
I am making an attempt to do a GET through an AJAX request towards an API. I am aware of the same origin policy. But the web service gave me a special API key to perform the GET AJAX request to the API. The problem is that I am not getting either a alert(data) success or alert(boom) error. Nothing is being displayed. The jquery function is taking the value from the textbox and then using that data to perform the api call.
<script>
$(document).ready(function () {
var timer = null;
var $new_result=$("#entry");
var $api = $new_result.data('url',$new_result.val());
function submitForm( input ) {
$.ajax({
type: "GET",
url: $api,
success: function(data) {
alert(data);
},
error: function() {
alert("boom");
}
});
return false
}
$("#entry").on("change", function() {
var input = $(this).val();
clearTimeout(timer);
timer = setTimeout(function(){
submitForm(input) ;
}, 1000);
})
});
</script>
<input type="text" id="entry" name="entry" style="width: 1000px;" value="http://somesite.com/apikey?123658744sdfs88f7></br>
This doesn't look correct at all:
var $new_result=$("#entry");
var $api = $new_result.data('url',$new_result.val());
Rather, if you want to get the value from the input, as you stated, you should use the following:
var api = $("#entry").val();
Unless you've explicitly set the url value on the data object on that input somewhere else in your code, nothing is going to exist there, which may be the cause of your problem.
i found out my JS sends POST method twice to my PHP file, thats why i keep getting double/repetitive results from my PHP.
This JS event, upon .keyup() will execute an ajax.
$(document).ready(function() {
var getUrl = $('#url');
var youtube = regex here
var web = regex here
getUrl.keyup(function() {
if (youtube.test(getUrl.val())) {
var youtube_url = getUrl.val().match(youtube)[0];
$.ajax ({
type:"POST",
url:"getyoutube.php",
data: {youtube_url:youtube_url},
success: function(html) { $('.echotest').append(html); }
}); }
else if (web.test(getUrl.val())) {
var extracted_url = getUrl.val().match(web)[0];
$.post("curl_fetch.php?url="+ extracted_url, {
}, function(response){
$('#loader').html($(response).fadeIn('slow'));
$('#cur_image').val(1);
});}
});
});
the data will be received by getyoutube.php and should only print json result of a particular youtube video once.
//some code ommitted
$youtube ="https://gdata.youtube.com/feeds/api/videos/'.$matches[0].'?v=2&alt=jsonc";
$curl = curl_init($youtube);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$return = curl_exec($curl);
curl_close($curl);
$test = json_decode($return, true);
print_r($test);
i cant seem to figure out why my AJAX post keeps sending POSTS method twice
Couple of things to try:
1) Make sure you bind and unbind your key up event
2) Use a global variable to make sure only one ajax request gets sent at once
i.e.:
var ajaxrequest = false; //GLOBAL
function getyoutubedata(){
if(ajaxrequest != false){
return;
}
ajaxrequest = $.ajax ({
type:"POST",
url:"./includes/getyoutube.php",
data: {youtube_url:youtube_url},
success: function(html) { $('.echotest').append(html); ajaxrequest = false; }
});
}
Btw thing to note the youtube api supports jsonp callbacks so you might want to consider doing this through that
3) Try to check if the content of the input field has changed even before calling the above function
You should show us the code with the .keyup() event, probably that's the place of an error. The event handler could execute a wrapper function for the ajax, instead of the ajax directly. For example, if you the keyup event is triggered, try to check if the input content has changed. If so, run ajax, if not - do nothing.
coverted this
$.ajax ({
type:"POST",
url:"getyoutube.php",
data: {youtube_url:youtube_url},
success: function(html) { $('.echotest').append(html); }
}); }
to this.
$.post("./includes/getyoutube.php?url="+ youtube_url, {
}, function(response){
$('.echotest').append(response);
});
POST method is now being executed once. although i cant really explain technically why it worked.