Develop Reference

JQuery, Creating form inputs via button not working with form list

so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue

alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.

Table in AngularJS app with many "select" elements built with ng-repeat takes very long

I have a table with variable number of records (could be up to hundreds) where its body is build with one ng-repeat.
Within each record, there are two input fields of type select where their contents is also built using ng-repear and the number of options for each is about 100.
This is working right now, except that it takes a lot of time for the page to be built (several seconds; I guess due to the large number of html records that AngularJS is adding to the DOM).
Here is an example of one of the selects:
<select class="form-control" ng-model="One_Source.Measuring_Method_Code">
<option ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods"
value="{{One_Method.Value}}"
title="{{One_Method.Test_Method_Name}} | {{One_Method.Method_Internal_Name}}">
{{One_Method.Value}}
</option>
</select>
Two questions:
Is there a simple way to speed up the page building process?
As shown in the example, each option in the list has a title clause displaying a detailed description of the option's meaning. How can I add a title to the select showing the description of the current value?
For the first question I was thinking about building the list of options for each select element only upon clicking on it, but I'm not sure if that would be the best way to do it.

Try using one time bindings so that Angular doesn't watch the value by prefixing it with ::. It can also be more efficient to use track by in your ng-repeat if each row has a unique value, like an ID.
<option
ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods track by One_Method.id"
value="{{::One_Method.Value}}"
title="{{::One_Method.Test_Method_Name}} | {{::One_Method.Method_Internal_Name}}"
>
{{::One_Method.Value}}
</option>

If you still can't gain the performance you're expecting from #doublesharps's answer, you will have to implement one of the following:
You could build a custom list that has a 'load more' button which would destroy say the first '50' options and load the next 50.
A better option would be to turn this into an autocomplete, where the user searches for values.
Virtual repeat - Something angular material does really well, it constantly draw's and re-draws new elements based on the scroll position inside the element.
Other resources:
http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
https://github.com/stackfull/angular-virtual-scroll
http://klajd.github.io/angular-virtual-repeat/#/Home

I found a PARTIAL SOLUTION that still needs to be polished but is quite promising.
During creation of the page, I do not make use of ng-repeat for the options but instead deploy a single option with the value received for the field from the database (if any, otherwise the select element is left blank).
When the user clicks on the select element a $scope function is invoked that checks the number of options within the select element and, if less or equal to 1, the inner HTML of this select element is re-generated and deployed.
Though clicking on all these select in the page will take (accumulative) a comparable time as when built upon load, this time is distributed over several events (the user clicking on all the select elements) and hence it is not perceived by the user.
Now, by polishing I mean that there is a strange behavior. In order to see the generated list of options, I need to click on the select twice. Will keep investigating this and post the solution (hoping I find one).

Select2 loading page with existing value

Trying to load an edit profile page for a musician site. There is a select2 box that lists the instruments that the user plays, and it pulls this information from the database. But I can't figure out how to get the existing instrument list to display on the select2 on render, it always displays as an empty select2 box (the actual search and select functionality of the box works).
(this is coffeescript in meteor)
On render, it runs:
populator = Meteor.user().profile.instrumentsPlayed
$("#e9").select2()
the populator variable defines properly and has a value of
["acoustic guitar", "piano", "ukulele", "piano"]
I've tried many variations including:
$("#e9").select2("value", populator)
None of the variations worked, and I have a hard time finding and implementing the exact thing I need from the select2 documentation... can someone point me in the right direction?
Summary: need to load select2 box with existing data instead of just empty select2 box

See the documentation here: http://ivaynberg.github.io/select2/#programmatic
They use "val" and not "value" to programmatically set the values.
Try this:
$('#e9').select2();
$('#e9').select2('val', populator);
edit:
Perhaps the confusion was the select2() should be called before select2("val",...).
Here is a jsfiddle http://jsfiddle.net/JFMbt/ showing both methods (comment out one of them)

Dynamicaly input values into webdatagrid rowadding

I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you

Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.

RoR + How to refresh Javascript value when Ajax refreshes the textbox value

In my web page, I am using ajax + RoR to refresh the contents of the textbox using searchtool. All the value I am accessing, such like superset value for the current page. Means for example there is headquarter and it has many stations. When I am trying to access the value of headquarter at station then corresponding values changes at textbox.
Here, we are displaying the global value of head-quarter, due to less space I am showing telephone number and its quality on Tool-Tip. When page changes the value of station then whole contents changes but the tooltip remains same.
Sample of code:
<div class="divFloat" id="populate_phone1" onmouseout="UnTip()"
onmouseover='Tip("<%=GlobalPartnersHq.globally_phone_type(#station_hq.is_global_phone1, #station_hq.phone1_type_id) %>")' >
<%=GlobalPartnersHq.global_phone(#station_hq.is_global_phone1, #station_hq.phone1)%>
</div>
How can I refresh the JavaScript onmouseover value when ajax updates the value of textboxes?

I'm not following your code entirely, but it sounds like Ajax is updating the DOM and you want to trigger some additional code. What I recommend is that you emit a custom event and write separate handlers. If you are using jQuery check out trigger docs. You can do something like $.trigger('myEvent') then bind multiple handlers to it (e.g. $('selector').bind('myEvent', function() {});) to update various parts of the page.