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

Question

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>

I have updated the question , sorry for omitted code, please let me know if any thing missing — user782104, Apr 03 '12 at 14:49
And you are saying, that without changing any of the code at all, and moving the link outside an available tab, this works? — Andrew Jackman, Apr 04 '12 at 10:07
yes, that's right. if that is not in tab, it works. if it is in any tab, not works — user782104, Apr 05 '12 at 14:06
I hate to suggest it, but what if you add a button outside the tab. Make that button call addTab() on click. Make a button inside the tab that calls the click event for the button outside the tab. Let me know what happens when you do that. — Andrew Jackman, Apr 05 '12 at 14:23

score 1 · Accepted Answer · answered May 11 '12 at 22:48

1

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.

answered May 11 '12 at 22:48

Giovanni Di Toro

797
1
14
34

score 0 · Answer 2 · edited Apr 12 '12 at 13:25

0

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.

edited Apr 12 '12 at 13:25

Lucas

16,930
31
110
182

answered Apr 08 '12 at 12:25

Michael Slade

13,802
2
39
44

Thanks why there is no response after i click the button? – user782104 Apr 09 '12 at 06:50
1

Uncaught TypeError: Object [object Object] has no method 'on' ? – user782104 Apr 09 '12 at 06:51
You should say which browser you are using. – Alexander Apr 11 '12 at 15:25

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

2 Answers2

Linked