This is a bit of a follow on from this question/answer: https://stackoverflow.com/a/4152528/348922
I'm simply not sure how to apply this to my situation (if it's at all possible).
I have a container div that when a button is clicked a file is loaded into the div via jquery:
var root = location.protocol + '//' + location.host;
$(".button-book").click(function(e) {
e.preventDefault();
$('#container').load(root+'/loaded-file.php');
});
Fine. BUT that file has a number of text strings that I need wrapped in php in order to hook into them for translation purposes (using WPML plugin for Wordpress):
<?php _e('Arrival Date', 'mywptheme'); ?>
<?php _e("Day", 'mywptheme'); ?>
<?php _e("Month", 'mywptheme'); ?>
<?php _e("Year", 'mywptheme'); ?>
// etc...
Obviously this doesn't work when the file is loaded dynamically. Is it at all possible or am I completely wasting my time?
Your issue is that _e(...) is a wordpress function, so when this file (loaded-file.php) is executed outside of wordress, it does not work. Its not actually anything to do with jquery - if you visit the file directly in your browser it wont work either.
Simply add the following to the top of loaded-file.php:
require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php');
Adjust for your actual wordress location, in the above case wordpress is in domain.com/blog/
Related
I have a wordpress theme that uses PHP to output different blocks of Javascript depending on settings. The code uses a function from an external javascript file (backstretch) that is loaded in the footer.
The theme doesn't load the appropriate images properly unless the backstretch javascript is loaded in the head, and I think it's because the PHP is echo'ing the blocks of code that call the script way before the footer is even loaded (probably wrong assumption).
Is there a way to echo the blocks of Javascript calling Backstretch code straight to the footer (or after backstretch is loaded in the footer)?
The php is echoing the JS like this:
if (x == x) { ?>
<script>
jQuery(document).ready(function(){ //code});
</script>
<?php // more code
If I run the javascript in the head (Backstretch javascript) the console sends this error:
"Uncaught TypeError: Object function (e,t){return new b.fn.init(e,t,r)} has no method 'backstretch' "
(jQuery is being loaded in the head by the way)
Thanks guys
Actually, theoretically, the position of the script shouldn't matter much for this. The point of jQuery.ready() is that the inside function will not run until the entire DOM has been loaded. "The entire DOM" includes the page's footer, and the Javascript files you're waiting on. However, it's possible that they also wait on the DOM before initializing, and thus jQuery's ready function is called first.
Some of your time-thinking terminology is a little hard to understand though - remember that PHP writes its entire document out to the user a long, long time (computer-wise) before your browser begins parsing any of the HTML.
You could just move your code block to the right place, or alternatively try this:
Start your PHP code with $footer = "";
Then as you go along you can do $footer .= "<script>jQuery(document).ready(...)</script>";
And finally in the right place just echo $footer;.
Edit your functions.php file
enclose the script in a php function e.g:
<?php
function my_javascript_function_call(){
<script>
....
</script>
}
?>
now add this function
add_action('wp_footer', 'function my_javascript_function_call');
The javascript will fire in your footer..
happy coding :)
Alright, so I'm trying to embed a php script that outputs a gallery of images onto my html div container. However, after an hour or so of searching I'm coming up clueless.
http://craftedbyfrank.com/test/instagram.php
That's the link to the php gallery script.
I want to display it onto the main page inside that div.
[REMOVED] - thanks!
I've tried the following, but I believe it's just wrong. I get no output.
<div id="container">
<?php include "instagram.php"; ?>
</div>
I'm trying to avoid actually pasting the php script into the html file.
php is not being parsed on your server. If you view the html source you see the actual php code you are using to include the file. Make sure that php is installed or you're not embedding the php from a cms that's encoding your tags.
You could possibly use AJAX to get the result from the PHP file and write to the containing div.
$.ajax({
type:'GET',
url:'http://craftedbyfrank.com/test/instagram.php',
data:'',
success: function(data){
$('#container').html(data);
}
});
You would possible need to adjust to get your fancy box plugin to work.
As #vletech suggested you can use AJAX to get the result from the php file.
However the main reason why it does not work is because you are trying to execute the php script inside an .html file: e.g. your page loads on - /test/index.html. In order to work the file has to be with a .php extension.
So since joining I've learned a lot - compared to where I was - but I still don't know the terminology and functions well enough I suppose... so here's my problem:
I'm making several js-based galleries. The idea being that there will be 3-4 pages containing some thumbnails that will populate a specific div with the corresponding art and copy (a div I'm calling using innerHTML) and so far that works. Here is the script:
function changeDiv(target,id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
This works great... when I have the 'target' and all 'id's in the same page. I even went as far as using a php include on the page (I added it to the footer) and nested it inside an inline div that I set to visibility:hidden. A shot in the dark but this worked too. EXCEPT that my footer was now about another 100px taller with nothing but blank space. Apparently it HID the content, but made plenty of room for it.
But what I really want to do is include the source of the divs I'm calling (we'll call them artwork.php) into the gallery page ( ...and gallery1.php) the same way a css or js is linked in the header or the same way it is included with a php tag but without messing up any of my objects.
I hope that made sense, but in brief: How can I call an external php document that won't display but can be called upon by the js?
Any thoughts?
1) visibility:hidden; keeps the place on the page. Use display:none instead.
2) Jo have two possibilities.
a) Use Ajax (google it!) if your artwork.php will change dynamically.
b) Use artwork.php as JS file, ie like this:
<?php
/* artwork.php */
header('Content-type: application/javascript');
echo "var myImages = [{'name':'First image','src':'image1.jpg'},{'name':'Next image','src':'image2.png'}];\n";
?>
//... any other JS functions here ...
And gallery1.php:
<html>
<head>
<script type="text/javascript" src="artwork.php"> </script>
</head>
<body>
...
</body>
hmm i am not actually getting what u are trying to say but i think this might help
save your php page lets say "artwork.php"
then use the jquery Load to call the page and hide the div where you have loaded the page.
$("#any_div_u_want").load('artwork.php',function(){
$(this).hide();
});
now u can show the div which contains your php script wheneveer u ant with just
$("#any_div_u_want").show();
Hope this helps
Before I ask this question I must point out that I have tried to search for EVERYTHING!
My question is how can I run javascript from an external file instead of inside my php / html. What I'm trying to do is.
function ClearForm() {
document.form.message.value="";
}
function comeBack(){
if (document.form.message.value == "") {
document.form.message.value="What's on your mind?";
}
}
I have included<script type="text/javascript" src="javascript.js"></script> in the <head> and I have a file in the root called javascript.js and my php file is in the root too so that shouldn't be the problem! But how do I run that pieces of code you see above in the javascript.js file instead of in my php file. It work's fine if I have it in the php file but I want to separate things!
I have also tried to give the form / input field an id and then use getElementById in the external JavaScript file.
But as you can see and hear I'm kinda new to JavaScript so I'm apparently doing something wrong here.
If the above code is the only thing in your Javascript.js file, then you need to call the functions to run the code.
You've included the external Javascript file correctly - however, because all of your JS is included within functions, these function/s must be called before the code will run.
A call to 'ClearForm()' or 'comeBack()' from within your PHP file should run the code.
That JS file will have to be in the same folder as your PHP page.
Test whether the file is found or not by adding this line at the top of the js file
alert('js file found OK!');
document.form is an array, so if you only have one form use:
document.forms[0]
Also depending on which browser you use, find and install some Developer Tools to help you identify these errors.
You have declared those functions in the <head>. All fine.
The question is when do you want to call/run those functions?
If you simply want to run them at the end of the page, then you can add another external javascript file and include it using <script src="my_external_file.js"> right before the </body> tag.
Otherwise, you have to declare onXXX handlers, like onLoad() for the document, onClick() for certain elements, onSubmit() for forms, etc. These, too, can be declared in an external file, but specified after the relevant elements are loaded.
I know we can get some path with <?php bloginfo('something');?> into php files, but is it some equivalent for javascript file loaded with the enqueue_script function ?
Did wordpress change some shortcode into those files ?
EDIT : I think I did not clearly express my needs. So i want to know if wordpress had some shortcode who, placed into a js file who is loaded with the enqueue method, will be replaced by the template path. Typically i need to make some ajax call form a .php file from my template and want to avoid hard linking file
No javascript files won't be parsed as php, and as such won't process any shortcodes or php.
Why not just make your links relative. Often I find subdomaining my dev copy, removes any problems when moving a site live and broken links.
You could cheat and link to a php file, which then passes header information as Javascript. Doesn't seem very elegant though. See here.
Or you could just declare the variable in a little bit of inline Javascript and pick it up in the external JS file.
<script type="text/javascript">
var siteURL= '<?php bloginfo('url');?>';
</script>
<script type="text/javascript" src="yourscript.js"></script>
Then in yourscript.js just reference the variable 'siteURL'
You have to register scripts using wp_register_script(). Then by placing wp_enqueue_script before wp_head() it will load them in for you. The idea of using wp_enqueue_script is that you don't need to enter them all in manually, and you can load other scripts depending on whether a certain script has been loaded.