One modal with different button id assign from sql - javascript

I'm currently doing a final project for my school in online web programming but I'm having difficulties assign specific id from sql to button id, then open them with only one modal... Here's my coding:
<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | Log Out</div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li>Update</li>
<li>Delete</li>
<li class="icon">
☰
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1">New >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" >Add</button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>
<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";
//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
echo "<tr>";
echo "<td>" . $row['Campus_ID'] . "</td>";
$Campus_ID = $row['Campus_ID'];
$Temp = $row['Campus_ID'];
$Edit = $row['Campus_ID'];
echo "<td>" . $row['Campus_Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><button id='$Edit'>Edit</button></td>";
echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
echo "</tr>";
}
?>
</table>
</div>
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>
<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">×</span>
<form method = "post">
<div id="Modal_Content">
Campus ID:<br>
<input type="text" name="Campus_ID_2" required /><br><br>
Campus Name:<br>
<input type="text" name="Campus_Name_2" required /><br><br>
Location:<br>
<input type="text" name="Location_2" required /><br><br>
<input type='text' id = "hidden" name="Temp" value = "<?php echo $Temp; ?>">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>


There are two ways by which you can solve your issue:
1) you need to put your modal code into while loop.
2) If you want to have single modal, then you need to bind campus data in modal dynamically at the time of modal open.So below I have updated your code to make hidden field "campus id" dynamic whenever user clicks on edit button from the campus listing table:[code]By this way you need to bind other form data of modal as well.
<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | Log Out</div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li>Update</li>
<li>Delete</li>
<li class="icon">
☰
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1">New >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" >Add</button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>
<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";
//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
echo "<tr>";
echo "<td>" . $row['Campus_ID'] . "</td>";
$Campus_ID = $row['Campus_ID'];
$Temp = $row['Campus_ID'];
$Edit = $row['Campus_ID'];
echo "<td>" . $row['Campus_Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><button id='$Edit' onclick ='reply_click(this);'>Edit</button></td>";
echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
echo "</tr>";
}
?>
</table>
</div>
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>
<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">×</span>
<form method = "post">
<div id="Modal_Content">
Campus ID:<br>
<input type="text" name="Campus_ID_2" required /><br><br>
Campus Name:<br>
<input type="text" name="Campus_Name_2" required /><br><br>
Location:<br>
<input type="text" name="Location_2" required /><br><br>
<input type='text' id = "hidden" name="Temp" value = "">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
function reply_click(obj)
{
var test = obj.id;
document.getElementById("hidden").value = test;
}
</script>
</body>
</html>
By this way you need to bind other form data of modal as well.
Add Comment

Related

how to make a update in MySQL using checkbox

I would like to know how a multiple update in MySQL with checkbox because I'm not getting the id attribute checkbox someone could help me?
HTML code
<form method="post" action="../sys/fav.php">
<input type="hidden" id="id_photo" name="id" value="">
<div class="col-md-12">
<p align="right"><button class="btn btn-primary" id="final" name="final">Send</button></p>
</div>
<?php
require "../sys/connect.php";
$email = $_GET['email'];
$sql = mysqli_query($mysqli, "SELECT * FROM gallery WHERE email ='$email'");
while($row = mysqli_fetch_array($sql)){
$id = $row['id'];
$name = $row['nome_galeria'];
$emailcontact = $row['email_contact'];
$pass = $row['pass'];
$email = $row['email'];
$img = $row['img'];
print"<div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
<input type=\"hidden\" name=\"contact\" value=\"$emailcontact\">
<input type=\"hidden\" name=\"login\" value=\"$email\">
<input type=\"hidden\" name=\"pass\" value=\"$pass\">
<input type=\"hidden\" name=\"name\" value=\"$name\">
<div class=\"hovereffect\">
<img id=\"he\" class=\"img-responsive\" src=\"../images/images/gallery/big/$img\" alt=\"$name\">
<div class=\"overlay\">
<div class=\"btn-group\" data-toggle=\"buttons\">
<label class=\"btn btn-primary cke\">
<input type=\"checkbox\" name=\"ck[]\" class=\"ck\" value=\"not\" id=\"ck_$id\"><i class=\"fa fa-heart\"></i>
</label>
</div>
</div>
</div>
</div>";
}
mysqli_close($mysqli)
?>
</form>
PHP Code
require "conexao.php";
if(isset($_POST['final'])){
$id = $_POST['id'];
foreach($_POST['ck'] as $ck){
$check = $ck;
$sql = mysqli_query($mysqli,"UPDATE gallery SET fav = '$check' WHERE id = '$id'")or die(mysqli_error($mysqli));
}
if($sql)
echo "Success!";
else
echo "Fail!";
}
Code Js to get the id of the checkbox
$("#final").click(function(){
var str = "";
var boxes = $(".ck");
for(var i = 0; i< boxes.length; i++){
if(boxes[i].checked == true){
var tmp = boxes[i].id.split("_");
str+=(i ? "," : "")+tmp[1];
}
}
document.getElementById('id_fotos').value=str;
});

