We Keep Coding

insert data in database dynamically

$query = "select * from comments t1 inner join users t2 on t1.user_id = t2.UserId where usercomplain_id='$id'";
$run =mysqli_query($mysqli,$query);
while($row=mysqli_fetch_array($run))
{
$commentid = $row['comment_id'];
$comment = $row['comment'];
$username = $row['UserName'];
$userid1 = $row['UserId'];
$date = $row['CDate'];
$ageDate = time_elapsed_string($date);
?>
<div class="jumbotron" style="border:3px solid #2FAB9B; background-color:#68C8C6;">
<div class="row">
<div class="col-md-10">
<?php echo $comment; ?>
</div>
<div class="col-md-2">
<?php echo $ageDate; ?>
</div>
</div>
<br>
<label>Comment by <?php echo $username; ?></span></label><br>
<a class="reply" data-role="<?php echo $commentid; ?>">Reply</a>
<br>
<br>
<div style="width:63%; display:none;" class="replyForm" data-role="<?php echo $commentid; ?>">
<form method="post">
<textarea cols="100" rows="4"></textarea><br>
<br>
<input type="submit" name="reply" class="btn btn-primary" style="float:right" value="reply">
</form>
</div>
</div>
<script>
$(document).ready(function(){
$(".reply").click(function(){
var current = $(this).attr("data-role");
$('.replyForm[data-role="'+$(this).attr("data-role")+'"]').fadeIn();
});
});
</script>
<?php
if(isset($_POST['reply']))
{
echo "<script>alert('$commentid')</script>";
}
?>
<?php } ?>
it is a simple comment system with each comment there is a reply link on click on reply link a textbox is shown . I want to enter comment reply to database table therefore I want to get the record of the specific comment. How to do that with PHP.

this code should do what you want, completely dinamically
<div class="jumbotron comment-container" data-pk="<?php echo $commentid; ?>">
<div class="row">
<div class="col-md-10">
<?php echo $comment; ?>
</div>
<div class="col-md-2">
<em class="text-muted"><?php echo $ageDate; ?></em>
</div>
<div class="col-md-12">
<label>Comment by <?php echo $username; ?></label><br/>
<button class="btn btn-primary reply">Reply</button>
</div>
</div>
</div>
And here is the JS part. In order to reduce the code printed in the while loop, the reply form is cloned each time and appended where needed.
var reply_form = $('<div class="row replyForm-container"><div class="col-md-12">'+
'<form method="post" class="reply-form">'+
'<textarea class="form-control" rows="4">Prefilled content</textarea><br>'+
'<br>'+
'<button type="submit" name="reply" class="btn btn-primary" style="float:right" >Reply</button>'+
'</form>'+
'</div></div>');
$(".reply").click(function(){
$(this).hide();
var $container = $(this).closest('.comment-container');
var pk = $container.data('pk');
var rf_clone = reply_form.clone();
rf_clone.find('form').attr('data-pk', pk).data('pk', pk);
$container.append( rf_clone.hide().fadeIn(1000) );
});
// working with dynamical elements, we need to use delegation here
$(document).on('submit', '.reply-form', function(e){
e.preventDefault();
var reply_container = $(this).closest('.replyForm-container');
var pk = $(this).data('pk');
var reply = $(this).find('textarea').val();
console.log('Insert reply "'+reply+'" for comment ID: '+pk);
$.ajax({
type: "POST",
url: 'my_php_handler.php',
async: false,
dataType: "json",
data: {action: 'add-reply', commend_id: pk, reply_text: reply},
success: function (response) {
if( response ) {
reply_container.fadeOut('slow', function(){
var btn = reply_container.closest('.comment-container').find('button.reply');
$(this).remove(); //will remove the element after fadeOut completes
btn.show();
})
}
}
});
});
Check working Fiddle (ajax disabled)

Show second Submit button after clicking first Submit with form submit - Javascript

