Making menu items visible/invisible according to user role - javascript

I use a PHP Script (AdLinkFly - Monetized URL Shortener)
I want to display different menu according to login user . If user is client then display Manage Account and LogOut otherwise show Sing-Up and Sing-In.
Here is the home page http://adshort.ga
Here is the code "front.ctp" :
<html lang="<?= locale_get_primary_language(null) ?>">
<head>
<?= $this->element('front_head'); ?>
</head>
<body class="<?= ($this->request->here == $this->request->webroot) ? 'home' : 'inner-page' ?>">
<?= get_option('after_body_tag_code'); ?>
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"><?= __('Toggle navigation') ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php
$logo = get_logo();
$class = '';
if ($logo['type'] == 'image') {
$class = 'logo-image';
}
?>
<a class="navbar-brand <?= $class ?>" href="<?= $this->Url->build('/'); ?>"><?= $logo['content'] ?></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<?= __('Home') ?>
</li>
<?php if (get_option('enable_advertising', 'yes') == 'yes') : ?>
<li>
<?= __('Advertising') ?>
</li>
<?php endif; ?>
<li>
<?= __('Payout Rates') ?>
</li>
<?php if ((bool)get_option('blog_enable', false)) : ?>
<li>
<?= __('Blog') ?>
</li>
<?php endif; ?>
<li>
<?= __('Sign in') ?>
</li>
<li>
<?= __('Sign Up') ?>
</li>
<li>
<?= __('Dashboard') ?>
</li>
<?php if (count(get_site_languages(true)) > 1) : ?>
<li class="dropdown language-selector">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"><i class="fa fa-language"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<?php foreach (get_site_languages(true) as $lang) : ?>
<li>
<?= $this->Html->link(
locale_get_display_name($lang, $lang),
'/' . $this->request->url . '?lang=' . $lang
); ?>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
<?= $this->element('front_footer'); ?>
</body>
</html>
Im not expert in PHP i would be grateful if someone could help me

When the user log in, start a session session_start(), then add to a $_SESSION variable when you store a value that the script can recognise, for example: $_SESSION['userLogged'] = true;, then at the main file, you can add this:
session_start();
if($_SESSION['userLogged'] == true) {
//Display here the HTML with echo function
} else {
//Load the normal page
}
Imagine you want to display a <p> tag with the text "Hello world!", then you would have to go to the html file, find the tag where you want the code to be executed, and then do the code below. For example:
if($_SESSION['userLogged'] == true) {
echo '<p>Hello world!</p>';
}

Related

Showwordpress user description when user image is clicked

I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!
HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

YII2 - Partial update on anchor tag click

I'm having some trouble to render partial when clicking on a anchor tag in Yii2.
My view code is as follows :
<div class="col-md-5 module">
<h2><?php echo $client->subtitle ?></h2>
<div class="text-center industries-wrapper">
<div class="center-wrapper clearfix">
<ul class="nav nav-pills">
<?php foreach ($clientMarkets as $key => $clientMarket) : ?>
<li <?= ($key == 0) ? 'class="active"' : '' ?>>
<a <?= ($key == 0) ? 'href="#1a"' : 'href="#2a"' ?> data-toggle="tab">
<?php echo $clientMarket->title ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="tab-content center-wrapper clearfix">
<?php foreach ($clientMarkets as $key => $clientMarket) : ?>
<div id="1a" <?= ($key == 0) ? 'id="1a"' : 'id="2a"' ?>
class="tab-pane<?= ($key == 0) ? ' active' : '' ?>">
<div class="contact-info">
<ul>
<?php foreach ($clientMarket->children as $key => $client) : ?>
<li><a><?php echo $client->title ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<hr>
<div class="client-description hidden-xs"><?php echo $clientDescription->short ?></div>
</div>
<div class="col-md-7 module">
<div id="client-section-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php echo $this->render('_partials/references', ['name' => 'value']) ?>
</div>
</div>
</div>
I would liked to update the partial view in the div with class carousel-inner when clicking on the anchor tag in div contact-info.
I've looked for some examples using ajax but can't find out how to update the partial on click.
Thanks for your help.
If you don't want write simple JS/AJAX code with own logic, you can try to use Pjax.
Something like this:
Update Pjax container via AJAX
...
<div class="carousel-inner" role="listbox">
<?php
Pjax::begin(['id' => 'pjaxId']);
echo $this->render('_partials/references', ['name' => 'value']);
Pjax::end();
?>
</div>
UPD:
If you want to change URL for AJAX updating use:
<?php $ajaxUrl = \yii\helpers\Url::to(['some-controller/some-action']); ?>
<a href="#" onclick="$.pjax.reload('#pjaxId', {timeout : false, url: '<?= $ajaxUrl ?>'});">
Update Pjax container via AJAX
</a>

