ansaurus

Question

Why jQuery don't want to style piece of html inserted with Ajax into new page

Answer 1

+1 A:

The ready function runs once, when the dom tree is ready.

It would be helpful to know what your ready function is doing, since you are blaming it for the problem.

One thing you may want to do is just simplify your page down, so you can just comment out some of the code that interacts with the div, and just basically make your ajax call and then fill in the div.

Then, using firebug, for firefox, you can look at what css properties are being used on that div, and you can see if there is a problem with how you select the div, as the css may not be applied.

Once you have that resolved, then add in what you had commented out, and continue to use firebug to look at the css and you can walk through the javascript, to make certain everything is working as you expect.

James Black 2009-10-16 00:38:32

Answer 2

+3 A:

If the javascript that sets the style lives in test.html, that javascript code won't be executed when you load the page via ajax. (err, I think)

What you could do instead is load the div into index.html and then use a callback to apply style to the loaded div. For example:

$(function() {
    // This function lives in index.html, and will be executed
    // when the document is ready
    $("#someAnchor").load("test.html #someDiv", function() {
        // This is the jQuery callback function, executing after the
        // div has been loaded via AJAX
        // We can now use jQuery to give it a css class,
        // or whatever else you wanted to do
        $("#someDiv").attr("class", "someCssClass");
    });
});

EDIT: Thank you for posting your code below. I think the basics of what I said above still applies, but to be more specific, you need to move _all__ of your styling and hover code to your callback function.

Your test.html shouldn't need to reference your javascript file at all, since you're just pulling the div into your index.html page.

Pandincus 2009-10-16 00:43:28

This work flawlessly. Thank you for your time.

gabriel9 2009-10-16 12:12:22

Answer 3

A:

This is index.html :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="myJS.js"></script>
  </head>
  <body>
    <a href="#">Load test div.</a>
</html>

This is test.html :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="myJS.js"></script>
  </head>
  <body>
    <div id="testBox">
      <p>Paragraph.Paragraph.Paragraph.Paragraph.Paragraph.</p>
      <img src="1.jpg" alt="pic1" />
    </div>

  </body>
</html>

This is myJS.js :

    $('document').ready(function() {
  // testing css using jQuery
  $('#testBox').css('border', 'solid 0.2em black');
  $('#testBox p').css('color', 'red');

  $('#testBox img').animate({"opacity" : .5});

  // img hover code
  $('#testBox img').hover(function() {
    $(this).animate({"opacity" : 1});
  }, function() {
    $(this).animate({"opacity" : .5});
  });

  // Ajax code
  $('a').click(function() {
    $('<div></div>').load('test2.html #testBox', function() {
      $(this).hide().appendTo('body').slideDown(1000);
    })
  });

});

gabriel9 2009-10-16 01:07:29

Answer 4

A:

Your problem is that you're referencing the Javascript in Test.html and using $(document).ready.

When you load it with ajax, it isn't a regular load, so the ocde in myJS.js isn't being executed.

I would recommend making a separate function in myJS.js and putting all of your code into, then calling that function in document.ready and after the ajax call finishes. (You'll need to reference myJS.js in both pages)

SLaks 2009-10-16 01:59:45

Answer 5

A:

Hi,

The issues with your code are as follows:

index.html does not contain a target into which the results of the AJAX call can be loaded.
$('<div></div>') from MyJS.js should be selecting the target from Item 1 above.
The AJAX call is trying to load test2.html, whereas the filename is actually test.html.

With all of the above items fixed, the code will then look like this:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="myJS.js"></script>
</head>
<body>
<a href="#">Load test div.</a>
<div id="target"></div>
</html>

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="myJS.js"></script>
</head>
<body>
<div id="testBox">
<p>Paragraph.Paragraph.Paragraph.Paragraph.Paragraph.</p>
<img src="1.jpg" alt="pic1" />
</div>
</body>
</html>

NB: No changes in test.html

MyJS.js

$('document').ready(function() {
  // testing css using jQuery
  $('#testBox').css('border', 'solid 0.2em black');
  $('#testBox p').css('color', 'red');

  $('#testBox img').animate({"opacity" : .5});

  // img hover code
  $('#testBox img').hover(function() {
    $(this).animate({"opacity" : 1});
  }, function() {
    $(this).animate({"opacity" : .5});
  });

  // Ajax code
  $('a').click(function() {
    $('#target').load('test.html #testBox', function() {
      $(this).hide().appendTo('body').slideDown(1000);
    })
  });
});

Umar Farooq Khawaja 2009-10-16 09:56:33

ansaurus

tags:

views:

answers:

Why jQuery don't want to style piece of html inserted with Ajax into new page

related questions