Refresh PHP code inside DIV with javascript won't work - javascript

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

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.

The solution was easy:
<script>
$(document).ready(function(){
parent.$(' #primary').load('review_index.php');
})
</script>

Related

How to link a JS file to a PHP Page Template?

I have written a PHP page template and would like to link the needed Javascript from an external file. However, when I do this I get a syntax error: Uncaught SyntaxError: Unexpected token < referencing the doctype header <!DOCTYPE html>. If I put the script in the PHP file directly then it works.
Obviously this is making my file messy, so how can I do it without breaking the script? Also, since this script is only needed on this one page I don't want to put it in my footer to load on the whole site.
I have tried to use <script type="text/javascript" src="staff-test.js"></script> in my PHP file to reference the JS file, with no success. The PHP and the JS files are in the same folder, so the src path seems to be correct.
The PHP:
<?php
get_header();
include('staff-test.css');
?>
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="staff-test.js"></script>
<?php
get_footer();
Using this code I get a syntax error. I would like to keep the JS in a separate file, but seems to only work when I put it directly in the PHP file.
Using include('staff-test.css'), you are asking your web server to interpret the CSS file as PHP. This is why you are getting a syntax error.
You want to do instead:
<link rel="stylesheet" type="text/css" href="staff-test.css">
Try this
<?php
get_header();
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.css">
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.js"></script>
<?php
get_footer();
?>
You may need to register the script in your functions file. Check out the WordPress reference for registering a script.
https://developer.wordpress.org/reference/functions/wp_register_script/

HTML code in Body

Hello everyone i need some help:
I have this:
A) Login.html
B) Documentation.html
C) Base.html
In the login i have a form with User and Password.
In Documentation, i have all the links to folders i include for exaple (Jquery,Bootraps, and more).
In Base I have a part of code what i need for include in all pages. The code i have is:
<div id="loading">
<div id="loading-msg" >
<img src="img/spin.png" class="rotating">
</div>
</div>
This is for do a logo rotating when a post it's waiting a answer from the server. With this (It's in Documentation.html):
<script type="">
$(document).ajaxStart(function(){
$("#loading").fadeIn( 500 );
});
$(document).ajaxStop(function(){
$("#loading").fadeOut( 100 );
});
</script>
Finally, my question it's: How i include the code in "Base.html" in "Login.html", because when i use: <link href="../incluye/base.html" rel="import"> on Head, not works
There may be a typo in your html import - instead of incluye perhaps it should be include.
You can also use the load() function in jQuery to include the file as follows:
<script type="text/javascript">
$(function(){
$("#target").load("Base.html");
});
</script>
Where #target is the id of the element into which you wish to load the content.
You can also change the file extension to PHP and easily include the other files by using <?PHP include 'yourfilename.php(extension)'

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

Is it possible to put a javascript function in a php file?

Non-programmer here, trying to figure something out.
I have a javascript function in the header of my document that upon page load it opens another page in an iframe and reveals an svg file on my server for minor online editing. I would like to place my javascript function in a php file, so that these folder locations of the svg files cannot be determined for anyone to download these svg files freely.
Currently I have this on my html header:
<script type="text/javascript">
function loaded()
{
document.getElementById("myiframe").src="http://www.mydomain.com/myfolder/mypage.html?url=myotherfolder/"+window.location.search.substr(1);
}
onload=loaded;
</script>
Since I have heard that php is a server side script and not viewable, I thought this would mask the location of these files on my server.
I want to remove this javascript code from my header and place it in a php file and replace the header code with either of these:
<script src="phpjavafile.php"></script>
or
<?php include ('phpjavafile.php'; ?>
and finally put the javascript into a php file like this:
<?php
<script type="text/javascript">
function loaded()
{
document.getElementById("myiframe").src="http://www.mydomain.com/myfolder/mypage.html?url=myotherfolder/"+window.location.search.substr(1);
}
onload=loaded;
</script>
?>
I have tried both of these methods and neither load properly.
I must be doing something wrong. Am I on the right track, or is there a better way of getting this to work.
Thank you ahead of time.
By using the echo() function
PHP
<?php
echo '<script>
some javascript
</script';
?>
However if you are just trying to load the php on page load without any php args then just write it out of the tags.
If you have the JavaScript is another file then using
PHP
<?php
include 'path/to/javascript/file.php';
?>
Should work.
You cannot hide javascript as it is interpreted browser side and not server side so the users browser has to have accesses to the code.
Here is the code I think you are asking for:
PHP HTML
<?php
$html = file_get_contents("path/to/data.html");
?>
<div>
<?php echo $html; ?>
</div>
doesn't use an iframe but should still work. However any relative links will not work unless both files are in the same dir and there will be no iframe functionality without additional css
You can just output it as text in your PHP file.
<?php
// Some PHP stuff here
?>
<script type="text/javascript">
function loaded(){
....
}
onload=loaded;
</script>
<?php
// Some more PHP stuff here
?>
Alternatively, you can just link to it in the usual way from within the same file:
<script src="path/to/your/file.js"></script>

Insert javascript widget on one page of Drupal site

I have a javascript widget that can be inserted on an a plain-old html page like this:
<html>
<head>
<script type='text/javascript' src="http://example.com/widget.js"></script>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
I would like to insert this javascript on one page of a Drupal 6 site (not every page).
This is what I have tried so far to get the script tag in the HEAD:
I set the Full HTML input format to allow php.
For the Drupal page, I set the input format to Full HTML
I then added this to the top of the body of my Drupal page:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://example.com/widget.js"> </script>');
?>
But Drupal doesn't parse the php and instead prints this at the top of the page:
<?php drupal_set_html_head(''); ?>
Any suggestions as to how I can do this?
#Jeff: You should not really reconsider that. Using the PHP Filter is generally a bad idea as it potentially opens security holes. (In case someone would gain access to your user account or you have a misconfiguration in your settings this is a direct path to compromising the whole server)
I would rather propose to add js via the template.php of your theme. Also the right method to use is drupal_add_js with the option inline:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/6
Here are some further reads on how to use it:
http://drupal.org/node/304178#comment-1000798 http://drupal.org/node/482542
I'm not too familiar with Drupal so this answer merely gets around your widget not loading without actually answering the question why that PHP block isn't being parsed as PHP.
You don't need to call the <script> tag inside the <head>. You can just place that line right above the <script> tag that calls the widget constructor.
<html>
<head>
</head>
<body>
<script type='text/javascript' src="http://example.com/widget.js"></script>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
After writing that all out, I figured out the problem...
The full html input format has an HTML corrector filter turned on by default, and that filter appears to have caused problems with the PHP code. Reordering the filters to put the PHP evaluator first fixed the problem.

Categories

Resources