Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JQuery .load() Problem

jQuery jquery

  • Please log in to reply
8 replies to this topic

#1 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 03 April 2011 - 11:54 PM

I'm having a problem with some simple JQuery.

It works perfect in FF4. Doesn't work in Chrome. Doesn't work in IE8.

<div id="navi">
            <ul>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #features');">Features</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #instructions');">Instructions</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #purchase');">Purchase</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #contact');">Contact</a></li>
            </ul>
        </div>
I kept it inline for simplicity sake (I'm new to JS, first time trying JQuery).

Any ideas why those browsers are jiving with that jQuery?

Thanks
  • 0
Posted Image

#2 Mark Wylde

Mark Wylde

    CC Regular

  • Member
  • PipPipPip
  • 47 posts

Posted 04 April 2011 - 06:46 AM

Can you post the full page's source code please.

Why are you putting bookmark references (#features) for the files. You should have 4 different HTML files and link to them. For example:
<div id="navi">
            <ul>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html');">Features</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('features.html');">Instructions</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('purchase.html');">Purchase</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('contact.html');">Contact</a></li>
            </ul>
        </div>

  • 0

#3 stonefield

stonefield

    CC Lurker

  • New Member
  • Pip
  • 9 posts

Posted 04 April 2011 - 08:09 AM

I'm having a problem with some simple JQuery.

It works perfect in FF4. Doesn't work in Chrome. Doesn't work in IE8.

<div id="navi">
            <ul>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #features');">Features</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #instructions');">Instructions</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #purchase');">Purchase</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html #contact');">Contact</a></li>
            </ul>
        </div>
I kept it inline for simplicity sake (I'm new to JS, first time trying JQuery).

Any ideas why those browsers are jiving with that jQuery?

Thanks


just remove zero out from this line "javascript:void(0)"
  • 0

#4 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 04 April 2011 - 11:34 AM

Can you post the full page's source code please.

Why are you putting bookmark references (#features) for the files. You should have 4 different HTML files and link to them. For example:

<div id="navi">
            <ul>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html');">Features</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('features.html');">Instructions</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('purchase.html');">Purchase</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('contact.html');">Contact</a></li>
            </ul>
        </div>

The website is pretty small, with limited content on each page. So, instead of creating 4 separate files for each link I just created 1 file. Then made 4 divs within that file for each page (features, instructions, purchase, contact). If IE and Chrome have issues with loading in specific divs from a separate file on the server, then I wouldn't mind having 4 files instead.

Here is the main html: [HTML] main - Pastebin.com
Here is the content html: [HTML] content - Pastebin.com

just remove zero out from this line "javascript:void(0)"

I tried that just now, but it didn't fix my problem with IE or Chrome. Also, with the 0 removed I get errors in FireBug.

Someone on JQuery's IRC channel said not to use inline styles because it's harder to parse and debug. Maybe that's the problem? I was having a hard time creating a method to use though.. I failed miserably and getting it to work (I'm really new to JS and JQuery... which I'm sure is obvious, lol).

Any other Ideas? Thanks for the replies so far.

Edited by Root23, 04 April 2011 - 12:14 PM.

  • 0
Posted Image

#5 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 04 April 2011 - 12:17 PM

I just tested this out in IE8, and it works great. Still no luck on the Chrome front though.

Thanks for the help so far.

Can you post the full page's source code please.

Why are you putting bookmark references (#features) for the files. You should have 4 different HTML files and link to them. For example:

<div id="navi">
            <ul>
                <li><a href="javascript:void(0)" onclick="$('#content').load('content.html');">Features</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('features.html');">Instructions</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('purchase.html');">Purchase</a></li>
                <li><a href="javascript:void(0)" onclick="$('#content').load('contact.html');">Contact</a></li>
            </ul>
        </div>


(Edit: I should also note that this is all being tested locally, and not from a server. I'm not sure if that would change my outcome or not. I'm going to upload it to my web server now and see.)
  • 0
Posted Image

#6 Mark Wylde

Mark Wylde

    CC Regular

  • Member
  • PipPipPip
  • 47 posts

Posted 04 April 2011 - 12:25 PM

To be honest I think I would still have the separate files as you never know when you will want to expand those sections. Plus it's not good for your visitors if you make them load all the content when they maybe only need to see one page.

But I do see where your're coming from as it's a small page.

If you really don't want to have separate files then I would probably do something like this:

Coding not tested/validated!


<a href="#" onClick="return false; $('id^=\"page\"').hide(); $('#pageHome').show();">Home Page</a>
<a href="#" onClick="return false; $('id^=\"page\"').hide(); $('#pageFeatures').show();">Features Page</a>
<a href="#" onClick="return false; $('id^=\"page\"').hide(); $('#pageInstructions').show();">InstructionsPage</a>


<!--
--
-- Home page content.
--
-->
<div id="pageHome">
<h2>Main page.</h2>
</div>
<!--
--
-- Features page content.
--
-->
<div id="pageFeatures" style="display: none;">
<h2>Feature page will load here.</h2>
</div>
<!--
--
-- Instructions page content.
--
-->
<div id="pageInstructions" style="display: none;">
<h2>Instruction page will go here.</h2>
</div>
<!--
--
-- Purchase page content.
--
-->
<div id="pagePurchase" style="display: none;">
<h2>Purchase page will go here.</h2>
</div>
<!--
--
-- Contact page content.
--
-->
<div id="contact">
<h2>Contact form will go here, unless the contact link automatically opens up an email. Then this section will be discarded.
</div>


  • 0

#7 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 04 April 2011 - 12:27 PM

Someone with a similar problem:
jQuery .load() not working in Chrome - Stack Overflow

Looks like one of the answers may be the same reason it doesn't work for me.
  • 0
Posted Image

#8 Mark Wylde

Mark Wylde

    CC Regular

  • Member
  • PipPipPip
  • 47 posts

Posted 04 April 2011 - 12:29 PM

Someone with a similar problem:
jQuery .load() not working in Chrome - Stack Overflow

Looks like one of the answers may be the same reason it doesn't work for me.


In that case you may find it works if you upload it to a web server.
  • 0

#9 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 04 April 2011 - 12:50 PM

In that case you may find it works if you upload it to a web server.


Just tested, and it does work in Chrome now.

Thanks for your help.
  • 0
Posted Image





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download