This question is about jquery ui tabs selecting.
I have been trying to get this seemingly simple thing to work for a few hours.
It doesnt select the first dynamicly added tab, but any tab added after that, is auto selected just fine. ( fiddle )
I create a new tab using,
function addTab() {
var label = tabTitle.val() || tabNameCounter,
id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").find('li:last').before(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
tabCounter++;
tabNameCounter++;
}
And try selecting it with:
var tabs = $('#tabs').tabs({
activate: function (event, ui) {
if (ui.newPanel.is("#add-tab")) {
tabs.tabs("option","active",-2);
}
}
I would really appreciate some insight, Thank you.
If you call setActiveTab(); inside the click handler it seems to be working fine.
$("#add-page").click(function () {
if (tabNameCounter < 6) {
addTab();
addTabBut();
setActiveTab();
}
});
Related
I am trying to hide accordion tabs which are not active and the last tab, however not much luck till now
Code I have till now:
$('#accordion > h3').each(function() {...});
var accordion, first, last, lastContent;
var i = 0;
$('#acc_Posts').children().each(function() {
accordion = $(this).attr("id");
if ($("#" + accordion).hasClass("ui-accordion-header")) {
if (i == 0) {
first = $(this).attr("id");
}
lastContent = $(this).next().attr('id');
last = $(this).attr("id");
if ($("#" + accordion).attr("aria-selected") == 'false') {
$("#" + accordion).hide();
};
}
i++;
});
$("#" + last).css({
'display': ''
});
$("#" + first).css({
'display': ''
});
I try to accomplish when user clicks on the body of active tab that all tabs are being hide except the active and last tab, when user clicks on the last tab all tabs will showup again. Sounds very simple but I cant figure this out.
Maybe somebody had tied to do the same?
Any help is appreciated!
To hide or show accordions you must use collapse, for example, toggling it:
$('#yourAccordion').collapse({toggle: true});
i want to remove the an item from server side also , so i need id of item that is gone to trash div, below method is called on when dropped to trash div.
drop: function(e, selected) {
var $current_container, $original_container, $previous_container;
if (_this.options.enableTrash) {
alert(original_container_class);
$original_container = $("." + original_container_class);
$current_container = $("." + current_container_class);
$previous_container = $("." + previous_container_class);
$selected = $(selected.helper);
$current_container.trigger("ss-trashed", $selected);
$selected.remove();
$original_container.trigger("ss-rearrange").removeClass(original_container_class);
$current_container.trigger("ss-rearrange").removeClass(current_container_class);
return $previous_container.trigger("ss-arrange").removeClass(previous_container_class);
}
}
FIDDLE:
http://jsfiddle.net/LNysC/2244/
Try this
$('.trash').on('ss-trashed', function (e, selected) {
console.log($(selected).attr('id'))
})
DEMO: http://jsfiddle.net/LNysC/2245/
i'm new here and didn´t find the solution for my problem.
i searched the web and tried tons of solutions but they didn´t work.
i use Jquery Tabs with the closable feature( http://jsfiddle.net/42er3/9/ )
Now i wanted to activate the latest created Tab. This doesn´t work ^^
Here is my 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 = 1;
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: {
Send: 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 = tabTitle.val(),
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 + "' class='rel'><p>" + tabContentHtml + "</p><hr /><div id='writebox'><form name='send' id ='sent'><textarea name ='msg' class='boxsizingBorder'></textarea><input type='submit' name='" + id + "' /></form></div></div>");
//after added the tab, active it
tabs.tabs({
active: tabCounter
}); // <---------------------------Here it is
//alert(panelId+"-"+tabCounter);
tabCounter++;
tabs.tabs("refresh");
}
// 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 can use the following code to programatically make a tab active
$( "#tabs" ).tabs( "option", "active", 2 );
I've updated the addTab() method in your Fiddle as follows:
function addTab() {
...
tabs.tabs("refresh");
tabs.tabs( "option", "active", tabCounter-1 );
tabCounter++;
}
As tab indexes start at 0 rather than 1, I've had to subtract 1 from tabCounter to get the index of the tab that was just added.
See here for a demo
Im using jQuery ui button to create divs that look like buttons dynamically. Clicking on these divs should open a dialog and clicking its icon should remove the div(button). Ive tried several different approaches but I cant seem to get the result I want.
Closest thing Ive achieved is by using onclick on both the icon & on the div itself, but the problem is that when clicking the icon I would first call the icon's onclick and then afterwards calling the div's onclick, which will cause the dialog to open after the div has been removed.
Ive also tried to add a disable property and set it to true on the div inside the icon's onclick and check for that inside the div's onclick but that dont work(I kinda get why.)
So my question is then: How can I create a button that will open a dialog when clicked on and with a icon that, when clicked on, removes the button?
Code:
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).delegate("span.ui-icon-circle-close", "click", function () {
var btnId = $(this).closest("div").remove().attr("aria-controls");
$("#" + btnId).remove();
});
$('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}
function IconCloseClicked(value) {
$(value).parent().prop("disable", "true");
//alert($(value).parent().attr("id"));
alert("icon");
Remove($(value).parent());
}
function ButtonClicked(o) {
var test = $(o).prop("disable");
alert("div");
if ($(o).attr("disable") == undefined) {
Opendialog();
}
}
function Remove(value) {
$(value).remove();
}
function Opendialog() {
$("#dialog").dialog("open");
}
Ps. Reason why Ive used the button is because it is the widget that looks the most like what I want in jquery ui.
Updated(What I ended up with):
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).click(function (e) {
Opendialog();
});
$('.ui-icon-circle-close').click(function (e) {
$(this).parent().remove();
e.stopPropagation();
});
}
function Opendialog() {
$("#dialog").dialog("open");
}
I'm assuming the icon is a child element of the button div. When the icon is clicked, you need to stop the click event bubbling to the parent div. You can do this with event.stopPropagation()
$('.icon').click(function(e){
e.stopPropagation();
});
I am using following code to create a list dynamically. It works fine but when I click the particular list item, then the selected row's font color should turn yellow. How can I do it?
Thanks in advance.
$('#DateListView').children().remove('li');
//Make a new list
var parent = document.getElementById('DateListView');
for (var menuid = 0; menuid < weekStartDates.length; menuid++) {
var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem_' + weekStartDates[menuid]);
listItem.innerHTML = "<div data-role='button' style='margin-left:10px;font-size:15px'data-theme ='c' id='" + menuId + "'>" + Hai +"</div>";
parent.appendChild(listItem);
}
var list = document.getElementById('DateListView');
$(list).listview("refresh");
$('#DateListView li ").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
is this a typo? $('#DateListView li ") should have matching single or double quotes
This:
$('#DateListView li ").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Should be:
$('#DateListView li').bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
or:
$("#DateListView li").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Also you might want to call the refresh after your added markup
$("#DateListView li").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
$(list).listview("refresh"); // Move after added markup
UPDATE:
$("#DateListView li").bind("click", function() {
$(this).attr("style" , "font-color:yellow");
});
$(list).listview("refresh"); // Move after added markup