We Keep Coding

inserting a variable into the drilldown of an object

I am sure this question has been asked before, just don't know the verbiage to find it in a search. Basically I have an object which has values in it and values in that and so on and one of those values will change depending on what is in the text box so I need to make it a variable but it freaks out when I do.
SO if you go to this page:
http://shawnwow.com/chineseCharacterHelpr/
Type "mao" in the text box then go into console and type "currentPinyin" you SHOULD get "mao" and then if you type:
$.wordDatabase.words.mao.choices;
You would get the Chinese characters as expected for "mao" but I need to have it grab whatever is in that text box so I replace mao with the variable currentPinyin by putting in:
$.wordDatabase.words.currentPinyin.choices;
I get a vague error... even though I don't get errors when I manually use mao and currentPinyin is equal to mao. I am guessing it has to do with using a variable in the object path but I have no idea what else to do.
To see the JS code (lines 29-32):
https://github.com/olmansju/chineseCharacterHelpr/blob/master/JS/scripts.js
This Chinese widget isn't mine and I think I need to explore what is generating the list items for Chinese Characters in ul.options as that is probably extracting it for me somewhere and maybe I can just call that, I don't know.
On a site note, using keyup as a trigger seems to not always hit depending on how fast I type the character. I want to use the jquery trigger "change" on the same element I am copying so I tried:
$("#chinese-ime .typing").change(function (){
alert("Did this trigger?");
})
I see the contents of .typing changing but the alert isn't triggering. Am I doing something wrong?
Thank you for your time! I understand this is long so I appreciate it!

A coworker figured it out for me, the issue was it was looking for choices inside of currentPinyin, not choices inside of the text for current pinyin.
So the correct output was this $.wordDatabase.words[currentPinyin].choices;

How to handle/ subscribe an event raised inner html in angular?

[enter link description here][1]First of all - let me make it clear that I am very new to angular. Please pardon me if you find something stupid.
Objective - I am trying to make a custom spell checker. In that I want the ziggy redline when ever a user will press a space bar(in case the spelling is wrong). Here in the program I just used one word just to make sure red underline is coming.
Problem - after hitting the space redline appears but the cursor goes back at the starting of the word.
My Approach - Wheneever there is a spelling mistake i put that word in a span. Now, in that span I will continously raise event on every Keyup to check the spelling, reason being is that if the user puts space between the word thats inside a span I will create two spans removing the already existing span.
[http://plnkr.co/edit/W1qMrTHxksBShYsJeXdl?p=preview]

Autofill Text box on a Web Page (Javascript/VBScript)

I really need to know how I can autofill text boxes on a web page.
What I really want to achieve is the following:
1) Go to http://show.websudoku.com
2) Replace all the empty cells with a 0 (zero).
Is that possible?

