I am using jQuery to create a set of combo buttons in my Chrome extension:
for( var i = 0, format; format = phoneFormats[i]; ++i ) {
var input = $('<input>', {
style: 'width: 400',
type: 'radio',
name: 'phone-format-radio',
value: i,
text: GetDisplayNumber( format )
}).after( '<br/>' );
$(id + ' > button').before( input );
}
There are two major issues with the current output. First of all, unless I explicitly set the width of each input element, their width does not account for the text next to the combo box. Secondly, the combo buttons appear to the right of the text instead of to the left of it.
If I manually create these combo buttons in HTML, they structure just fine. Am I doing something wrong with jQuery?
As far as your question in the comment goes (i.e. "why my radio button is not being given a default width (the size of its text) and why the radio button is on the right of the text instead of the left."), radio buttons (or any <input> elements for that matter) don't have content. So, where your text gets rendered depends on the browser's mood (more or less). The usual structure looks like this:
<input type="radio" id="x" /><label for="x">Your text here</label>
I've left out all the attributes that weren't necessary to illustrate the structure. So, what you want to do is create your radio button without the text bit but with an id attribute; then, create a label element with an appropriate for attribute and text and drop the label after the radio button but before your line break. Maybe something more like this would work:
for(var i = 0, format; format = phoneFormats[i]; ++i) {
var input = $('<input>', {
id: 'phone-format-radio-' + i,
style: 'width: 400',
type: 'radio',
name: 'phone-format-radio',
value: i
}).after(
'<label for="phone-format-radio-' + i + '">'
+ GetDisplayNumber(format)
+ '</label><br/>'
);
$(id + ' > button').before( input );
}
Related
I am trying to show a Kendo Color Picker when I click on a cell of a Kendo grid.
My actual code is much more complex and mostly generating during execution time. But, here is my code for editor for the a specific column of a Kendo Grid.
editor: function(container, options){
var color = document.createElement('input');
color.setAttribute('type', 'color');
color.setAttribute('id', 'myColorField');
container.show();
$('#myColorField').appendTo(container).kendoColorPicker(
{
buttons: true
}
);
}
I don't get any error, however, when I click on the cell to edit it, no color selection window is appearing. (only the text disappears on on-click of the cell.)
I am very new to Kendo UI. Could anyone please help about it?
Thanks!
Update:
I changed the code as below:
editor: function(container, options){
var color = document.createElement('input');
color.setAttribute('type', 'color');
color.setAttribute('class', 'myColorField');
container.show();
$(this).find('.myColorField').appendTo(container).kendoColorPicker(
{
buttons: true
}
);
}
Still no luck!
update: Alternate approach, still not working though!
editor: function(container, options){
$("< input type = 'color' data-bind = 'value:" + prop.Name + "' /> " ).appendTo(container).kendoColorPicker({buttons: true});
}
update: Partially working code!
sb.Append(", editor: function(container, options){ " +
"console.log(container);" +
"$(\"< input name = '\"+options.field+\"' /> \" )" +
".appendTo(container)" +
".kendoColorPicker(" +
"{" +
"buttons: true, " +
"value: options.model." + prop.Name+ "," +
"select: function(e) {" +
"options.model." + prop.Name + " = e.value" +
"}" +
"}" +
");" +
"}"
);
I am now able to select the color from color picker and set it to the field I wanted. But, when I am trying to open this color picker, it looks weird and it show the data from tag from the code above. I tried so many things, but, nothing worked!
update: There was an unintended space. The right code was this:
"$(\"<input name = '\"+options.field+\"' /> \" )"
instead of this:
"$(\"< input name = '\"+options.field+\"' /> \" )"
here is a simple dojo showing you a colour picker being added to a grid.
https://dojo.telerik.com/aRUsUJOw
updated dojo:
This one shows the colour stylized with the new colour being selected rather than just the hex colour code.
https://dojo.telerik.com/aRUsUJOw/4
I have a text input and on focusout, I have couple of select elements which I want to fill with the text field's value.
And I have bunch of select tags with 'NameSelect' class
$('.textField').focusout(function() {
var name = $(this).val();
var NameOption = $('<option>', { value: name, text: name, attrid: '1'});
var selects = $('#mainForm').find('.NameSelect');
$(selects).each(function(i, obj) {
console.log($(obj)); // it seems to get the right select
$(obj).append(NameOption);
})
}
However, when I do that, even though the selects get all the right elements and for loop for the right count, it only appends the option input to the latest object, not all of them.
What am I missing here?
The issue is because NameOption holds a reference to the option, hence if you append() it multiple times it will move between each parent element.
To fix this you can either clone() the element when you append it:
selects.append(NameOption.clone());
Or you could just provide append() with a string to create a new element each time it's called:
$('.textField').focusout(function() {
var name = $(this).val();
$('#mainForm').find('.NameSelect').append('<option value="' + name + '" attrid="1">' + name + '</option>');
})
});
Note that in both cases the each() is not required.
I've implemented the JQueryTE in my application. Along with the usual tools that JQueryTE has to offer, I'd like to include a drop down picker with a list of predefined fields acting like placeholders, such as [[Title]],[[FirstName]] etc. I know its possible with CKEditor using placeholder plugin but can it be done with JQueryTE?
The most obvious method I would have thought was to try and add/append a option menu to the toolbar which will fire off some code which adds the field name, but not having much luck.
Can someone have a look at my jsfiddle please?
jsfiddle http://jsfiddle.net/jalz/hou94u8a/2/
$('.jqte-primary').jqte(
{
title: true,
format: true,
fsize: true,
color: true,
b: true,
i: true,
u: true,
ol: true,
ul: true,
sub: true,
sup: true,
outdent: true,
indent: true,
left: true,
center: true,
right: true,
strike: true,
link: true,
unlink: true,
remove: true,
rule: true,
source: false
}
);
$( ".jqte_toolbar" ).append( "<span style=\"margin-left: 12px; padding-top: 6px; vertical-align: middle;\">Save</span>" );
/* this is the one that does not work - this control does not display in JQueryTE and then figure out how to fire the value chosen in the appropriate place */
selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('.jqte_toolbar').append($("<option/>", {
value: key,
text: value
}));
});
$( ".jqte_toolbar" ).append( "<span style=\"margin-left: 12px; padding-top: 6px; vertical-align: middle;\">End</span>" );
$(".field_list").click( function () {
/* Insert the value into */
alert('insert value');
} )
Many thanks
hoping this helps to anybody that need to do something like this. I was using JQTE v 1.4 and JQuery 3.4 with JQuery-ui 1.12. What I did was to mimic the text format combo box that already have the desired behavior.
In this example the list is dynamically populated from an AJAX call which is the reason why I use dynamic element's Ids; on top of that I needed to place the same combo box with different content once on each depending on a parameter because there are many jqte's dynamically added to my page. Given that scenario the main entrance:
$("div[id^=\"jqteContainer_\"]").each(function(){
let currParamId = $(this).attr("id").split("_")[1]; //Obtain the id which have the param to know which combo belongs to which jqte toolbar
let currentCombo = $(this);
$.ajax("getData.[php/jsp/asp/aspx]",{ // The AJAX call to get the information for the options
data: { id: currParamId },
success: function(dataResponse){
let data = dataResponse.data; //Assuming data is an array with the information
let newOptions = "";
for(let i=0; i<data.length; i++){ //Mimicking the HTML and CSS of jqte format combo box for each option
newOptions += "<a class=\"jqte_format jqte_format_0 unselectable optMyClass\" data-myid=\"" + data[i].myId + "\" data-otherid=\"" + data[i].otherId + "\" role=\"menuitem\" unselectable=\"on\" style=\"user-select: none;\">" + data[i].name + "</a>";
}
// Mimicking the HTML and CSS of the combo box container as jqte format combo box container
currentCombo.children("div.jqte").children("div.jqte_toolbar").append("<div class=\"jqte_tool jqte_tool_1 unselectable\" role=\"button\" style=\"user-select: none;width:15%\" unselectable=\"on\"><a id=\"myCustomCombo_" + currParamId + "\" data-myid=\"" + currParamId +"\" class=\"jqte_tool_label unselectable myCustomCombo\" unselectable=\"on\" style=\"user-select: none;width:95%\"><span class=\"jqte_tool_text unselectable nowrap\" unselectable=\"on\" style=\"user-select: none;\">My Combo Label</span><span class=\"jqte_tool_icon unselectable\" unselectable=\"on\" style=\"user-select: none;\"></span></a><div id=\"myComboOptions_" + currParamId + "\" class=\"jqte_formats unselectable\" unselectable=\"on\" style=\"user-select: none; display: none;\">" + newOptions + "</div></div>");
},
error: showResult,
method: "POST"
});
});
$("body").on("click", ".myCustomCombo", function( event ) {
event.preventDefault();
$("#myComboOptions_"+$(this).attr("data-myid")).css("display","block");
});
$("body").on("click", ".optMyClass", function( event ) {
event.preventDefault();
// Your code per option. you can use the data-xxxx to differentiate
});
First of all, I had to add the combo box in each jqte in the page. In my case I have many jqte-s. However, this can be avoided just setting your Id if you have only one.
Next is mimicking jqte's format combo box used to list the text formats. The first part is adding the options, which are a bunch of anchors (a tags) with the information needed for your code in order to differentiate each one and the combo box if needed. In this case, the options are from an AJAX call, but it can be replaced for any static HTML that mimics the HTML showed here.
After implementing our options they are added to the corresponding jqte's toolbar which is the grandchildren of the jqte container (usually a div as in my case where the jqte textarea is a direct child), and add the rest of the HTML and CSS mimicking jqte's format combo box. Pay attention in the custom class added here (.myCustomCombo) because it is the way to make the show/hide of the options.
Finally is the javascript code which is pretty straight forward. The first one is just to show the options of our dropdown combo box, the next one is to do whatever we need once the option is selected. Pay attention to the way it is done because using the usual $(".myCustomCombo").click(...) are not going to work due to the fact that the combo box is generated dynamically. If it is already in the page (statically defined) the usual way to define this event should work; the same applies for the options.
Hoping this example be useful. Have fun and a great day.
How can I locate the tag which calls a JQuery script, when
the tag is dynamically loaded, so won't be the last
tag on the page?
I'm using the MagicSuggest autosuggest library. I want to give certain suggested items a different background color depending on their contents, which I'm currently doing by adding JQuery inside a tag, which I'm adding on to the String which is returned to be rendered inside the selection div. Then, to get the div the item is suggested in, I need to essentially get the parent() of the tag, and change it's css() properties. How can I get this current script tag however?
I'm currently assigned each new tag an id generated from incrementing a JS variable - which works, but isn't very 'nice'! Is there anyway I can directly target the tag with JQuery?
If it perhaps makes it clearer, here is my current selectionRenderer function.
selectionRenderer: function(a){
var toRet = a.english;
var blueBgScript = "<script id=ft" + freeTextFieldID + ">$('#ft" + freeTextFieldID + "').parent().css('background', 'blue');</script>"
if(a.id==a.english){
toRet += blueBgScript;
freeTextFieldID++;
}
return toRet;
},
Why don't you add some code at afterrender event instead? Add some tag to flag the options that need a different background, then detect the parents and add a class (or edit the bg property) or whatever you like:
var newMS = $('#idStr').magicSuggest({
data: 'states.php',
displayField: 'english',
valueField: 'id',
selectionRenderer: function(a){
var toRet = a.english;
if(a.id==a.english) toRet = "<span class='freetext'>" + toRet + "</span>";
return toRet;
},
});
$(newMS).on('selectionchange', function(event,combo,selection){
var selDivs = $(event.target._valueContainer[0].parentNode).children('div'); //Get all the divs in the selction
$.each(selDivs,function(index,value){ //For each selected item
var span = $(value).children('.freetext'); //It if contains a span of class freetext
if(span.length == 1) $(value).css('background','blue'); //Turn the background blue
});
I have a dialog that has groupings of label and ValidationTextBoxs that are programmaticly added to the the dialog. example: first name:XXXXXX
If I specify no css formatting the labels and ValidationTextBox appear nicely side by side. BUT the groupings of are smushed on top of one another with no spacing.
If I add add css for height, margin, padding. the first grouping is fine, however the following labels start at where the beginning of the of the current ValidationTextBox. not at the beginnig of the next line. so the alignment is all out of whack.
Yes I have tried individually changing the height, padding, and margins of the labels, and textbox. placing at the end of line NO LUCK. I thought of wrapping the grouping in spans or divs but get same behavior and setting the size of the enclosing div/span. BUT no luck.
could someone explain why the following function
function buildDialogField(fieldHolder, id, title, value, widgetId)
{
var newLabel, newField;
if (value === null) {
value = "";
}
newLabel = "<div class='datadiv'><label for='" + id + "'>" + title + ":</label>";
dojo.place(newLabel, fieldHolder);
newField = new dijit.form.ValidationTextBox({
id: widgetId,
name: "myData",
value: value,
trim: true
});
dojo.place(newField.domNode, fieldHolder);
dojo.place("</div>", fieldHolder);
}
generates the following html
<div class='datadiv'>
<label for='name'>me:</label>
</div>
<div id="widget_305" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitValidationTextBox" wairole="presentation" role="presentation" widgetid="305">
The ending div appears after the label but before ValidationTextBox. though that is not what I coded!!!
thanks to anyone whom helps me clear up my confusion.
You're sending invalid/incomplete HTML to dojo.place, and it (or the browser) is "completing" it for you. dojo.place isn't just an alias for elem.innerHTML += "...", but you seem to sort of be treating it as such.
I think it should actually be trivial to fix this code:
newLabel = "<div class='datadiv'><label for='" + id + "'>" + title + ":</label></div>";
dojo.place(newLabel, fieldHolder);
newField = new dijit.form.ValidationTextBox({
id: widgetId,
name: "myData",
value: value,
trim: true
});
// the following is equivalent to dojo.place(newField.domNode, newLabel)
newField.placeAt(newLabel);
To explain. the newLabel variable ends up receiving the generated top-level DOM node generated from the HTML content passed to dojo.place. (Notice I completed the HTML string by adding the ending </div>.) In this case, that's actually the div, not the label - so you might want to change the variable name.
Then, we place the widget inside that div - by default, placeAt places the widget as the last child of the specified node (just like dojo.place(nodeToBePlaced, targetNode) would by default).
You can tell it otherwise by passing another parameter - see http://dojotoolkit.org/api/dijit/_Widget/placeAt and http://dojotoolkit.org/api/dojo/place for details.