Suppose I have a page called view.php, if I give an argument like view.php?q=fruit, it creates a list of fruits stored in an array. I want change the content of a label in a page to be changed to the content of that array if a slider in that page changes. In the example above, this array contains: $list = array('banana', 'apple', 'orange'); I want to have a slider in the page and a lable that when the user changes the slider's value, the label's text changes to 'banana', 'apple', ...
I heard aboue sessions in PHP but since there may be lots of calls to this page in multiple tabs, I think this wouldn't be a good idea. How can I do this?
Thanks in advance.
It sounds like the only difference between different tabs would be the list that's generated. So your PHP code doesn't need to account for anything except which list you're going to be using. Here's a quick jquery mockup. With some CSS, and maybe some jquery animation, your slider could work without any page reloads at all.
<?php
$list = array(
'fruit' => array('apple','orange','banana'),
'soemthing' => array('a', 'b', 'c')
);
?>
<div id="Label">Click one of the list items to change this</div>
<ul id="Slider">
<?php foreach ($list[$_GET['q']] as $item) { ?>
<li><?php echo $item; ?></li>
<?php } ?>
</ul>
<script type="text/javascript">
$('#Slider li').click(function() {
$("#Label").text($(this).text());
// you can have some other logic here to decide what to do when the slider is changed
});
</script>
i think you can use a jquery solution .
store your array in your jquery code .
then call it on change function of your slider
like this ,
$('.slider').change(function(){
var index = $(this).index();
var label = labelsarray[index];
$('#label').data(label);
});
For slides I also do recommend jquery like others do, remember you can have asynch loads as well.
I don't remember the url but I had seen an amazing tutorial on jQuery with asynch load.
Some keywords: js asynch, image load jquery, jquery scroll
Try google with jquery scroll asynch it was an excellent tutorial with image loading asynchronously in many ways (by hovering, clicking, scrolling etc).
OK. I found what I wanted. I found a pretty neat slider here:
http://jqueryui.com/demos/slider/
then I used in in my page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Snap to increments</title>
<link type="text/css" href="jquery/slider.css" rel="stylesheet" />
<script src="jquery/jquery-1.6.1.js"></script>
<script src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
<?php
$list = array('apple','orange','banana');
?>
<script>
var arrayFromPHP = <?php echo json_encode($list) ?>;
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: arrayFromPHP.length - 1,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(arrayFromPHP[ui.value]);
}
});
$( "#amount" ).val( arrayFromPHP[$( "#slider" ).slider( "value" )] );
});
</script>
</head>
<body>
<div class="demo">
<p>
<label for="amount">Current selection:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider"></div>
</div>
</body>
</html>
Please note that I used Rob's answer as my source and all the credit's go to him. But since it was not EXACTLY what I wanted, I decided to post my own answer.
Related
<div class="a">hello</div>
<div class="b">bye</div>
I have a one page website and I want a div to be loaded first and then the second one and... Can I do this just with html and css? Or it needs JavaScript or...
Just do it with Javascript:
Change your Body to <body onload="onloadFunction()">
Add style="display: none;" to your div Elements
Add following script:
<script language="javascript" type="text/javascript">
function onloadFunction(){
document.getElementsByClassName("a").style.display = "true";
document.getElementsByClassName("b").style.display = "true";
}
</script>
and change the order of the document. lines to which order you want to have it.
You can try this with something like.
$(document).ready(function() {
$(".b").delay(2000).fadeIn(500); //class b is on delay
});
Can't done with only HTML and CSS. Need to involve JavaScript or jQuery code too.
Yes you need javascript and I suggest jquery(javascript library).
More info at: http://www.w3schools.com/jquery/jquery_get_started.asp
And here is working example(just run with browser and click button):
<div class="a" style="display: none;">hello</div>
<div class="b" style="display: none;">bye</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.a').show();
setTimeout(function(){$('.b').show()}, 2000);
});
</script>
How can I display the dynamic content of PHP with bootstrap pagination.The result is displaying using ajax call in div id 'msrResult', how to use that div in bootstrap pagination code. Here my code:
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master /lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<div id="content2">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
$('#page-selection').bootpag({
total: 23,
page: 1,
maxVisible: 10
}).on('page', function(event, num){
$("#content2").html("Page " + num); // or some ajax content loading...
});
</script>
</body>
</html>
<div id=msrResult></div>
First of all the "space" in the GitHub URL could produce 404 responses. You should delete it to get the script working ;)
Basically (as you can see at the authors website) clicking the page-buttons (they are showing up in #page-selection once the script is initialized correctly) triggers bootpag to toggle the content. In the .on() function you have the chance to place new content right before it shows up again.
In the script you've provided you write "Page X" in #content2 before it shows up. But in your case you want to load dynamic content in this div so you could do something like this:
$.ajax({
url: "source.php?site="+num
}).done(function(data) {
$( "#content2" ).html( data );
});
in the .on() function to load the dynamic php content in your #content2 div
Also see this JS fiddle for a demo: http://jsfiddle.net/628zL/3/
U can easily do that by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
If u like to use customised version, then u can try this-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: 'ā',
last: 'ā',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
If u like to use more customization, u can try this options-
Warning
Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommanded.
Hardly recommendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even more can be found from here.
I think u have your complete answer.
Hello & thanks for your time!
I'm trying to set up buttons for categories that when clicked load that categories first item in the vis Contained div. Then 'next' and 'prev' buttons in the loaded div data that switch to other items in that category.
So far I have:
php:
<nav>
<button onclick="changeContent('content1')">content1</button>
</nav>
<section id="main">
<div id="visContainer"><div>
</div>
</section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
<script src="js/javascript.js"></script>
js:
$(function(){
function changeContent(content){
$('#visContainer').load('divList.html' content);
};
});
along with a divList.html file that has different divs listed (filled w text for now).
I'm getting an 'Unexpected identifier' on the function changeContent line in the js and it keeps saying changeContent is not defined (when button clicked). I thought it may be something to do with my declaration or the jQuery but I can't figure out where. I'm new to this so any help would be much appreciated!
$(function(){ ... });
That function creates a new scope, making changeContent unavailable in the window scope where your inline event handler lives. Quick fix would be :
$(function(){
window.changeContent = function(content){
$('#visContainer').load('divList.html' content);
}
});
A better solution would be to remove the inline event handler.
<button id="myButton">content1</button>
and JS:
$(function(){
$('myButton').on('click', function() {
$('#visContainer').load('divList.html #content1');
});
});
When I generate PHP within a file that is asynchronously loaded by jQuery, the text seems to jitter or flicker a little while the animation runs. This does not happen to the regular HTML in the requested file, only the content generated with PHP.
Just want some hints as to what can end the jitter.
Here is the jQuery in the main.php:
$(document).ready(function(){
var demo = $('#demo');
demo.hide();
$("button").click(function(){
demo.load('demo.php', function() {
demo.show('medium');
});
});
});
Here is the HTML and PHP in demo.php:
<p><?php echo "Hello World with PHP trough AJAX"; ?></p>
Iām really unsure where to begin. Should I just avoid using PHP in demo.php alltogether? Even so I'd really like to have to possibility to use PHP in scripts called trough AJAX.
As per request, here is the whole darn thing:
main.php:
<!DOCTYPE html>
<html>
<head>
<title>Testing Ajax</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script>
$(document).ready(function(){
var demo = $('#demo');
demo.hide();
$("button").click(function(){
demo.load('demo.php', function() {
demo.show('medium');
});
});
});
</script>
<style type="text/css">
#demo {background-color: MidnightBlue;color: white;padding: 0.1em 1em 1.5em 1.5em;}
#demo h1 {color: white;}
</style>
</head>
<body>
<section>
<article>
<h1>Ajax</h1>
<hr />
<button>Load External Content</button>
<div id="demo"></div>
</article>
</section>
</body>
</html>
(I like MidnightBlue better than CornflowerBlue...)
demo.php:
<h1>Ajax criex Hello World!</h1>
<p><?php echo "PHP also cries Hello World trough Ajax!"; ?></p>
Technically speaking, there is absolutely no difference between text generated with PHP versus text generated in ASP.net versus text contained in a .txt file versus text caused by typing on your keyboard -- it is all letters and numbers. Indeed, I would go as far to say that, examining text absent other clues, it is completely and 100% impossible to tell how it was created. No, you should not avoid PHP with AJAX.
Any "jittering" that you see is a product of some other issue, most likely related to browser performance - processor availability, free memory, current process memory consumption, extension activity/interference with page content, etc.
I don't know if this will help you. Probably not if the code shown above is really all your code.
But: Some time back I also had a jittering problem in animations when I loaded content via Ajax. The reason was: The loaded content contained Javascript code with other animation commands and then both animations interfered. Maybe this is also the case here.
In my test whilst trying to reproduce the "jitter" your code is producing an infinite ajax loop (View it in Web Console, your see) thats most likely your jitter effect:
Heres a basic PHP and AJAX example:
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest' && $_SERVER['REQUEST_METHOD']=='POST' && isset($_POST['action'])){
$action = $_POST['action'];
switch($action){
case "hello":
echo "Hello World with PHP through AJAX";
break;
case "foobar":
echo "Hello Foobar";
break;
}
die;
}
?>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var action = this.value;
ajaxload('demo',action);
});
});
function ajaxload(placement,action){
$.post("./demo.php", { 'action': action },
function(data) {
$("#"+placement).hide().html(data).fadeIn('slow');
});
}
</script>
<button type="button" value="hello">Hello World</button>
<button type="button" value="foobar">Foobar</button>
<p id="demo"></p>
I am a newby in ajax and php and I would very much appreciate it if you could help me out. Seeing that I only know a little bit javascript and php I really don't know how to remedy this problem could you help me please! I've been hunting down a fix but couldn't find any, hopefully my search will stop here. I'll try my best to be clear in my explanation.
I would like this:
load html page called ducks
to load into the myDiv area an html page called ducks.html.
I would also like that when I click on on this:
load a list of html links
I would like it to load an html page with a list of links that when clicked will load into the myDiv area without reloading the whole page.
And lastly I would like to set up the myphpscript php file. To load a page with a list of links that will appear in the myDiv area and when I click on one of those links it will load likewise into the myDiv area.
This is my code
<!-- This is your PHP script... myphpscript.php -->
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
include 'con2.html';
} else if ($contentVar == "con2") {
echo "<a href='con2'>View</a>";
} else if ($contentVar == "con3") {
echo "Content for third click is now loaded. Any <strong>HTML</strong> or text you wish.";
}
?>
<!-- This is the rest of my code -->
<html>
<head>
<script type="text/javascript" src="jQuery-1.5.1.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
//-->
</script>
<style type="text/css">
#myDiv {
width:200px; height:150px; padding:12px;
border:#666 1px solid; background-color:#FAEEC5;
font-size:18px;
}
</style>
</head>
<body>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con1');">Content1</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con2');">Content2</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con3');">Content3</a>
<div id="myDiv">My default content for this page element when the page initially loads</div>
</body>
</html>
It sounds to me that if you want an external page to load when something is clicked, you need to perform an ajax GET or POST request, then print the results to the div:
http://api.jquery.com/jQuery.post/
If you just want to change the contents of the div to some other text, you can use something like jQuery.html: http://api.jquery.com/html/
<script>
$("#idForLink").click(function () {
var htmlStr = "The new text to show";
$('#myDiv').text(htmlStr);
});
</script>
Without using jQuery, your example above is sending self posts to echo contentVar which will always refresh the page.
See this fiddle for a jquery+css solution to your problem [NO PHP REQUIRED]: http://jsfiddle.net/bYNeg/
If you are simply grabbing HTML from another file I would use the load method, as its quick and easy:
$(document).ready(function(){
$('#myDiv').load("someFile.html");
});
For more extensive requests you can use Post and Get. They allow you to pass data with the URL request in order to affect the results that are returned. Obviously your requested URL would need to be PHP/ASP and handle the request in this case.
JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function(){
// this is your mouse event (click) listener
$('.destination_div').on('click','a',function() {
var url = $(this).attr("href");
$('.destination_div').load(url);
return false;
});
});ā
</script>
Make your HTML anchors simple, do not include inline javascript, because the on("click") handles it already.
HTML:
Your HTML with links