I'm trying to get the lines of code below to help me write "<?php include('like.php'); ?>" on a page only when the visitor isn't using a a mobile device but it doesn't seem to be working. Any ideas on how to get it to work?
<script type="text/javascript">
<!--
if (screen.width > 699 {
document.write("<?php include('like.php'); ?>")
}
//-->
</script>
By the time JavaScript is writing to the document, it's too late - PHP has already sent everything to the browser. Your next best approach would be to make an AJAX call to fetch the content and append it to the DOM.
Assuming you're willing to use a JavaScript framework like jQuery, it's quite simple:
if (screen.width > 699) {
$.ajax({
url : '/like.php',
dataType : 'html',
success : function(data) {
$('#myContainer').html(data);
}
});
}
http://api.jquery.com/jQuery.ajax/
As others have mentioned, you can not have JavaScript include a piece of PHP-code and have it executed. As PHP is run server-side, before the page is served to the client, injecting the code like you suggest would just write <?php include('like.php'); ?> as plain text to the document.
You could however load the content of like.php through Ajax and inject it into the DOM, if a certain criteria is met.
With a library like jQuery, it is quite easy, as it provide a method .load() that let you load content into the DOM like that. You could do it something like this:
// Wait for the DOM to be ready
$(function () {
// Check the width of the screen
if (screen.width > 699) {
// Load the content and add the HTML to an element
$('#id-of-element-to-add-content-to').load('like.php');
}
});
In the above example, the content of like.php will be loaded into the HTML-element with id id-of-element-to-add-content-to, but you could use any selector you like, that match your need. If you want to replace the entire body of the page, your could do $('body').load('like.php'); instead.
More about the available jQuery selectors: http://api.jquery.com/category/selectors/
javascript executes on the browser and php executes on the server so, you need to add an if condition and then include
you could test the user agent server side and append that line if not from a mobile device
Related
I have two php files. The first is named index.php, the second one is named data.php. I tried to get the contents from the file data.php into index.php. Initially it gave me an error using the include_once statement but I now got it to work with:
<?php $str = sprintf(include_once ("/www/index1.php"));
echo $str; ?>
Now, I want this part to refresh every minute without reloading the complete page.
I tried inserting into index.php the following:
<!-- Div refresh function -->
<script type="text/javascript">
var auto_refresh = setInterval(
(function () {
$("#data").load("/www/data.php"); //Load the content into the div
}), 60000);
</script>
<div id="data"><?php $str = sprintf(include_once ("/www/data.php"));
echo $str; ?></div>
I admit, it looks a bit wrong and guess what, it doesn't work. I this is because it tries to load data.php in de script-part and afterwards I try to include the file again in the < div>-statement. I can't get it to work.
I have looked a various examples but can't find any using the sprintf function. I must admit that my knowledge of java, ajax and or json is not great.
Hope someone can help!
Javascript is a front end script. If you want to load something via ajax, you should know its based on js. While js is based on web browser. So make sure you can access that url from browser first.
You can access /www/data.php from php, but if you want to load it in js, make sure it can be visit from web first. How can you visit your index.php?
If you can visit index.php via http://xx.com/index.php, then change $("#data").load("/www/data.php"); to $("#data").load("http://xx.com/data.php");, you will find it works.
Update: Based on your comment, try $("#data").load("data.php");
Also, you can use developer tools to debug it. If js gets error, you will see it.
You're doing something wrong.
What you need to do:
Create file with needful data (for example data.php).
Create file for loading data-file (for example loader.php). If you are using php (I see you are), you can file_get_contents for data.php and then echo it.
On page, where you want to get your data, use something like this:
JS:
function loadData() {
$("#data-container").load("loader.php", function() {
console.log("Load was performed.");
});
}
loadData(); // load first then refreshing every 1 min:
setInterval(loadData, 60000);
HTML:
<div id="data-container"></div>
So, what all of this doing here?
First, script on your page create request to loader.php;
Second, loader.php executes (I hope your server execute php, huh?) and get content of data.php (so in this context data.php can have any file name extention; data.txt, data.log, etc); then it echo that content;
Third, script on your page get echoed (by loader.php) content of data.php and paste it in your #data-container.
These steps repeat again every 1 min.
Note: If data.php in your context is not a programming code (just some data), you can create just data.html and load it directly in jQuery script. It's not need any php-loader files, etc.
I have the problem when i echo this:
echo "Logged in! <script> alert('hello'); </script>";
The message "Logged in!" appears, but not the alert. How can i fix it so i get the alert? I can't use header(); because i already echod things out!
I also tried multiple thing like:
echo "Test message <script> window.location.href = 'index.php';"
Same thing again, Test message was echo'd, but the script wasn't run.
I hope someone can help me!
Edit:
NOTE: All of this code is in a xml file that i get that response of and put that in a div. So the script is in a message that i get with responseXML and output the data in a div.
Question i have in 1 sentence: How can you run a javascript function in a ajax call without jquery?
I'm guessing you call this script through ajax after the page is already loaded. In this case it's not surprising the script isn't running because the browser runs the scripts as it reads them and isn't on standby for another script tag to appear.
If this is the case, you can solve this by adding some event listener or even better, call a desired function in the end of the ajax response.
Your PHP looks fine, but you might need to change the way that you collect the JavaScript.
Consider this example:
http://jsfiddle.net/0vcewvkc/1/
If you are collecting JavaScript only, you can wrap the response in a jQuery tag ($()), and then append it to your document.
$("#go").click(function() { // call the function here
// your ajax code would go here, but either way you will end up with a string of JavaScript
var response = '<script>alert("hi");</' + 'script>';
// use jQuery to append this script to your document's body, like so:
$(response).appendTo(document.body)
});
Update
To do this without jQuery, the end of your AJAX call would have this code:
var response = 'alert("hi");'; // note that we have removed the <script> tag
var s = document.createElement("script");
s.innerHTML = response;
document.getElementsByTagName('body')[0].appendChild(s);
try the following this should work
<?php
echo 'Logged in ';
?>
<script> alert("hello")</script>;
<?php
// the rest of your php code
?>
I wanted to load some fragments of external content inside a div, through a menu.
Found "load" and "live", found a tutorial used it = success!
Except, like what's explicit in the documentation, it doesn't load JavaScript.
The thing is, the destination page already loads, inside the header, that same JavaScript, 'cause Wordpress loads it in every page. In this particular page, I'm only using the plugin (nextgen gallery) through the jQuery AJAX call.
So, what I believe is my problem is that I somehow need to alert/reload the JavaScript, right?
And how can I do this?
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
// ajax pagination
jQuery('#naveg a').live('click', function(){ // if not using wp-page-numbers, change this to correct ID
var link = jQuery(this).attr('href');
// #main is the ID of the outer div wrapping your posts
jQuery('#fora').html('<div class="loading"><h2>Loading...</h2></div>');
// #entries is the ID of the inner div wrapping your posts
jQuery('#fora').load(link+' #dentro')
return false;
});
}); // end ready function
</script>
PS: I've substituted "live" with "on" but didn't work either.
I'm not sure if I understand... your load() command is puling in some Javascript that you want executed? I'm not sure if you can do that. But if you just need to call some JS upon load() completion, you can pass it a function like so:
jQuery('#fora').load(link+' #dentro', function() {
console.log("load completed");
// JS code to be executed...
});
If you want to execute Javascript code included in the loaded page (the page you retrieve via .load()), than you have to use the url-parameter without the "suffixed selector expression". See jQuery documentation for (.load()):
Note: When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being
removed. This executes the script blocks before they are discarded. If
.load() is however called with a selector expression appended to the
URL, the scripts are stripped out prior to the DOM being updated,
which is why they are never executed. An example of both cases can be
seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
However in this case, script blocks in the document being loaded into
#b are stripped out prior to being executed:
$('#b').load('article.html #target');
I think that's your problem (although I have no solution for you, sorry).
Proposal: Maybe you can load the whole page (including the Scripts) and remove (or hide) the parts you don't need?
Cheers.
I would like to refire the styling and processing.js scripts that i linked to in the head so that they display correctly when brought in through an ajax-request. I see where in the ajax request this code needs to be, but i don't know how to tell the code to simply reapply the script. I've seen people using getScript() to do this, but from what i can tell this reloads the script, rather than simply telling it repeat or refire. Do all of the scripts need their own reinitialization? I found the syntax highlighters .highlight() method, but i am yet to get the processing script to load. currently, Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']); does not work. I am using current versions of all libraries. Surprised i haven't been able to find the answer yet, as a lot of people seem to have the same problem. Thanks for your help!
index page:
$(document).ready(function () {
// put all your jQuery here.
//Check if url hash value exists (for bookmark)
$.history.init(pageload);
//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');
//Search for link with REL set to ajax
$('a[rel=ajax]').live("click",function(){
//grab the full url
var hash = this.href;
//remove the # value
hash = hash.replace(/^.*#/, '');
//for back button
$.history.load(hash);
//clear the selected class and add the class class to the selected link
$('a[rel=ajax]').removeClass('selected');
$(this).addClass('selected');
//hide the content and show the progress bar
//$('#content').hide();
$('#loading').show();
//run the ajax
getPage();
//cancel the anchor tag behaviour
return false;
});
});
function pageload(hash) {
//if hash value exists, run the ajax
if (hash) getPage();
}
function getPage() {
//generate the parameter for the php script
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the progress bar
$('#loading').hide();
//add the content retrieved from ajax and put it in the #content div
$('#content').html(html);
//display the body with fadeIn transition
$('#content').fadeIn('fast');
//reapply styles?
//apply syntax highlighting. this works
SyntaxHighlighter.highlight();
//relaod processing sketch, currently displays nothing
Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']);
}
});
}
This the ajax-loaded content:
<!--ajax'd content-->
<??>
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="application/processing">
</script>
<canvas data-processing-sources="mysketch.pde" id="processing">
</canvas>
</div>
</body>
</html>
<??>
So, let's analyze what usually happens when you include an (external or internal) Javascript code: It will automatically execute only the code that is available in the global scope. "Good" scripts will only add one command to the global scope which will then execute the initialization code somewhere in a function/method.
All you need to do is view the external Javascript file and find out what is being executed from the global scope. There is no general answer to that ... some scripts use an object and call its init() method ... but that is totally subject to the imagination of the developer.
If you have javascript that needs to trigger, you MUST add this to the head element:
var head = document.head || document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.innerHTML = "your AJAX-obtained js code";
head.appendChild(script);
The same trick goes for CSS. Add a element to the head with your CSS declarations as innerHTML. So: make sure to preprocess your AJAX response and split out the JavaScript and CSS elements, then add those to the document header. It's probably easier to make your response a JSON object along the lines of:
{
html: "<html>string<goes>here</goes></html>",
scripts: ["url1","url2","url2",...],
style: ...
}
and then parsing that JSON for the html (which you use as innerHTML for a new document.createElement("div") or something, and then append wherever it needs appending), the scripts (which you turn into elements for HEAD insertion) and the style declarations (which you turn into elements for HEAD insertion).
(On a functional note, your example AJAX response looks like it has PHP code in it. I have no idea what you're using it for, but that looks like a bad response)
Just incase anyone stumbles upon this:
If you have processing.js already loaded, simply call Processing.reload() in your AJAX success/complete function.
Perhaps you already have an element with id="processing" on your page. In that case $("#processing") will only return the first one. If that is the case, change the id or use a class instead.
The other option, which I don't recommend, is to use $("[id=processing]"). That will return every element on the page with id="processing". But, don't use it. Use unique ids in your page, or switch to using classes, whichever works best for you.
I have a page that has multiple links with various attributes (these attributes will be pulled in from a database):
index.php
<html>
<head>
<script type='text/javascript' src='header.js'></script>
</head>
<body>
My_Link_1
My_Link_2
<div id='my_container'> </div>
</body>
</html>
My header.js file has:
$(document).ready(function(){
$('.link_click').click(function(){
$("#my_container").load("classes/class.project.php", {proj: $(this).attr('id')} );
return false;
});
});
class.project.php is pretty simple:
<?php
echo "<div id='project_container'>project = ".$_POST['proj']." : end project</div>";
?>
This loads and passes the ID variable (which actually comes from a database) to class.project.php. It works fine for the first link click (either link will work). Once one link is clicked no other links with this div class will work. It feels like javascript loads the class.porject.php and it will not refresh it into that #my_container div.
I tried running this as suggested by peterpeiguo on the JQuery Fourm, with the alert box for testing wrapped inside .each:
Copy code
$(document).ready(function() {
$('.link_click').each(function() {
$(this).click(function() {
alert($(this).html());
});
});
});
This seems to work fine for the alert box. But when applying it to .load() it does not reload the page with the new passed variable. As a matter of fact, it doesn't even reload the current page. The link performs no function at that point.
The example site can be viewed here: http://nobletech.net/gl/
I looked at the link you posted, and the problem is that when you're doing load you're replacing the elements on the page with new ones, thus the event handlers don't work anymore.
What you really want to do is target the load. Something like:
$("#project_container").load("classes/class.project.php #project_container", {proj: $(this).attr('projid')} );
This only loads stuff into the proper container, leaving the links and other stuff intact.
Ideally, the php script should only return the stuff you need, not the whole page's markup.
BTW- Caching shouldn't be an issue in this case, since .load uses POST if parameters are passed. You only have to worry about ajax caching with GETs
Sounds like the request is getting cached to me.
Try this:
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
Sorry but this might be completely wrong but after examining your XHR response I saw that you are sending back html that replaces your existing elements.
So a quick fix would be to also send the following in your XHR response (your php script should output this also):
<script>
$('.link_click').each(function() {
$(this).click(function() {
alert($(this).html());
});
</script>