How to encapsulate attribute directives? - javascript

I guess that it is a pretty common use case when building an Angular app to use input validation and also display messages to the user telling him/her what´s wrong with the data.
That said, suppose I want to encapsulate some already built-in directive, for example ng-maxlength, to add some default message to show when it is invalid, but I do not want to build it from scratch, while keeping my html as simple and objective as possible.
I could build a directive that has an input text as its template, but then I would have to build one for each case or treat every single permutation in one directive right? That sounds a bit messy to me.
Let me show what is my goal:
<input type="text" ng-model="model.description" ng-maxlength-with-message="[50, 'The description should not be more than 50 letters']"/>
That way I can pass the message and the max-length together so my directive can observe that error and display the message if needed. The way it shows the message is irrelevant (probably by appending some html and bind it with ng-show), the key here is to do that using the already well tested and established ´ng-maxlength´.
Did that make any sense?
Is it even possible to do it?

Related

How to get text boxes to except text added through JavaScript (Twitch TV chat)

So, I am trying to write a simple command chat bot for Twitch.tv chat, but I cannot seem to be able to get it to actually submit the text I add. Although I can add text and "click" the send button with JavaScript, it will not actually submit it.
For example, I can use http://www.twitch.tv/example to test it. Apparently it is not good practice on Stack Overflow to link to sites, but I do not know what else to do. I cannot recreate the problem in JS Fiddle because I do not know exactly what the problem is.
I can get these elements to seemingly work by using the Chrome console:
//finding the textbox
var textbox = document.getElementsByClassName("chat_text_input mousetrap ember-view ember-text-area")[0];
//then assign some text to it.
textbox.value = "Hello, World.";
This works fine and the text appears.
//to send it I should merely find a way to click the "send" button
var send = document.getElementsByClassName("button primary float-right send-chat-button")[0];
send.click();
Well, this does not really work. It only actually submits the text if I physically either type or use a character (like shift) inside the textbox, or physically click the button myself. So, from what I understand there is some sort of event that is triggered when I physically type and click. Unfortunately, I do not understand how to find/trigger this event through the console. This is what I want to do.
Preferably I would like to do this in pure JavaScript, but I believe it may be simpler in jQuery. If it absolutely has to be jQuery that's OK and I will just have to suck it up and learn.
As a side note, I was able to successfully use this (with the elements changed of course), for YouTube live streaming chat. However, several other websites' chat react similarly to Twitch. These include web skype.
I've spent the last few hours poking around Ember and Javascript to figure this out. I too was running into an issue where I had to either click into the chat area or the send button itself.
I thought I had a lead with a script made for Twitch Plays Pokemon which would send preset messages into the chat. It used Jquery to input the value into the textarea and click on the send button, but that no longer works as Twitch now uses Emberjs 2
I am not too familiar with the Ember framework, but it seems Twitch utilizes a Textarea component(in Ember terms), which associates some framework specific API to the Textarea HTML element.
Since the Twitch webapp is written with Ember, it would seem that using vanilla javascript to set the value of the textbox would not notify the property change to whatever observers are registered internally to Ember
The workaround would then be to change the value property via Ember internal methods. Luckily poking around the views associated on the Textarea DOM element gives access to the set method.
http://www.ember-doc.com/classes/Ember.TextArea.html#method_set
Ember.view.views worked pre-Ember 2 but was deprecated and now requires lookup
App.__container__.lookup('-view-registry:main')[document.querySelector(".chat_text_input").id].set("value","test");
document.querySelector(".chat-interface__submit").click();

How to implement a Tag Bar in javascript / css

I'm trying to implement a search bar for a web page having basically the same properties of the Tag bar appearing when you ask questions on Stack overflow:
It should have the following properties:
Allow the user to directly type in it.
Pull up entries with same letters as the user is typing.
Allow to delete an entry by either deleting on keyboard or pressing on inserted elements.
I'm interested in understanding the underlying structure of such an element and how to setup listeners and functions that call each other, not simply the code. Could anyone please help me figure out the skeleton of the functions I need to implement?
Besides just using a jQuery UI plugin, the simplest way to do it would be with a text input box and a ul. You can use jQuery (or something else depending on if you are using a framework) to listen to any change in the input box.
At that point you have a choice depending on the rest of your app: The filtering can happen in the front end or the backend. Because databases tend to be fairly quick, it might make sense to filter within it if you have a very large set of data. Otherwise, you could just grab the entire list and use JS to filter it.
Either way, have a callback occur on that change that initiates the filtering and then renders the results into the ul.

