We Keep Coding

Caret Position after appending to input

I want to append various things to an input with buttons.
button#addNumber -> appends 245
button#addOperation -> appends +
A problem arises with button#radicSign.
I want to add the template for a square root sqrt() and place the caret inside the parentheses afterwards for the user to type in the number.
Is this possible?`
If yes, is it worth the effort? Or should I open a dialog box and insert it then?
$('button#radicSign').on('click', function add2digit() {
addOperation('sqrt');
});
function addOperation(op) {
var problemInput = $('input#testProblem');
problemInput.val(problemInput.val() + op);
}

You should be able to do something like this to achieve what you want:
$('#sqrt').click(function() {
var length = $('#a').val().length;
$('#a').val($('#a').val()+'sqrt()');
$('#a').focus()[0].setSelectionRange(length+5, length+5);
});
JSFiddle

Javascript add class to selected text, not first occurrence of the selected text

I want to add a class (and later on to send that string to php) to a text with javascript. Whenever I try to do that, the code is adding the class to the first occurrence of my selection, not to the actual selection. Keep in mind that I want to send that EXACT selection to php (and put it in a database as well so it keep that class even after refresh).
JQ
$("#highlight").click(function(){
paraval = $('#para').html();
sel = window.getSelection();
newst = '<a class="selectedText">' + sel + '</a>';
newvalue = paraval.replace(sel, newst);
$('#para').html(newvalue);
});
HTML
<p>Will only highlight if text is selected from comment class div only</p>
<div class="comment" id="para" contenteditable="true">Here goes some text Here goes some text Here goes some text Here goes some text
Some other text</div>
<input type="button" value="Highlight" id="highlight"/>
CSS
.selectedText{
background-color:yellow;
}
.comment{
border: solid 2px;
}
.comment::selection {
background-color: yellow;
}
example here: http://jsfiddle.net/zq1dqu3o/3/
try to select the last occurrence of the word "text". the first one will get the class "selectedText"...
thanks

Call me lazy, but if you don't mind span being you selection marker tag, you can use rangy's cssApplier class.
var cssApplier;
$(document).ready(function() {
rangy.init();
cssApplier = rangy.createCssClassApplier(
"selectedText", {normalize: true,
applyToEditableOnly:true});
});
$("#highlight").click(function(){
if(cssApplier != undefined)
{
cssApplier.toggleSelection();
}
});
I use applyToEditableOnly here to make it only work in that specific div. (I'm not sure how cross-browser compatible that particular setting is. Worked in Chrome and Firefox though.) This uses position rather than selection text to decide what to mark.
JS Fiddle Here: http://jsfiddle.net/zq1dqu3o/7/

You can get the last occurence with lastIndexOf() and proceed like this:
$("#highlight").click(function(){
paraval = $('#para').text();
sel = "text";
var n = paraval.lastIndexOf(sel);
var before = paraval.substring(0,n);
newst = before + '<a class="selectedText">' + sel + '</a>';
newvalue = paraval.replace(paraval, newst);
$('#para').html(newvalue);
});
Just created a fiddle for it: Replacing last occurence
Note: This quick example is only working because the word you want to highlight is at the last position of the text, but you can check out if this solution is ok for your request. In case the last occurence of the word is elsewhere, just create a variable "after" that contains the text following the last occurence of the word to the end.
Have just provided an example for this in updated fiddle: Replacing last occurence update
with following update to previous code:
var after = paraval.substring(n + sel.length, paraval.length);
newst = before + '<a class="selectedText">' + sel + '</a>' + after;

div.appendChild(div) equivalent in ExtJS4

I am transitioning my code to ExtJs4.1.1.
In one part of the code I have used Javascript's appendChild() method to add new div elements to an existing div container.
I want this to be done in ExtJs now.
Existing code:
var container = document.getElementById('treeContainer');
var nodeDiv = document.createElement("div");
// nodeDiv related code... setting properties and attributes
nodeDiv.innerHTML = "<div class='NodeContent'>" + node.displayText + "</div>";
nodeDiv.className = "Node";
//... more such code...
//add div to the container
container.appendChild(nodeDiv);
This code works perfectly fine.
But now I am using an ExtJs Panel wherein I want to display the same content.
How do I do it?
I tried doing:
xtype: 'panel',
autoScroll: true,
border: 10,
bodyStyle:{"background-color":"white"},
height: Ext.getBody().getViewSize().height *0.80,
id: 'treeContainer'
Ext.getCmp('treeContainer').update(nodeDiv); //this didnt work
Ext.getCmp('treeContainer').addChildEls(nodeDiv); //no success
I get this output on firing the below command in debugger:
Ext.getElementById('treeContainer')
<div class=​"x-panel x-panel-default" style=​"height:​553.6px;​" id=​"treeContainer">​
[object HTMLDivElement]
​</div>​
Any help!?

The panel's update function expects a HTML string instead of a DOM object:
// using a HTML string
Ext.getCmp('treeContainer').update("<div class='NodeContent'>" + node.displayText + "</div>");
// using a DOM object
Ext.getCmp('treeContainer').update(nodeDiv.outerHTML);
Note, that using this function will always replace all existing HTML content in the panel.
If you really want to append HTML (i.e. preserve existing HTML content), you need to get a target element to append your HTML/DOM node to.
This could be the panel's default render target element:
var panel = Ext.getCmp('treeContainer'),
renderEl = panel.isContainer ? panel.layout.getRenderTarget() : panel.getTargetEl();
// using a DOM node
renderEl.appendChild(nodeDiv);
// using a HTML string
renderEl.insertHtml('beforeEnd', "<div class='NodeContent'>" + node.displayText + "</div>");
Or - as this may change depending on your panel's layout - you just create a containg element in your initial html config:
{
xtype: 'panel',
id: 'treeContainer',
html: '<div class="html-content"></div>'
}
and append your content there:
Ext.getCmp('treeContainer').getEl().down('.html-content').appendChild(nodeDiv);
In any of the latter two cases, you should update the panel's layout afterwards, as you changed it's content manually:
Ext.getCmp('treeContainer').updateLayout();

JQuery get calling <script> tag when dynamically loaded

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

Combo buttons display improperly when created using jQuery

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