I want to load some form elements for a custom post type's edit screen via AJAX.
What's the best practice to implement this?
Should I use this algorithm?
Hook an action to admin_menu to
detect the request from AJAX client (via x-requested-with),
clean the buffer (via ob_clean),
output the requested element, and exit.
Request wp-admin/post-new.php from AJAX client
Related
I want to create a page with will be filled with dynamic info using Ajax (JQuery). The info will come from various GETs I need to do in other URLs.
I'll be using Sinatra + JQuery to to that, but as my WEB experience is almost null and don't have any idea how do to it right.
The requisites for this are:
Each time a GET completes, a new line of information should appear on the page.
If the GET could not be complete, a default info appear on the page.
My idea so far is to do something like this:
Have my controller performing each GET inside a thread.
Each time a thread ends, with success or not, I inform the view of the result and render a partial
I'll have as many partial as I need (for each GET I must do)
The first time I load the page I fill in the default info, them I update via AJAX with the successful GET responses
This does not seem the correct approach, so I'm asking someone that already did something similar or has more experience on this some help.
You start off with a simple get('/'){} route that holds the default message (or any other GET route). Then you have your other GET routes that you want to display on your default route. In Sinatra you can check whether a request is an xhr-request or not with a request.xhr? If you have an xhr request you return a json value to your view, otherwise reject the request or render a view with proper html. This is on your sinatra backend. In your views you can use JQuery or any other JS library or plain JS to handle asynchronous data requests. You can use the ajax function in JQuery to request data from your routes and then add them to your DOM. It's as simple as that :)
Now you will have to investigate on the JQuery site how to make ajax requests and how to append data to existing DOMs. That's all there is to it.
If I have a controller method that sets flash.success("some.i18n.key"); and I render a page that is loaded via ajax that item does not get removed from flash. Even though I've rendered the content to the screen (html loaded into a div in the success handler of my ajax post) the next page I visit still has the success message in flash. Pages that work with a normal form post,non ajax) this issue does not happen. Any idea whats going on?
Further investigation seems like this might be some sort of race condition. When I do a normal post and the FLASH cookie is returned it expires immediately and on the next request it is not sent back to the server. In the case of the AJAX post and then a subsequent request the cookie IS sent back to the server.
flash values are kept for one redirect. If you call render in your controller at the end of your method, you do not issue a redirect, so values will be available for the next request. To avoid this you have the choice :
use renderArgs in your method to pass your value to the view
at the end of your method, do not call render but call another method of the controller, thus you will issue a redirect instead of a direct render.
Since play 2 they changed the flashing a bit, instead of 2 maps (incoming, outgoing) there is just one.
What I end up doing is calling:
#flash.clear()
Just after the flash messages are rendered (in the view). This way, you are sure they are rendered just once, regardless of weather you use direct render, or redirect.
I have an app that has several different types of form elements which all post data to the server with jQuery AJAX.
What I want to do is:
Show a loader during AJAX transmission
Prevent the user from submitting twice+ (clicking a lot)
This is easy to do on a one off basis for every type of form on the site (comments, file upload, etc). But I'm curious to learn if that is a more global way to handle this?
Something that's smart enough to say:
If a form is submitting to the server and waiting for a response, ignore all submits
Show a DISABLED class on the submitted / clicked item
Show a loading class on the class="spinner" which is closest to the submit item clicked
What do you think? Good idea? Done before?
Take a look at the jQuery Global Ajax Event Handlers.
In a nutshell, you can set events which occur on each and every AJAX request, hence the name Global Event Handlers. There are a few different events, I'll use ajaxStart() and ajaxComplete() in my code sample below.
The idea is that we show the loading, disable the form & button on the ajaxStart() event, then reenable the form and hide the loading element inside the ajaxComplete() event.
var $form = $("form");
$form.ajaxStart(function() {
// show loading
$("#loading", this).show();
// Add class of disabled to form element
$(this).addClass("disabled");
// Disable button
$("input[type=submit]", this).attr("disabled", true);
});
And the AJAX complete event
$form.ajaxComplete(function() {
// hide loading
$("#loading", this).hide();
// Remove disabled class
$(this).removeClass("disabled");
// Re-enable button
$("input[type=submit]", this).removeAttr("disabled");
});
You might need to attach to the ajaxError event as well in case an AJAX call fails since you might need to clean up some of the elements. Test it out and see what happens on a failed AJAX request.
P.S. If you're calling $.ajax or similar ($.getJSON), you can still set these events via $.ajaxStart and $.ajaxComplete since the AJAX isn't attached to any element. You'll need to rearrange the code a little though since you won't have access to $(this).
I believe you have to do 2 for sure and 3 to improve usability of your app. It is better to keep backend dumb but if you have a security issue you should handle that too.
In JQtouch, any link is automatically convert into ajax call. I want to detect the moment the ajax call was send. This is so that i could insert a loading screen to let users know that the system is processing the submission.
I search through jqTouch API and apparently they only have callback events for page animation. Am i missing out on anything?
You can use the core jQuery global AJAX functions, for example $.ajaxStart() for the start of a batch of requests, or $.ajaxSend() to detect the beginning of each request. Something like this:
$(document).ajaxSend(function() {
alert("Request sending...");
});
Ready up on jQuery's Ajax Events: http://docs.jquery.com/Ajax_Events .
You may bind these to elements as follows:
$("...").bind("ajaxSend",myFunction) ;
every element specified this way will then react to a Ajax call being made with the specified callback function.
I have a page where a user can upload a file along with some other input. Because I wanted this to be AJAX-like, I resorted to using an iFrame to accomplish this.
After the file is uploaded and an iFrame is loaded with a response page, I need to update a DIV outside of the iFrame with an AJAX call. The reason for separate updates, is that the result of the outside DIV depends on the input that the user provided with the file input.
Can this be done? Am I approaching this the wrong way?
Thank you!
UPD: Can the returned client code from within the iFrame "see" elements outside that iFrame?
Write your code in the onload event of the page loaded into the iframe. Then top will give you the top frame or parent will give you the parent frame.
Yes , it can be done. But you can do away with,the need for an AJAX-call , to update the outside the div.
Have your, servlet(assuming you are using JSP/servlets) that accepts the mutlipart request(the servlet that accepts the upload), return the intended response (to be shown on the refreshed iFrame), and ALONG WITH IT, the necessary information from the file input. This way you have all the necessary details on the client, in one response. A simple javascript function can achieve , updating the outer div with the information from the file input.