I have a list of input objects in my DOM, each with a button. When the user clicks one of the buttons, a dialog box is AJAXed. I would like to pass a reference to one of the input objects, depending on which button is clicked, to the dialog box. This way when the dialog box "Okay" button is clicked, it knows which input to manipulate on the original page.
Have I lost you yet? So how can I pass this input node reference to the AJAXed dialog box?
I am trying to steer away from using a global variable to store the node reference. I also do not want to have to give each input a unique id or name as this would force other areas of my code to become more complicated.
I suspect I will end up having to use one of the above solutions, but before I do, is there some way to pass a node reference via an URL without using the node's id or name? Would I have to use a selector index or something?
Note: Using JQuery.
In my opinion IDs would be the most secure way of identifying nodes.
If you don't like this approach then all is left is using structure to identify elements. A generated path string containing parent hierarchy and child element position would probably do the trick. This question about identifying DOM nodes also contains some tips. The consensus there is to use XPath or something alike. This of course will only work if the structure of your page doesn't change too much.
Personally, I like IDs :)
Related
I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.
I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).
These are the ideas I'v tried so far:
Using the rangy serializer to serialize the range. The problem with
this approach is that the DOM is changing each time a new
comment/suggestion is added, and therfore not allowing for a
successful deserialization.
Using the rangy selection wrapper and save that directly in the
database, but like the idea above, the target elements content is
changing with each comment/suggestion, which again makes the approach
not work as intended.
Any suggestions to how I could solve this problem would be appriciated.
I haven't used rangy. But here is one way I would approach it.
Get a selected text from a element (tutorial here)
Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)
Then show a form to enter comments.
On Submit, send the span id and comment to server and store it in database.
When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.
This will give you a system like google document where you can comment on text.
Let me know if that helps or you need more explanation on how to accomplish individual steps.
Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.
I've been creating a calender box widget (one of those little div-popups that allows you to select a date).
All's pretty much done on it short of one feature: When you create the object, you send it a field (the field that will contain the date); because of a (really) weird set of requirements, this field cannot have an easily readable format (YYYYMMddhhmmss) and so my script hides the field, and drops a div with similar styling in its place. I haven't found a way to neatly drop a div in as a sibling to the field AND right next to it (as opposed to appended at the end of the parent).
How can I take a field by ID as an argument, hide it, and drop a div in it's place at the same location?
If I could drop it, in the HTML, directly after the field, I could copy it's CSS over to the DIV (or a new field, even) and no one would be the wiser; references to the old field would still be valid, and humans could easily read the new field, but as is, the best solution I've found is to have the object take two parameters, one for the target field and one for the target div. It's not ideal.
jsFiddle: Full Project (I'm so, so, SO incredibly sorry for the widget's name. It's bad even by pun standards.)
jsFiddle: Simplified Example (Includes chosen answer)
PS:
I only have one real goal in this project: to minimize dependencies. This widget is replacing an old one my company used for ages which, over time, accumulated a dozen and a half modifications (each in different files) and needed at least as many style sheets and existing plugins. No one really knew what was going on with it. As is this one needs only jQuery, no other scripts, no other style sheets...
...I'd like to keep it that way...
http://api.jquery.com/after/
$('yourelement').hide().after(newDiv)
Hopefully a straight forward one:
I would like to write some javascript code to receive multiple inputs for multiple variables from the user. A bit like a prompt but for three options (so kind of like 3 prompts on one box).
Suggestions for the best way of going about this?
Create a form with necessary fields and place a JavaScript handler on its "submit" button.
Either create it in HTML and query elements by their ids or create directly with DOM methods from JS - you'll have direct references to elements from beginning.
I am making a web page. It has some input fields grouped into one section, and then below that section is an "Add another" button. That button will add another identical section to the page using JavaScript; the same form fields.
Then later down the page there is a "Calculate" button. It runs some other JavaScript which needs to have access to these input fields via jQuery.
What is the recommended way to have multiple duplicate input elements on the page? I am aware that there shouldn't be two elements with the same ID, but what happens with two elements of the same name? Can they be accessed individually? Or should I name these input elements differently with JavaScript, e.g. adding a "1", "2", etc. to the end of their name, and then use loops? (that seems messy)
How should I identify and access these identical groups of input fields?
You can use the document.getElementsByName('name') and then loop over the result to get each value.
As long as they have differents ids they can have the same name without trouble.
When you submit them, the server will get repeated name/value pairs and needs to be aware of that in processing them. Different languages differ in how they do that, you'll have to consult appropriate documentation for how to do it with whatever you are using.
What is the recommended way to have multiple duplicate input elements on the page?
Just do it.
I am aware that there shouldn't be two elements with the same ID, but what happens with two elements of the same name?
Any methods available to JS for accessing them by name will give you a collection instead of an element. You can access the individual elements within just like an array (including looping over with for and collection.length).
Can they be accessed individually?
If you are accessing them by name, then you can use their index. (collection[0]).
You can also give them ids if you want to access a specific one.
If you want to link elements together and have them refer to each other, then you can use the DOM structure to help you.
For a very simplified example:
<div>
<input>
<button onclick="alert(this.parentNode.getElementsByTagName('input')[0]);">...</button>
</div>
Obviously, in a real world situation you should use unobtrusive JS and build on things that work.
You can give the name as an array
ex:
<input type="text" name="textBox[]"/>
You can append the same form on clicking "Add Another" Button. You can access them using textBox[0], textBox[1] etc.
Is it possible to have a javascript bookmarklet to add in a new input box into an existing page? Basically I need to have a prompt box to save a variable but I don't want it to pop up, I want it just in the page so I can then have it filled out and submit so the variable can be used in another piece of javascript. Its kind of confusing, lol, but just wondering if this is possible.
Thanks
Yes, it's possible.
For example:
javascript:void(document.body.appendChild(document.createElement('input')));
would simply append an input-box to the document's body.
The void() is needed because of appendChild() has a return-value, so if you dont use void, your location will be forwarded to that return-value.
You can add attributes like you usually do in Javascript.
Save the created element into a variable, and then assign the attributes.
An example, how to do this:
javascript:void((function(){var obj=document.body.appendChild(document.createElement('input'));obj.value='someValue';alert('It works, value is \n'+document.body.lastChild.value);})());