You can get values of checkbox using below code and pass through ajax
var ckArray = new Array();
$.each($('input[name="ck[]"]:checked'),
function(index, ele){
ckArray.push($(ele).val());
});

Add Item to cart when same goods with different size goods

i'm create online shop, but i have a little problem in cart product.
if i add 2 products same and different product size
this products only show last add to cart.
example i want like this
product : ABC
size : XL
product : SKSD
size : L
i want like this.
this is my code
order.php
<?php
include "connection.php";
$link = $_REQUEST['link_goods'];
$data_pr = mysqli_query($con,"select * from goods where link_goods='".$link."' ");
$pr = mysqli_fetch_object($data_pr);
?>
<section class="main-container col1-layout">
<div class="main container">
<div class="col-main">
<div class="row">
<div class="product-view">
<div class="product-essential">
<form action="#" method="post" id="product_addtocart_form">
<div class="product-shop col-lg-12 col-sm-12 col-xs-12">
<div class="product-name">
<h4><?php echo $pr->goods ?></h4>
</div>
<p class="availability in-stock">Availability: <span><?php echo $pr->stock ?> stock</span></p>
<div class="price-block">
<div class="price-box">
<p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> Rp <?php echo $pr->price ?> </span> </p>
</div>
</div>
<div class="add-to-box">
<div class="add-to-cart">
<label for="qty">Quantity & Size</label>
<div class="pull-left">
<div class="custom pull-left">
<button onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;" class="reduced items-count" type="button"><i class="icon-minus"> </i></button>
<input type="text" class="input-text qty" readonly style="color:black" value="1" maxlength="5" id="qty" name="qty">
<button onClick="var result = document.getElementById('qty'); var qty = result.value; if(qty>=<?php echo $pr->stock ?>) return false; else if( !isNaN( qty )) result.value++; return false;" class="increase items-count" type="button"><i class="icon-plus"> </i></button>
</div>
<div class="custom pull-left">
<select style="color:black" name="size" id="size" class="input-text qty">
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
<?php
echo "<input type='hidden' id='price' name='price' value='".$pr->price."'>";
echo "<input type='hidden' id='id_goods' name='id_goods' value='".$pr->id_goods."'>";
?>
</div>
<?php
if ($pr->stock=="0")
{
}
else
{
?>
<button class="button btn-cart" title="Add to Cart" type="submit"><span><i class="icon-basket"></i> Add to Cart</span></button>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(e){
var form_data = $(this).serialize();
var button_content = $(this).find('button[type=submit]');
button_content.html(' ADDING...'); //Loading button text
$.ajax({
url: "proses.php",
type: "POST",
dataType:"json",
data: form_data
}).done(function(data){
$("#myinfo").html(data.items);
button_content.html(' ADD TO CART');
if($(".shopping-cart-box").css("display") == "block"){
$(".mycart-box").trigger( "click" );
}
$(".mycart-box").trigger( "click" );
})
e.preventDefault();
});
});
</script>
proses.php
<?php
session_start(); //start session
$mysqli_conn = new mysqli("localhost", "root", "", "databaseshop");
if ($mysqli_conn->connect_error) {
die('Error : ('. $mysqli_conn->connect_errno .') '. $mysqli_conn->connect_error);
}
if(isset($_POST["id_goods"]))
{
// i think's using condtion in here when different size product
foreach($_POST as $key => $value){
$new_product[$key] = filter_var($value, FILTER_SANITIZE_STRING);
}
$statement = $mysqli_conn->prepare("SELECT goods, images_goods, price FROM goods_table WHERE id_goods=? LIMIT 1");
$statement->bind_param('s', $new_product['id_goods']);
$statement->execute();
$statement->bind_result($goods, $images_goods, $price);
while($statement->fetch()){
$new_product["goods"] = $goods;
$new_product["images_goods"] = $images_goods;
$new_product["price"] = $price;
// i think's using condtion in here when different size product
$_SESSION["products"][$new_product['id_goods']] = $new_product;
}
$total_items = count($_SESSION["products"]);
die(json_encode(array('items'=>$total_items)));
}
//################## Loop Item Cart #####################################
if(isset($_POST["load_cart"]) && $_POST["load_cart"]==1)
{
if(isset($_SESSION["products"]) && count($_SESSION["products"])>0){
$cart_box = ' <div class="top-cart-content arrow_box">';
$cart_box .= ' <ul id="cart-sidebar" class="mini-products-list">';
$total = 0;
foreach($_SESSION["products"] as $product)
{
$product_name = $product["goods"];
$product_cover = $product["images_goods"];
$product_price = $product["price"];
$product_code = $product["id_goods"];
$product_qty = $product["qty"];
$product_size = $product["size"];
$cart_box .= ' <li class="item even remove-item">';
$cart_box .= ' <a class="product-image" href="#" title="'.$product_name.'"><img alt="'.$product_name.'" src="images/barang_sampul/'.$product_cover.'" width="80"></a>';
$cart_box .= ' <div class="detail-item">';
$cart_box .= ' <div class="product-details"> ';
$cart_box .= ' <p class="product-name"> '.$product_name.' </p>';
$cart_box .= ' </div>';
$cart_box .= ' <div class="product-details-bottom"> <span class="price">'.$product_price.'</span> <span class="title-desc">Qty:</span> <strong>'.$product_qty.'</strong> </div>';
$cart_box .= ' <div class="product-details-bottom"> <span class="title-desc">Ukuran :</span> <strong>'.$product_size.'</strong> </div>';
$cart_box .= ' </div>';
$cart_box .= ' </li>';
$subtotal = ($product_price * $product_qty);
$total = ($total + $subtotal);
}
$cart_box .= ' </ul>';
$cart_box .= ' <div class="top-subtotal">Subtotal: <span class="price">'.$total.'</span></div>';
$cart_box .= ' <div class="actions">';
$cart_box .= ' <center><button style="float:none" class="view-cart" type="button"><span>View Cart</span></button></center>';
$cart_box .= ' </div>';
$cart_box .= ' </div>';
die($cart_box);
}else{
// die("Null");
}
}
################# Delete Item From Cart ################
if(isset($_GET["remove_code"]) && isset($_SESSION["products"]))
{
$product_code = filter_var($_GET["remove_code"], FILTER_SANITIZE_STRING);
if(isset($_SESSION["products"][$product_code]))
{
unset($_SESSION["products"][$product_code]);
}
$total_items = count($_SESSION["products"]);
die(json_encode(array('items'=>$total_items)));
}
?>
Help me thank's

