Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Jquery not working when viewed via an Ajax frame

Posted on 2011-09-08
Medium Priority
Last Modified: 2012-05-12
I am creating a site using Ajax to load pages within a parent page (much like an iframe). Some pages have Jquery elements that are not working.

For instance, if you go here... and click on 'Riad' at the top you'll see that you just see a bunch of thumbs whereas the actual page here shows you how it's supposed to look

Another Jquery function works fine on another page (the home page) it's just the gallery function on the 'Riad' page.

I have attached the whole code for the Ajax holder page which has all the javascript links on there for the content pages.

So to recap looks fine on it's own but appears as (click on 'Riad') in the menu) when using an Ajax frame.

How the page should lookHow the page should look
How the page looks when viewing through an Ajax frame How the page looks when viewing through an Ajax frame
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Riad Hikaya</title>

<link href="css/ria.css" rel="stylesheet" type="text/css" />

<link href="galleria.classic.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript" src="js/slider.js"></script>

<script src=""></script>

 <script src="js/galleria-1.2.5.js"></script>

<script type="text/javascript">

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}


<body onload="MM_preloadImages('images/but-gallery-ovr.png','images/but-home-ovr.png','images/but-riad-ovr.png','images/but-dining-ovr.png','images/but-spa-ovr.png','images/but-services-ovr.png','images/but-rates-ovr.png','images/but-location-ovr.png','images/but-contact-ovr.png')">

<table width="1048" border="0" align="center" cellpadding="0" cellspacing="0" class="top40">
    <td colspan="2" align="center" valign="top"><div id="leftcolumn">
      <table width="100" border="0" cellpadding="0" cellspacing="0" class="menu">
          <td><a href="javascript:ajaxpage('welcome.html', 'rightcolumn');" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/but-home-ovr.png',1)"><img src="images/but-home.png" alt="Home" name="Home" width="80" height="27" border="0" id="Home" /></a></td>
          <td><a href="javascript:ajaxpage('riad.html', 'rightcolumn');" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Riad','','images/but-riad-ovr.png',1)"><img src="images/but-riad.png" alt="Riad" name="Riad" width="116" height="27" border="0" id="Riad" /></a></td>
          <td><a href="javascript:ajaxpage('rooms.html', 'rightcolumn');" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Riad','','images/but-rooms-ovr.png',1)"><img src="images/but-rooms.png" alt="Riad" name="Riad" width="94" height="27" border="0" id="Riad" /></a></td>
          <td><a href="dining.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Dining','','images/but-dining-ovr.png',1)"><img src="images/but-dining.png" alt="Dining" name="Dining" width="98" height="27" border="0" id="Dining" /></a></td>
          <td><a href="spa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Spa','','images/but-spa-ovr.png',1)"><img src="images/but-spa.png" alt="Spa" name="Spa" width="62" height="27" border="0" id="Spa" /></a></td>
          <td><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','images/but-services-ovr.png',1)"><img src="images/but-services.png" alt="Services" name="Services" width="110" height="27" border="0" id="Services" /></a></td>
          <td><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Rates','','images/but-rates-ovr.png',1)"><img src="images/but-rates.png" alt="Rates" name="Rates" width="78" height="27" border="0" id="Rates" /></a></td>
          <td><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Location','','images/but-location-ovr.png',1)"><img src="images/but-location.png" alt="Location" name="Location" width="122" height="27" border="0" id="Location" /></a></td>
          <td><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/but-contact-ovr.png',1)"><img src="images/but-contact.png" alt="Contact" name="Contact" width="120" height="27" border="0" id="Contact" /></a></td>
    <td width="304" valign="top"><div id="rightcolumn">
      <div id="rightcolumn2">
        <table width="1048" border="0" align="center" cellpadding="0" cellspacing="0" class="display">
            <td width="304" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <td><img src="images/riadlogo.jpg" width="303" height="91" alt="Riad hikaya Logo" /></td>
                <td><table width="493" border="0" cellpadding="20" cellspacing="0" class="copybox">
                    <td valign="top" bgcolor="#B3A582"><h1><img src="images/title-welcome.jpg" width="255" height="52" alt="welcome" /></h1>
                      <p>Riad  Hikaya is a tradtional and  beautifully elegant residence located in the royal quarter of the medina, called the 'kasbah', and only an easy walk from the main square, jemma al fnaa, and the city's other famous landmarks.<br />
                        <br />
                        After three years of meticulous restoration by local craftsmen and artisans, employing both age old techniques and materials, the riad has been transformed into a luxury, boutique hotel.<br />
                        <br />
                        The  harmonious blend of ancient tradition and contemporary comforts, coupled with our emphasis on quality and personal service, will create for you an unforgettable and unique experience.<br />
                        <br />
                        We look forward to welcoming you to Riad Hikaya.</p></td>
            <td width="744" valign="top"><table width="743" border="0" cellspacing="0" cellpadding="0">
    <td colspan="2" align="center" class="footer"><table width="1046" border="0" cellpadding="5" cellspacing="0">
        <td align="center" valign="bottom" class="footer"><br />
          Riad Hikaya, 252 Rue Sidi Mansour, Kasbah  Medina, Marrakesh - Tel: +212 123 45 67 89 - Fax: +212 123 45 67 89 -</td>
        <td align="center" valign="bottom"></td>
      <tr> </tr>

    // Load the classic theme

	// Initialize Galleria


Open in new window

Question by:BrighteyesDesign
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 19

Expert Comment

by:Albert Van Halen
ID: 36504729
Use jQuery for loading your content as well.
The trick that jQuery will do is to parse/evaluate scripts within the content loaded via AJAX.

The content which you want to load is the href attribute of the links.

Use this :
$(function() {
    $(".roomboxes a").click(function() { $("#rooms").load(this.href); return false; })

Open in new window

The above code will make sure that when DOM is ready the click event is being bound to all of the links whitin the table having the classname 'roomboxes'.

The first link (the image) uses a normal href, the second link (more) uses a javascript:ajaxpage.
Make sure that the second link is like the first link and you're all set.

Author Comment

ID: 36507277
Hi Albert,

Thanks for that, could you run that by me again please? Where would I add that code you mention?

Here's a link to the site again
I have now made all the links load into the holder 'right column'

Thanks for your patience!
LVL 19

Accepted Solution

Albert Van Halen earned 2000 total points
ID: 36508559
Hi BrighteyesDesign

You're loading everything via AJAX. No problem of course but the way you do it scripts are never parsed / executed when loaded via the existing method.
Each click-able link in your site has the href set to javascript:ajaxpage(). (I guess it's rendered in some serverside code using PHP, ASP, .NET or whatever...)

I would do it slightly different.

Instead of putting javascript:ajaxpage into the href, I would just use the link for the page. For example : href='index2.html' (so without javascript:ajaxpage).
After that I would add a class to each link. For example 'nav'.

Now in the main page I would register a live handler to each element having the classname 'nav' for the click event and use the code I mentioned earlier.

Use the piece of code below in the start page (home) and put it somewhere in script tags at the end of your document but before the closing tag of the body.

You gain at least 2 wins.
 - Your code is unobtrusive, it's kind of ugly that the links you can click have the href set to javascript:ajaxpage.
 - If a visitor doesn't have a javascript enabled webbrowser, it will function anyhow.

And that's it! The live handler will take care of the click event and will make sure the if a link is clicked with classname 'nav' the event will be executed (even with elements that are not in your document yet!).

Good luck

<script type="text/javascript">
$(function() {
    $("a.nav").live("click", function() {
       return false;

Open in new window


Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question