I using tab's JQuery plugin UI each tab contains TextArea then are manage by TinyMCE librarie.
I want to do : When you click on tab "+" , that add new tab which contains textarea too.
To create new tab with textearea , it's good. The problem is : I can't edit textarea value and if i click on TinyMCE 's option ( like Bold ) : J is null error on Javascript console
My JS Code :
$('li > a.moretxt').click(function(){
// Number of element in tabs
var size = $( "#tabs" ).tabs("length");
// Content to add on new tab
var content = "<div id='divcontent"+size+"'><textarea id=\'txtcontent"+size+"'\' cols=\'60\' rows=\'5\'></textarea></div>";
// Some variable
var path = '#divcontent'+size;
var title = 'content'+size;
var idtxt = 'txtcontent'+size;
// Add new div Textarea before the end
$('div#morecontent').before(content);
//Add control ?
tinyMCE.execCommand('mceAddControl', true, idtxt);
// Add new TAB
$( "#tabs" ).tabs("add",path,title,(size));
var index = $( "#tabs" ).tabs("option", "selected");
});
The follow code , well add tab with tiny TextArea but it doesn't works ...
TinyMCE needs to have the object in the DOM to apply itself. I'm not sure why TinyMCE isn't working as you appear to be are adding the container prior to adding TinyMCE, however if you move the "addControl" to after you've added the new Tab it should work.
Related
I have an issue where I wish to re-style an item inside a selectmenu dropdown list when a new item is dynamically changed by other javascript.
The change event works when I pick the item from the dropdown list by clicking a desired option, but not when I do so via javascript (see last 2 lines).
The text value changes from "Black" to "White", but the color square still shows the old css.
$("#original-native-dropdown")
.selectmenu({
create: function (event, ui) {
var widget = $(this).selectmenu("widget");
// pass in style from a <span> inside the native <option> tags used in the selectmenu
const span = $('<span id="' + this.id + 'selected" class="color-option-selected"> ').html(" ").appendTo(widget);
const styleString = $(this).parent().find("select > option:first > span:first").data("style");
span.attr("style", styleString);
},
change: function (event, ui) {
// works when the user clicks an item in the selection dropdown but not from the outside.
$("#" + this.id + 'selected').parent().children(":last").attr("style", ui.item.element.children(":first").data("style"));
}
})
.selectmenu("menuWidget")
.addClass("ui-menu-icons color-option");
$("#original-native-dropdown").val("White");
$("#original-native-dropdown").selectmenu("refresh").trigger("selectmenuchange");
The color square changes only when user clicks.
The color square is not restyled when selection is changed via javascript.
I am trying to run jQuery code on elements contained within a jQuery tab which is not selected. If i quickly click the tab before the Ajax loading has completed it works, but if i leave it running without being selected the code will not be executed.
As ou can see below, the tab i want to load data into were not defined from the beginning, it was created when the user clicked a button.
The functionality i want to achieve is tabs, where the user will search for X in the start tab, then the new tab is created, content is loaded in the background (needs jQuery code for grids and format). Then the user can click the tab and see the results.
jQuery 1.10
jQuery-UI 1.10
Example:
<script>
$(document).ready(function(){
var myindex = 1;
$("#startsearch").click(function() {
search = escape(($("#search").val()));
searchdate = ($.datepicker.formatDate('yy-mm-dd', new Date()));
var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
// Add new tab
newhtml = "<li id='henrik_tab_" + myindex + "Selector'><a href='#henrik_tab_" + myindex + "'>Search: " + searchdate + "</a></li>";
newhtml2 = "<div id='henrik_tab_" + myindex + "'></div>";
ul.append(newhtml);
tabs.append(newhtml2);
tabs.tabs( "refresh" );
// Load data into tab
$( "#henrik_tab_" + myindex).load("dosearch.php?data=" + search, function(responseTxt,statusTxt,xhr) {
if(statusTxt=="success") {
!! DOING STUFF WITH ELEMENTS CONTAINED IN THE NEW TAB HERE !!
}
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
// increse the counter for next tab
myindex++;
});
$( "#tabs" ).tabs();
});
</script>
Any help would be much appreciated.
Try change code
tabs.append(newhtml2);
to
$( "#tabs" ).append(newhtml2);
If not fix, would like show the code should be executed but not.
I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.
$("div").click(function( event ) {
// just to prove that we are entering this event
$("#preShow").html ( Date() );
// show the title
var toolTip = this.attributes.title.value;
$("#show").html ( toolTip );
// just to prove that there was no crash
$("#postShow").html ( Date() );
});
I have also tried using
var toolTip = $(this).attr ("title");
Here is the jsfiddle showing the problem
http://jsfiddle.net/jK5xQ/
The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?
This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...
$(document).ready(function () {
$( document ).tooltip( {
track: true,
content: function() {
return $( this ).attr( "title" );
}
});
$('div').click(function(){
$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
});
});
DEMO: http://jsfiddle.net/jK5xQ/4/
Let me know if you have any questions!
I am using jQuery and Joomla. Sinca I need to use jQuery.noConlict() due to the use of other javascript libraries, I use jQuery instead of $
I have a set of tabs. I am using jQuery UI. I am using the fadein fadeout through opacity toggle, and the rotation (all working fine)
I want to change the file name of the img tag which is a child of the anchor tag in the tabs
tabs has typical structure (i.e. ul > li > a > img....</ul><div><the tab's content></div>)
(please, do not ask or suggest I change the image to be background image. I must keep structure this way)
With the code below, I am trying to add to the file name of the img, but it is not working. When the alert is triggered I continue to read the old file name, and of course, I see the old image
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
image.attr("src").replace(".png","-active.png");
var liContent = image.attr("src");
alert(liContent);
}
);
It should be like this:
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
image.attr("src",image.attr("src").replace(".png","-active.png"));
var liContent = image.attr("src");
alert(liContent);
});
Or Like this:
jQuery( "#tabs" ).bind('tabsshow', function(event, ui){
var image = jQuery(ui.tab).children();
var liContent = image.attr("src").replace(".png","-active.png");
alert(liContent);
});
I can define icon for a jquery ui button in code like this;
$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });
but I would like to define button icon in HTML code. for example
button
this way I can only call..
$( ".selector" ).button();
in onready event and define icons in code. otherwise I need to call button() method for every button that have different icon.
You could use the Metadata Plugin.
button
And the script
$(".jqbutton")
.each(function(){
var data = $(this).metadata();
$(this).button({ icons: {primary:data.icon} });
});
I've never used this directly, but I have used it through its support in the jquery validation plugin.
The Metadata Plugin works fine, and you can even do more: you can also set ALL the init properties of a jQuery UI button (other widgets too):
<script type="text/javascript">
$(document).ready(function(){
$('.jq-button').each(function(){
var meta=$(this).metadata();
$(this).button(meta);
});
});
</script>
New item
Thanks, TJB - great idea! :)
You can set the icon after initializing the button using the "options" parameter
$(".jqbutton").button();
$(".jqbutton.ui-icon-gear").button( "option", "icons",
{primary:'ui-icon-gear'} );
http://jqueryui.com/demos/button/#option-icons
EDIT: the link isn't direct, so just look for the Options tab and select 'icons' then look # the section that says 'Get or set the icons option, after init'
The following code looks for "ui-icon-[icon-name]" in the class-attribute of all elements containing the class "jqbutton" and creates a button with an "ui-icon-[icon-name]" icon.
$(function() {
$(".jqbutton").each(function() {
var obj = $(this);
var icon = false;
var c = obj.attr('class');
var i1 = c.indexOf('ui-icon-');
if (i1 != -1) {
var i2 = c.indexOf(" ", i1);
icon = c.substring(i1, i2 != -1 ? i2 : c.length);
obj.removeClass(icon);
}
obj.button({
icons : {
primary : icon
}
});
});
});