Hiding/showing an element

I got this function that show and hide a container by clicking on a button "+show more" or "- Hide" depending on the current action. However it's not working. Any insight on why?
echo ' <br>
<img src="../img/back.png" /><br>
<button type="button" onclick="show_hide("pinfocontainer","hidepinfo");" class="sidebutton" id="hidepinfo">+ Show more</button>
<div class="hide" id="pinfocontainer">
<div class="editform">
<h1>Personal Info </h1>
<br>
<form action="" method="post">
<span></span>';
$sql = "SHOW COLUMNS FROM candidates";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)){
$sql2 = "SELECT ".$row['Field']." FROM candidates WHERE ID='".$_GET["cid"]."'";
$result2 = mysqli_query($con,$sql2);
echo '<label class="editlabel"> '.$row['Field'].' : </label>';
while($row2 = mysqli_fetch_array($result2)){
echo '<input class="editinput" id="'.$row['Field'].'" name="'.$row['Field'].'" value="'.$row2[$row['Field']].'" type="text">';
}
echo '<br>';
}
echo '<input name="submit" type="submit" value=" Update " style="width:105%;">
<span></span>
</form>
</div>
</div>
<div style="display:inline-block;padding-left:15px;padding-right:15px;"> </div>
Function:
function show_hide(id, id2) {
var e = document.getElementById(id);
if(e.style.display == 'inline-block') {
e.style.display = 'none';
document.getElementById(id2).innerHTML = "+ Show More";
}
else {
e.style.display = 'inline-block';
document.getElementById(id2).innerHTML = "- Hide";
}
}

