I'm British but have lived in the Philippines since 2005.
I love Linux - Life is so much more productive and less frustrating when using Linux rather than retro windows!
I have a jQuery accordion on my site which is loaded into a div by AJAX after the main page has loaded.
The jQuery library is loaded when the main page is loaded and unless I include the library again just above the code I've shown below, the accordion does not work.
The code below is loaded with the AJAX content and is situated below the accordions' HTML.
I believe that when the library is loaded and the document is ready, a "find" is initiated automatically, but I don't want the extra overhead of loading the library again in the newly retrieved accordion. The question is, how do I make find run after the accordion has been loaded?
Here's the code:
<script type="text/javascript">
//<![CDATA[
$(function() {
$('ul#accordion li>div:first-child, ul#accordion li div:nth-child(2)').click(function() {
$(function() { // format the go button with default formatting $('#goContBtn').addClass('neutral'); });
The javascript is between script tags below the html. The page already has a jQuery accordion and tooltips working on it. I'm just wondering whether I have misunderstood the impact of changing a class after page rendering?
The code above is test code and won't actually just directly change the colour of the div, it will be dependant on validation.
Thanks for your help.
Peter A Linux Admin
Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)
I've got a script which produces a slide down notification at the top of the screen, which is called using showMessage('warn', 'This is a warning message').
It used to use showMessage('warn'); which would be enough for it to show the normally hidden div. The thing is that I've converted the script to accept a dynamic message, passed as a parameter. That works, but not perfectly.
It's complicated by the animation which runs to slide the message on and off the screen. This involves calculating the height of the div, which could be done before, when the div contained static HTML, but now the div is actually empty and is only populated with a message when called, the calculation fails. I think this is because outerHeight() can't detect the presence of the dynamic HTML.
I have a jQuery function which when run wrapped in a click handler, works nicely. It causes a notification div at the top of the screen, to gracefully slide up out of the view port.
The problem is that when I run the same function inside a timeout (so that if the user doesn't click the message to remove it, it will remove itself after 8 seconds), it doesn't slide but is just removed suddenly after 8 seconds.
This is the function in the timeout that isn't working correctly:
I'm using a tooltip plugin which is working perfectly on the first page I implemented it on, but on another page, they only seem to work if the page is loaded via the main CSS menu which uses ajax to pull the page into a content div (same as with the first page).
That's working fine, but the trouble is, that some of the pages, such as the second page are accessible via links appearing outside of the main menu and when called using those links, (which use a different ajax loader) the tooltips don't work.
The main menu uses a Jquery ajax loader and the other links use a home made ajax loader (which works in all other respects).
The pages with tooltips in them (actually, they're not pages but content pulled in via ajax), have the following code at the top to initiate the tooltips:
I have a function which is triggered when users click on a menu item in the main menu. It check whether the href attribute for the menu item is set (if not it will return true) and if it is, will make an ajax request. The returned data will be checked for the string, "session-timeout" and if present, the user is redirected to the index page. If not present, the old content will be faded out and the new faded in.
At least that's how it's supposed to work in theory. In practice, I can't get the "session-timeout" to trigger the redirection because I can't get the if statement to work properly.
Here's the code:
$('#nav li a').click(function(e) { // Figure out which method to use, this one or the original? $('#nav li').children('ul').stop().slideUp(300); var h = $(this).attr('href'); if (h.length > 1){ e.preventDefault(); $.get( h, function(data) { if (data.indexOf('session-timeout')) { // timeout received, so redirect to login. window.location="index.php"; exit; } else { $('#contentMAIN').fadeOut(500,function() { $(this).html(data).fadeIn(500); }); } }); // var thisURL = location.href; // if( thisURL.indexOf('<search-page-url.html>') ) { myQuote.hide(); } // Prevent the hyperlink from activating in the traditional way return false ; } else { // Return and allow other actions to be activated return true; } }); });
Perhaps someone would be kind enough to tell me where I'm going wrong please?
Kind regards,
Peter A Linux Admin
Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)
I adapted Jakes code from this thread to try to make my original content fade out, pending the fading in of replacement content, the product of an ajax call.
This is my code:
$(function() { $('#nav li a').click(function(e) { // Figure out which method to use, this one or the original? // If the href attribute is set, then it's been converted to use this method.' var hr = $(this).attr('href'); if (hr.length > 1){ e.preventDefault(); $.get( $(this).attr('href'), function(data) { $('#contentMAIN').fadeOut(500,function() { ($('#contentMAIN').html(data),function() { $('#contentMAIN').fadeIn(500) }) }) }) // Prevent the hyperlink from activating in the traditional way return false ; } else { // Return and allow other actions to be activated return true; } }); });
What happens is that the div with id "#ContentMAIN" is successfully fading out, but the new content is not appearing.
I'm hoping that someone could show me what I'm doing wrong please?
Many, many thanks!
Peter Linux Admin
Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)
I wish to have a navigation bar containing a bunch of links, which when clicked, fetches the relevant file from the server and displays it in a div.
The problem is that I've been searching for the past three hours for a way to pass the url to the jQuery script for the load function. All of the dozens of ajax tutorials I found, assumed that I would be happy to hard code the url of the file I want to load, directly into the javascript rather than passing it with the event.
Obviously if I do it their way, I'll end up with a dedicated function for every link. So how should I pass the url that I want to load?
I'm building a PHP web application which makes extensive use of JavaScript, most of which I'm hoping to convert to using Jquery.
The application essentially consists of two div containers, one for the header/navigation area and another for the content to be displayed in. The navigation area loads the content into the content div using ajax.
My problem is that the elements in the content are complete ignored by JQuery and appear to be invisible to it. I guess because the JQuery initialization thing ran when the page was first loaded rather than each time new content is loaded.
The effect of this is that cool things like JQuery tool tips don't work in the content area.
By the way, at the moment, the ajax code used to load the page is not the JQuery method but a custom one. I won't easily be able to convert that.
What would be the correct way to overcome this please?
Thanks.
(please be gentle with me - this is my first application to use JQuery on!)