Get value in looping, send to another page and call catch data using that value

I use session to send that value to other page, but mysql syntax does not display the data using that value. It doesnt show the error on MySQL syntax. Can someone help me? and Explain why mysql syntax cannot read the session? or I need to assign new variable for session on the pakejlist.php page?
the value already call from DB and display on A HREF link on food.php , i want to get that value on pakejlist.php mysql syntax.
and what I achieve is nothing.. the syntax just fine but the data doesnt came out.
//food.php
<?php include("../kahwin/Connections/conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Kahwin Ringkas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kahwin/index.php">Walimatul Urus</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
<h1>Carian Katering</h1>
</div>
<?php
session_start();
$_SESSION['id'] = $row['v_id'];
mysql_select_db($database_conn, $conn);
$sql = mysql_query("SELECT * FROM vendor WHERE type = 'Katering'") or die (mysql_error());
while ($row = mysql_fetch_array($sql)) {
?>
<div class="col-md-4">
<?php echo '<img src="data:image;base64, '.$row['img'].'" class="img-thumbnail">' ?>
<h4><?php echo $row['companyName']?></h4>
<p><?php echo $row['address']?>, <?php echo $row['code']?> <?php echo $row['city']?>, <?php echo $row['state']?><br><?php echo $row['contact']?><br><?php echo $row['email']?><br></p>
View Package<br>
</div>
<?php }
?>
</div>
</body>
</html>
//pakejlist.php
<?php include("../kahwin/Connections/conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Kahwin Ringkas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kahwin/index.php">Walimatul Urus</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Senarai Pakej</h1>
</div>
</div>
<!-- /.row -->
<!-- Project One -->
<?php
//$vid = $_REQUEST['id'];
session_start();
mysql_select_db($database_conn, $conn);
$sql = mysql_query("SELECT * FROM pakej WHERE v_id = '" .$_SESSION['id']. "' ") or die (mysql_error());
while ($result = mysql_fetch_array($sql)) {
?>
<div class="row">
<div class="col-md-6">
<h3><?php echo $result['name_p']?></h3>
<h4>$ <?php echo $result['harga']?></h4>
<p><?php echo $result['descr']?></p>
<a class="btn btn-primary" href="#">Add to cart <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="col-md-5"></div>
</div>
<?php }
?>
<!-- /.row -->
<hr>
</body>
</html>
In food.php, you are initialising session variable $_SESSION['id'] = $row['v_id'] , outside mysql_fetch_array loop. So $row['v_id'] is empty. Also if you initialize that from within the loop, it will be overwritten and will have the value from the last row.
In the loop,
View Package<br>
The value in anchor tag does not mean anything. It is not valid. So you can try this instead..
View Package<br>
And in the pakejlist.php you will have change to
$sql = mysql_query("SELECT * FROM pakej WHERE v_id = '" .$_GET['v_id']. "' ") or die (mysql_error());
Hope this helps...

Moving list element from one unordered list to another with JQuery

I have looked at a few of the other answers to this question, but I have still not been able to get it done correctly. I have two unordered lists. One is dynamically created from a database table. The other is just a static table that begins empty. Each list contains, or will contain, list elements with nested anchor and awesome-font icon elements. My goal is to be able to, upon clicking the icon, transfer the list element from one list to the other, while changing the icon from a plus to minus sign. So far, I can successfully transfer items from the dynamic list to the static one, and I can change the icons, but I can not figure out how to transfer them back to the original list.
Here's my html:
<div class="row" id="constructTable">
<div class="col-md-6">
<h1>Choose your Columns:</h1>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" id="heading1" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1" class="collapsed"><span style="font-size: 16px;">Candidate Data</span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height:0px;">
<ul class="list-group choose" id="candidate">
<li class="list-group-item" id="candidate0">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;">First Name</span>
</li>
<li class="list-group-item" id="candidate1">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;">Last Name</span>
</li>
</ul>
</div>
</div>
</div>
<?php $counter = 2; ?>
<?php foreach ($mergedTests as $test): ?>
<?php $count=0 ?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="margin-top:-10px;">
<div class="panel panel-default">
<div class="panel-heading" id="heading<?php echo $counter; ?>" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $counter; ?>" aria-expanded="false" aria-controls="collapse<?php echo $counter; ?>" class="collapsed">
<span style="font-size: 16px;"><?php if( ! $test->example ): ?><?php echo $test->example; ?> Data<?php else: ?><?php echo $test->example; ?> Data<?php endif; ?></span>
</a>
</h4>
</div>
</div>
<?php $label = explode(",", $test->subtestLabel); ?>
<div id="collapse<?php echo $counter; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $counter; ?>" aria-expanded="false" style="height:0px;">
<ul class="list-group" id="<?php echo $test->subTestAbbreviation; ?>">
<?php if ( ! $test->testMakerTestId) : ?>
<?php foreach($label as $category): ?>
<li class="list-group-item" id="<?php echo $test->example; ?><?php echo $count; ?>" >
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> <?php echo $category; ?></span>
</li>
<?php $count++; ?>
<?php endforeach; ?>
<?php else: ?>
<li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>0">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Raw Score</span>
</li>
<li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>1">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Percentile</span>
</li>
<?php endif; ?>
</ul>
</div>
</div>
<?php $counter++; ?>
<?php endforeach; ?>
</div>
<div class="col-md-6">
<h1>Arrange Your Columns:</h1>
<ul class="list-group ui-sortable" id="selectedColumns">
</ul>
</div>
</div>
</div>
And my JQuery attempt so far:
$('li a').click(function(){
var parentId = $(this).parent().attr('id');
$(this).find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
$("#selectedColumns").append($("#" + parentId));
});
// Move selection from Arrange Your Columns back to Choose Your Columns
$('ul#selectedColumns').click(function(){
var parentId = $(this).parent().attr("id");
console.log(parentId);
transferId = parentId.slice(0, -1);
$("#" + parentId).find($(".fa")).removeClass('fa-minus').addClass('fa-plus');
$("#" + transferId).append($("#" + parentId));
});
Any help would be greatly appreciated.
Ok here you may need to use names for these lists, the target is selectedColumns, and the source is unordered lists has some database generated id. I will put a class name source-list to your datbase generated lists.
We can use this class name as a common selector of source lists and since the dom will change via user interaction we should use .on instead of .click binding.
First we send a clone of the selected item to selectedColumns and hide the original one so we wont have to find exact place of the element to roll back;
$(".source-list").on("li a","click", function(e) {
// get id of element for further reference
var itemId = $(this).attr("id");
// clone the item to a variable
var cloneItem = $(this).parent().clone();
// change the appearence of cloned item
cloneItem.find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
// append cloned item to selectedColumns
cloneItem.data("id", itemId).removeAttr('id').appendTo("#selectedColumns");
// hide the original item
$(this).hide();
});
$("#selectedColumns").on("li a","click", function(e) {
var itemId = $(this).data("id");
$(this).remove();
$(itemId).show();
});
Since this code has alot of errors / typos, i have created a fiddle for this,
https://jsfiddle.net/wxsnagr9/7/
Looks to me like what you have should be fine for the most part, you should just fix the selectors (also, using event delegation will save you from needing to bind data/recheck parent locations):
$('#candidate').click('li a', function(){
$(this).find(".fa").removeClass('fa-plus').addClass('fa-minus');
$(this).parent().appendTo($("#selectedColumns"));
});
$('#selectedColumns').click('li a', function(){
$(this).find(".fa").addClass('fa-plus').removeClass('fa-minus');
$(this).parent().appendTo($("#candidate"));
});

after navigate to another page, bootstrap dropdown become unusable

I had 3 .php files, they are index.php, load_file.php,and register.php
In index.php, contain navigation, and each navigation has dropdown list, i call this navigation and the dropdown from database. and also index.php has link to register.php, note : load_file.php included in this file
In load_file.php, contain code to check value of page, by using if($_GET['page']),and trigger every value with switch-case
register.php, just a normal form
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
::UPDATE::
this is my index.php file
<?php
session_start();
require_once './model/functions.php';
if(isset($_GET["category"])){
$index_page= $_GET["category"];
$index_sub_page= null;
}elseif (isset ($_GET["sub_category"])) {
$index_sub_page = $_GET["sub_category"];
$index_page= null;
}else{
$index_sub_page= null;
$index_page= null;
}
if($_POST){
$username = $_POST["username"];
$password = $_POST["password"];
if(check_username_and_password_from_users($username, $password)){
$_SESSION["username"] = $username;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learn Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="TopContainer" class="container">
<div class="pull-right navbar-default">
<ul class="nav navbar-nav">
<?php if(isset($_SESSION["username"])){ ?>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><?php echo $_SESSION["username"]; ?></a>
<div class="dropdown-menu" style="padding: 17px;">
Logout
</div>
</li>
<?php }else{ ?>
<!--dropdown here -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="login">Dropdown</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="loginform" method="post" action="index.php" class="form">
<div class="form-group">
<input class="form-control" type="text" name="username" id="username" placeholder="username">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" id="password" placeholder="password">
</div>
<input type="submit" value="Submit">
</form>
</div>
</li>
<li>Register</li>
<?php } ?>
<li>FAQs</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
</div>
<div id="logo" class="container">
<div class="col-md-6">
<a class="navbar no-margin" href="#"><img src="picture/LogoSaya.png"></a>
</div>
<div class="col-md-6">
<div class="col-md-6 pull-right">
<div class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
</div>
<nav class="container">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<?php
$subject_set = find_all_subjects();
while($subject = mysqli_fetch_assoc($subject_set)){
?>
<li>
<a id="dLabel" data-target="#" href="?subject=<?php echo urlencode($subject["id"]);?>" data-toggle="dropdown" aria-haspopup="true" role="button">
<?php echo $subject["name"];?>
<span class="caret"></span>
</a>
<!--dropdown here -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
$page_set = find_pages_from_subjects($subject["id"]);
while($page = mysqli_fetch_assoc($page_set)){
?>
<li>
<?php echo $page["name"];?>
<ul>
<?php
$sub_page_set = find_sub_pages_from_pages($page["id"]);
while($sub_page = mysqli_fetch_assoc($sub_page_set)){
?>
<li>
<?php echo $sub_page["name"];?>
</li>
<?php
}
clear_result($sub_page_set);
?>
</ul>
</li>
<?php
}
clear_result($page_set);
?>
</ul>
</li>
<?php
}
clear_result($subject_set);
?>
</ul>
</div>
</nav>
<div class="container">
<?php
include "load_files.php"; //this is to load the files
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
to navigate register.html, i use this code
<li>Register</li>
as you can see, i put code on below in index.php
<?php
include "load_files.php"; //this is to load file
?>
and this is my load_files.php
<?php
if($_GET){
switch ($_GET['page']) {
case 'register':
if(!file_exists("register.html")){
die("Sorry Empty Page");
}
include 'register.html';
break;
default:
break;
}
}
?>
Seems like an event handler issue. I'd look at how you are adding event handlers and see if the handler is getting wiped out somehow.
::SOLVED::
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
this problem happen because, i had 2
<script src="jquery.js"></script>
, inside index.php and register.html .by remove the one inside register.html will solve the problem

Categories

Resources