onclick="show_hide("pinfocontainer","hidepinfo");"
You close the attribute with the 2th " so change the " to '
onclick="show_hide('pinfocontainer','hidepinfo');"
You may escape the ' because you echo it
echo 'onclick="show_hide(\'pinfocontainer\',\'hidepinfo\');"';

Posting multiple variable in URL and working with checkboxes

This is based on the following example:
http://www.w3schools.com/php/php_ajax_database.asp
The differences are mainly that I am using checkboxes instead of select and where I would want to be able to select multiple items across multiple checkboxes forms:
Below are the two problems I have:
I want to be able to post multiple variable in the URL because as of now only one variable can be posted, and I get an error for the one not selected.
I want to be able to select multiple checkboxes at once. At its current state you can select multiple checkboxes but the results is only adjusted on the last checkboxes. FOr instance if checkbox 2 + 3 is check only 3 will be displayed, when I would want the result of 2 and 3.
Below is the html portion:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function showUser() {
var selectedPerson = $('#testform').serialize();
document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> Please wait... Loading New Courses...</div>";
$.ajax({
url:'getuser.php',
type:'post',
data:selectedPerson,
success:function(res){
$('#txtHint').html(res);
}
})
}
</script>
<script>
function showUser2() {
var selectedPerson = $('#testform2').serialize();
document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> Please wait... Loading New Courses...</div>";
$.ajax({
url:'getuser.php',
type:'post',
data:selectedPerson,
success:function(res){
$('#txtHint').html(res);
}
})
}
</script>
</head>
<body>
<form id="testform">
<input onchange="showUser();" name="person[]" type="checkbox" value="1">One<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="2">Two<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="3">Three<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="4">Four<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="5">Five<br>
</form>
<form id="testform2">
<input onchange="showUser2();" name="person2[]" type="checkbox" value="communication">communication<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="business">business<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="html and css">Three<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="sql">Four<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="windows">Five<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="cloud">Cloud<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="microsoft office">Java<br>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
Below is the PHP part:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$person = '';
$person = isset($_POST['person']) ? $_POST['person'] : '';
$allIds = '';
if($person!=''){
foreach($person as $personid){
$allIds .= $personid.',';
}
$personid = rtrim($allIds,',');
}
$person2 = '';
$person2 = isset($_POST['person2']) ? $_POST['person2'] : '';
$allIds = '';
if($person2!=''){
foreach($person2 as $personid2){
$allIds .= $personid2.',';
}
$personid2 = rtrim($allIds,',');
}
include("includes/db.php");
global $con;
$sql= "SELECT * FROM courses WHERE (course_duration IN ('" . $personid . "')) OR (course_duration IN ('" . $personid2. "')) LIMIT 10";
$result = mysqli_query($con,$sql);
$sqlCount = "SELECT * FROM courses WHERE (course_duration IN ('" . $personid . "')) OR (course_subc1 IN ('" . $personid2. "')) OR (course_subc3 IN ('" . $personid2. "')) OR (course_subc1 IN ('" . $personid2. "')) OR (course_subc4 IN ('" . $personid2. "')) OR (course_subc5 IN ('" . $personid2. "'))";
$get_crs_count = mysqli_query($con, $sqlCount);
$count_rows = mysqli_num_rows($get_crs_count);
echo '<p style="margin-bottom: 8px;margin-top: 8px;font-size:18px;"><b>Number of courses available: </b>' . $count_rows ;
while($row_crs = mysqli_fetch_array($result)){
$crs_id = $row_crs['course_id'];
$crs_cat = $row_crs['course_cat'];
$crs_provider = $row_crs['course_provider'];
$crs_title = $row_crs['course_title'];
$crs_price = $row_crs['course_price'];
$crs_city= $row_crs['course_city'];
$crs_category= $row_crs['course_cat1'];
$crs_date= $row_crs['course_date1'];
$crs_sdesc= $row_crs['course_sdesc'];
$crs_shortdesc = mb_strimwidth("$crs_sdesc",0,140,"...");
$crs_image = $row_crs['course_image'];
$provider_image = $row_crs['provider_image'];
echo " <article class='search-result row'><center>
<div class='col-xs-12 col-sm-12 col-md-3' id='thumbnailContainer'>
<a href='#' title='Lorem ipsum' class='thumbnail' id='resultThumbnail'><img src='$provider_image' /></a>
<a href='searchPage.php?crs_price=$crs_price' style='color:black;'> <button id='resultprice'><span id='resultpriceText'>$ $crs_price</span></button></a>
</div>
<div class='col-xs-12 col-sm-12 col-md-2'>
<ul class='meta-search' id='listDesign'>
<a href='searchPage.php?crs_date=$crs_date' style='color:white;'> <li><button id='resultInfo'><i class='fa fa-calendar fa-1x'><span id='iconText'> $crs_date</span></i></button></li></a>
<a href='searchPage.php?crs_category=$crs_category' style='color:white;'> <li><button id='resultInfo2'><i class='fa fa fa-tags fa-1x'><span id='iconText'> $crs_category</span></i></button></li></a>
<a href='searchPage.php?crs_provider=$crs_provider' style='color:white;'><li><button id='resultInfo'><i class='fa fa-graduation-cap fa-1x'><span id='iconText'> $crs_provider</span></i></button></li></a>
<a href='searchPage.php?city=$crs_city' style='color:white;'><li><button id='resultInfo'><i class='fa fa-map-marker fa-1x'><span id='iconText'> $crs_city</span></i></button></li></a>
</ul>
</div></center>
<div class='col-xs-12 col-sm-12 col-md-7 excerpet'>
<h3 id='resultHeading'><a href='coursePage.php?crs_id=$crs_id' id='headingLinking'><b>$crs_title</b></a></h3>
<div id='courseshortDescription'>
$crs_shortdesc
<center><a href='coursePage.php?crs_id=$crs_id' style='color:white;'><button class='btn btn-danger' id='findoutBtn'>Find Out More</button></a> </center>
</div>
</div>
<span class='clearfix borda'></span>
</article>";
}
mysqli_close($con);
?>
</body>
</html>
Update:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function showUser() {
var selectedPeople = {person: []};
$('input[name="person"]:checked').each(function() {
selectedPeople.person.push($(this).val());
}); document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> Please wait... Loading New Courses...</div>";
$.ajax({
url:'getuser.php',
type:'post',
data:selectedPerson,
success:function(res){
$('#txtHint').html(res);
}
})
}
</script>
<script>
function showUser2() {
var selectedPeople = {person2: []};
$('input[name="person2"]:checked').each(function() {
selectedPeople.person2.push($(this).val());
}); document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> Please wait... Loading New Courses...</div>";
$.ajax({
url:'getuser.php',
type:'post',
data:selectedPerson,
success:function(res){
$('#txtHint').html(res);
}
})
}
</script>
</head>
<body>
<form id="testform">
<input onchange="showUser();" name="person[]" type="checkbox" value="1">One<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="2">Two<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="3">Three<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="4">Four<br>
<input onchange="showUser();" name="person[]" type="checkbox" value="5">Five<br>
</form>
<form id="testform2">
<input onchange="showUser2();" name="person2[]" type="checkbox" value="communication">communication<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="business">business<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="html and css">Three<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="sql">Four<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="windows">Five<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="cloud">Cloud<br>
<input onchange="showUser2();" name="person2[]" type="checkbox" value="microsoft office">Java<br>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
the php file
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$person = filter_input(INPUT_POST, 'person', FILTER_VALIDATE_INT, FILTER_FORCE_ARRAY);
foreach ($person as $personid)
{
$allIds .= $personid.',';
}
$personid = rtrim($allIds,',');
}
$person2 = filter_input(INPUT_POST, 'person2', FILTER_VALIDATE_INT, FILTER_FORCE_ARRAY);
foreach ($person2 as $personid2)
{
$allIds2 .= $personid2.',';
}
$personid2 = rtrim($allIds2,',');
}
include("includes/db.php");
global $con;
$sql= "SELECT * FROM courses WHERE (course_duration IN ('" . $personid . "')) OR (course_duration IN ('" . $personid2. "')) LIMIT 10";
$result = mysqli_query($con,$sql);
$sqlCount = "SELECT * FROM courses WHERE (course_duration IN ('" . $personid . "')) OR (course_subc1 IN ('" . $personid2. "')) OR (course_subc3 IN ('" . $personid2. "')) OR (course_subc1 IN ('" . $personid2. "')) OR (course_subc4 IN ('" . $personid2. "')) OR (course_subc5 IN ('" . $personid2. "'))";
$get_crs_count = mysqli_query($con, $sqlCount);
$count_rows = mysqli_num_rows($get_crs_count);
echo '<p style="margin-bottom: 8px;margin-top: 8px;font-size:18px;"><b>Number of courses available: </b>' . $count_rows ;
while($row_crs = mysqli_fetch_array($result)){
$crs_id = $row_crs['course_id'];
$crs_cat = $row_crs['course_cat'];
$crs_provider = $row_crs['course_provider'];
$crs_title = $row_crs['course_title'];
$crs_price = $row_crs['course_price'];
$crs_city= $row_crs['course_city'];
$crs_category= $row_crs['course_cat1'];
$crs_date= $row_crs['course_date1'];
$crs_sdesc= $row_crs['course_sdesc'];
$crs_shortdesc = mb_strimwidth("$crs_sdesc",0,140,"...");
$crs_image = $row_crs['course_image'];
$provider_image = $row_crs['provider_image'];
echo " <article class='search-result row'><center>
<div class='col-xs-12 col-sm-12 col-md-3' id='thumbnailContainer'>
<a href='#' title='Lorem ipsum' class='thumbnail' id='resultThumbnail'><img src='$provider_image' /></a>
<a href='searchPage.php?crs_price=$crs_price' style='color:black;'> <button id='resultprice'><span id='resultpriceText'>$ $crs_price</span></button></a>
</div>
<div class='col-xs-12 col-sm-12 col-md-2'>
<ul class='meta-search' id='listDesign'>
<a href='searchPage.php?crs_date=$crs_date' style='color:white;'> <li><button id='resultInfo'><i class='fa fa-calendar fa-1x'><span id='iconText'> $crs_date</span></i></button></li></a>
<a href='searchPage.php?crs_category=$crs_category' style='color:white;'> <li><button id='resultInfo2'><i class='fa fa fa-tags fa-1x'><span id='iconText'> $crs_category</span></i></button></li></a>
<a href='searchPage.php?crs_provider=$crs_provider' style='color:white;'><li><button id='resultInfo'><i class='fa fa-graduation-cap fa-1x'><span id='iconText'> $crs_provider</span></i></button></li></a>
<a href='searchPage.php?city=$crs_city' style='color:white;'><li><button id='resultInfo'><i class='fa fa-map-marker fa-1x'><span id='iconText'> $crs_city</span></i></button></li></a>
</ul>
</div></center>
<div class='col-xs-12 col-sm-12 col-md-7 excerpet'>
<h3 id='resultHeading'><a href='coursePage.php?crs_id=$crs_id' id='headingLinking'><b>$crs_title</b></a></h3>
<div id='courseshortDescription'>
$crs_shortdesc
<center><a href='coursePage.php?crs_id=$crs_id' style='color:white;'><button class='btn btn-danger' id='findoutBtn'>Find Out More</button></a> </center>
</div>
</div>
<span class='clearfix borda'></span>
</article>";
}
mysqli_close($con);
?>
</body>
</html>
no errors are shown but what happens when a checkbox is selected, it just stops at this line (found on index js):
}); document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> Please wait... Loading New Courses...</div>";

