-5

This question is unique because the error

ReferenceError: $ is not defined comes from the fact that javascript is called in the header but the jQuery is looking inside the parent iframe and don't find it.

I got this page: 

review.php

 <?php include 'review_core.php'; ?>
<div id="primary" class="content-area col-md-9">
<main id="main" class="post-wrap" role="main">
<?php include 'review_index.php'; ?>
  </main><!-- #main -->       
    </div>  
<?php get_sidebar(); 
get_footer(); ?>

in review_core.php I got some php that fetch folders, images and other things from a S3 bucket, and in review_index.php I got some html and php to show up the data runned by review_core.php inside (a lot) some divs. The get_sidebar(); just get the wordpress sidebar where I have an Iframe and here is where the problem is coming. In this iFrame is runned a php script (some_php_in_frame.php) that when ends should reload the #primary div, so basically it have to reload review_index.php into it. I'm tring to do it by adding this code at the end of some_php_in_frame.php: 

some_php_in_frame.php  

<?php [...] ?>  
<script>
    $(document).ready(function(){
    parent.location.href=parent.location.href;
    $('#primary').load('review_index.php');
    })
    </script>

but the refresh don't work and as results in debug I get:

ReferenceError: $ is not defined

Raffobaffo
  • 2,806
  • 9
  • 22
  • 1
    The error is actually pretty descriptive as to what the problem is. – alephtwo Feb 28 '18 at 14:44
  • 1
    Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) – zoubida13 Feb 28 '18 at 14:45
  • you gotta include Jquery in your page – ADyson Feb 28 '18 at 14:46
  • 1
    `parent.location.href=parent.location.href;` will reload the parent frame, which will destory the DOM the JS is running in, which makes `$('#primary').load('review_index.php');` pointless. – Quentin Feb 28 '18 at 14:46
  • What should I define? I'm really a dummy in javascript – Raffobaffo Feb 28 '18 at 14:46
  • @ADyson I included it in the header with isn't correct? – Raffobaffo Feb 28 '18 at 14:47
  • Ok well check that it actually loaded using your network tools. And also take note of quentin's point about refreshing your frame - not sure why you're doing that – ADyson Feb 28 '18 at 14:48
  • Also did you include jQuery in this iFrame, or just in the parent? I think it needs to be within the iFrame as well. – ADyson Feb 28 '18 at 14:49
  • @ADyson I'm including jquery directly in the WP header so they should be available for all pages as far as I know – Raffobaffo Feb 28 '18 at 14:51
  • Well you need to verify via the network tools (looking at your iFrame) that it actually loaded correctly within the frame context. And also I'll repeat why are you refreshing the parent? This will muck things up. – ADyson Feb 28 '18 at 14:51
  • 1
    Alternatively if you have loaded jQuery into the parent page (via the WP header) then you maybe able to access it using `parent.$` – ADyson Feb 28 '18 at 14:54
  • that's what it was! Thanks, the error 'ReferenceError: $ is not defined' it's gone. But removing parent.location.href=parent.location.href; with just $('#primary').load('review_index.php'); I don't get the div to refresh – Raffobaffo Feb 28 '18 at 14:58
  • I wonder if jQuery is looking inside the parent frame, since that's where it's defined. Check if parent.$("#primary") actually returns any elements. Also check in your network tools whether the ajax request is occurring or not. – ADyson Feb 28 '18 at 15:15
  • Thanks for your time @ADyson and sorry for my unexperience on js. How do I check if it returns any elements? – Raffobaffo Feb 28 '18 at 15:21
  • 1
    `alert($("#primary").length);` If it returns 1 then it matched an element in the page, if it's 0 it didn't. Of course try `alert(parent.$("#primary").length);` if need be – ADyson Feb 28 '18 at 15:27
  • 1
    @ADyson you're great. So I managed to let it (almost) work using your suggestion: `` and is working. Means that It load the review_index.php into the #primary div...BUT, all the calculations and variables from review_core.php are not available, so I'm just getting a lot of error messagges Notice: Undefined variable:etc etc – Raffobaffo Feb 28 '18 at 15:36
  • well I can't really help you with that since I don't know what that code does or what's supposed to happen. Happy debugging (or ask a new question!) – ADyson Feb 28 '18 at 15:37

2 Answers2

2

Make sure that in the HTML of the page that contains the iFrames, as well as any page that needs to run jQuery in an iFrame imports the jquery library in the <head> section of your HTML document.

The error message on your JavaScript console indicates that this is missing.

For Example:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

$() functions are part of the jQuery Library, and not javascript natively.

janzim
  • 71
  • 1
  • 4
1

The solution was easy: 

<script>

$(document).ready(function(){
parent.$(' #primary').load('review_index.php');
})
</script>
Raffobaffo
  • 2,806
  • 9
  • 22