8 replies to this topic

[Root23]

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

[Mark Wylde]

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>

[stonefield]

Root23 said:

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)"

[Root23]

Mark Wylde said:

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

stonefield said:

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.

[Root23]

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.

Mark Wylde said:

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.)

[Mark Wylde]

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>

[Root23]

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.

[Mark Wylde]

Root23 said:

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.

[Root23]

Mark Wylde said:

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.