I've build a function in javascript to show me a second submit but only after the first submit was clicked.
Edited - this is ex.php:
<form method="post" action = "ex.php">
<input type="submit" id="button" name="search" value="Search"
onclick="myFunction();" >
<br>
<input type="submit" name="search_close" id="submit" style="display:
none;" value="Find close results">
</form>
<?php
if(isset($_POST['search']))
{
echo "first search";
}
else if(isset($_POST['search_close']))
{
echo "second search";
}
else {
echo "nothing";
}
?>
<script type="text/javascript">
inputSubmit = document.getElementById("submit");
function myFunction(){
inputSubmit.style.display = "block"; };
</script>
Updated:
I've edited in order to conclude the main problem.
So what I want is this:
a) The user has pressed the first submit button "search" then it will echo on the page "first search" and then show the second submit button "search_close" .
b)Then, if the user has pressed the second submit button it will show "second search".
When first Refreshing:
======
search (button)
======
if clicking the "search" button:
======
search (button)
======
first search (text)
==================
Find close results (button)
==================
if clicking the "find close results:
======
search (button)
======
first search (text)
==================
Find close results (button)
==================
second search (text)
This code doesn't do what I want. Why?
Updated - why the button find close results disappers after one second?
<?php
session_start();
$db=mysqli_connect("localhost","root","","travelersdb");
if(#$_SESSION["username"]){
?>
<?php
// function to connect and execute the query
function filterTable($query)
{
$connect=mysqli_connect("localhost","root","","travelersdb");
$filter_Result = mysqli_query($connect, $query) or die(mysqli_error($connect));
return $filter_Result;
}
$submit_value = 0;
if(isset($_POST['search']))
{
$Destination = $_POST['Destination'];
$TypeOfTravel = $_POST['TypeOfTravel'];
$Age= $_POST['Age'];
$email = $_POST['email'];
$topic_name = $_POST['topic_name'];
$StartingPoint = $_POST['StartingPoint'];
// search in all table columns
$query = "SELECT * FROM `topics`
left join `users` on users.username = topics.topic_creator
WHERE 1=1 ";
if(!empty($Destination)) {
$query.="AND destination='$Destination'";
}
if(!empty($TypeOfTravel)) {
$query.=" AND typeTravel='$TypeOfTravel'";
}
if(!empty($Age)) {
$query.="AND age='$Age'";
}
if(!empty($email)) {
$query.=" AND email='$email'";
}
if(!empty($topic_name)) {
$query.=" AND topic_name='$topic_name'";
}
if(!empty($StartingPoint)) {
$query.=" AND StartingPoint='$StartingPoint'";
}
$search_result = filterTable($query);
$submit_value = 1;
}
///Make The search more wider, only for the fields that were in the post
else if(isset($_POST['search_close']))
{
$Destination = $_POST['Destination'];
$TypeOfTravel = $_POST['TypeOfTravel'];
$topic_name = $_POST['topic_name'];
$StartingPoint = $_POST['StartingPoint'];
// search in all table columns
$query = "SELECT * FROM `topics`
left join `users` on users.username = topics.topic_creator
WHERE 1=1 ";
if(!empty($Destination)) {
$query.="AND destination='$Destination'";
}
if(!empty($TypeOfTravel)) {
$query.=" AND typeTravel='$TypeOfTravel'";
}
if(!empty($topic_name)) {
$query.=" AND topic_name='$topic_name'";
}
if(!empty($StartingPoint)) {
$query.=" AND StartingPoint='$StartingPoint'";
}
$search_result = filterTable($query);
$submit_value = 2;
}
else {
$query = "SELECT * FROM `topics`";
$search_result = filterTable($query);
}
?>
<html>
<head>
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home Page</title>
<style>
.hidden {
display: none;
}
</style>
<script type="text/javascript">
function showHide()
{
var checkbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for (var i=0; i != hiddeninputs.length; i++) {
if(checkbox.checked){
hiddeninputs[i].style.display = "block";
} else {
hiddeninputs[i].style.display = "none";
}
}
}
<?php
if($submit_value == 1 || $submit_value == 2){ ?>
myFunction();
inputSubmit = document.getElementById("submit");
function myFunction(){
document.getElementById('submit').style.display = "block";
};
<?php } ?>
</script>
<body>
</body>
</head>
<?php include("header.php");?>
<center>
</br>
<button>Post</button>
</br>
<br/>
<h4>Simple Serach</h4>
<form action="" method="post">
<input type="text" name="Destination" placeholder="Destination" value=
"<?php if(isset($_POST['Destination']))
{echo htmlentities($_POST['Destination']);}?>" ></br>
<input type="text" name="TypeOfTravel" placeholder="Type Of Travel"
value=
"<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['TypeOfTravel']);}?>"
></br>
<input type="text" name="Age" placeholder="Age" value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['Age']);}?>">
</br>
</br>
<!-- Advanced Search-->
<input type="checkbox" name="chkbox" id="chk" onclick="showHide()" />
<label for="chk"><b>Advanced search</b></label>
</br>
<input type ="text" name="email" placeholder="Email" class="hidden" value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['email']);}?>">
<input type ="text" name="topic_name" placeholder="topic name" class="hidden"value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['topic_name']);}?>">
<input type="text" name="StartingPoint" placeholder="Starting Point" class="hidden"value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['StartingPoint']);}?>">
</br><br/>
<input type="submit" id="button" name="search" value="Search"
onclick="myFunction();" >
<br><br>
<input type="submit" name="search_close" id="submit" style="display:
none;" value="Find close results">
</form>
<br/>
<?php echo '<table border="1px">';?>
<td width="400px;" style="text-align:center;">
Name
</td>
<td width="400px;" style="text-align:center;">
Destination
</td>
<td width="400px;" style="text-align:center;">
Type Of Travel:
</td>
<td width="80px;" style="text-align: center;">
First Name
</td>
<td width="80px;" style="text-align: center;">
Age
</td>
<td width="400px;" style="text-align:center;">
profile picture
</td>
<td width="80px;" style="text-align: center;">
Creator
</td>
<td width="80px;" style="text-align: center;">
Date
</td>
</tr>
</center>
<?php
$sql = "Select * from `topics`";
$check = mysqli_query($db,$sql);
$rows = mysqli_num_rows($search_result);
if($rows != 0){
while ($row = mysqli_fetch_assoc($search_result)){
$id = $row['topic_id'];
echo "<tr>";
//echo "<td>".$row['topic_id']."</td>";
echo "<td style='text-align:center;'><a href='topic.php?id=$id'>".$row['topic_name']."</a></td>";
echo "<td>".$row['Destination']."</td>";
echo "<td>".$row['typeTravel']."</td>";
$sql_u = "Select * from users where username='".$row['topic_creator']."'";
$check_u = mysqli_query($db,$sql_u);
while ($row_u = mysqli_fetch_assoc($check_u))
{
$user_id = $row_u['id'];
$profile_pic = $row_u['profile_pic'];
$firstname = $row_u['firstname'];
$age = $row_u['age'];
echo "<td>".$firstname."</td>";
echo "<td>".$age."</td>";
echo "<td><img src='".$profile_pic."' width='10%' height='10%' alt='me'></td>";
echo "<td><a href='profile.php?id=$user_id'>".$row['topic_creator']."</a></td>";
}
$get_date = $row['date'];
echo "<td>".$row['date']."</td>";
echo "</tr>";
}
}else {
echo "No topics found";
}
echo "</table>";
if (#$_GET['action']=="logout")
{
session_destroy();
header('location:login.php');
}
}else
{
echo "You must be logged in.";
echo "<a href ='login.php'>Click here to login</a>";
}
?>
</br>
</br>
<body>
</body>
</html>

