Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

javascript

jquery

jquery-easyui

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().'<a href="add.php"> Back</a>'); 
    }


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().'<a href="add.php"> Back</a>'); 
    }

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().'<a href="add.php"> Back</a>'); 
    }
$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().'<a href="add.php"> Back</a>'); 
    }

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().'<a href="add.php"> Back</a>'); 
    }


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().'<a href="add.php"> Back</a>'); 
    }

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().'<a href="add.php"> Back</a>'); 
    }
$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().'<a href="add.php"> Back</a>'); 
    }

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>
like image 908
user782104 Avatar asked Nov 14 '22 07:11

user782104

1 Answers

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.

like image 68
Giovanni Di Toro Avatar answered Nov 16 '22 03:11

Giovanni Di Toro
Sign in to Comment

Related questions

Safari stays "loading" when window.onbeforeunload returns false
Clearing select options with javascript on change
How to bind event handler to Google Maps V3 API default PanControl's click event?
Android GPS Delay When Sending to Database
Playing video on AVD with phonegap
Having much trouble inserting PHP-based reCaptcha into a jQuery-based Shoutbox
getting the selected html element offset related to the html source code with js
FB.ui({ method : "oauth" }) vs FB.login() within a Page Tab Application
How to set the scrollTop value for a textarea?
how to pass json object from java to javascript?
Is it possible to generate a bitstream in JS for a HTML5 video source?
Changing background-attachment while scrolling causes graphical glitches in WebKit
Create javascript array of ColdFusion query for use with ajax function
Chrome WebKitBlobBuilder doesn't append data
man pages for Javascript for use within VIM
How can I package an "external" text file into an elisp module?
JavaScript Inheritance or How is this Working?
Raphael JS - maintain path between two objects
Identifying web workers environment?
How can I delay page transition in jQuery Mobile until page data is ready?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!