I use the following script to get the content of the remaining.php.
The drawback is that sometimes it doesn't work or it is kinda slow to display the text. Is there any other way of doing this ?
Thank you
$(document).ready(function(){
$("#SubmitButton").click(function (){
$('#remaining').load('remaining.php');
});
});
You could directly include the contents of remaining.php into the initial markup but make it hidden by applying display:none; style to the #remaining element. Then when the button is clicked simply show it:
$(function() {
$('#SubmitButton').click(function () {
$('#remaining').show();
});
});
Of course if you need to pass some parameters to the script which will depend on some javascript variables that are known only at the moment the button is clicked you will need to use AJAX as you are currently doing.
If "sometimes it doesn't work or it is kinda slow", the problem is probably the server you are using, not your javascript code.
The javascript code you're showing us here doesn't really do anything that could be slow, it only binds an event on a submit button. However, what could be slow is waiting for the answer from your web server when sending a request for remaining.php
From there, there is a thousand of reasons why your web server could be slow. Maybe you could post the content of your remaining.php file so we can see what is going on in there.
This isn't really a fault of jQuery, but the speed of return from your server. Perhaps there's a better way to handle it instead of fetching a full page?
For example, if your content request was only retrieving a message, you could return JSON from your server and have jQuery handle the data:
$(document).ready(function(){
$("#SubmitButton").click(function (){
$.post('remaining.php',
null,
function(data) {
// do stuff with your JSON result
});
});
});
When you're using .load(), you're sending a request to the server to get your content, which is why it can seem slow. I'm not sure why it sometimes won't work , but I would venture to guess that you may be clicking $("#SubmitButton") before $(document).ready fires.
Depending on your implementation, you may be able to refactor your application so that the text you want to display is pre-loaded on the page.
Related
I have a below anchor as below
<a onclick="return getFile('/log/sample.log');" href="/log/sample.log" target="_blank"> sample.log </a>
Because at my server, the log directory in href may be not correct. So the function "getFile" would change the href to the correct one after asking the server.
The first click always failed since the link was not correct, then after AJAX process in getFile was finished and the correct href was given, the clicks later on was ok.
The problem is how I forcefully let html wait ever at the first click until the href is changed, then do the query on the server.
Thanks in advance.
I guess my current way could be not in the correct direction by using "onclick" to implement the idea.
You want something like this
$(function() {
//assume you tagged all anchors you want to do this for with class=adjustlink
$('a.adjustlink').click(function(e) {
var thisAnchor = $(this); //save reference for later use
//this will either be true (see below) or undefined (falsy)
if(thisAnchor.data('myapp.linkHasBeenTested')) {
return; //continue on
}
// Stop the link from being navigated (the default for this event)
e.preventDefault();
//I'm assuming this is fetched as text but could just as well be JSON or anything else
$.get('/LinkAdjustment/', thisAnchor.attr('href')).done(function(result) {
thisAnchor.attr('href', result); //set the href
thisAnchor.data('myapp.linkHasBeenTested', true);
thisAnchor.trigger('click');
});
});
});
As an interesting side-note. You might be attempting to do something similar to the way REST is intended to be done. You might consider, first fetching a resource that will tell you up-front what the correct links are.
I would recomend setting the href to # initially. And in your getFile, set the href to the correct value and then programatically click the 'a' on success of your ajax
You will need to find the element to do this. It can either be done by setting an id and then using document.getElementById(), or would be easier to do do this using Jquery selectors, and it even has a .click() you can call after.
If you want persist with this flow make your ajax call synchronous, it will forcibly wait.
But this flow is not suggested, I would have rather updated these hrefs on page load or would have set a default url to my server page, which would then redirect to right log file
Recently I have been trying to get my page to be able to change the content with AJAX or similar, using Javascript and without redirecting.
I found on another question they claim it can not be done and you must use a hash.
However, here, it is being done so that leads me back to wonder how it is done.
Any ideas?
Thanks.
You have the html structure like:
<div id="navigation">
About Me
Other Stuff
</div>
And you Javascript Code would be:
$('#about').on("click",function(e){
e.preventDefault();
//do the ajax stuff.
});
$('#other').on("click",function(e){
e.preventDefault();
//do the ajax stuff.
});
other examples:
http://snipplr.com/view/6455/
I have a form setup where a user can register, and on submittal, a PHP script runs which validates the user, and once that is done, it echoes a messagebox which jQuery quickly hides and then fades in over the course of 1 second. What I now want to do is to be able to hide that form on submittal, and I thought this might do it:
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function() {
$(this).hide(1000);
});
});
Where div.mainsuccess is the success message, and form.register is the form (with a class of register). Now the first line works, which tells me the script is being called, but the form is not being hidden at all. I'm doing something stupid here, but I cannot figure out what?
I've tried to look through the jQuery API documentation for submit(), but I cannot understand what is being said. Thanks.
I think the reason it may not work is because the form is submitting it's data and waiting for page to refresh... which means, it will stop all of it's javascript stuff coz it's pointless ... I could be wrong but hey, your hide would take 1 second to hide but your page could reload quicker.
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function(e) {
e.preventDefault();// will stop the form being submited...
$(this).hide(1000);
// do ajax here...
return false;
});
});
Updated
here is a list of tutorials
http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
Videos ....
http://www.youtube.com/watch?v=0CMTQtnZ0G0
Try this:
$("form").submit(function(e){
e.preventDefault();
$(this).hide(1000);
});
You'd want to incorporate an ajax call (I'm taking post) to call the php instead of reloading the page
$('form.register').submit(function(e) {
e.preventDefault();
url = $(this).attr('action');
$.post(url,$(this).serialize(), function(data) {
alert('success');
// data will return source code of the URL so you can grab that data and put it somewhere on the script like so.
$('#result').html($(data).find('form'));//form can be replaced with anything
// #result is the id of an element you wish to return the info to
});
$(this).hide(1000);
});
And you'd be done.
More info here
Well, seems that the form refreshes after submission, so it is still there.
I suggest using something like jQuery form: http://jquery.malsup.com/form/
Read up on it and you will find how to use it, and when it is submitted, it won't refresh, and using hide() you will be able to hide it.
N.B you will need jQuery referenced in your code to use jQuery form.
Enjoy.
So I have the weirdest problem, in my company's CMS we have a newsletter system that does an AJAX call to send an e-mail. Now this works perfectly in all modern browsers on all operating systems, however it does not for one client.
This client is using Windows 7 and IE9, I have Windows 7 myself and tried IE9 (even with all compatibility modes) but it would always work.
I don't know why it doesn't work for them, however I was able to "fix" it by placing an alert before and inside the AJAX call.
I am thinking it must be something with their hardware or connection, and was hoping somebody might have an explanation. Here is the AJAX call (with the alerts) so you can see there is nothing wrong (right?):
$('#send_single').unbind().click(function(event) {
event.preventDefault();
processing();
alert('one');
$.post(
'newsletter/ajax.php',
{
action: 'send_single',
email: $('#single_email').val(),
template: $('#select_template').val(),
id: $('#select_newsletter').val()
},
function(data) {
alert('two');
finished_processing();
cmsalert(data);
}
);
});
processing() fades in a processing box, which finished_processing() then removes. Without the alert boxes the finished_processing() never happens, with the alertboxes it runs as expected.
processing() and finished_processing()
function processing(){
$('#full_overlay').fadeIn();
$('#processing').fadeIn();
}
function finished_processing(){
$('#full_overlay').fadeOut();
$('#processing').fadeOut();
}
#full_overlay is a fullscreen fixed div with a white overlay. #processing is a centered div containing a loading gif and a "Please wait..." string.
finished_processing() doesn't happen, so I don't think cmsalert() is in any way related. (cmsalert slides in a div at the bottom of the page containing a - usually success - message)
Try something like the example show in the jquery docs, changing your finished_processing function like:
function finished_processing(){
$('#full_overlay').promise().done(function() { this.fadeOut(); });
$('#processing').promise().done(function() { this.fadeOut(); });
}
You may also face problems if the client clicks several consecutive times, keep that in mind. I believe the return of $.post() can also be used in the same lines ($.post().promise() or $.post().done) in case you could store in a variable and use that. You may also like to have a look at Deferred Object.
I have been with that a whole day..
I have a home page(index.php) and i have a small menu in it(made up of buttons) and a <div id=tab_contents></div>
i have used AJAX in such a way that whenever i click on any of these buttons, another page is loaded in the tab_contents-div.ie:home_tab0.php, home_tab1.php, home_tab2.php for each button respectively.
The page that i want to fetch with ajax should contain a <body onload=initialize()> ...</body> function.or it can contain a javascript code snippet to trigger the initilization() function.
that is when the button is clicked,the page lets say home_tab0.php is loaded, codes inside the home_tab0.php should trigger the initialization() frunction.
i have tried every possible way in my knowledge to make it work but without success...:(
please if i can get any help for this i would be so grateful.
With jQuery it's easy to call any function after the ajax call has returned, and data is loaded. I guess that's what you want to do. There are a few examples here:
http://api.jquery.com/jQuery.get/
E.g:
$.get('home_tab0.php', function(data) {
$('#tab_contents').html(data);
initialize();
});
This is a common problem. I recommend using jQuery and letting it take care of this for you. Reimplementing what they've done would be a waste of your time.
http://api.jquery.com/load/
$("#tab_contents").load("http://www.foo.com/loadContent");