you need to set type button cause when you set type submit then form automatically submit so show second not show but it work.
<form method="post" action = "">
<input type="submit" id="button" name="search" value="Search" >
<br>
<input type="submit" name="search_close" id="submit" style="display:
none;" value="Find close results">
</form>
<?php
$submit_value = 0;
if(isset($_POST['search']))
{
echo "first search";
$submit_value = 1;
}
else if(isset($_POST['search_close']))
{
echo "first search";
echo '<br>';
echo "second search";
$submit_value = 2;
}
else {
echo "nothing";
}
?>
<script type="text/javascript">
<?php
if($submit_value == 1 || $submit_value == 2){ ?>
document.getElementById('submit').style.display = "block";
<?php } ?>
</script>
check this code

I have cleaned up your code, but the issue of having two submit buttons still persists. Even if the clicking of the first button causes the second to show, the first button will cause the page to reload with the results from the form's action resource. In this example, I have cancelled the form's submit event to show that the display of the second button works.
In the end, I think you are going about this all wrong. I think you should be making AJAX calls to your server-side resource and injecting the results of that call into your page - - no forms and no submits.
// Don't forget to add "var" to your variable declarations, otherwise the variables
// become global!
var sub1 = document.getElementById("btnSub1");
var sub2 = document.getElementById("btnSub2");
// Set up the event handler for the first button
sub1.addEventListener("click", myFunction);
function myFunction(e){
// Adjust classes, not individual styles
sub2.classList.remove("hidden");
// Cancel the native event and stop bubbling
e.preventDefault();
e.stopPropagation();
};
.hidden { display:none; }
<form>
<!-- Submit buttons don't get a name attriute unless you expect their value to be submitted
along with all the other form data. Inline styles should be avoided and internal style
sheets used instead. And, inline JavaScript event attributes (onclick, etc.) should not
be used. -->
<input type="submit" id="btnSub1" name="search" value="Search" >
<br>
<input type="submit" id="btnSub2" class="hidden" value="Find close results">
</form>
<?php
if(isset($_POST['search']))
{
echo "first search";
}
else if(isset($_POST['search_close']))
{
echo "second search";
}
else {
echo "nothing";
}
?>