To fill the empty spaces of the Sudoku grid at http://show.websudoku.com with zero's, here is some JavaScript to do that. It is formatted for use as a "Bookmarklet":
javascript:(function(){var x,k,f,j,r;x=document.forms;for(k=0;k<x.length;++k){f=x[k];for(j=0;j<f.length;++j){r=(f[j].className.toLowerCase()+f[j].type.toLowerCase()+f[j].value);if(r=="d0text"){f[j].value="0";}else if(r=="d0text0"){f[j].value="";}}}})();
The setup:
Create a new Bookmark/Favorite. For now, the URL for the favorite can be anything. An easy way to do this is to drag ANY link/url from the browser address bar, or any web-page link, to the "Favorites Bar" or to the Bookmarks/Favorites sidebar.
Select the new favorite, and rename it to any name you like.
Copy the JavaScript code from above to the clipboard. It must remain as 1 continuous single line, and it must begin with "javascript:(" and end with ")();"
Edit the properties of the new favorite.
Remove the "URL" that is currently in the favorite and replace it by pasting in the JavaScript code from above, into the "URL" text field for the favorite, then save the changes.
To use the bookmarklet:
From the browser, navigate to http://show.websudoku.com as you normally would.
Click the new favorite (Bookmarklet) that you just edited.
All empty spaces in the Sudoku grid will be filled with 0's. Click the new favorite (Bookmarklet) again, and the 0's will be removed leaving empty spaces once again.
Here is what the Javascript code looks like expanded, with indents:
javascript:(function(){
var x,k,f,j,r;
x=document.forms;
for(k=0;k<x.length;++k){
f=x[k];
for(j=0;j<f.length;++j){
r=(f[j].className.toLowerCase()+f[j].type.toLowerCase()+f[j].value);
if(r=="d0text"){
f[j].value="0";
}
else if(r=="d0text0"){
f[j].value="";
}
}
}
}
)();
* Spoiler alert *
In case you want to "cheat", the JavaScript here will "solve" the Sudoku:
javascript:(function(){var x,k,f,j,ecl,etl,en,ev,s,e,c,d,dl,dr,n;x=document.forms;for(k=0;k<x.length;++k){f=x[k];for(j=0;j<f.length;++j){e=f[j];r=(e.name.toLowerCase());if(r=="cheat"){c=e.value;break;}}for(j=0;j<f.length;++j){e=f[j];ecl=e.className.toLowerCase();etl=e.type.toLowerCase();en=e.name;ev=e.value;if(etl=="text"){if(ecl=="d0"){dr=en.substr(en.length-1,1);dl=en.substr(en.length-2,1);d=(((Number(dr)-1)*9)+Number(dl))-1;n=c.substr(d,1);if(ev.length==0){e.value=n;}else{e.value="";}}}}}})();
Setup and use is the same as described above.
While it's not much fun to solve it like that (OK, maybe it's a little fun the first couple times), and definitely not challenging, if you are in a real-real-real hurry, you can solve it in 1 click.
Note: I have only tested these 2 bookmarklets with IE9.

Updating a text box with javascript

