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 :)
Related
How would I put this in my cakephp default.ctp file?
Im pretty novice at cakephp as ive just started using it.
<script>
$(function()
{
$('#slider-id').codaSlider();
});
</script>
Thanks, in advance.
Although your question is too vague to answer in its current state, you should have a look at the JsHelper,especially Js->buffer(). This allows you to append script in your views and output them all at once in your layout.
http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html#working-with-buffered-scripts
open the app/View/Layout/default.ctp file in your favorite code editor
add the following between your <head> and </head>:
<script>
$(function()
{
$('#slider-id').codaSlider();
});
</script></li>
In CakePHP 2.x there are now things called blocks, and blocks are just chunks of output stored in memory until they are fetched for output.
There use to be a $scripts_for_layout variable that you could put your script into, but now we use the $this->fetch('scripts'); to get any JavaScript needed for the Html.
There are a few ways to inject JavaScript into the scripts block using the HtmlHelper.
To add it to the block, and this can be done in Views or Layouts. Just run this code before you fetch the block.
$this->Html->scriptBlock("$('#slider-id').codaSlider();",array('inline'=>false));
To output the scripts in your layout is easy.
$this->fetch('scripts');
The advantage of this approach is you can add JavaScript from multiple places in CakePHP, but they will be outputted in the layout at the location you desire.
I am using 'jQuery AJAX PHP' to do some '.jpg' file copying (approx 330kb per file). I copy files to a new directory location.
When I return to the HTML and use jQuery to add an IMG tag to a Table element, some of the files I have copied are shown as Not Found with 404 errors, but they are there.
I am wondering if it is a speed error. I tried to slow down the return from the PHP, by reading the directory where the files had been copied to, but that did not seem to help.
Am I right in thinking it is a speed problem and does anyone have an idea as to how I may overcome this problem, because only by displaying the copied file, can I be certain it has been copied.
Sometimes I have the same problem with not loading the images. If you are going to use jQuery I will recommend that you put your script (which loads the images) in
$(document).ready(function() {
// put all your jQuery goodness in here.
});
The fact is that your DOM object is not ready when you want to show or make operation with it.
Don't forget to call
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
in the head of your HTML.
Having tried various options suggested here and some others, I researched, I decided to try putting the display of the images in a different function from the AJAX/PHP. In other words instead of processing the images in the result function of the AJAX call, I just passed the results from the success function to another function.
This seems to have cured my not-found displays.
This may be a coincidence, with something else going on, because I am very poor in the knowledge of the flow of the DOM.
I'm learning all this web programming stuff after years writing .EXE Windows programs so bear with me.
I developed a basic .php and mysql website that works fine.
But I went to add javascript code to my index.php and I don't think the javascript code is executing.
My index.php has the form:
<?php
require_once blah blah
call_my_php_functionBlah();
?>
Then I added this code inside the php blocks of the '<\?\php' and "\?>" as follows:
<script type="text/javascript">
// some known-good javascript code that displays an image
</script>
Nothing showed up.
So I thought "ah-HAH, I blew it, all I need to do is -- move the javascript code outside
of the php block, at the bottom of index.php, and surely I'm good to go."
And still, Nothing showed up.
I checked the source of my 'known-good' javascript code and it said 'embed this javascript code
in your HTML file' so I thought "wow, I guess I need an index.html or something here."
So my questions:
1) should my index.php be able to run the javascript block of code?
I'm guessing 'No because index.php executes on the server and javascript runs on the client machine.'
2) How should I architect this if I want to keep my index.php, whose code works fine and I don't want to mess with it?
I'm thinking that this is an extremely basic client/server, php and javascript script organization issue that every web programmer knows how to handle, but like I said, I'm new to all this. I read in the archives about .htaccess etc. etc. but I
bet there's an easier way, and I'm not sure if the stuff I read applies.
the file name extension is completely irrelevant
PHP executes on the server and doesn't care at all about any Javascript
code inside <?php ?> tags must of course be valid PHP code to be executed by PHP
your browser receives whatever the result of your PHP execution is
you can use PHP code to output Javascript or simply have Javascript on the same page outside of <?php ?> tags
only whatever the browser receives matters, so use View Source
look at the browser's Javascript Console to debug client-side Javascript problems
Then I added this code inside the php blocks of the '" as follows:
Dont add your script inside the php block bring it outside php block.
After you are done with script you can reopen php block and write php again
index.php can run javascript, just that You need to echo the javascript code to put it in the page.
Anything that appears inside your php open/close tags has to be echoed or printed to be rendered to the html page. Anything outside your php open/close tags should appear in your html page but whether it works correctly or not is another matter not necessarily related to your php. The php interpreter doesn't run your javascript code, however, so it can't just sit inside your php tags.
Javascript will run inside .php file.
But you have to write outside the tags.
Eg:
index.php
<?php
echo "Helloooooo";
?>
<script>
function TestingMyFirstScript()
{
alert(1)
}
</script>
Javascript will execute in a PHP file but not inside of a PHP block. It executes in the server, yes and anything coming from PHP should be printed out to see. You should have the JS code outside of the PHP block and it can be anywhere in the page e.g.
It depends how to mix/match the code but of course keep it clean and easy to read (and debug).
<?php
// code here
?>
<script type="text/javascript">
// JS here
</script>
<?php
// some more code here
?>
Answer to both of your question is that you dont have to create a separate html file to execute your JS code. You can have HTML, JS, and PHP code in the same file. PHP code inside the PHP tags will be processed on the server and replace with HTML. The server generated HTML will be combined with other HTML present on the .php file and sent to the browser as one HTML.
There must be some error in the JS code which is causing the script to fail.
<?php
require_once blah blah
call_my_php_functionBlah();
?>
<script type="text/javascript">
// some known-good javascript code that displays an image
</script>
<?php
// other php code
?>
Most of the above comments should help you with your PHP + JS problem. However, if you are still getting errors with your output, try using:
alert("breakpoint 1");
//some code
alert("breakpoint 2");
throughout your Javascript function (it will show you where the code is failing). Good for beginners debugging. Also check out http://www.jslint.com/
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'm loading some content (NOT THE HTML headers or anything, just HTML formatted content from a PHP) via jquery .load() into a div.
It works, perfectly for everything BUT some Flash-based amCharts (www.amcharts.com) dynamically loaded with amCharts PHP, using swfObject. The file, loaded seperately, works and loads the Flash charts. When being loaded in using .load() the file seems to be loaded, but scripts not executed and swfObject not enacted.
Now, i'm not sure what code to give you here, so ill just give some stuff around it...
So, in header of main parent is the code listening for the nav click to load the content (which is our amcharts):-
$('a.leftNav').click(function() {
page = $(this).attr('page');
metID = $(this).attr('metID');
if($("#mainRight").is(":visible")) { $('#mainRight').hide(200); }
switch(page) {
case 'metrics': $("#mainRight").load("content.php?load=mets", { metID: '5000227' }); break;
}
$('#mainRight').show(300);
});
So that works. Loads the correct page and works executing the PHP as proved by going to the page content.php?load=mets. The code on that page generated by the PHP is:-
<div class="amChart" id="chart_views_div">
Chart loading ...
That should be the exchanged swfObject code, which I know (i've outputted to a text file the PHP's code generated) is working.
What happens with .load() and loaded swfObject and JS generally?
You need to call a function to initialise the swfObject replacement when jquery .load() has completed as i believe that swfObject would usually initialise on window.load.
something like this:
$("#mainRight").load("content.php?load=mets", function() {
// initialise swfObject here e.g.
swfobject.embedSWF("myContent.swf", "chart_views_div", "300", "120", "9.0.0");
});
Am Charts still uses swfobject 1.5
Swfobject 2.x offers much more IMHO amcharts should update to use the new version.
2.x has createswf which should be used in this case