Instead of var selectedPerson = $('#testform').serialize(); try this:
var selectedPeople = {person: []};
$('input[name="person[]"]:checked').each(function() {
selectedPeople.person.push($(this).val());
});
and in your PHP change $person = ... to:
$person = filter_input(INPUT_POST, 'person', FILTER_VALIDATE_INT, FILTER_FORCE_ARRAY);
foreach ($person as $personid)
{
$allIds .= $personid.',';
}
$personid = rtrim($allIds,',');

Using jquery easyui, how to create a tab by a link which is in a tab?

Tabs document
I would like to create a new tab which from the link that is in a tab
.
for example, in tab a , there is a link "open tab b" , and it should add a tab b ,
I tried the way create tab that when the link is not in tab (which is working)
however, in this case when i press it ,it has no response. Thank you
<a href='#' onclick="addTab('Manage List','list/view.php')" class='btn'>Manage List</a>
addtab function
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
full page
<?
include("../connection/conn.php");
session_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#import "../plugin/easyui/themes/default/easyui.css";
#import "../plugin/easyui/themes/icon.css";
#import "../plugin/bootstrap/css/bootstrap.css";
#import "../plugin/bootstrap/css/bootstrap-responsive.css";
#import "../style/form.css";
</style>
<script src="../plugin/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../plugin/easyui/jquery.easyui.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#addlist").validate();
});
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
$(function(){
$("#closeTab").click(function() {
$.post("clear.php",function(data){
window.parent.$('#tt').tabs('close','Create List');
location.reload();
});
});
});
</script>
</head>
<body style="background:#7C96A8;">
<div id="stylized" class="myform">
<form id="addlist" method="post" action="addNext.php" >
<h1>Create your new subscriber list</h1>
<p>Create a new list before adding subscriber <label class="right"><span class="label label-warning"><em class="dot">*</em> Indicates required</span></p>
<label><em class="dot">*</em> <strong>List name:</strong>
<span class="small">Add your list name</span>
</label>
<input id="lname" name="lname" class="required" <?if (isset($_SESSION['lname'])) { echo "value=".$_SESSION['lname'];}?> />
<div class="spacer"></div>
<label><strong>Reminder:</strong>
<span class="small">Remind the details of your list</span>
</label>
<textarea id="creminder" style="width:300px" name="creminder" cols="15" rows="10"><?if (isset($_SESSION['creminder'])) {echo $_SESSION['creminder'];}?></textarea>
<div class="spacer"></div>
<p>Email me when ...</p>
<label>People subscribe:</label> <input type="checkbox" class="checkbox" name="subscribe" value="1" <? if (isset($_SESSION['subscribe']) && $_SESSION['subscribe']==1){echo "checked='yes'";}?> >
<label>People unsubscribe:</label> <input type="checkbox" class="checkbox" name="unsubscribe" value="1" <? if (isset($_SESSION['unsubscribe']) && $_SESSION['unsubscribe']==1){echo "checked='yes'";}?> >
<div class="spacer"></div>
<input type="button" id="closeTab" value="Cancel" class="btn" style="width:100px"/>
<input type="submit" value="Next" class="btn btn-primary" style="width:100px"/>
<div class="spacer"></div>
</form>
<div class="spacer"></div>
</div>
<br><br><br>
<div id="stylized" class="myform">
<?
// list out the pervious create list
try{
$sql = '
SELECT *
FROM list,user_list
WHERE user_list.UserID=?
AND list.ListID=user_list.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$result= $stmt->fetchAll();
$numRows= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
if ($numRows == 0) {
echo '<div style="text-align:center;font-weight:bold;">You have not created any list yet.</div>';}
else {
echo '<h1>Your Subscriber List</h1> <p>You have created '.$numRows.' list(s).</p>';
foreach ($result as $set)
{
try{
$sql = '
SELECT ls.SubID
FROM list_sub ls,user_list ul
WHERE ul.UserID=?
AND ls.ListID='.$set['ListID'].'
AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
?><a href='#' onclick="addTab('Manage List','list/view.php')" class='btn'>Manage List</a><?
echo '<p></p>';
}}
?>
<div class="spacer"></div>
</div>
<br><br><br>
<div id="stylized" class="myform">
<?
// list out the public list
try{
$query = '
SELECT *
FROM list
Where IsPublic=1
';
$stmt = $conn->prepare($query);
$stmt->execute();
$result= $stmt->fetchAll();
$num_rows= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
$conn = null;
if ($num_rows == 0) {
echo '<div style="text-align:center;font-weight:bold;">There are no public list.</div>';}
else {
echo '<h1>Public Subscriber List</h1> <p>There are '.$num_rows.' list(s).</p>';
foreach ($result as $set)
{
try{
$sql = '
SELECT ls.SubID
FROM list_sub ls,user_list ul
WHERE ul.UserID=?
AND ls.ListID='.$set['ListID'].'
AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
echo "<a href='#' onclick='addTab('Manage List','list/view.php')' class='btn'>Manage List</a>"; // **********************the add tag link is here***************************//
echo '<p></p>';
}}
?>
<div class="spacer"></div>
</div>
</div>
</body>
</html>
Updated:
Still no response after i add the code?
<style type="text/css">
#import "../plugin/easyui/themes/default/easyui.css";
#import "../plugin/easyui/themes/icon.css";
#import "../plugin/bootstrap/css/bootstrap.css";
#import "../plugin/bootstrap/css/bootstrap-responsive.css";
#import "../style/form.css";
</style>
<script src="../plugin/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../plugin/easyui/jquery.easyui.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#addlist").validate();
});
$(function(){
$("#closeTab").click(function() {
$.post("clear.php",function(data){
window.parent.$('#tt').tabs('close','Create List');
location.reload();
});
});
});
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
var tab = $('#tt').tabs('getSelected');
$('#tt').tabs('update', {
tab: tab,
options:{
title:title,
content:content,
closable:true
}
});
}
}]
});
}
}
function init() {
$("#addtab1").on("click",function() {
addTab("slashdot","http://www.slashdot.org/");
});
$("#addtab2").on("click",function() {
addTab("slashdot","http://www.slashdot.org/");
});
}
$(init);
</script>
</head>
<body style="background:#7C96A8;padding:10px;">
<div id="stylized" class="myform">
<form id="addlist" method="post" action="addNext.php" >
<h1>Create your new subscriber list</h1>
<p>Create a new list before adding subscriber <label class="right"><span class="label label-warning"><em class="dot">*</em> Indicates required</span></p>
<label><em class="dot">*</em> <strong>List name:</strong>
<span class="small">Add your list name</span>
</label>
<input id="lname" name="lname" class="required" <?if (isset($_SESSION['lname'])) { echo "value=".$_SESSION['lname'];}?> />
<div class="spacer"></div>
<label><strong>Reminder:</strong>
<span class="small">Remind the details of your list</span>
</label>
<textarea id="creminder" style="width:300px" name="creminder" cols="15" rows="10"><?if (isset($_SESSION['creminder'])) {echo $_SESSION['creminder'];}?></textarea>
<div class="spacer"></div>
<p>Email me when ...</p>
<label>People subscribe:</label> <input type="checkbox" class="checkbox" name="subscribe" value="1" <? if (isset($_SESSION['subscribe']) && $_SESSION['subscribe']==1){echo "checked='yes'";}?> >
<label>People unsubscribe:</label> <input type="checkbox" class="checkbox" name="unsubscribe" value="1" <? if (isset($_SESSION['unsubscribe']) && $_SESSION['unsubscribe']==1){echo "checked='yes'";}?> >
<div class="spacer"></div>
<input type="button" id="closeTab" value="Cancel" class="btn" style="width:100px"/>
<input type="submit" value="Next" class="btn btn-primary" style="width:100px"/>
<div class="spacer"></div>
</form>
<div class="spacer"></div>
</div>
<br><br><br>
<div id="stylized" class="myform">
<?
// list out the pervious create list
try{
$sql = '
SELECT *
FROM list,user_list
WHERE user_list.UserID=?
AND list.ListID=user_list.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$result= $stmt->fetchAll();
$numRows= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
if ($numRows == 0) {
echo '<div style="text-align:center;font-weight:bold;">You have not created any list yet.</div>';}
else {
echo '<h1>Your Subscriber List</h1> <p>You have created '.$numRows.' list(s).</p>';
foreach ($result as $set)
{
try{
$sql = '
SELECT ls.SubID
FROM list_sub ls,user_list ul
WHERE ul.UserID=?
AND ls.ListID='.$set['ListID'].'
AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
?><button id='addtab1' class='btn'>Manage List</button><?
echo '<p></p>';
}}
?>
<div class="spacer"></div>
</div>
<br><br><br>
<div id="stylized" class="myform">
<?
// list out the public list
try{
$query = '
SELECT *
FROM list
Where IsPublic=1
';
$stmt = $conn->prepare($query);
$stmt->execute();
$result= $stmt->fetchAll();
$num_rows= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
$conn = null;
if ($num_rows == 0) {
echo '<div style="text-align:center;font-weight:bold;">There are no public list.</div>';}
else {
echo '<h1>Public Subscriber List</h1> <p>There are '.$num_rows.' list(s).</p>';
foreach ($result as $set)
{
try{
$sql = '
SELECT ls.SubID
FROM list_sub ls,user_list ul
WHERE ul.UserID=?
AND ls.ListID='.$set['ListID'].'
AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
{
die ($e->getMessage().' Back');
}
echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
echo "<button id='addtab1' class='btn'>Manage List</button>";
echo '<p></p>';
}}
?>
<div class="spacer"></div>
</div>
</div>
</body>
</html>

Is this what you want?
$("# tags div id ").tabs({
add: function(event, ui) {
$(this).append(ui.panel)
}
})
That's just pure and simple tab adding , I think thats what you asked for.
Good luck.

I have created a minimal implementation of the issue you are describing here, and it works without any issues. It uses a menially modified version of your addTab() function.
I suggest you use the venerable Firebug, or the developer tools built into Chrome, to see what javascript or other errors are occurring.
Also, try simply upgrading to the lastest jQuery and jQuery-easui libraries, and see if that helps.

Categories