I have this code:
<div class="menuList">
<li><img src="/images/icon/arena.png" alt="">Arena<span class="green"> (+)</span>
</li>
</div>
And i want to remove <span class="green"> (+)</span> after users click that link.
Anyone can help me (php code)?
As already mentioned, PHP is not the ideal language to do this in. But, if you need to use PHP, here is how you could do it.
Set a session variable on the /arena/ page, like this;
<?php
session_start();
$_SESSSION['visited'] = 1;
?>
Then, use PHP to check for the session variable in your HTML code like this:
<div class="menuList">
<li><a href="/arena/"><img src="/images/icon/arena.png" alt="">Arena
<?PHP
If(isset($_SESSION['visited'])){
echo '<span class="green"> (+)</span>';
}
?>
</a>
</li>
</div>
You will need to add session_start() to the top of the page wherever you are accessing session variables, before you output anything to the page (e.g. DOCTYPE declaration.)
in Jquery you may do this like
<script>
$(function(){
$('.menuList').find('a').click(function(){
$(this).children('.green').remove();
});
});
</script>
You can accomplish this by adding this javascript to your page:
<script>
window.onload = function() {
var a = document.querySelector('.menuList a');
a.onclick = function() {
var span = a.querySelector('.green');
a.removeChild(span);
}
}
</script>
OR if you're using jQuery:
<script>
$(document).ready(function(){
$('.menuList').find('a').click(function(){
$(this).find('.green').remove();
});
});
</script>
Related
I have a list of items on my page from a DB table
I am trying to change the glyphicon when checked
<div class="div1">
<span id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>
this is the script on the top of my page:
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").load("clicked.php");
});
});
</script>
clicked.php looks like:
<span id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>
The problom is the when I click on one item - all the items change there glyphicons
What am I doing wrong?
You just have to remove & add new class:
$(document).ready(function(){
$(".div1").click(function(){
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
//Here you can add ajax call
});
});
There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.
Also using the right scope, $(this) will stop it effecting all your div1 elements.
<script>
$(document).ready(function(){
$(".div1").click(function(){
//$(".div1").load("clicked.php");
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
});
});
</script>
And to make the code toggle from one to another on each click
<script>
$(document).ready(function(){
$(".div1").click(function(){
if ( $(this).children('span').hasClass('glyphicon-ok') ) {
$(this).children('span').removeClass('glyphicon-ok');
$(this).children('span').addClass('glyphicon-eye-open');
} else {
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
}
});
});
</script>
I'm building a website where the admin can make settings for the website. I would like the admin settings page to have a similar "feel" as the rest of the website, which has some nice looking jQuery features.
On the admin site there's a hidden div, which is shown when one of six links has been clicked. I'd like the content of the hidden div to change content before showing itself. I'm not sure how to do this. I could have a div box for every link on the page. But this becomes pretty cumbersome since I'd need to repeat my css and jquery for every link. I imagine that this, somehow, can be done with some javascript/jquery code that determines which link that was click and then decides which php function to call inside the hidden div. Then the php could "echo" out the content of the div, which then could be shown.
How could one do this?
My HTML/jQuery code is as follows:
--- The html links ---
<table id="settings">
<tr>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
----- The Hidden div -----
<div id="dashboard_box">
<div class="dashboard_inside">
<form action="#" method="post">
<p style="font-size:20px; font-weight: bold;">Change color</p>
</br>
<fieldset>
<? load_content1();?>
</fieldset>
</form>
</div>
</div>
---- jquery code (working)----
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
You probably want to use ajax to load the content from the server. Take a look at jquery's .load() method: http://api.jquery.com/load/
You could include a data attribute per link:
<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>
js would look something like this:
$(".action").on('click', function() {
$("#dashboard_box fieldset").load($(this).data('content'), function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
}
return false;
});
Then, in your content.php file you could check the method parameter in the url to determine what content to return.
My php is a little rusty, but something like this:
<?
call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
You can just add data attribute in each of your link's
<a href="#" data-url="content1.php" ..
Then on click of any of the a you can get the php to be called.
$('a').on('click',function(){
var phpFunctionToCall = $(this).data('url');
});
You probably need to make ajax call to load content into your fieldset As this <? load_content1();?> run's on server and javascript have no control over it.
Thanks for all the help. this is what I ended up doing.
--- HTML ---
<a class="action" data-content="content.php?method=load_content2"></a>
---Jquery---
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var phpFunctionToCall = $(this).data('content');
$('#indhold').load(phpFunctionToCall);
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
--- PHP (shortened)---
function load_settings_panel($settingOnRequest) {
return $settingOnRequest;
}
$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
Here is my html for my populated listview. I have the link grabbed from the php script aswell. Where would i put the page slide function on click event. It wont allow me to but html in the script
<div data-role="content">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index1", function() {
$(function(){
var items="";
$.getJSON("check-events.php",function(data){
$.each(data,function(index,item)
{
items+="<li><a href="+item.col1+"?eventid="+item.id+">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
});
$("#contacts").append(items);
$("#contacts").listview("refresh");
});
});
});
</script>
<div data-role="fieldcontain">
<ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
List view
</li>
</ul>
</div>
Where would i add this piece this code. It keeps producing an error when i add it like this
items+="<li><a href="+item.col1+"?eventid="+item.id+" data-transition="slide">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
Any ideas
Working solution
php
$data = array();
while($rowa = mysql_fetch_array($a, MYSQL_ASSOC))
{
$row_array['id'] = $rowa['eventid'];
$row_array['col1'] = "index.html";
$row_array['col2'] = $rowa['eventname'];
$row_array['col3'] = date("D jS F Y",strtotime($rowa[enddate]));
$row_array['col4'] = "slide";
array_push($data,$row_array);
}
echo json_encode($data);
}
changed html
items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""+item.col4+"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";});
You need to escape your quotes when putting in the variables (\")
items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""slide"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
But, on a side note, you should be letting JQuery create your elements for you. See: https://stackoverflow.com/a/4158203/1178781
I'm trying to create a 'print' button to open a new window and display a PHP Variable in it.
The code below is looped through the PHP script as many times as there are tickets, however I can't seem to get the correct number to display when the window opens (the number that displays in the print link is correct - but when the new window is opened it's incorrect).
<script type='text/javascript'>
jQuery(function($) {
$('a.new-window').click(function(){
var recipe = window.open('','PrintWindow','width=600,height=600');
var html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + $('<div />').append($('#ticket').clone()).html() + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
Print <?php echo $EM_Booking->get_spaces() ?>
<div style="display:none;">
<div id="ticket"><?php echo $EM_Booking->get_spaces() ?>
</div>
</div>
why not try something like this:
<a href="#" class="new-window">Print <?php echo $EM_Booking->get_spaces() ?>
<div class="ticket" style="display:none">
<?php echo $EM_Booking->get_spaces() ?>
</div>
</a>
<script>
jQuery(function ($) {
$('a.new-window').click(function () {
var btn = $(this),
ticket = btn.find('.ticket').html(),
recipe = window.open('','PrintWindow','width=600,height=600'),
html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + ticket + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
But much better solution would be to give a button a unique ID, and onclick open an existing (php-generated) page from the server passing that ID, e.g. /getBooking.php?id=123 and that page would output whatever's needed.
I am very new with Ajax.
i am using the following javascript function to get the value from the list those user select the li.
but using this function each time the page is reloading. i am trying to use ajax using this function.how can i use ajax with this need syntax.
My function:
<script type="text/javascript" language="javascript">
function pagelim(index)
{
var page_lim=$('#page_num li').get(index).id;
self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index)
{
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
self.location="<?php echo get_option('head'); ?>"+'?details&sort=' + date_by ;
}
</script>
Value get from list:
<div class="sort-links">
<span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
//list to select value
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
Welcome to the wonderful world of functional programming.
I'm assuming you are doing a "get" request based on "index" which is a url? If that's the case, then you need to provide a callback.
$('#page_num li').get(index. function(id) {
var page_lim = id; // assuming that's what you sent back.
self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
});
Notice that you have to put everything in a function that is called after the ajax request is finished. I'm assuming that all you are sending back from the request is the id you need.
jQuery AJAX calls are asynchronous, meaning that the the function $(...).get(url, callback); returns a value BEFORE the AJAX call has finished. That callback function only happens after the AJAX call is completed. I'd advise some time spent with the jQuery API documentation.
You might also Google "javascript functional programming" and see if you can get an explanation of how JavaScript (and thus jQuery) does not always return the value you expect from functions. It's very different from other languages like PHP or ASP.NET in that regard.
Hi hope this will help you... Create a div (say "MyDiv") and put all the elements which you want to change dynamically(without page refresh)... Then try jQuery.load() method...Like
<div id = "MyDiv">
<div class="sort-links">
<span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
//list to select value
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
</div> //end of MyDiv
Then change your script like
<script type="text/javascript" language="javascript">
function pagelim(index)
{
var page_lim=$('#page_num li').get(index).id;
$("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim);
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index)
{
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
$("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&sort=' + date_by);
}
</script>
Please note that I havnt tested this...
Its very simple to use jQuery to perform AJAX requests... So pls refer this page
Try binding to the click event of your links. This way you can remove any inline javascript and its all neatly contained in your function.
$("li a").click(function() {
//should alert the id of the parent li element
alert($(this).parent.attr('id'));
// your ajax call
$.ajax({
type: "POST",
// post data to send to the server
data: { id: $(this).parent.attr('id') }
url: "your_url.php",
// the function that is fired once data is returned from your url
success: function(data){
// div with id="my_div" used to display data
$('#my_div').html(data);
}
});
});
This method means your list elements would look something like,
<li id="5">5</li>
This doesn't look ideal though as id="5" is ambiguous.
Try something like,
<li class="select_me">5</li>
then your click event binding can look like this,
// bind to all li elements with class select_me
$("li.select_me").click(function() {
// alert the text inside the li element
alert($(this).text());
});