I am trying to add some functionality in a wordpress theme based on JQtouch. I want to run an ajax call to replace the content of a div. But the jQtouch not allowing me to run the code. It runs its default event.
i Have used this code to bind the function, where listArticles() will call my Ajax request.
$(function(){
$('a[href="#articles"]').bind('click', listArticles());
});
Your callback is wrong, it should either point to the function or be an anonymous function itself.
$(function(){
$('a[href="#articles"]').bind('click', listArticles);
});
or
$(function(){
$('a[href="#articles"]').bind('click', function() { listArticles() });
});
Related
i'm trying to load my custom plugin on backend, e.g. datatables.js. But the JS is not working, i must refreshing the page once to make it works, there is also no error on the backend webbrowser console. How to solve this?
Any help would be much appreciated! thanks.
I don't think you should use document ready as this event is only fired once in the backend (unless you refresh the entire be). Instead you should use Neos.PageLoaded.
if (typeof document.addEventListener === 'function') {
document.addEventListener('Neos.PageLoaded', function(event) {
// Do stuff
}, false);
}
You can find documentation here:
http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/InteractionWithTheNeosBackend.html
May be your database.js is loaded before the dom a totaly loaded.
So i suggest to add a event onload to your body to load the Constructor or init function.
//jquery
$(document).ready(function(){
//INIT CONSTRUCTOR FUNCTION
});
//JS
document.body.onload = function(){
//INIT CONSTRUCTOR FUNCTION
};
I have the problem that my jQuery stuff isn't working after a div which includes elements being manipulated by my jQuery code are reloaded by ajax. The jQuery .live function helped me out that at least all my events are triggered. However functions like .text() are still not working. E.g.
$('#idOfElementBeingInDivWhichIsReloadedByAjax').text('New text');
Has anybody suggestions how to cope with this issue?
Edit: The problem is that the web site I'm working on loads its page content with ajax when clicking on a navigation item. All the jQuery functionality works when the sites are visited for the first time. However at the second time the DOM is reloaded and jQuery still uses the original DOM, so methods like .text() don't show changes any more. As mentioned above the .live() method helped me that at least events are still triggered after the second call of a specific page.
The only way to do this, is to make sure that your code is executed after the ajax reload. A common approach is to create a init() function, which are called from the ajax callback function.
$(function(){
$('#myParentAjaxDiv').load('somepage.html', function(){
initStuff();
});
});
function initStuff(){
$('#idOfElementBeingInDivWhichIsReloadedByAjax').text('New text');
}
I've got an Ajax update happening to my MVC view. It displays a message telling the user the operation has completed:
<% if (ViewData["colorOptionsMessage"] != null) { %>
<span class="ajaxMessage"><%= ViewData["colorOptionsMessage"] %></span>
<% } %>
I want to atuomatically fade this message out once it appears, and I'd like to do it once, and have it work site-wide. This is what I tried, which doesn't work (the message appears, but the alert does not show):
$(function () {
$(".ajaxMessage").live("load", function () {
alert("once I can get this to show I'll put in a jueryUI fadeOut"); });
});
EDIT
Just to be clear, I don't need help with the fade out code; I just need help getting this call to Live() to wire up properly.
There's no direct way to be informed automatically when new elements are added to the page. $('.ajaxMessage').live('load') would only happen when the load event fires on an image, iframe or object/embed/applet with class="ajaxMessage", a load event is not fired with its own target for every new element that enters the page.
You could only do this by (a) DOM Mutation Events, which generally aren't widely enough supported, or (b) constantly polling to fetch the .ajaxMessage selector and seeing if any new elements appear in the results.
Better to manually $('.ajaxMessage', function() {...}) immediately after (potentially) adding the content to the page, in the ajax() method's success handler.
ETA:
that jQuery handler doesn't seem to execute after an ajaxForm success
If you can't catch success directly you could try registering a global success handler using ajaxSuccess.
The code below expects you made the Ajax call through jQuery. if the ajax call was not through jQuery, then ignore this answer. Could we see the ajax call itself?
<Script type="text/javascript">
$(function () {
// this is a jQuery global ajax event that fires for every ajax, you need to check the URL
$.ajaxSuccess(function(e, xhr, settings){
if (settings.url == 'URI/ for/ajax /message/load.') {
alert("once I can get this to show I'll put in a jueryUI fadeOut");
}
});
);
</script>
When i want to add something, wait a few, and hide it, I use setTimeout function instead of live events. I add the code on the success callback.
This is a 1 second wait:
setTimeout(function(){ $("ajaxMessage").fadeOut(); }, 1000)
Of course, if you dont want to wait, just fadeOut the element in the success callback.
Can this be enough for you?
I dont think you can bind load to span.
only to IMG IFRAME BODY
As I know "ready" and "load" events are not supported by jQuery in "live". So you can use plugins as this one http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/
Here is the demo http://cdn.bitbucket.org/larscorneliussen/jquery.liveready/downloads/demo.html
How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>
I am using FBML for rendering certain elements on the page such as the name of the user, profil pic, etc. However when there are many FBML elements on page, there is a slight delay which occurs before they are rendered - that's fine since AJAX calls are made to the server to fetch the data by the JS FB library. However, I want to hide the container DIV holding these element till the elements have finished loading, so is there any way to specify a JS callback function which gets fired when the FBML data has finished loading?
Try FB.Event.subscribe
FB.Event.subscribe('xfbml.render', function(response) {
//xfbml.render is fired when a call to FB.XFBML.parse() completes
});
There is another option for this. First, make sure you have the xfbml=0 parameter set on all embeds. Next, you can use this small bit of jQuery:
window.fbAsyncInit = function(){
FB.XFBML.parse(null,function(){
// all FB embeds are rendered as of this point
});
};