Open dynamic tabs from jqxnavigationbar - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: ajax, dynamic, get, grid, jqxgrid, jqxnavigationbar, jqxTabs, load, Navigation Bar, tab, Tabs

This topic contains 5 replies, has 2 voices, and was last updated by fox82i 10 years, 11 months ago.

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

Author

Open dynamic tabs from jqxnavigationbar Posts

April 14, 2014 at 3:03 pm Open dynamic tabs from jqxnavigationbar #53058

fox82i

Participant

hello to all,
I’m new for this good js framework!
I started to rebuild my web application and I’ve some questions, in particular open dynamic tabs from jqxnavigationbar.
Thi is my code of index.php

<!DOCTYPE html>
<html lang="en">
<head>
   
    <link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
    <title>Gestione dati genetici laboratorio biobanca</title>
    <style type="text/css">
        html, body 
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>

</head>
<body class='default'>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Data Management SOC FSC</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="ricerche.php">Data Search</a></li>
            <li><a href="gestione_dati.php">Data Management</a></li>
            <li><a href="laboratorio.php">Lab Activity</a></li>
            <li><a href="terapia.php">Follow Up</a></li>
            <li><a href="amministrazione.php">Administration</a></li>
            <li><a href="logout.php">Log out</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <br/><br/><br/>
   
    <div id="mainSplitter">
        <div class="splitter-panel">
               <?php include ("layout/menu/menu_ricerche.php");?>
        </div>
        <div class="splitter-panel">
            <div id='jqxTabs' style="float: left;">
                <ul style="margin-left: 10px;" id="unorderedList">
                    <li hasclosebutton='false'>Help</li>                               
                </ul>
                <div style="margin-top:5px;margin-left: 10px;">
                    <p>Some helps</p>
                </div>
            </div>
        </div>
    </div>
   

</body>

    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxtabs.js"></script>
 
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript">
       
        function tab_is_open(name){
            var tabsCount = $("#jqxTabs").jqxTabs('length');
            var position;
            if (tabsCount>0){
                for (var i = 0; i < tabsCount; i++) {
                    var tabTitle = $("#jqxTabs").jqxTabs('getTitleAt', i);
                    if (tabTitle == name) {
                        return i;
                        break;
                    }
                }
            }else{
                return 0;    
            }
        }

        function open1(plugin,title_tab){
            var tab;
            tab = tab_is_open(title_tab);
            if (tab>0){
                //mi posizione sul tab aperto
                $('#jqxTabs').jqxTabs('select', tab); 
            
            }else{
                href = plugin + '.php';                
                $('#jqxTabs').jqxTabs('addLast', title_tab,loadPage('test.html'));  
                        
            }

        }
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({width: '100%', height: '100%', panels: [{ size: '260', min: 150 }, { size: '80%'}] });
            $("#jqxnavigationbar_richerche").jqxNavigationBar({ width: '100%', expandMode: 'multiple', expandedIndexes: [0, 0]});
            $('#jqxTabs').jqxTabs({ height: '100%', width: '100%',  showCloseButtons: true, scrollPosition: 'both' });

        });
    </script>
</html>

And the file menu_ricerche.php for the menu is like this:

		<div id='jqxnavigationbar_richerche'>
					<div>
               			<div style='margin-top: 2px; '>
                    		<div style='float: left;'>
                        		<img alt='General search' src='js/jqwidgets/styles/images/search.png' />
                        	</div>
  				            <div style='margin-left: 4px; float: left;'>
  				                General search
  				            </div>
                		</div>
            		</div>
					<div>
						<br/>
						<ul>							
							<li ><a href="#" onclick="open1('visualizza_polimorfismi', 'SNPs table')">SNPs table</a></li>														
							<li ><a href="#" onclick="open1('visualizza_singolo_snp','SNP information')">Single SNP information</a></li>							
							<li ><a href="#" onclick="open1('visualizza_gene','Gene table')">Gene table</a></li>							
							<li ><a href="#" onclick="open1('visualizza_providers','Providers')">Providers registry</a></li>							
						</ul>
					</div>

For each link I call a function ‘open1’ with the name of the file and the title for the tab.
Ok now how I can open the page in a dynamic tab and retrive the data?

April 14, 2014 at 3:12 pm Open dynamic tabs from jqxnavigationbar #53060

fox82i

Participant

The load page funtion is


 function loadPage(url) {
            $.get(url, function (data) {
               // $('#content').text(data);
                var tmp = $('<div></div>').html(data);
                var pippo=tmp.find('#content').html();
                return pippo;                    
            });
        }

April 16, 2014 at 8:00 am Open dynamic tabs from jqxnavigationbar #53165

Dimitar

Participant

Hello fox82i,

The issue comes from your Ajax call in loadPage, because it is asynchronous and loadPage actually returns nothing some time before the call is done.

