UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
 
   Reply to this topicStart new topic
> Ajax Page Load    
 
   
Quicksilver2002
post Jul 1 2015, 03:34 PM
Post#1



Posts: 387
Joined: 16-January 06



I'm working on a webpage and I found some code online that is used to stop the background from "flickering" when browsing between pages. This works great, but on some computers the links won't work. I'm not too familiar with JavaScript.....can someone tell me how I can edit this so that if there is an issue it will use the "normal" link to open the page?

CODE
HTML
<ul id="menu-list">            
<li><a class="java-link" href="java script:followLink('Production.html')">Production</a></li>
</ul>

Java
function followLink(pageUrl)
{
    jQuery.ajax({
        URL: pageUrl,
        type: "GET",
        dataType: 'html',
        success: function(response){
            document.getElementsByTagName('html')[0].innerHTML = response
        }
    });
}


The same website I got the above javascript code from said people can use the following code to make the links work if something goes wrong or if java isn't enabled, but I can't seem to get this to work....I might be doing something wrong.


CODE
jQuery().ready(function() {
    jQuery("a.asynch-load").each(function() {
        this.href = "java script:followLink(\"" + this.href + "\")";
    });
});
Go to the top of the page
 
jleach
post Jul 1 2015, 04:15 PM
Post#2


UtterAccess Editor
Posts: 9,808
Joined: 7-December 09
From: Staten Island, NY, USA


First things first: Java and JavaScript are two *entirely* different things, sharing nothing in common but half a name and a few curly braces.

Secondly, this second piece of code requires jQuery. Make sure you have a reference to it (there's plenty of jQuery CDNs, google how to include it if you need to).

>> java script <<

make that one word:

<a class="java-link" href="java script:followLink('Production.html')">


(disclaimer: I don't typically use inline JS like this, so not positive that syntax is perfect, but ought to be close I think)

Huh, well - it appears our forum doesn't like java script as a single word (security purposes, I'm sure...)

Can you post the full HTML file? Where is the script located?
Go to the top of the page
 
cheekybuddha
post Jul 1 2015, 04:39 PM
Post#3


UtterAccess VIP
Posts: 9,277
Joined: 6-December 03
From: Telegraph Hill


Also, please don't double post.

d
Go to the top of the page
 
cheekybuddha
post Jul 1 2015, 04:42 PM
Post#4


UtterAccess VIP
Posts: 9,277
Joined: 6-December 03
From: Telegraph Hill


I have only given this a passing glance, but my guess is that the html should contain proper links in the href's. The jQuery code will convert the links as required once the page loads.

If the user's browser has js turned off, then nothing will happen to the links and they will function as normal.

hth,

d
Go to the top of the page
 
Quicksilver2002
post Jul 1 2015, 05:08 PM
Post#5



Posts: 387
Joined: 16-January 06



I am referencing jQuery using the following
CODE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


my javascript is located in an external file js/pageload.js


Let me backtrack a little. My webpage works great in IE10. This issue I'm having is that some of our company computers still run IE8/IE9. When I click my links in IE8/IE9 nothing happens. Originally I thought this was a javascript issue, but I have another piece of javascriopt that works in IE8, so now I'm leaning towards IE8 /IE9 doesn't like Ajax?

I'm looking for a way that I can still use this code because it looks great in IE10, but somehow have the link work if the user is using IE8/IE9

This isn't the entire HTML document but here is part of it....

CODE
<!DOCTYPE html>

<html>

<!-- #BeginTemplate "Template.dwt" -->

<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
    <title>Homepage</title>
    <link rel="stylesheet" type="text/CSS" href="CSS\style.CSS">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    <div id="wrapper">
    
        <div id="header">
            <div id="logo">
                <img src="images/Hend_Big.png" alt="test" height="58" width="298">
            </div>
            <div id="juliandate">
                <p id="clock"></p>
            </div>
        </div>
        
        <div id="menu-bar">
            <ul id="menu-list">
                <!-- JavaScript is used so the screen doesn't flash when navigating the pages -->
                <li><a class="java-link" href="java script:followLink('Production.html')">Production</a></li>
                <li><a class="java-link" href="java script:followLink('Materials.html')">Materials</a></li>
                <li><a class="java-link" href="java script:followLink('Maintenance.html')">Maintenance</a></li>
                <li><a class="java-link" href="java script:followLink('EngQA.html')">Eng / QA</a></li>
                <li><a class="java-link" href="java script:followLink('IT.html')">IT</a></li>
                <li><a class="java-link" href="java script:followLink('HR.html')">HR</a></li>
                <li><a class="java-link" href="java script:followLink('Safety.html')">Safety</a></li>
            </ul>
...

<script src="js/julian_date.js"></script>
<script src="js/pageload.js"></script>
</body>

<!-- #EndTemplate -->

</html>
Go to the top of the page
 
Quicksilver2002
post Jul 2 2015, 09:07 AM
Post#6



Posts: 387
Joined: 16-January 06



My Console is giving me the following error when running in IE9 or lower


"Count not set the innerHTML property. Invalid target element for this operation."

Here is the javascript code

CODE
function followLink(pageUrl)
{
    jQuery.ajax({
        URL: pageUrl,
        type: "GET",
        dataType: 'html',
        success: function(response){
            document.getElementsByTagName('html')[0].innerHTML = response
        }
    });
}


I've did some reading, and it sounds like innerHTML isn't supported in IE9 and lower. I guess what I'm looking for now a way that I can still use this code for people that have IE10+, but I also need my links to work for users with IE9.. Again, I'm not too familiar with javascript. I'm only using this because I found that it would prevent my screen from flickering when browsing between pages on my site.
Go to the top of the page
 
jleach
post Jul 2 2015, 10:06 AM
Post#7


UtterAccess Editor
Posts: 9,808
Joined: 7-December 09
From: Staten Island, NY, USA


Use jQuery and bind to the click event of the link, then use event.cancelDefault() to cancel the click event (and thus the native link navigation). Then you can handle it all directly via jQuery and you don't have to touch the DOM/HTML at all. You can google it, there's tons of examples around.

That'd be my preferred method.

(aircode)
CODE
$("a").click(function(event) {  
  event.preventDefault();
  jQuery.ajax({
        URL: pageUrl,
        type: "GET",
        dataType: 'html',
        success: function(response){
           // try using jQuery Replace() or addChild() and such here
           // it has a lot of code for backcompatability support
        }
    });
});
Go to the top of the page
 
Quicksilver2002
post Jul 6 2015, 02:49 PM
Post#8



Posts: 387
Joined: 16-January 06



Below is some code that I tried and it seems to be working in IE10, and the links still work in IE8. I'm not sure if this is acceptable solution or not. Changing between pages is very smooth in IE10, but in IE8 the whole screen flashes. This isn't a huge issue, because I hope to get everyone upgraded to IE10/IE11. Should this be smooth in IE8 too, or is this normal behavior for it?

CODE
[HTML Code]

<ul id="menu-list">

   <li><a class="webpage-link" href="Production.html">Production</a></li>
   <li><a class="webpage-link" href="Materials.html">Materials</a></li>
   <li><a class="webpage-link" href="Maintenance.html">Maintenance</a></li>
   <li><a class="webpage-link" href="EngQA.html">Eng / QA</a></li>
   <li><a class="webpage-link" href="IT.html">IT</a></li>
   <li><a class="webpage-link" href="HR.html">HR</a></li>
   <li><a class="webpage-link" href="Safety.html">Safety</a></li>
</ul>



[JavaScript]

$(function(){
    $("a[class='webpage-link']").click(function(e){
               event.preventDefault();
    pageurl = $(this).attr('href');
    window.location.replace(pageurl)
    return false;
    });
});
Go to the top of the page
 


Custom Search
RSSSearch   Top   Lo-Fi    15th December 2017 - 03:19 AM