I want to update a element based on things that are happening in the code server side.
For instance, when I invoke my "Start" function by clicking a button on my page it should change the text inside the element to "Downloading", and then once it's done it should change the text to "Done".
I have this script on my page which invokes a action and updates the text after making a successful request.
<script>
function StartDownload() {
$.ajax({
url: '#Url.Action("Start", "MyPage")', success: function (result) {
$("#badge").removeClass("badge-danger").addClass("badge-info").html("Downloading");
}});
};
</script>
as you can see, right now it's just making a request and on success it changes the class and it changes the text to "Downloading".
The goal is to change it to "Downloading" once it invokes the method, and then once the method finishes I want to change the text to "Done".
And I'm not sure how to do that, I need to some how listen for multiple calls in my ajax method but I have no idea how to do that.
What's the proper way of achieving this?
I was thinking of doing something like this but I'm not sure if that's valid
public ActionResult Start()
{
//Post data back to the ajax to tell it to change to "Downloading"
StartDownload();
//Post data back to the ajax to tell it to change to "Finished"
return View();
}
It is pretty simple in fact.
Except success $.ajax() has a lot of other "events", which you can use.
beforeSend for example may be your choice, because it executes just before ajax call
You can find more events here:
https://api.jquery.com/jquery.ajax/
Related
I have a form that loads some of its Data dynamically via Ajax, where, apart of a lot of other stuff, I fill a dropdown list. When selecting an item it will load the corresponding data into a table.
That all works fine, but now I want to be able to, by default, load the data of the first element once the page loads.
But since the dropdown populates over Ajax, it is filled slightly after $(document).ready(), so that doesn't work.
One way it might work would be to just wait for a second or two, since then it should all be loaded, but that really isn't something I fancy doing.
Any idea how I could achieve that?
I already tried it with onloadeddata="loadData($(this)[0].selectedOptions[0].value)" on the select tag, but that doesn't seem to do anything.
EDIT:
And I don't want to execute this in the ajax success function as data might also be loaded in other ways. It should really be the dropdown field or something that watches the dropdown, that executes this.
JQuery Ajax provides a callback for successful request.
$.ajax({
url : 'stackoverflow.com/api',
type: 'GET',
success : successMethod
})
function successMethod(){
// foo
}
Once the request receives a response successMethod will be called.
jquery ajax have a success function in which you can do such kind of functionality. To do so you can try:
success: function(response) {
// fill the form value with 'response'
$('#dropdown_id').val('any_value'); // this will set the dropdown to specific value
}
$.ajax({
url: "test.html",
...
}).done(function(data) {
// do something with your data in here
});
Hi I am running an AJAX Post to my PHP url and when done I am returning a document.ready function with my appended jQuery page.
I want to make sure if I am doing this correctly when placing the function in the success part of my AJAX post. It will not work at the minute. Any help would be great?
function loadJobRequests() {
/ /AJAX code to submit form.
$.ajax({
type: "POST",
url: "http://localhost:8888/EduSubOct/json-data-
jobrequests.php",
data: { userEmail: localStorage.getItem("email") },
cache: false,
success: function() {
$(document).ready(function(){
I just need to find out if i have to pass any parameters into the function at success and then same same parameter into document.ready. Thanks
Short answer: no, you shouldn't use $(document).ready(...) here. The function you put inside that is only executed at the moment the DOM is first "readied", shortly after page load - this will be long since past by the time your script has been loaded, executed, fired an Ajax call and then returned the response (all of which needs to happen before your success callback happens).
But the very reason that $(document).ready(...) doesn't work also means that you don't need it here. The only reason it's used is to make sure that any DOM elements you refer to (typically to attach event handlers to) actually exist and the point this code is executed. Since the "ready" event has long since fired by the time the Ajax response comes in, the DOM will accurately reflect the current content of the page, and you can safely do whatever you want to manipulate it.
So whatever function you were going to put inside there, just put directly in the success callback.
I have a form that has a set of drill-downs so one drop down will fill in another. I have a script set up to remember the form values and reset them for that page. My issue comes in when I execute on the trigger for the element, I can't figure out any way to wait on the other dropdown to refresh and then setting its value. Is there any way I can wait for the success result of a function that's kicked off by trigger('change') (or similar function) besides listening for the ajax request. My fall back plan is to do this with cookies and then fill in the form server side. Which might look better anyway, I'm just wondering if it can be done.
I have it saving the values from each drop down and loading them when I get back, I'm wondering if there's some way I can
listen for the ajax call in dropdown_a to finish if I load the value from session storage and call $('#dropdown_a').trigger('change')
the more I think about it I'd probably have to store some sort of value in the program that tracks any request made so I can await them
which would defeat the purposes of the self contained script I have for this
$('#dropdown_a').on('change', function() {
//Ajax call I want to wait for
$.ajax({
url: 'someendpoint',
data: 1,
success: function(response) {
util.fillsInSelectBox(response, $('#dropdown_b'));
},
error: function() {
showErrorModal();
}
});
});
$('#dropdown_b').on('change', function() {
$('#table').bootstrapTable('refresh');
});
Suppose I have a page called form.php. I then clicked a button called "add button". This button triggers an event that got detected by a jquery function. The jquery function makes an ajax call to add.php.
Inside add.php, there is code that checks if a particular record exist in the database. If it does find that the record exists, I want to do the following.
Send a response string "exist" to ajax.
The ajax, inside the .done() function, will execute a prompt that says "This record already exist, do you wish to overright"?
If the user canceled the prompt, nothing more should happened and the ajax call should be done.
If the user clicks "ok", I would like the php script to be notified of this and execute an update statement using the data from form.php.
I suspect this is impossible because after receiving a response from php, AFAIK there is no way for ajax to respond back to the php script that is currently executing.
Am I correct or there is a way to do this?
You have to add a parameter to your ajax request, like override with true and false. By default/first request you set it to false. Then the add.php does it's default and returns exists.
The the user makes his decision. If he want to override, you send the ajax request again with the override parameter to true. Your add.php will notice the parameter and does whatever it has to do.
Wrap your ajax handler in an own function with a done callback. So you can reuse the request as often as you want. Pretty easy, no double code needed as well ...
The .done() function of your first ajax call executes when the ajax call has finished successfully, so when your php script has finished completely.
If you want to do something else, you would need to make a new ajax request. That could be to the same or another script, sending in different / new / additional parameters.
Note that you have to make sure that the second script cannot be called without the first one finishing, for example by setting and checking an expiring session variable.
you can do something like this.
$.post('add.php',$(this).serialize())
.done(function(result){
var r = confirm("This record already exist, do you wish to overright");
if(result == 'exist'){
if (r == true) {
$.post('update.php',$(this).serialize()).done(function(r){
console.log(r);
});
} else {
return false;
}
}else{
console.log(result)
}
});
before we start apologies for the wording and lack of understanding - I am completely new to this.
I am hoping to run a php script using Ajax - I don't need to send any data to the php script, I simply need it to run on button press, after the script is run I need to refresh the body of the page. What I have so far:
HMTL Button with on click:
<font color = "white">Next Question</font>
JS Ajax call:
function AjaxCall() {
$.ajax({
url:'increment.php',
type: 'php',
success:function(content,code)
{
alert(code);
$('body').html(content);
}
});
}
this runs the php script but doesn't stay on the current page or refresh the body - has anyone got any ideas - apologies if this is completely wrong I'm learning - slowly.
Many thanks in advance.
**As a small edit - I don't want a user to navigate away from the page during the process
How about using load instead of the typical ajax function?
function AjaxCall() {
$(body).load('increment.php');
}
Additionally, if you were to use the ajax function, php is not a valid type. The type option specifies whether you are using GET or POST to post the request.
As far as the dataType option (which is what I think you mean), The Ajax doesn't care what technology the called process is using (like ASP or PHP), it only care about the format of the returned data, so appropriate types are html, json, etc...
Read More: http://api.jquery.com/jquery.ajax/
Furthermore, if you are replacing the entire body content, why don't you just refresh the page?
your ajax should be
function AjaxCall() {
$.ajax({
url:'increment.php',
type: 'post',
success:function(data)
{
console.log(data);
$('body').html(data);
}
});
}
if you want to learn ajax then you should refer this link
and if you just want to load that page then you can use .load() method as "Dutchie432" described.
If you are going to fire a javascript event in this way there are two ways to go about it and keep it from actually trying to follow the link:
<font color = "white">Next Question</font>
Note the return false;. This stops the following of the link. The other method would be:
<font color = "white">Next Question</font>
Note how this actually modifies the href to be a javascript call.
You can study about js and ajax here http://www.w3schools.com/ajax/default.asp will help a lot. Of course all js functions if called from internal js script should be inside <script></script> and if called from external you call the js gile like <script src"somejs.js"></script> and inside js there is no need for <script> tags again. Now all those function do not work by simply declaring them. So this:
function sayHello(){
alert("Happy coding");
}
doesn't work because it is just declared and not called into action. So in jQuery that you use after we declare some functions as the sayHello above we use:
jQuery(document).ready(function($){
sayHello();
});
Doing this we say that when everything is fully loaded so our DOM has its final shape then let the games begin, make some DOM manipulations etc
Above also you don't specify the type of your call meaning POST or GET. Those verbs are the alpha and omega of http requests. Typically we use GET to bring data like in your case here and POST to send some data for storage to the server. A very common GET request is this:
$.ajax({
type : 'GET',
url : someURL,
data : mydata, //optional if you want to send sth to the server like a user's id and get only that specific user's info
success : function(data) {
console.log("Ajax rocks");
},
error: function(){
console.log("Ajax failed");
}
});
Try this;
<script type="text/javascript">
function AjaxCall() {
window.location.reload();
}
</script>
<body>
<font color = "white">Next Question</font>
</body>