Here is my suggestion on the matter (there were some splitter issues, I have fixed them, too, but notice the new loadPage implementation):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
    <title>Gestione dati genetici laboratorio biobanca</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body class='default'>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Data Management SOC FSC</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="ricerche.php">Data Search</a></li>
                    <li><a href="gestione_dati.php">Data Management</a></li>
                    <li><a href="laboratorio.php">Lab Activity</a></li>
                    <li><a href="terapia.php">Follow Up</a></li>
                    <li><a href="amministrazione.php">Administration</a></li>
                    <li><a href="logout.php">Log out</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="mainSplitter">
        <div class="splitter-panel">
            <div id='jqxnavigationbar_richerche'>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='General search' src='js/jqwidgets/styles/images/search.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            General search
                        </div>
                    </div>
                </div>
                <div>
                    <br />
                    <ul>
                        <li><a href="#" onclick="open1('visualizza_polimorfismi', 'SNPs table')">SNPs table</a></li>
                        <li><a href="#" onclick="open1('visualizza_singolo_snp','SNP information')">Single SNP
                            information</a></li>
                        <li><a href="#" onclick="open1('visualizza_gene','Gene table')">Gene table</a></li>
                        <li><a href="#" onclick="open1('visualizza_providers','Providers')">Providers registry</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="splitter-panel">
            <div id='jqxTabs' style="float: left;">
                <ul style="margin-left: 10px;" id="unorderedList">
                    <li hasclosebutton='false'>Help</li>
                </ul>
                <div style="margin-top: 5px; margin-left: 10px;">
                    <p>
                        Some helps</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">

    function tab_is_open(name) {
        var tabsCount = $("#jqxTabs").jqxTabs('length');
        var position;
        if (tabsCount > 0) {
            for (var i = 0; i < tabsCount; i++) {
                var tabTitle = $("#jqxTabs").jqxTabs('getTitleAt', i);
                if (tabTitle == name) {
                    return i;
                    break;
                }
            }
        } else {
            return 0;
        }
    }

    function open1(plugin, title_tab) {
        var tab;
        tab = tab_is_open(title_tab);
        if (tab > 0) {
            //mi posizione sul tab aperto
            $('#jqxTabs').jqxTabs('select', tab);

        } else {
            href = plugin + '.php';

            loadPage(title_tab, 'test.html');
        }

    }

    function loadPage(title, url) {
        $.get(url).done(function (data) {
            var tmp = $('<div></div>').html(data);
            var pippo = tmp.find('#content').html();
            $('#jqxTabs').jqxTabs('addLast', title, pippo);
        });
    };

    $(document).ready(function () {
        $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '260', min: 150 }, { size: '80%'}] });
        $("#jqxnavigationbar_richerche").jqxNavigationBar({ width: '100%', expandMode: 'multiple', expandedIndexes: [0, 0] });
        $('#jqxTabs').jqxTabs({ height: '100%', width: '100%', showCloseButtons: true, scrollPosition: 'both' });

    });
</script>
</html>

Best Regards,
Dimitar

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

April 23, 2014 at 10:44 am Open dynamic tabs from jqxnavigationbar #53474

fox82i

Participant

Thank Dimitar,
I noticed the loadPage function.

