jQuery UI Widgets Forums Navigation Tabs how to load external page in div to tabs

This topic contains 4 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • miguels
    Participant

    Hello I have seen the examples but still I can not load an external page in the tabs div.
    here is my code as I think the dynamic tabs

    scripts
    $(‘ul’).each(function () {
    $(this).find(‘li’).click(function () {
    var listItem = this;
    $(“#jqxtabs”).css(‘display’, ‘block’);
    $(“#jqxtabs”).jqxTabs({ width: 400, height: 300, showCloseButtons: true, theme: ‘Custom’ });
    cont = $(“#jqxtabs”).jqxTabs(‘length’)
    if ((cont == 1) && (tabsCount == 0)) {
    $(‘#jqxtabs’).jqxTabs(‘removeAt’, 0);
    var clickedURL = $(‘a’, this).attr(‘href’);
    $(‘#jqxtabs’).jqxTabs(‘addAt’, 0, $(listItem).text(), clickedURL);
    }
    else {
    $(‘#jqxtabs’).jqxTabs(‘addAt’, tabsCount, $(listItem).text(), $(listItem).text());
    }
    tabsCount += 1;
    });

    HTML

    <div id=’jqxtabs’>
    <ul style=’margin-left: 20px;’>

  • <div id=”Contenido0″>

    </div>
    </div>
    </div>

    I need to load the page of the href of the list in the div but I could not, I hope I say as
    I hope to explain sorry


Nadezhda
Participant

Hello miguels,

Could you, please, re-post your code and format it by selecting it and clicking the code button in the toolbar so that your script and HTML code are more readable.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/


miguels
Participant

ok sorry this my code in HTML

    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/Custom.css" type="text/css" />        
    <script type="text/javascript" src="../Scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
   <script type="text/javascript">
         $(document).ready(function () {
             var tabsCount = 0;
             var cont;
             var visible = false;
             $('#jqxtabs').on('removed', function (event) {
                 var index = event.args.item;
                 cont = $("#jqxtabs").jqxTabs('length')
                 if (visible == true) {
                     if (cont == 0) {
                         $('#jqxtabs').jqxTabs('addAt', 0, "", "");
                         $("#jqxtabs").css('display', 'none');
                         visible = false;
                     }
                     else
                     { $('#jqxtabs').jqxTabs('removeAt', index); }
                     tabsCount -= 1;
                 }
             });

             $('ul').each(function () {
                 $(this).find('li').click(function () {
                     var listItem = this;
                     $("#jqxtabs").css('display', 'block');
                     $("#jqxtabs").jqxTabs({ width: 400, height: 300, showCloseButtons: true, theme: 'Custom' });

                     cont = $("#jqxtabs").jqxTabs('length')
                     if ((cont == 1) && (tabsCount == 0)) {                        
                         $('#jqxtabs').jqxTabs('removeAt', 0);                                                                           
                         var clickedURL = $('a', this).attr('href');                         
                         $('#jqxtabs').jqxTabs('addAt', 0, $(listItem).text(), clickedURL);
                     }
                     else {
                         $('#jqxtabs').jqxTabs('addAt', tabsCount, $(listItem).text(), $(listItem).text());
                     }
                     tabsCount += 1;
                     visible = true;
                 });
             });
         });
    </script>

 <form id="form1" runat="server">
    <div>
     <ul>
        <li><a href="paginas/pagina1.aspx">Pagina1</a></li>
        <li><a href="paginas/pagina2.aspx">Pagina2</a></li>
        <li><a href="paginas/pagina3.aspx">Pagina3</a></li>
    </ul>
    <div id='jqxtabs' style='display:none;'>
                <ul style='margin-left: 20px;'>
                    <li></li>                   
                </ul>
                <div id="Contenido0">                                      
                </div>                
            </div>
    </div>
    </form>

miguels
Participant

this is my code .. so completely as I have just created a pore for each menu tabs do not load the page in the content tab


Nadezhda
Participant

Hi miguels,

Please, find the following example which shows how to add new tab dynamically to jqxTabs. When you click on some tab the external page will be loaded.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, showCloseButtons: true });
            $('#jqxButton').jqxButton({
                width: '200px',
                height: 30,
            });
            $('#jqxButton').click(function () {
                $('#jqxTabs').jqxTabs('addAt', 2, '<a href="pages/ajax3.htm">tabTitle</a>', '');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li><a href="pages/ajax1.htm">ajax1</a></li>
                <li><a href="pages/ajax2.htm">ajax2</a></li>
            </ul>
            <div>
            </div>
            <div>
            </div>
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='jqxButton' value="Add new item item" />
        </div>
    </div>
</body>
</html>

If you want to show it in the tab content you should place the content in the div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, showCloseButtons: true });
            $("#1").load("pages/ajax1.htm");
            $("#2").load("pages/ajax2.htm");
            $('#jqxButton').jqxButton({
                width: '200px',
                height: 30,
            });
            var newContent = "<div id='3'></div>";
            $('#jqxButton').click(function () {
                $('#jqxTabs').jqxTabs('addAt', 0, 'tabTitle', newContent);
                $("#3").load("pages/ajax3.htm");
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTabs' style="float: left;">
        <ul style="margin-left: 30px;" id="unorderedList">
            <li>Node.js</li>
            <li>Active Server Pages</li>
        </ul>
        <div id="1"></div>
        <div id="2"></div>
    </div>
    <input type="button" id='jqxButton' value="Add new item item" />
</body>
</html>

I hope the above examples will be helpful to you.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.