I am having some trouble with some javascript and how it can control the html "text box".
First, here's what I have;
javascript:
function UpdateOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=false;
document.getElementById("add").disabled=false;
document.getElementById("submit").disabled=false;
document.getElementById("edit").disabled=false;
document.getElementById("update").disabled=true;
// Show display box, 'DispCurOrder'
document.getElementById('all_labels').disabled=true;
}
function EditOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=true;
document.getElementById("add").disabled=true;
document.getElementById("submit").disabled=true;
document.getElementById("edit").disabled=true;
document.getElementById("update").disabled=false;
document.getElementById('all_labels').disabled=false;
}
The Idea is simple... I have some buttons and inputs to generate a 'line' of text that get's dumped to the disabled text box. If the operator notices that they made a type-o or want to change something, they click on 'edit order' and it disables all the regular buttons, and enables the text box and 'update' button. The 'update order' button reverses this.
Now, when I just use the add lines to the text box, all works well. You can see each line get appended to the text box (there's another java function that does a bunch of error checking and such, but the crux is that it takes the contents of the text box, parses it on the "\n" to an array, then appends the new line of text. It then takes the array and puts it all together as a new string and puts it back into the text box. Here is that portion without all the error checking stuff;
function AppendOrder()
{
// let's set up an error flag.
var AppendError="";
var str1=document.forms["MyForm"].DataEntry1.value;
var str2=document.forms["MyForm"].DataEntry2.value;
if( /* checking variable str1 for errors */)
{
AppendError="Error in str 1 here";
}
if( /* checking variable str1 for errors */)
{
AppendError=AppendError+"Error in str 2 here";
}
// Display the error message, if there are no errors, it will clear what was there.
$('#AppendStatus').html(AppendError);
if(AppendError=="")
{
// it's all good, update the display
// create line of text
curEntry=str1 + " -- " + str2;
// let's get the current order into a list
str=document.getElementById('all_data').innerHTML;
if(str1=="Empty")
{
// make curOrder = to 1 element array of curEntry
var curOrder=[curEntry];
}
else
{
// parse str1 into an array and parse it to curOrder.
// Then push curEntry on the end.
var curOrder=str1.split("\n");
curOrder.push(curEntry);
}
// now we should have an array called 'curOrder[]'. Let's show it
// on the web page.
$('#all_labels').html(curOrder);
}
}
Now, the problem that I'm having is that after I add a line or two (or more) to the display using the 'add' button and then go into the 'edit' mode (where the text box is enabled) and I make all my changes, the 'add' button doesn't work.
Oddly enough, when I press the 'reset' button (which is just a reset button) it then shows all the adds I did after the edit, and the edited stuff is gone.
Now... to the question... is there something I'm not understanding about the text box? Is there some trick I need to do to get it to work? Am I going about this all wrong? Should I be using a different tool for this other than the 'textbox'?
Any help is greatly appreciated!!
Greg

Found the typo in your jsFiddle.
The first thing that I did was to add:
alert('hi there');
to the very top of the script, inside the $(document).ready() wrapper. Note that on jsFiddle you cannot see the document.ready wrapper, it is invisibly included, so just put the alert at top of javascript block as I did (link to my new jsFiddle is at bottom of answer)
Next, I noticed that you are enabling/disabling several controls by referencing them individually by ID. You can reference several controls at one time if they share the same class, so I invented the class="orderentry" and added that attribute to each of those controls. This removed 8 lines of code, which made troubleshooting easier.
Then, I began deleting/undeleting. First, I deleted everything in the javascript panel except alert('hi there');, and ran the jsFiddle. The alert popped up. Great. So I used Ctrl+z to undelete everything. Next, I selected everything EXCEPT the next block of code, and deleted the selection. I ran the jsFiddle, and again the alert popped up.
I continued deleting/undeleting until I found out where the alert no longer worked -- and that revealed the offending code block. Just had to carefully study the syntax in that specific area and found the error:
$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses
instead of
$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses
Hope this helped, good luck on the rest of your project.
Here is the corrected jsFiddle

You didn't share your HTML, so I made assumptions about what your markup looks like.
Working jsFiddle here
The above jsFiddle is a much simplified version of what you are creating. Obviously, it is very different from what you have done so that I could create it quickly.
Observe how I made certain things happen with jQuery; take what is useful and ignore the rest.
Specifically, you can see how I initially disabled the textarea control:
$('#txtArea').attr({'disabled':'disabled'});
Re-enabled the textarea control for editing, while also hiding the Edit button and displaying the Save button:
$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();
Importantly, this is how I ensure each addition adds to (rather than overwriting) existing content:
var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';
Very likely you already know many (most?) of the things I am pointing out, but I have no idea what you know so, again, keep the one or two things you find useful and ignore the rest. I only hope I've managed to hit on the bit that has you stumped at the moment.
I very rarely recommend W3Schools for anything, but look here for their excellent summary / reference of jQuery selectors, events, methods. (Keep hitting Next Chapter to cycle through all pages of this reference).

Determine visible characters to be highlighted using html source

I'm using TinyMCE to let users edit and format text, output is html code.
The html is then sent to the server and is pushed to other clients that can follow the edit progress on a webpage, the html is inserted into a div so users can see the format but they are not able to edit.
Now I want the cursor position and any selection the user makes in the editor to show up on the readonly page using highlight(background color) if selected or inserting an empty span with a black border between characters to imitate the cursor position.
I made an attempt using
editor.tinymce().selection.getRng()
which gives me the start and end position of what the user sees(formatting characters are not counted)
Then I traversed the DOM and counted the characters in every text element wrapping the ones selected with a highlight span. This resulted in messy code but worked pretty well until I hit a non ascii or encoded character in the textblock.
Example html
<p>abc <b>de</b>fg</p>
looks like this to the user
abc defg
Say user selected character c to d (selection covers c, a blank, first half of the bold tag and d),
tinymce will return range start:2 end:5
but the actual characters behind would be start:5 end:16.
Just wrapping the text from char 5 to 16 in a highlight span will result in bad html.
Checking for words starting with & and ending with ; and adding number of positions will turn into a mess. There has to be a simpler way
How do I calculate how many "visible" characters a set of html character will turn into?
Or maybe you would attack the problem in another way
Thanks
PS 1
I've looked into the various jquery highlight plugins but they seem to highlight based on a search string. Those does not work in the case user selects one character and that character exists several times, they will then highlight all occurences.

I've tackled this problem in my Rangy library: the TextRange module concerns itself with the text the user sees. It sounds like you need the selectCharacters() and toCharacterRange() methods of Rangy's Range objects.