Add tabs content with ajax onclick

[kavvsonParticipant]

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>

[DimitarParticipant]

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/

[kavvsonParticipant]

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);
    }
});

[DimitarParticipant]

Hi kavvson,

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

Best Regards,
Dimitar

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

[kavvsonParticipant]

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

[kavvsonParticipant]

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

[DimitarParticipant]

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/

[kavvsonParticipant]

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.

[DimitarParticipant]

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/

[kavvsonParticipant]

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.

[DimitarParticipant]

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/

[kavvsonParticipant]

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?

[DimitarParticipant]

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/

[kavvsonParticipant]

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

[DimitarParticipant]

Hi kavvson,

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

Best Regards,
Dimitar

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

[Author]

Posts