Databases
StackOverflow2013
Postsdbo
PORetrieving element with jQuery inside knockout event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORetrieving element with jQuery inside knockout event
    primarykey
    data
    text
    <p>I've been playing about with knockout.js with jQuery, and I'm very new to knockout.js</p> <p>My code example and code is here : <a href="http://jsfiddle.net/Ninjanoel/ADYN6/" rel="noreferrer">http://jsfiddle.net/Ninjanoel/ADYN6/</a></p> <p>Basically, I'm trying to create a lottery numbers input screen as a test of my knowledge, and I'm now trying to validate the input of a textbox, and then apply special effects to the input box if [onBlur], the text box is not valid.</p> <p>I have a 'LotteryApp', with an observable array of 'Lines', with a normal array of [5] ko observables to serve as my inputs or 'Number Boxes'. I'm using a template to display each 'Line' and a further template inside that to render the 'Boxes'.</p> <p>What I'd like is to call perhaps a jquery 'colour fade' plugin [red to bg color] on the textbox if the input isn't correct. But in the 'onBlur' function I've created, I cant find anything in any of the arguments passed to the function to help me call something like <code>myTextBox = jQuery(arguments.something)</code>, so that I can do something like <code>jQuery(myTextBox).colourFade()</code></p> <pre><code>&lt;input type="text" data-bind="value:n, event:{blur: $parent.onBlur }, uniqueName:true, disable: $parent.isLD" class="lotteryNumber" maxlength="2"/&gt; </code></pre> <p>is the code in my innermost template handling the onBlur.</p> <pre><code>self.onBlur = function()... </code></pre> <p>is the function I wish to call on the 'blur' event.</p> <p>I am aware that if I use a custom binding e.g. <code>ko.bindingHandlers.myBinding</code> then the 'element' is passed directly to the 'update' and 'init' calls, which I can then use to call jQuery(element).colourFade(), but this is more of an exercise in understanding how to access the element using the standard event bindings, because I can imagine I'll be needing it often and dont wish to do EVERYTHING in a custom binding, and also, with only 'init' and 'update' options inside a custom binding (to my knowledge), I dont think those will be enough (e.g. what about on 'keyup'?), and anyway, the custom bindings appear to be based on a ko.observable rather than an event itself.</p> <p>Summary :</p> <p>when using <code>data-bind="event : {blur : myMethod}"</code>, how do I, inside of <code>myModel.myMethod</code>, grab the html element that created the event.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USNnoel
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORetrieving element with jQuery inside knockout event
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORetrieving element with jQuery inside knockout event
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PORetrieving element with jQuery inside knockout event
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload