Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught TypeError ("no access") issue with jquery depending on browser navigation

I've tried to research this, but I'm totally stumped. I think this may have something to do with the same-origin policy, but I can't figure out how it relates to my code.

I have a php site running jquery and bootstrap, which renders a dynamic web form at mysite/build.php. The head containing my script calls is shown below:

<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

    <!-- Bootstrap Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">        
    
    <!-- Bootstrap Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    <!-- app CSS -->
    <link href="/css/styles.css" rel="stylesheet"/>
    
    <!-- Are-You-Sure dirty form checker -->
    <script src="/js/are-you-sure.js"></script>
    
    <!-- app JavaScript -->
    <script src="/js/build-edit-scripts.js"></script>
    
    <!-- obtain sheet data for edit mode -->
    <?php if (isset($items)): ?>
        <script type="text/javascript">
            var items = <?php echo json_encode($items) ?>; 
            var sheetinfo = <?php echo json_encode($sheetinfo) ?>;
            var slug = <?php echo json_encode($slug) ?>;
        </script>
    <?php endif ?>
    
    <!-- obtain single block and bullet elements for js -->
    <script> var blockHTML = <?php echo json_encode($blockhtml) ?>; var bulletHTML = <?php echo json_encode($bullethtml) ?>;</script>
    
    <title><?= (isset($sheetinfo)) ? "Edit: ".htmlspecialchars($sheetinfo['name']) : "Shopping List Generator"; ?></title>
    
</head>

Then the beginning of my custom javascript (build-edit-scripts.js) is shown below

//execute when DOM fully loaded 
$(function() {

// enable areYouSure plugin to detect dirty form changes
$('#myform').areYouSure();

// mark form as dirty any time any text input changes
$(document).on('change', 'input:text', function() {
    $('#myform').addClass('dirty');
});

    // create empty array for existing slugs
    var slugs = [];
    
    // initiate ajax request to get dir listing of existing sheets
    $.ajax({

        url: "json-io.php",
     
        data: {
            purpose: "sheetlist"
        },

        type: "POST",

        dataType : "json"
    })

    // if successful
    .done(function(dirjson) {
            slugs = dirjson;
          })

    // if failure
    .fail(function( xhr, status, errorThrown ) {
            alert( "Server Error" );
            console.log( "Error: " + errorThrown );
            console.log( "Status: " + status );
            console.dir( xhr );
    });         

    // give focus to title field
    $("#title").focus();

When I initially load build.php, or hard refresh it, I have no problems. However, whenever I navigate away to an outside site, and then hit the back navigation and return to build.php, I receive the following console error:

Uncaught TypeError: no access (@ jquery-3.1.0.min.js:2)

followed by issues related to improper jquery loading

Uncaught Error: Bootstrap's JavaScript requires jQuery (@ bootstrap.min.js:6)

Uncaught ReferenceError: jQuery is not defined (@ are-you-sure.js:192)

Uncaught ReferenceError: $ is not defined (@ build-edit-scripts.js:12)

From here, none of the rest of my JS works. I originally thought this might be due to a problem with my ajax request, but even when I remove the ajax request entirely, the issue persists. Any insight would be greatly appreciated, since I can't seem to target where the problem is occurring. Thanks.

like image 761
Daniel M Avatar asked Aug 16 '16 16:08

Daniel M


2 Answers

Came across this because I have (or had) the same the error in Chrome when navigating back using the back button from a link. As soon as the page loads after navigating and any script tries to access the window object, this error occurs.

This page was one of only 2 references to this error message ( "Uncaught TypeError: no access" ) I can find anywhere on the web - the other is a Chrome bug report that was supposedly fixed a year ago. Don't think it has anything to do with jQuery (ours is pure javascript), but have no idea what causes it or what it means, it seems like a very obscure error. After restarting the browser this error was no longer reproducible, but it has been seen more than once. It occurs as soon as the script code tries to read any window property of the window object. Posting this in case anyone has clue as to what this error means and what could possibly cause it.

like image 110
user1572039 Avatar answered Nov 19 '22 13:11

user1572039


The only thing I can think of is that your CORS aren't configured properly, although it seems fine, or your document isn't fully loaded when you try to access jQuery, which it appears like your code should be loading fine.

Are you sure you need the integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous" tags on the end of your script inclusions? These might not be the proper parameters and could be causing some conflicts.

like image 36
Anselm Avatar answered Nov 19 '22 11:11

Anselm