I have two different playlist in php file and I have two buttons playlist1 and playlist2.
<div class="player">
<?php include ('playlist1.php');?>
<?php include ('playlist2.php');?>
</div>
If I click playlist1 in the homepage it has to reload and append the <?php include ('playlist1.php');?> before page loads.
If I click playlist2 in the homepage it has to reload and append the <?php include ('playlist2.php');?> before page loads.
I tried something but no luck.
$( "playlist1" ).click(function() {
var append_php = "<?php include ('playlist2.php');?>";
$('#playlist').append("<div id='playlist2'>"+append_php+"</div>");
});
You're trying to emit PHP directives in Javascript which will never work. Keep in mind that Javascript runs on the client (i.e. on a web browser on the user's machine) and PHP runs on the server. You, therefore, cannot render PHP directly on the client - it must be run on the server.
Running on the server requires you to either navigate to a different page (perhaps using a querystring to pick what playlist you wish to render) or look into using AJAX instead.
Given that you say:
If I click playlist1 in the homepage it has to reload and append the before page loads.
If I click playlist2 in the homepage it has to reload and append the before page loads.
I'd suggest you change your PHP to look something like the following:
<div class="player">
<?php
$playlist = isset($_GET['playlist']) ? $_GET['playlist'] : '1';
include("playlist".$playlist."php")
?>
</div>
Playlist 1
Playlist 2
This basically inspects the querystring and then renders whatever is in playlist1.php or playlist2.php based upon what you pass. By default it renders playlist1.php. It assumes that the PHP file you're running is called index.php.
Related
I have a php file where I call different php functions to render a page. I am wanting to refresh portions of the page every 5 mins by calling the php functions again. My site works fine as it is but I am not able to update the content without reloading the entire page.
php file 1 index.php
<?php
// Enable functionality
require_once ("lib/config.php"); //this file has all my php includes and db configurations
site_head();
front_stats();
front_browser(20);
site_foot();
?>
php file 2 which includes the functions above - layout.php
<?php
function front_stats ()
{
//my content thats rendered on the page
}
function front_browser ($per_page)
{
//my content thats rendered on the page
}
etc.
?>```
Set the sections you want to reload into special tags i.E
<div id=reload></div>
then setup a new .php file that will return only the html code that should be replaced into the reloaded section.
Now include a Javascript file that accesses this php file via an ajax request periodically. Inside of the ajax request itself you'll need to fetch the new content and overwrite the old content. Here is an example for the ajax and replacing part:
xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function({
if(this.readyState==4&&this.status==200{
document.getElementById("reload").innerHTML=this.responseText
}
};
xmlhttp.open("GET","yournewphppagename.php",true);
xmlhttp.send();
I have two php files (1.php and 2.php) linked with require
php.1 has a qr <img src="http://chart.googleapis.com/chart?chs=125x125&cht=qr&chl=<?php echo $_jattu; ?>" width="50%"> which gets its value from a string variable in 2.php $_jattu;
What I want is for <?php echo $_jattu; ?> to only echo when <a class="w3-button2 w3-black2"></a> is clicked and not when the page is loaded or refreshed, what can I do to achieve this?
This is imposible to do on the server side. Because the "onClick" event jumps on the client side when de user do the action.
You have few options.
Enable another URL for load the content of $_jattu and when the user click load it with an AJAX request. Is the best way to do it and the result is more smooth and user friendly
As you say you want to do it refreshing. So, slightly refresh the page with a new parameter on your url that tolds you that the "onClick" event has jump. Like:
.../your/path?hasClick=true
And in your php code:
if(isset($_GET["hasClick"]) && $_GET["hasClick"]){
echo $_jetty;
}
http://php.net/manual/en/reserved.variables.get.php
if you want to remember that the user has clicked "forever" you can setup a cookie.
http://php.net/manual/en/function.setcookie.php
You can use ajax. Make a request to whatever php script you want which will return $_jattu when clicking on the link. Then update your img link in javascript using the return of the ajax request.
The situation:
User visit some fast loading page, that makes an AJAX async request to some slow PHP script, that loads, for example, for 30 seconds
After 3 seconds user clicks some link to go to another fast loading page, but browser waits 27 seconds to finish AJAX request to slow script, and only after that starts to load next page
How can you solve this problem? How to tell web server to interrupt processing the request, started with defined AJAX call?
PS. abort() is not the solution
PPS. The code example: my page includes filter of shop products, that loads longer that other page components. After first load filter is cached - next times it loads fast. So when page loads, I don't show filter, but add a JS, that calls current page again using AJAX, adding some parameter (SHOW_FILTER). If page receive this parameter - it shows filter...
<div id="catalog_filter_container">
<?if($_REQUEST['SHOW_FILTER'] == "Y"):?>
... filter code here ...
<?endif;?>
</div>
<?if($_REQUEST['SHOW_FILTER'] != "Y"):?>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "<?=$APPLICATION->GetCurPageParam("SHOW_FILTER=Y", array("SHOW_FILTER")); // get cur URL with adding param SHOW_FILTER=Y ?>"
})
.done(function(html) {
$("#catalog_filter_container").append($(html).find('#catalog_filter_container'));
});
});
</script>
<?endif;?>
If I understand you correctly it is not neccessary to have an ajax-call because the page is reloaded anyway. This seems like something you can do server-side only (with sessions).
Something like this: (If the thing you want to achieve is store a value to filter when filter not set and display the value from filter when it is set)
<?php
session_start();
?>
<div id="catalog_filter_container">
<?if($_REQUEST['SHOW_FILTER'] == "Y") {
$_SESSION['filter_content'] = 'bla bla bla';
}
else {
echo $_SESSION['filter_content'];
}
?>
</div>
Try using a cron job to run the queries separate from page loads and cache the results on the server. Then have your AJAX request return the cached content.
I have a page where a user creates an item to auction it. If he submits the item creation form, the browser automatically redirects him to the newly created page via the following line of php code:
header('Location: item.php?itemid='.$itemid);
I would like to display a notification right after the item creation (on the newly created page) saying that the item has been created. This is the (working) code I use to call the notifications:
<script type="text/javascript">
$(function(){
$container = $("#container").notify();
notifyItemCreation();
});
</script>
EDIT: I think people are misunderstanding the problem.
So my sellitem.php page contains a form to sell an item, if this is submitted it gets send to createitem.php, this is where I do the validation checks.
If everything is okay this is where I redirect to the newly created item.php?item='$itemid' page. I want on this (item.php?item='$itemid') page the notification to be displayed.
EDIT2: I do know how to create the item.php?itemid='$itemid' page, this gets done perfectly, it is the notification to appear that is the problem. I am using the notifications from http://www.erichynds.com/blog/a-jquery-ui-growl-ubuntu-notification-widget
Can the people who are downvoting also explain why they are.
You can use session variables. In the next request if a certain variable exists or indicates that the current item is new, you can echo the script tag and unset the variable.
You could just wrap the JS in a condition
<?php if(is_numeric($itemid)){ ?>
<script type="text/javascript">
$(function(){
$container = $("#container").notify();
notifyItemCreation();
});
</script>
<?php } ?>
You could use ISSET() as well
I've been googling the whole day for this... I'm still a beginner at html/css/php/javascript, so I probably have some rookie mistakes, but that's why you guys are here to help me!
So, I have a dynamic website with a static template and dynamically loaded content. For example, when I click the "About Us" link, the template remains the same, but the content gets loaded from another .php file and printed out in a iframe in that same index, using the $_GET method. I'm using iframe so I don't affect the template layout. My problem is that my .js file with animations gets executed each time I click any of the navigation links, so it makes my wish to, for example, fade in the whole website once it's loaded impossible. Each time I click a link the entire website would dissapear and fade in again. I don't know did I use Google wrong, but I cannot find the solution to my problem. I only want that script to run once when the page is loaded, not whenever I click a link! Here are some parts of the code:
Part of index.php:
<?php
include('setup/setup.php');
?>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="javascript.js"></script>
<body>
<div class="wrapOverall">
<div class="header">Logo, language buttons etc.</div>
<div class="wrapMainNav">Main navigation (Home, About us etc.)</div>
<div class="content">
<iframe src=<?php echo "content_$language/$pg.php"; ?> frameborder="0" style="width:951px; height:486px;">aaa</iframe>
</div>
</div>
</body>
</html>
where "content_$language" is the folder from which I get the file, and "$pg.php" is the file itself.
The setup.php file:
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_GET['page'] == '')
{
$pg = 'naslovna';
}
else
{
$pg = $_GET['page'];
}
if($_GET['lang'] == '')
{
$language = 'cro';
}
else
{
$language = $_GET['lang'];
}
?>
The javascript.js file:
$(document).ready(function() {
$(".wrapOverall").hide(); //Hide the website
$("html").css("visibility", "visible");
var bg = new Image();
bg.src = "images/background.jpg";
bg.onload = function(){ //Load the background image
$("html").css("background-image", "url(images/background.jpg)");
$("html").css("background-repeat","no-repeat");
$("html").css("background-attachment", "fixed");
$("html").css("background-position", "center");
$(".wrapOverall").fadeIn(1000); //Fade in the site
$(".content").animate({height:'468px'},1000); //Animate content loading
}
});
That's about it, if you guys think you need more code I can send it.
Each time you click a link, and the URL changes, the browser makes a GET request to the server for that page. PHP will return the page and the browser will reload it, even if it's 95% the same as the last page you were on. It'll re-render the DOM and hence the $(document).ready event will fire again.
What you're looking to do is to refresh a part of the page without making a GET request to the server for the whole page. To do this you need to use AJAX.
One of the simplest ways to do this is using jQuery's load() method (click for documentation).
Have a look at the documentation and try a simple example, hopefully that will get you started.
NOTE: as has been mentioned already in the comments, there are plenty of frameworks that try to make achieving this functionality easier. Take a look at backbone.js, angularjs and ember.js to name a few. They also add a lot more, so depending on what you're trying to do, might be overkill, but it's worth a look.
Since your javascript is included in every page, it runs each time the page loads, and therefore hides and then shows the whole page. You should exclude it when loading other pages.
Have you tried to call the the iframe content with ajax ? That way the php will be called in the same time than your js functions.