JQuery: Loading content into dynamic tabs with load() - javascript

I have a main menu, where if I click on any of the options a tab is dynamically created in a div. So I can create up to nine tabs of different options out there in the main menu.
The javascript code I use to create and delete tabs is as follows:
$(document).ready(function () {
$("#tabs").tabs();
var tabCounter = 1;
var cont =1;
var num_tabs = $("#tabs ul li").length +1,
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabs = $( "#tabs" ).tabs();
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
cont++;
}
// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
cont--;
});
tabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
$(".menuitem a").click(function(event) {
event.preventDefault();
if(cont<=9)
{
tabTitle = $(this).attr("title"),
addTab();
$("#tabs-"+tabCounter).load($(this).attr('href'));
tabCounter++;
$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
}
else
{
$( "#dialog-message" ).dialog({
modal: true,buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
});
});
I wanted to get it by adding a tab is activated and show your content, so I added:
$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
Until there all right, I could show up to 9 tabs, but missing your content, it would be a path Symfony,for example:
<li class ="menuitem">test</li>
Then I added the following code to load this route into the div:
$("#tabs-"+tabCounter).load($(this).attr('href'));
And the result is that the content for each tab appears, but it only appears automatically activates the first tab does not show me the warning dialog that can not display more than 9 tabs. The code above is something that affects others and I can not get a solution to this problem.
Besides this problem, I need to know how to get that pressing an option from the main menu, if there is an open tab with that content to put the active tab and display its contents, instead of opening another like (there can be two tabs of the same content).
If there is a better way to do this, I would like to know.
I'm a newbie, so I apologize for how to explain it.

Related

Slick slider function inside change function doesn't work

I have built a product page that has a colour variation select. I'm trying to make it work that when a user selects a colour from the dropdown the slick slider will go to the corresponding slide.
I have added data-attr to each slick slide that contain the colour name and use this to the slide index.
The slickgoto function works when I move it outside of the change function.
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
$( ".slider-for" ).slick( 'slickGoTo', slide_index, false);
});
Thanks
No sure the false is necessary. Have you tried:
$('.slide-for').slick('slickGoTo', slide_index);
Otherwise I would adjust it to:
var slideshow = $( ".slider-for" );
slideshow.slick({ ... });
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
slideshow.slick( 'slickGoTo', slide_index );
});
Hope this helps.

when opening new tabs, it should open the new tab diretly in jquery ui tabs

I am using jquery-UI for creating dynamic Tab panel.when i click on add Tab button, the new tab is get creating. but that tab panel is not opening directly. when click on that tab panel then only it is opening.
$(function() {
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
addTab();
dialog.dialog( "close" );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
tabCounter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
dialog.dialog( "open" );
});
// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
});
tabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
});
here is the url for jquery UI tab panel which i have used in my site [http://jqueryui.com/tabs/#manipulation].
how to directly open this newly added tab?
add following code in your addTab() function
var lastChildIndex = $(".ui-tabs-nav").children().length - 1;
$("div#tabs").tabs({active: lastChildIndex});
What this does is it gets the index of the last child of your tabs list (the one you just added) and sets it to active.
Example: http://jsfiddle.net/ujUu2/818/
EDIT: Seeing as you already have a tabCounter in your code you can use that as the index for setting the last tab active instead of the var lastChildIndex I proposed.

How do I make elements in jQuery Selectable deselected?

How do I make elements in jQuery Selectable deselected? At this Link it is well documented how to use jQuery Selectable but it is never mentioned how to deselect selected elements again. Any ideas?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
<ol id="selectable">
<?php
for($i=1;$i<=9;$i++) {
echo "<li id=\"field_$i\" class=\"ui-state-default\">$i</li>";
}
?>
</ol>
Hold ctrl and click on the elements. It can also be used to make multiple selections.

If checkbox selected append his textValue into another span

I have a dropdown checkbox for which I want to get checkbox value and append a <span> when checkbox is checked after <input type="text" class="form-control">. When checkbox is unchecked I want to remove appended span.
this is what I've tried:
$ ('.chkb:checkbox').click(function(){
if ($(".chkb").prop('checked') == true){
var textName = $('.chkb:checked').next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
$( ".vss" ).remove();
}
})
It is not working so great my script because if I select more checkbox options the append is for every checked element once again and remove only when I uncheck last checkbox.
Here is a small fiddle example:
//keep dropdown open
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('drop-down-stay')) {
e.stopPropagation();
}
});
//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
if ($(this).prop('checked')){
var textName = $(this).next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
//build again the checked ones
$( ".vss" ).remove();
$ ('.chkb:checkbox:checked').each(function(){
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + $(this).next( '.txt' ).text()+'</span>');
});
}
})
Just append in your code the next line in click:
$( ".vss" ).remove();
http://jsfiddle.net/D2RLR/5737/
//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
$( ".vss" ).remove();
if ($(".chkb").prop('checked') == true){
var textName = $('.chkb:checked').next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
$( ".vss" ).remove();
}
})
Try
$('.chkb:checkbox').click(function () {
var items = $('.chkb:checkbox:checked').map(function () {
return '<span class="input-group-addon vss"> ' + $(this).next('.txt').text() + '</span>'
}).get();
$(".input-append .vss").remove()
$(".input-append").append(items.join(''));
})
Demo: Fiddle
replace $(".chkb") with $(this) inside click event callback function. Currently you check all of the checkboxes values in the click event callback function. $(this) refers to the clicked checkbox. So $(this).prop('checked') will refer to the last clicked checkboxes value. You can go from there to solve the problem that you have :)

jQuery UI - adding tabs tutorial need explanation

I'm having trouble understanding a certain part of the jQuery UI tabs tutorial. Specifically this part #{href}'>#{label} What is it doing/what does it mean?
Full code:
$(function () {
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 3;
var tabs = $("#tabs").tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[0].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find("form").submit(function (event) {
addTab();
dialog.dialog("close");
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
tabCounter++;
}
// addTab button: just opens the dialog
$("#add_tab")
.button()
.click(function () {
dialog.dialog("open");
});
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.bind("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
You are putting this into a string:
<a href='#{href}'>#{label}</a>
And later on, you're taking that string and doing this with it:
tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)
So what you're doing is replacing the {href} and {label} characters in the original string with the actual link and text for the <a> tag.
Basically, #{href} and #{label} as well as #tab_title and #tab_content are placeholders. These placeholders are replaced with the real content.
The jQuery UI tutorial holds some LI elements that will become the tabs afterwards:
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
You can match the content of href="" to the #{href} placeholder and the content of the A element will be inserted into the corresponding #{label}
The href-part even names the div-id that will contain the content.
<div id="tabs-1">
<p>Proin elit arcu, [... ]tempus lectus.</p>
</div>
The div with the id "tabs-1" will be read as the content for tab "#tabs-1". Inside the template, this content will be used in place of #tab_content.

Categories

Resources