I'm using the jquery cluetip plugin and it is working fine. The problem is that when page is loaded from ajax and I want to use cluetip on any element of this page then it is not working.
I already call .cluetip() function on ajax loaded page.
Thanks
You'll have to initialise the plugin when you load the page via AJAX. Put your initialization code in the AJAX success callback.
Related
I have a php page that takes some time to load because it fetches data from third party APIs. How do I show a loader message while the page loads?
Jquery or Javascript is not an option because I am getting the data from a class call from within the body of the page and not through an AJAX call.
You can use window.load to show loader till page load completes.
$(window).load(function() {
// Animate loader off screen
$("#loader").fadeOut("slow");;
});
The form upload works if not called through Ajax first, but if the tab/page is loaded like
$.get(page+".php", {type: type}, function(d){ $('#mainContent').html(d); });
Then the Malsup jquery plugin doesn't work and will redirect to the url listed in the forms action section.
How do it get it to work the same way if I was directly on that page?
I believe on success of ajax request you have to re-bind Malsup plugin so that the DOM gets updated. You would have to add the rebinding in the success handler.This may solve your problem.
I have a form submit via php and after submitted which mean data inserted to the db and
I want to trigger a jquery function automatically and the function contain the inserted data.
Problem I facing is during the page load, the jquery.js file has not load yet and I can't call
the jquery function.
Another problem, If after the page loaded, how can I automatic trigger the jquery function?
Add the script tag that includes the jQuery in head before your use jQuery and put your javascript just before ending body tag. Putting the code in document.ready will ensure the availability of DOM elements to your script and trigger the javascript as the page is ready after being accessed.
$(document).ready(function(){
//your code here
})
try this
this will trigger on form submit
$('.formclass').on('submit',function(){
// this will redirect to the page you want
window.location = "http://www.yoururl.com";
});
but if you want to trigger a function when the form is submitted and the new page is loaded then #Adil suggestion is what you need ..
but you have to be sure that this page only shows after the form submit if for example after submitting the form you redirect to the home page and you used the document.ready then this will run when the page is loaded regardless of the form submit-ion , so every time i go to the main page it will fire ...
I have a form rendered in the view which action is setted to the same page /index. <form action="" name="formRegistro" id="formRegistro"> and a JQuery function which is called when the form is submitted
$('#formRegistro').submit(function() {
// Retrevies data from the form
data = $('#someInput').val()
//Execute AJAX
$.get(
'http://localhost/myproject/',
{ data },
function(data){
$('#divStatus').html(data);
}
);
//Prevent page loading
return false;
});
I'm using and if statement in the IndexController to change between normal view and post view if ($this->_request->isGet()) { and I'd like to output a message in the #divStatus but with I don't know how to do it
Ok, first off. A normal HTTP request is always a GET request, so your condition would always be true (isGet())
what do you mean you want to output a message in the #divStatus ? That seems to be what you're doing with the callback function.
Are you using Firebug? It's a Very NECESSARY tool for working with ajax requests.
Download and install it for firefox, then do the following:
Press the new firebug button at the bottom of the screen
reload your page
try submitting the form
watch the console as your ajax request gets displayed down there
find out what's happening by using Firebug
I recommend using the $.ajax() function with jquery instead of the $.get() function. You'll have more control.
If you want to display a message from the ajax request in your script when it loads, you could parse the data output of the success callback function - or you could make the function return a json object.
I hope this helps. Good luck :)
With ZF there is a very cool way to manage AJAX & "normal" requests within the same Controller class.
It is based on the fact that most JS framework send the X-Requested-With: XmlHttpRequest HTTP header.
Take a look at AjaxContext and ContextSwitch in Zend Controller Action Helpers
If you want to use jQuery to show this message, you can inject text/html into another html element with the appendTo() function, like this:
$('My Message').appendTo('#divStatus');
I have been loading content with ajax and all works fine. Here is my code
$(document).ready(function() {
//Load a-z.php
//Timestamp resolves IE caching issue
var tsTimeStamp= new Date().getTime();
$.post('../../includes/categories/a-z.php',
{action: "post", time: tsTimeStamp},
function(data){
$('#moviescontainer').html(data).slideDown('slow');
});
return true;
});
My data inside a-z.php requires Javascript for it's content and when I load a-z.php onto my page the javascript doesn't work.
I am quessing that I need to link the relevant files to a-z.php and then load it via ajax.
Doesn't this kind of defeat the object of ajax?? That means that I will be loading the js files on the main page and then loading them again when I ajax a-z.php
I hope I made some sense.
EDIT: The A-Z.php page references external javascript files that I have already included on my main page (example: the jquery library, That will mean i am loading it twice.
When I mean requires javascript for its content I have a few modal boxes etc that open when content is clicked. These use the Jquery library)
Your problem is most likely that you need to add the defer attribute to the script tag, which defers executing the script until the content is loaded.
see here
you should not have to load the scripts a second time.
EDIT: The A-Z.php page references
external javascript files that I have
already included on my main page
(example: the jquery library, That
will mean i am loading it twice.
Simply omit them from the a-z.php page then. If they're already included on the main page, they'll be available to the a-z.php script when it's loaded in via ajax. However, I suspect any onload or $(document).ready() calls won't work quite right. I'd try to remove as much JS as possible out of the a-z.php page.