through my application I use common Ajax loader Div, i show it always when i make an ajax request
submitHandler: function(form) {
$('#loader').show();
$(form).ajaxSubmit({
type: 'POST',
url: "/exampleactions/example",
data:{
},
success: function(response_data){
$('#loader').hide();
where is the best place to put this div to use it every where ?
shall i put it layout.php ?
IMO
There is not going to be a 100% correct answer for this.
Its totally up to the design of the application.
But, if the same loader is used through out the site, and nothing is loaded outside AJAX, then its probably a good idea to keep the div in the layout and keep it hidden until needed.
Related
I need to display on my Web page a simple text string returned from a REST service. I am currently using an XMLHttpRequest:
<div id="returnedText"></div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.status == 200 && xhr.readyState == 4) {
document.getElementById("returnedText").innerHTML=xhr.responseText;
}
};
xhr.open("GET",url,true);
xhr.send(null);
</script>
Isn't there a lighter way? I considered using a script tag but the Web service in question doesn't support JSONP. I also did a naive attempt with an iframe (putting the REST url as src) but it didn't work.
I did another attempt with iframes and actually this works fine:
<iframe src="url"></iframe>
Where url is the REST service call.
I must have done something wrong the first time (maybe an authentication issue).
Well the iframe route is clunky since you'd be loading the REST response into it and then reaching into it via JS to get the response. What's more, it would cause a visible load in the browser's address bar area. AJAX came along to do away with the iframe hack :)
JSON-P requires about as much setup as AJAX and if your server doesn't support the callback, that's a none starter.
AJAX needn't be thought heavy. Kick it into its own utility function or, even better, use a library, which makes requests like these do'able in one line. jQuery example:
$.get('some/path').done(function(response) { /* do something */ });
Starting with Zend and I´d like to know what is the simplest way of sending POST data to another page, not by forms, but by some link in my view instead. Thanks :)
You can't send POST data through a link. At least not through a normal link. Link can only carry GET data.
If you need to send POST over a link it's most certainly a design flaw.
If you're 100% sure, that you need it, you can do that using jQuery and onclick event. It`s not possible to do it without javascript. Other option would be to send it using form with hidden fields with single submit button visible - that would even work without javascript.
Normal hyperlinks in HTML are sent with GET requests and are not supposed to change the state of the resource being accessed. This is known as being idempotent. You can repeat the request over and over, and the result of each succeeding request to the same URL is the same as the first one.
POST requests don't have this restriction and are intended for when the user needs to change something (such as creating a new resource.)
It's not possible to send a POST request via a normal HTML link. And even if you find a way, it breaks an almost universal expectation that web users have. What are you trying to accomplish? Maybe there's a better way.
But to answer your question, you could use something like jQuery to capture the "click" event and make it do a POST request:
$('.my-link').click(function() {
var url = $(this).attr('href');
var data = {};
$.post(url, data, function() {
window.alert('success!');
});
return false;
});
If your URL has any query parameters, i.e. "?foo=bar&baz=bum", then you'd probably need to strip them off of the URL and pass them as a second parameter to the $.post() function. This is left as an exercise for the reader. ;-)
I know with jquery and ajax, you can specify what for example, an id of the element to get back (so you don't have to parse the whole document yourself).
I'm wondering where to do this in the ajaxForm plugin, or if I have to do that myself.
For the simplest example I can think of, here's this:
$(#myForm).ajaxForm({
success: function(responseText){
alert(responseText);
}
});
What if rather than alerting the whole result (which is an entire page), I'd like to alert only what's in a certain element of the result (say, <div id="result"></div>)
Best way to accomplish this?
alert($(responseText).find('#result'));
I think this is easy, but I'm not sure what the right syntax is. I am posting a form via JQuery ajax - you know
$j.ajax({
type: "post", etc.....
But I need to make sure the form is capable of being processed if Java is disabled. Is there a "header" in the ajax send that can be used to identify it as aposed to a normal post so that on completion whether ajaxed or normal php post I can return to the sending page. If not ajaxed I can use if($update): header('location: ...'); endif; but if I use that with the ajax request it stops the ajax success function. Hope makes sence
Yes, jQuery sets a custom header when doing an AJAX request:
X-Requested-With : XMLHttpRequest
EDIT russp's server side PHP code:
define('IS_AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
if( IS_AJAX_REQUEST )
{ //This is an AJAX request, do AJAX specific stuff }
else
{ //This is not an AJAX request }
Don't really know about the headers, but maybe the easier solution is to simply call the url of the processing page with an extra parameter when you're doing it in an ajax context?
The page can then simply check if the parameter is present or not and take appropriate action, depending on it.
You'll have to do a lot or working around, but you can use a combination of <noscript> and javascript code to get what you need.
See WWW FAQs: How do I detect JavaScript in the user's browser?
Hope that helps you get started.
The usual way to handle ajax form requests is to write the form to work without any kind of JS so if you are in a basic php file you would start with
<?php
if(count($_POST) > 0) {
//process form entries
} else {
//output form
}
?>
Then you would add some jQuery to hijack the submit click so
$('input[type=submit]').live("click", function(e) {
e.preventDefault();
//ajax post here
//IE
return false;
});
I just finished the basic design structure for my contact page without flash; it's located here.
Can anyone suggest the best approach for making a confirmation script (inside a DIV) without reloading the page (preferably with jQuery). I want to replace the content in the main WRAP with new content (just text) confirming the email was received.
Any suggestions?
First of all I don't believe you can notify the user that the mail was actually received (at least not in a trivial way). But you can notify that it was sent.
For this with jQuery you can send the contact info via AJAX and then show the response in the DIV.
May be something like this:
$.ajax({
type: "POST",
url: "sendMail.php",
data: $('#contactForm').serialize(),
success: function(msg){
$("#responseDiv").html(msg).show();
}
});
Of course this is assuming that your server sends the for with "sendForm.php" and that your contact form is wrapped with a <form> with "contactForm" as an id.
The server should respond with the text to show within the div. If the message was sent or not.
Hope this helps.
References:
Ajax help for jQuery