Now I start to write a page to load a grid.. I take and example, in this forums, to load dynamic content (http://www.jqwidgets.com/community/topic/dynamic-contents/) and I try to copy the solution.
For ex.
I made the page “visualizza_polimorfismi.php” whith this code:


<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
		  $(document).ready(function () {
		                var source={
                        datatype: "json",
                        datafields: [
                            {name:'id_RS' ,type:'string'},
                            {name:'snp_name_lab' ,type:'string'},
                            {name:'update_date' ,type:'date'},
                            {name:'chromosome' ,type:'string'},
                            {name:'chr_position' ,type:'string'},
                            {name:'RefSNP_alleles' ,type:'text'},
                            {name:'dbsnp_build' ,type:'string'},
                            {name:'note' ,type:'string'},
                            {name:'allele1' ,type:'string'},
                            {name:'allele2' ,type:'string'},
                            {name:'Note_for_genotype_input' ,type:'string'},
                            {name:'Location_or_Amminoacid_change' ,type:'string'},
                            {name:'Sequenza_context' ,type:'string'}
                           
                            ],
                        id:'id_RS',
                        root: 'rows',
                        url:'controller/enumerate_snps.php',

                        filter: function(){
                          // update the grid and send a request to the server.
                          $("#snps").jqxGrid('updatebounddata', 'filter');
                        },
                        sort: function(){
                          // update the grid and send a request to the server.
                          $("#snps").jqxGrid('updatebounddata', 'sort');
                        },
                       
                        beforeprocessing: function(data){   
                          if (data != null){
                           source.totalrecords = data.total;          
                           
                          }
                        }
                    };                
                    var dataAdapter = new $.jqx.dataAdapter(source, {
                                        downloadComplete: function (data, status, xhr) { },
                                        loadComplete: function (data) { },
                                        loadError: function (xhr, status, error) { }
                                    });
            
                    $("#snps").jqxGrid(
                        {
                            width: '1380',
                            source: dataAdapter,   
                            filterable: true,             
                            pageable: true,
                            autoheight: true,
                            sortable: true,
                            columnsresize: true,
      			    autoshowfiltericon: false,
                            rendergridrows: function(obj){
                                 return obj.data;    
                            },
                            
                            columns: [
                              { text: 'id_RS',  datafield: 'id_RS', width: '250' },
                              { text: 'snp name lab',  datafield: 'snp_name_lab', width: 250 },
                              { text: 'Update date',  datafield: 'update_date',cellsformat: 'yyyy-MM-dd', width: 250 },
                              { text: 'Chromosome',  datafield: 'chromosome', width: 250 },
                              { text: 'chr position',  datafield: 'chr_position', width: 250 },
                              { text: 'RefSNP alleles',  datafield: 'RefSNP_alleles', width: 250 },
                              { text: 'dbsnp build',  datafield: 'dbsnp_build', width: 250 },
                              { text: 'note',  datafield: 'note', width: 250 },
                              { text: 'allele1',  datafield: 'allele1', width: 250 },
                              { text: 'allele2',  datafield: 'allele2', width: 250 },
                              { text: 'Note for genotype input',  datafield: 'Note_for_genotype_input', width: 250 },
                              { text: 'Location or Amminoacid change',  datafield: 'Location_or_Amminoacid_change', width: 250 },
                              { text: 'Sequence context',  datafield: 'Sequenza_context', width: 250 },
                              
                              
                            ]
                        });

        						$("#button").click(function () {
        						    $("#snps").jqxGrid('autoresizecolumns');
        						 });

						        $("#snps").jqxGrid('autoresizecolumns');

        						$('#clearfilteringbutton').click(function () {
                      				  $("#snps").jqxGrid('clearfilters');
                 		});

						        $("#excelExport").click(function () {
            			     $("#snps").jqxGrid('exportdata', 'xls', 'snps_fsc');           
           				  });

            			  $("#xmlExport").click(function () {
                			$("#snps").jqxGrid('exportdata', 'xml', 'snps_fsc');
            			  });

            			  $("#print").jqxButton();
         
			              $("#print").click(function () {
			                var gridContent = $("#snps").jqxGrid('exportdata', 'html');
			                var newWindow = window.open('', '', 'width=800, height=500'),
			                document = newWindow.document.open(),
			                pageContent =
			                    '<!DOCTYPE html>\n' +
			                    '<html>\n' +
			                    '<head>\n' +
			                    '<meta charset="utf-8" />\n' +
			                    '<title>Snps FSC</title>\n' +
			                    '</head>\n' +
			                    '<body>\n' + gridContent + '\n</body>\n</html>';
			                document.write(pageContent);
			                document.close();
			                newWindow.print();
			              });
	    });
</script>
</head>
<body class='default'>
<div id='content'>	
<div id='jqxWidget' style="margin-top:10px; margin-left:10px;font-size: 13px; font-family: Verdana; float: left;margin-left:10px">
	<div style='margin-top: 5px;'>
		<div style='float: left;'>
				<input id="button" type="button" value="Auto Resize Columns" />
				<input value="Remove Filter" id="clearfilteringbutton" type="button" />
                <input type="button" value="Export to Excel" id='excelExport' />
                
                <input type="button" value="Export to XML" id='xmlExport' />
                <input type="button" value="Print" id='print' />
    	</div>
    	<br /><br />
		
	
	</div>
	<div id="snps" ></div>
	</div>
</div>
</body>
  <!---->
</html>

if I want to open the first link “SNPs table”, the tab open but i see only the buttons…
If I copy the js code ,of jqxgrid , in the chrome console then I can see the grid..

In the main file, “index.php”, I added the link of jqxgrid


<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxgrid.js"></script>
    
    <script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxmenu.js"></script>

    <script type="text/javascript" src="js/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="js/jqwidgets/jqxgrid.export.js"></script> 
    <script type="text/javascript" src="js/jqwidgets/jqxgrid.filter.js"></script> 
    <script type="text/javascript" src="js/jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="js/jqwidgets/jqxgrid.columnsresize.js"></script> 
 
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>

Where I wrong?

April 23, 2014 at 12:38 pm Open dynamic tabs from jqxnavigationbar #53488

Dimitar

Participant

Hi fox82i,

In this case, loadPage should be modified as follows:

function loadPage(title, url) {
    $.get(url).done(function (data) {
        $('#jqxTabs').jqxTabs('addLast', title, data);
    });
};

Best Regards,
Dimitar

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

April 24, 2014 at 11:36 am Open dynamic tabs from jqxnavigationbar #53538

fox82i

Participant

Ok ok.. I need a vacation!
Thanks Dimitar….

Author

Posts

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

You must be logged in to reply to this topic.