jQuery UI Widgets Forums Navigation Tabs Add tabs content with ajax onclick

This topic contains 14 replies, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • Add tabs content with ajax onclick #72782

    kavvson
    Participant

    I want create a dynamic on click append data to tab but I get in the tab undefined. Could you tell me whats wrong?
    My js

    <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxTabs.
                $('#jqxTabs').jqxTabs({ width: 580, height: 200,showCloseButtons: true });
    			var length = $('#jqxTabs').jqxTabs('length') + 1;
                var loadPage = function (url) {
                    $.get(url, function (data) {
                      data;
    					// console.log( $('#content' + length ).text(data));
    					// console.log(data);
                    });
                }
    			$('div.s span').click(function() {
    			    var getvalue = $(this).attr('rel');
    	 
    		$('#jqxTabs').jqxTabs('addFirst', 'Sample title',loadPage(getvalue).text());
                    $('#jqxTabs').jqxTabs('ensureVisible', -1);
    				
    
    });
    			
               
                // $('#jqxTabs').on('selected', function (event) {
                    // var pageIndex = event.args.item + 1;
                    // loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
                // });
            });
        </script>

    My html

    <div class="s">
    <span rel="gen.php">Load</span>
    </div>
     <div id='jqxWidget'>
            <div id='jqxTabs'>
                <ul>
    
                </ul>
               
            </div>
        </div>
    Add tabs content with ajax onclick #72810

    Dimitar
    Participant

    Hello kavvson,

    Please try the following solution:

    <script type="text/javascript">
        $(document).ready(function() {
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({
                width: 580,
                height: 200,
                showCloseButtons: true
            });
            var length = $('#jqxTabs').jqxTabs('length') + 1;
            var loadPage = function(url) {
                $.get(url, function(data) {
                    $('#jqxTabs').jqxTabs('addFirst', 'Sample title', data);
                    $('#jqxTabs').jqxTabs('ensureVisible', -1);
                    // console.log( $('#content' + length ).text(data));
                    // console.log(data);
                });
            }
            $('div.s span').click(function() {
                var getvalue = $(this).attr('rel');
    
                loadPage(getvalue);
    
            });
    
            // $('#jqxTabs').on('selected', function (event) {
            // var pageIndex = event.args.item + 1;
            // loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
            // });
        });
    </script>

    Best Regards,
    Dimitar

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

    Add tabs content with ajax onclick #72902

    kavvson
    Participant

    My solution – I got 1 issue with it when I check if its opened it adds opened attribute, when I close it it should remove the opened atribute, can u help me with that?

    HTML:

    
    <div class="s">
    <ul id="nav">
    <li>
    <a href="#" rel="1.php" t="Title">
    <i class="icon-dashboard"></i>
    <span>Alink</span>
    </a>
    </li>
    <li>
    <a href="#" rel="serverfiltering_paging_and_sorting_data.php" t="Pg">
    <i class="icon-dashboard"></i>
    <span>Slink</span>
    </a>
    </li>
    </ul>
     
    <div class="sidebar-title">
    <span>Cos</span>
    </div>
    </div>
    
    <div id='jqxTabs'>
      <ul>
        <li></li>
      </ul>
      <div></div>
    </div>

    Javascript:

    // Create jqxTabs.
    $('#jqxTabs').jqxTabs({ width: 580, height: 200, showCloseButtons: true });
    $('#jqxTabs').jqxTabs("removeFirst"); //here removes the empty tab
    
    //here the function must return the content, and the ajax must be async false for this purpose
    var loadPage = function (url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            async: false,
            success: function(data) {
                result = data;
            } 
        });
        return result;
    }
    $('div.s span').click(function() {
        var getvalue = $(this).attr('rel');
    
        $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue));
        $('#jqxTabs').jqxTabs('ensureVisible', -1);
    });

    For better understanding check: http://jsfiddle.net/charlesrv/h4573ykv/1/

    For the new condition(check if its opened), use a custom attribute so checking would be easier:

    $('div.s span').click(function() {
        var getvalue = $(this).attr('rel');
        var opened = $(this).attr('opened');
    
        if (!opened) {
            $(this).attr('opened', true);
            $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue));
            $('#jqxTabs').jqxTabs('ensureVisible', -1);
        }
    });
    Add tabs content with ajax onclick #72924

    Dimitar
    Participant

    Hi kavvson,

    Here is the solution: https://jsfiddle.net/Dimitar_jQWidgets/gt5fjtup/.

    Best Regards,
    Dimitar

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

    Add tabs content with ajax onclick #72932

    kavvson
    Participant

    Well it seems like its not that easy – for now if you go for 2 links in class s – you can open same tab multiple times.U just need to hit different link and go back to the first. Is it possible to remake

    if (!opened) {
            var gettitle = $(this).attr('t');
            $(this).attr('opened', true);
            $('#jqxTabs').jqxTabs('addFirst',gettitle , loadPage(getvalue));
            $('#jqxTabs').jqxTabs('ensureVisible', -1);
        }

    to something like is opened tab titile? Or somehow another type to make it more smooth

    • This reply was modified 8 years, 11 months ago by  kavvson.
    Add tabs content with ajax onclick #72934

    kavvson
    Participant

    I mean you open 2 tabs 1 and 2. Then try close tab 2 – and your able to open another tab 1 so u end with 2x 1 tabs which shoudnt happen

    Add tabs content with ajax onclick #72976

    Dimitar
    Participant

    Hi kavvson,

    Please first specify what exactly you are trying to achieve. Currently, we are not sure how to help you, because you have not shared what the actual functionality you wish to implement is.

    Best Regards,
    Dimitar

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

    Add tabs content with ajax onclick #73007

    kavvson
    Participant

    So as said, it is a inner browser like – it openes pages from links from a attribute ( we have that now ).
    Functionality :
    – Can open only 1 tab with the same attribute site.php?page=Sales so we will be able to open that link in the tab only once
    – Can close the tabs
    – Can reopen the tab if its closed
    – Support for multiple links so as it was in the div – there would be like 10 links to open new tabs.

    Add tabs content with ajax onclick #73066

    Dimitar
    Participant

    Hi kavvson,

    So is there any functionality you need help with (you said “we have that now” and I assume the above issue is now resolved)?

    Best Regards,
    Dimitar

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

    Add tabs content with ajax onclick #73072

    kavvson
    Participant

    It need’s fixation. Try open 2 tabs and play around close open and eventually you end up with the ability to open several same tabs which you shoudnt be able to do. This needs some more validation not only the atr opened check – maybe add title attr checking or even target site checking.

    Add tabs content with ajax onclick #73083

    Dimitar
    Participant

    Hi kavvson,

    Instead of using attributes, try with flag variables – on each tab’s add, set a flag to true and on removed, set the flag to false, e.g.:

    var flagObject = {};
    
    $('#jqxTabs').on('add', function(event) {
        var index = event.args.item;
        flagObject['tab' + index] = true;
    });
    
    $('#jqxTabs').on('removed', function(event) {
        var index = event.args.item;
        flagObject['tab' + index] = false;
    });

    Best Regards,
    Dimitar

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

    Add tabs content with ajax onclick #73094

    kavvson
    Participant

    Sorry I am not that familar with js – and the part with div.s a stays the same? Could you write me the whole part?

    Add tabs content with ajax onclick #73111

    Dimitar
    Participant

    Hi kavvson,

    I guess the div.s should be the same (I cannot tell for sure, I do not know how many of these elements there are or how they are generated). The only difference from your approach is that when you want to check if a tab is open or closed, you should do the following:

    if (flagObject.tab1) {
        // tab 1 is opened 
    } else {
        // tab 1 is not yet added or closed 
    }

    Best Regards,
    Dimitar

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

    Add tabs content with ajax onclick #73133

    kavvson
    Participant

    Can u show me a example? They aren’t generated – this will be like a menu dropdown links

    Add tabs content with ajax onclick #73183

    Dimitar
    Participant

    Hi kavvson,

    Here is a possible solution: https://jsfiddle.net/Dimitar_jQWidgets/hhrsz9wj/.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.