django add another field via js with one model field

I would like to add "add another field" and "remove field" button in django admin which results in to add/remove a text field respectively. And all these field should be concatenated(separated via some character) and assigned into one model textfield. How could I achieve this?
You're best bet is going to be to use Javascript. Have Javascript create the new field (or remove it) on button click. Let the user fill in the field as they need to. When they are ready to save you'll need to catch the submit (again using Javascript) and concatenate everything into the initial textarea field and then let it submit to the server where Django should handle it.
You'll also have to then have Javascript run on page load to check the textarea and split out the different sections of your textarea.
More or less that is how you are going to have go about it. If you're wanting to have someone write it for you then that would be a whole other discussion.
(I know it's easy to come along and say "why do that, that's not the best way". I often run into constraints where the best way isn't going to work, so I try not to knock others not knowing their constraints.)

Add a not-predefined amount of input boxes to a webpage (and use that with Google App Engine)

In GAE it's easy to set up an HTML page with 1 (or any other predefined number) of text input fields and then deal with the data you get. My question is how is it possible for a user to start with 1 text box, and using a button (like "Add more") to add any number of additional boxes he wants.
I'm not sure both about the HTML implementation of this (I think it'll require JS, but I'm pretty much a noob with these stuff), and the GAE implementation of this (How to write code that'll accept an arbitrary number of inputs?)
An answer to either would be very welcome; perhaps the GAE problem is not even a problem. It'll be easier for me to ponder on once I get the html/js part right.
The Answer depends on what size of information you expect. One option is an Expando Class where you add to it as needed.
Or the easier to implement if your input is small enough you probably can get away with a db.StringListProperty and use object.append(var) to add more fields in the post.
You will certainly need to use JavaScript to create the additional text boxes. Then loop through the submission in the post to add the data to either option.

Trying to access javascript elements inside a page

I hope someone can help me. I'm trying to access the text box inside a webpage so I can do some scripting, e.g. placing text in fields, checking a box and clicking submit, to automate my employees' workflow. It's confusing as heck because I cannot find the name/id/whatever that will allow me to manipulate the form. I can see the name of the field I'm trying to get at using Firebug ("history[comment]") and the id, if that helps ("history_comment") but no matter what I do, the form will not be manipulated. Based on the other scripting I've done, this Applescript:
do JavaScript "document.forms[1].history_comment.value='Testing';" in document 1
should do the job, telling the browser to put "Testing" in the appropriate field. I've substituted other names I think might be what it wants, and tried referencing any other forms (forms[2], forms[3]), all for naught. I'm actually confused a bit more because there are no statements in the HTML, so it could be I'm screwing up there.
I've posted an HTML dump of the form at http://images.jlist.com/testform.html (with dummy information of course) in case any kind soul can take a gander and give me some direction. My goal is to be able to put information into the Comment field. Is there a script I can run that will tell me the complete name (as far as the browser is concerned) of every element in the form?
if you can use jquery, then you can do it quite easily using the following command
$("history_comment").val("HELLO");
The JavaScript should be:
document.getElementById("history_comment").value='Testing';
document.forms is non-standard and, as is the case in your example code, fails if the element is not inside a form. This is fairly common in AJAX applications and another good reason to avoid document.forms.
What #Kikuchyo wrote, though it's actually strictly incorrect not to enclose form elements like textarea in a form tag. You'll also need that form tag if (as you suggest) you want to submit the form programmatically. Since you're already accessing that text box, you can get the form from that in your javascript function:
var thetext=document.getElementById('history_comment');
thetext.value='whatever you want to put in there';
thetext.form.submit(); // all form elements have a 'form' property
You can get at the checkbox state as document.getElementById('history_notify').checked; it's a Boolean value, so set it to true or false, and use it in conditionals directly.
Of course, if (as, looking at the form, you likely want to) you want an AJAX submit, you'll need to check out the documentation for whatever wrapper library you're using.
since your element is a text area, it should be done like this:
document.getElementById('history_comment').innerHTML = 'HELLO';
using innerHTML instead of value

Categories

Resources