AJAX Page load problem… Help please?

#1 / Mar 30, 2008 8:54am
Mark Bowen
12637 posts
Hiya,

Just trying to learn AJAX properly and can’t even get my head around what I think should be something really really simple. I am probably just doing something completely stupid somewhere but can’t for the life of me figure it out.

Some code that I have shown below works just fine when called up as a static page from anywhere on my hard-drive. The JS file is actually located (as you can see from the code) in a localhost folder where I have the web-site being developed using MAMP on OSX. If I use the code shown below outside of EE and just in a static HTML file then it all works fine but as soon as I paste the code exactly as is into a template in EE it will not load the page using AJAX. I have checked the rendered source code from the template and it is exactly the same as the static HTML file which works fine. I’m sure there must be something that I am doing which is dumb here so any help would be greatly appreciated on this one.

The Code
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>JQuery Tests</title>


    $(document).ready(function(){$("a.load-page").click(function(){$("div.load-page-here").load("http://www.google.com");});});

</head>
<body>
<div>Some text</div>
<div class="load-page-here">Replace this</div>
<a href="#" class="load-page">Load Page</a>

</body>
</html>
```
Thanks for any help on this one as I am tearing my hair out thinking what could possibly be different between the two - static file or template rendered by EE?

Best wishes,

Mark
#2 / Mar 30, 2008 9:57am
Jared Farrish
575 posts
The one thing I’m looking at is that there doesn’t seem to be a jQuery library to access… Where’s the <scr*pt src=“jquery.js”></scr*pt>?

Are you using Firefox/Firebug add-on? If you’re not, you’re making it hard on yourself; it would have caught that (if I’m just not seeing things :ohh: ) straight out.

Also, nest your code so you can read it easier and figure out if all your bits are there:
```
$(document).ready(function() {
    $("a.load-page").click(function() {
        $("div.load-page-here").load("http://www.google.com");
    });
});
```
EDIT: Doh! I just realized the forums are sanitizing your markup. I am losing it! 😕

Can you fix the script calls like I did, and replace the i in script with an *?

#3 / Mar 30, 2008 10:27am

Mark Bowen

12637 posts

Hi Jared,

Thanks for taking a look at this for me. Yep the forums are stripping out the JS, sorry I should have a) thought about that and b) seen when the post posted that it had done that and fixed it, sorry! 😉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>JQuery Tests</title>
< script type="text/javascript" src="http://localhost:8888/mysite/scripts/jquery-1.2.3.js"></ script >
< script >
    $(document).ready(function() {
                $("a.load-page").click(function() {
                        $("div.load-page-here").load("http://www.google.com");
        });
});
</ script >
</head>
<body>

<div class="load-page-here">Replace this</div>
<a href="#" class="load-page">Load Page</a>

</body>
</html>

Hopefully this one should show although regardless of that the code does work when in a static HTML file but just not when pasted directly into an EE template and the JS file src=”” is pointing in both cases to the same place. Don’t really know what is going on there?

Thanks again for looking at this for me, any help is greatly appreciated.

Best wishes,

Mark

#4 / Mar 30, 2008 10:37am

Yvonne Martinsson
204 posts

Hi Mark,

I’m struggling with the same thing and don’t seem to get it right with jquery without using the plug-in ajaxContent. I have no problem with Prototype, though…, which I use on my site.
#5 / Mar 30, 2008 10:43am

Mark Bowen
12637 posts

Hi Yvonne,

I will check that out now although I do find it strange that what will work with a static HTML file won’t work when placed verbatim into an EE template, I think there must be some reason for it though but just one that isn’t quite coming to light at the moment.

Thanks again, will take a look at that link anyway though.

Best wishes,

Mark
#6 / Mar 30, 2008 10:55am

Yvonne Martinsson
204 posts

I see that you’re also on a local install. I’m trying to update a SAEF that has been called via Ajax, but it won’t update! The update is ordinary EE stuff, no Ajax and works if not called via Ajax. The funny thing is that I have exactly the same form on my live site, called via Ajax and no problems with updating there. Now, if you come to the point of wanting to update a form on your install, will you let me know if it works for you? Thanks, in advance!
#7 / Mar 30, 2008 11:24am
Jared Farrish
575 posts
One thing, you might add this to your script element that has the jQuery call in it:
```
< script type="text/javascript" >
```
I don’t imagine that will fix it, but it’s more “correct” in XHMLT strict mode.

I re-read you original post, and unfortunately I don’t have OSX (I assume you’re testing in Safari), but I’ll look to see if it works in FF and IE 6.1.
#8 / Mar 30, 2008 11:26am
Mark Bowen
12637 posts
Hmm I was thinking it might be to do with the fact that I am testing this on a localhost installation but was hoping that everything would work just the same. I am going to be moving this all across to the live server pretty soon so hopefully it will work then, if not I will be back here hounding everyone again.

In the meantime though if anyone else has any ideas as to why this isn’t working on a localhost install I would love to hear.

Also Yvonne I checked out the link you provided and it looks great so thanks for that. Can’t get it to work at the moment though unfortunately :-( Haven’t tried it in EE yet was just trying as static html but even that won’t work. I think I must be doing something really silly today so will keep on trying.

Have attached my code below just in case you see anything silly that I might be doing wrong?
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
< script type="text/javascript" src="http://localhost:8888/mysite/scripts/jquery.js"></ script >
< script type="text/javascript" src="http://localhost:8888/mysite/scripts/jquery.ajaxContent.js"></ script >

< script >
$('.ajax').ajaxContent();
        $('.ajax1').ajaxContent({
            target:'#ajaxContent1',
            extend:'true',
            filter:'.ajaxLoad',
            ex_target:'#ajaxContent1'
        });
</ script >
</head>
<body>

<a href="http://www.google.comclass=ajax">Image 1</a> 
<div id="ajaxContent1"></div>


</body>
</html>
```
Thanks again for everything on this.

Best wishes,

Mark
#9 / Mar 30, 2008 11:28am
Mark Bowen
12637 posts
Hi Jared,

Just noticed your post and I do have the
```
< script type="text/javascript" >
```
part in there so not too sure which bit you are referring to?

Thanks again for any help with this one, it’s driving me utterly bonkers!!
Not that I wasn’t utterly bonkers before-hand mind you!!

Best wishes,

Mark
#10 / Mar 30, 2008 11:30am

Jared Farrish
575 posts

What is http://localhost:8888? Might you mean http://localhost:8080? Does it work with just http://localhost?

#11 / Mar 30, 2008 11:32am

Jared Farrish

575 posts

Actually, as far as I can tell you don’t.

You should have the type=“text/javascript” here too:

< script >
$('.ajax').ajaxContent();
        $('.ajax1').ajaxContent({
            target:'#ajaxContent1',
            extend:'true',
            filter:'.ajaxLoad',
            ex_target:'#ajaxContent1'
        });
</ script >

Should be:

< script type="text/javascript" >
$('.ajax').ajaxContent();
        $('.ajax1').ajaxContent({
            target:'#ajaxContent1',
            extend:'true',
            filter:'.ajaxLoad',
            ex_target:'#ajaxContent1'
        });
</ script >

That may not change it, but I know I have a tendency to type “test/javascript” sometimes, and using XHTML doctype, FF will just ignore it.

What kind of JS debug environment do you have going?

#12 / Mar 30, 2008 11:36am

Mark Bowen
12637 posts

Hiya,

http://localhost:8888 is just the address that points to a folder on OSX when you use MAMP. You can set it up to just work with localhost but it’s not necessary so I don’t think this is the problem. I tried placing in the “text/javascript” into the place where you said and still no joy unfortunately. As before the static HTML file works just fine with this so I would have expected the same thing from EE if I am spitting out the exact same code but unfortunately not.

As to JS debug all I have is the javascript console in Safari.

Best wishes,

Mark
#13 / Mar 30, 2008 11:46am

Jared Farrish
575 posts

Do you have another browser to try it in?

Also, can you post the actually code the browser is seeing (what EE is putting out)? If you saved the page as Auto-XHTML, for instance, the page code is all fubar’d, for instance.

Bear with, we’ll get it figured out. 😊

#14 / Mar 30, 2008 11:46am

Yvonne Martinsson

204 posts

I only use the code below since I only have one div - .ajaxContent - that I want to load into.

$('.link').ajaxContent(); 

<a class="link" href="www.example.com"></pre>

<p>But I think you have to write one argument (right word?) for each div, that is. </p>

<pre><code>$('.link_a').ajaxContent(); 
$('.link_b').ajaxContent_b();

#15 / Mar 30, 2008 11:46am

Mark Bowen
12637 posts

Aha!! 😉

Interesting. Just brought up the javascript debug window and after clearing it from all the other sites many thousands of errors in there which stopped me from finding any errors on my site it says Permission denied and then lists the exact URL on the localhost of the script.

Looks like it won’t load the javascript in for some reason although I have used javascripts on a localhost before without any problems such as the lightbox script but looks like this might be the problem.

Not too sure what I can do to fix this though?

Best wishes,

Mark

Thread

Mark Bowen

Jared Farrish

Mark Bowen

Yvonne Martinsson

Mark Bowen

Yvonne Martinsson

Jared Farrish

Mark Bowen

Mark Bowen

Jared Farrish

Jared Farrish

Mark Bowen

Jared Farrish

Yvonne Martinsson

Mark Bowen

Username

Password

Thread