How to fix the scroll at the bottom?

I am developing a Messaging system.I need Scroll bar to be fixed down ,Because when new data arrives It should automatically go down.How to do that in HTML/CSS
Don't mine if this full code is in a unprofessional way..
Home.php
<?php
// Turn off all error reporting
error_reporting(0);
//shop not login users from entering
if(isset($_SESSION['id'])){
$user_id = $_SESSION['id'];
}else{
}
require_once("./inc/connect.inc.php");
?>
<header>
<link rel="stylesheet" href="home - Copy.css" />
<nav>
<h3><a class="h3" href="#">CP</a></h3>
<div><span>Logout</span></div>
<div>
<?php
//Start your session
session_start();
//Read your session (if it is set)
if (isset($_SESSION['user_login'])){
echo '<div id="ull">'.strtoupper($_SESSION['user_login']).'</div>';
}
?>
</div>
</nav>
<body>
<div class="shead">
<div class="a1"> <li >Frequent Member</li>
<div class="fm">
<ul>
<?php
//show all the users expect me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
//display all the results
while($row = mysql_fetch_assoc($q)){
echo " <div class='usernames'>
<a id=\"usernames\" href='home.php?id={$row['id']}'>{$row['username']}</a>
</div>
";
}
?>
</ul>
</div>
</div>
<div class="a2"> <li >Site's Popular in Your College</li></div>
</div>
</header>
<div class="rss">
<?php
// include('rssclass.php');
//include('rss.php');
?>
</div>
<div class="message-right">
<!-- display message -->
<div class="display-message">
<?php
//check $_GET['id'] is set
if(isset($_GET['id'])){
$user_two = trim(mysql_real_escape_string( $_GET['id']));
//check $user_two is valid
$q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
//valid $user_two
if(mysql_num_rows($q) == 1){
//check $user_id and $user_two has conversation or not if no start one
$conver = mysql_query( "SELECT * FROM conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");
//they have a conversation
if(mysql_num_rows($conver) == 1){
//fetch the converstaion id
$fetch = mysql_fetch_assoc($conver);
$conversation_id = $fetch['id'];
}else{ //they do not have a conversation
//start a new converstaion and fetch its id
$q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
$conversation_id = mysql_insert_id($con);
}
}else{
die("Invalid $_GET ID.");
}
}else {
die("Click On the Person to start Chating.");
}
?>
</div>
<script type="text/javascript">
var objDiv = document.getElementById("display-message");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
<div class="send-message">
<!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
<input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
<input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
<input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
<div class="textbox">
<input class="t_box" type="text" id="message" placeholder="Enter Your Message"/>
<button class="t_btn" id="reply">Reply</button>
<span id="error"></span>
</div>
</div>
</div>
<!--
<div class="textbox">
<form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
<input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
</div>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
Getmsg.php
<?php
require_once("./inc/connect.inc.php");
if(isset($_GET['c_id'])){
//get the conversation id and
$conversation_id = base64_decode($_GET['c_id']);
//fetch all the messages of $user_id(loggedin user) and $user_two from their conversation
$q = mysql_query( "SELECT * FROM `messages` WHERE conversation_id='$conversation_id'");
//check their are any messages
if(mysql_num_rows($q) > 0){
while ($m = mysql_fetch_assoc($q)) {
//format the message and display it to the user
$user_form = $m['user_from'];
$user_to = $m['user_to'];
$message = $m['message'];
//get name and image of $user_form from `user` table
$user = mysql_query( "SELECT username FROM `users` WHERE id='$user_form'");
$user_fetch = mysql_fetch_assoc($user);
$user_form_username = $user_fetch['username'];
//display the message
echo "
<div class='message'>
<div class='text-con'>
<a href='#''>{$user_form_username}:</a>
<p> {$message}<p>
</div>
</div>
<hr>";
}
}else{
echo "No Messages";
}
}
?>

