lets say i've a form and in this form i would like to duplicate properties elements. now every property element is a div which contains some input elements. every time the user click on a button "add properties" i would like it to create another instance of this properties element
the question is where should i store these pre-made and yet to be shown to the user elements, in a way it would be easy to later modify it?
i'm using JS with jquery.
Will at least one property element already exist on the page?
If so, simply select it, clone it and store it for later use.
var el = $('.your-element').html().clone();
Then later you can make copies of it.
If your element doesn't exist on the page yet. You can still put it on the page in a div that isn't displayed and do the same strategy as above. Or use a "template" format such as jQuery templates.
I store them in a hidden template div at the bottom of the form like so:
<div id="field_template" style="display:none;">
<input type="text" name="prop_tpl" id="prop_tpl">
</div>
When the time comes to display it, I duplicate it in jQuery and set the name and id properties to prop_1 or prop_2 etc based on a counter of added fields.
Related
I got ten elements and I store them by querySelectorAll or getElementsByClassName(which return live HTML collections). Imagine they're all having the same class name, I got a PHP function to filter them, so currently, only three of them are generated by PHP once the page is loaded, as I init the filter function, the other elements then only being generated.
But the variable is still storing the initial dom elements which are the three elements originally shown before the filter. Now how do I update the variable so that they include the new elements that are newly generated like after the filter button is clicked?
I have an input of ng-tags-input with autocomplete.
The autocomplete can show "users", "organisations" and "Mailing lists" (which contains an array of users and another array of organisations).
When I click on a user in the autocompletion, a user tag is created.
When I click on an organisation in the autocompletion, an organisation tag is created.
But when I click on a Mailing List in the autocompletion, I would like to add every users and every organisations contained in the mailing list as individual tags. I've searched many ways to do this but I can't figure out how to do this last point...
ng-tags-input propose the function $removeTag to remove a tag but I haven't found any function to add a tag with Javascript.
I would be very grateful if anybody would have any clue!
Thanks!
You want to add tags into ng-tags-input. Which translates to - I want to mutate the model bound to ng-tags-input. Or, I want to push elements inside the array of objects which contains the tags. So you basically want to push objects into the model bound to your ng-tags-input directive.
<tags-input ng-model="tagsModel" >
You need to attach handler to the event when a suggestion is selected from the list. I guess the autocomplete feature itself allows you to bind a scope function to it.
Then, If it is the type 'Mailing List', then iterate through each element of selected array, contruct the tags (basically an object of form { text: 'value'} ) and push it into your tagsModel.
Hope it helps. If you attach a plnkr, I would be able to better answer this.
I have a script that sends a POST to a php file, and gets a new integer (primary key). Then the script creates 3 new divs, with that ID included in them as an attribute.
Now, I need to be able to grab the ID and give it back to PHP when the user updates it. (It's currently a div, but later it will be an editable form.)
I was going to do this by creating a button in the same script that I use to create the divs, bearing the same integer and calling a function. The problem with this concept, is that I have no idea how to create a Unique variable to pass along to the function, so it knows which number to look at. Obviously, if I have only one variable that gets overwritten with each new entry - after all of the rows load, only the last row will have a variable that matches its id.
Another option is to find the value of all attributes that bear the name data-integer-question and pass its number/integer to a function, when the user does something like keyup enter. However, I have no idea how to do that.
obj.returnIntJson holds the integer that I've been talking about, which changes for each row.
rowNumberObj.qarowcontainer is just a reference for the parent div, which doesn't get edited by the user - you can ignore it.
The script gives a result like this: <div id="questioncolumn" class="questionColumnCSS" data-integer-question="701"></div>
Suggestions on how to proceed? Here's the code for one of the divs,
Thanks.
qaRowQuestion = document.createElement('div');
qaRowQuestion.setAttribute('id', "questioncolumn");
qaRowQuestion.setAttribute('data-integer-question', obj.returnIntJson);
qaRowQuestion.setAttribute('class',"questionColumnCSS");
qaRowQuestionParent = document.getElementById(rowNumberObj.qarowcontainer);
qaRowQuestionParent.appendChild(qaRowQuestion);
This script worked:
$(document).on("click", ".questionColumnCSS",function() {
var questionUpdate = ($(this).data('integer-question'));
});
I'm building an application which has a D&D editor and deal with layouts (based on bootstrap) and multiple widgets.
Each widget has various parameters which are editable with a modal after clicking on the corresponding widget edit link.
I pass in the html generating the form elements for these params, base64 encoded through a data attribute like this:
Edit
I grab that string, decode it and append it to the modal box which spits out the form. This all works perfectly fine. As a sidenote, before I was just spitting out the form elements in a hidden div within each widget container, then grabbing it from there. The result was 75K elements in dom with a very few number of widgets and a 3 second delay on any click event, plus a generally sluggish interface (as you can imagine).
Upon clicking the save button for the widget, I need to get the html of the form elements that were appended to the modal WITH the updated values, encode it and update the widget data attribute with the new string.
That part works fine, but what doesn't is upon clicking the save button, it clones the modal form elements. That object which contains the originally appended form markup has the correct, updated values for each form element.
For example:
var tab_general = $('#modal-widget-CSS-Params-tab_general');
var test_update_value = tab_general.find('input[name="widget-videofakeout[1371898762][content]"]').val();
console.log(test_update_value);
The result is the proper updated value, so I know the it has the proper data that I want inside.
But if I create a new dom element with the by cloning this object and attempt to use jQuery's html method to get the new, updated html string of said clone, like so:
console.log($('<div>').append(tab_general.clone(true, true)).remove().html());
All I get is the original appended html with the original input values.
So my question is, is there any way to get the html string of a cloned object with the updated input values? Or am I going about this all wrong?
Here's a very basic example of what I'm trying to do, but as per the first comment below, it seems I'm totally off-base: http://jsfiddle.net/6LyMK/2/
So i have this html:
<select id="CompanyMultiSelect" name="CompanyMultiSelect" multiple="multiple">
</select>
and i have JavaScript that dynamically fills it up with data. The data is filled with, among other things, inputs that have id's. They are generated dynamically, so i don't know them until the page is loaded.
i need to select the id of all the inputs within the select so that i can parse their values to another location, and i want to do it with either JS or jQuery.
how would i go about selecting all ids as an array to use later on?
EDIT1:
The select segment is a placeholder for a plugin that creates a dropdown menu filled with checkboxes, so the fact that inputs are within a select shouldn't bother you :)
Suppose you already have a jquery, so you can do something like this:
var ids = [];
$("parent_element_selector").find("input[type=checkbox]").each(function(){
ids.push(this.id);
});
//here ids will be filled with ids of checkboxes.
Please note that parent_element_selector can't be #CompanyMultiSelect as select element can't contain inputs, so your plugin will create a new wrapper element. You need to figure out how you can get it with firebug or dev tools
getElementsByTagName returns an array of elements.