You didn't mention if you are using jQuery. If yes, you can do something like this:
$('#your_div_id').scrollTop($('#your_div_id')[0].scrollHeight);
Alternatively, only with Javascript you can find solution here:
Scroll to bottom of div?
You always need to pass the height of the div to the scroll option so it is sticked to the bottom. This means that you need to bind this to the event which detects when the new message is received and rendered.

Your solution si based on scrollHeight, these two ling of code can help you
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
You can see this snippet for example, just click on the blue div to add messages
var count = 0;
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
$("body").on("click","#toScrollBottom",function(){
$("#messages").append('<p>Message Line' + count + '<br/>Message line</p>');
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toScrollBottom" style="height: 150px; overflow-y: scroll; margin: 50px; border: solid 2px blue;">
<div id="messages">
<p>Message Line FIRST<br/>Message Line</p>
</div>
</div>

Jquery ajax doesent run from smartphone screen

When I click a button an animation runs but the ajax is skipped. This is only a problem on the smartphone screen and not on my computer.
Jquery:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#thisid').hide();
$("#button-create").on('touchstart',(function(event) {
var name = $("#create").val();
var name2 = $("#create2").val();
$("#stage").load('result.php', {name:name, name2:name2} );
});
});
</script>
Button:
<button id="button-create" class="btn1">Create</button>
Html
<div class="col-xs-12 col-lg-6 col" style="text-align:center;">
</div>
<div class="col-xs-12 col-lg-6 col" style="margin-top:20px;text- align:center;">
<input type="input" style="height:24px; margin-right:15px;" id="create" value="Heading">
<button id="button-create" class="btn1">Create</button>
</div>
</div>
</div>
<input type="input" style="float:right; display:none;" id="create2" value="<?php echo $_GET['user']?>">
<div id="stage">
</div>
<input type="input" id="headv" size="40" style="display:none;">
<div id="stage100">
</div>
Result.php
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
$name1_preg = preg_replace('/\s+/', '-', $name);
$name2 = $_RsEQUEST['name2'];
$content = 'Click to edit me, press the save button to save';
session_start();
try {
$pdo = new PDO('mysql:host=localhost;dbname=cms', 'root', 'root');
} catch (PDOException $e) {
}
$query123 = $pdo->
prepare("INSERT INTO post (head, user, content) VALUES (?, ?, ?)");
$query123->
bindValue(1, $name1_preg);
$query123->
bindValue(2, $name2);
$query123->
bindValue(3, $content);
$query123->
execute();
}
?>

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.