We Keep Coding

Getting Select2 Gem to work with ActiveAdmin "Add New" Button

I have a RubyOnRails Application that uses the ActiveAdmin and Select2 Gems. Right now, I have made a search box that after typing two letters, shows possible options from the set given. Here is the code for that:
f.has_many :location_permissions, :allow_destroy => true, heading: 'Users With Access To This Installation' do |app_f|
app_f.input :user, :input_html => { :class => "user_select" }, :collection => User.all.map{ |user| ["#{user.name} (#{user.email})", user.id] }
end
This also creates an "Add New" button below. When the button is clicked, a regular ActiveAdmin dropdown menu appears, but I want the Select2 search menu created above to show up. How do I do this?
Here is the user_select function:
$('.user_select').select2({
minimumInputLength: 2
});
If I click the add new button, so it creates a new form, save that empty field, and then refresh the page, the new form becomes the Select2 search form I want. This leads me to think that Select2 applys its JS and CSS on page load, so is it possible to load that part of the page again through AJAX or some other mechanism? I have no idea how to do so, so if anyone could point me at a resource to do something like that, I would appreciate the help.

I ended up getting it to work with the following code:
$(document).on('has_many_add:after', ->
$('select.user_select').select2({
minimumInputLength: 2
})
)
This is in Coffeescript but the Javascript form of this is very similar, replace the "->" with function(){} . ActiveAdmin has an EventListener called has_many_add:after that is called some time after the button is clicked, and you need to execute your code after this. The code above works since the event can still bubble.

Yes, typically select2 is initialized at page load, which is exactly why you're seeing the behavior you described.
What you're going to need to do is wrap the initializer in another function that gets called after you click the 'Add New' button. I'm unfamiliar with ActiveAdmin, but assuming it's just an AJAX request to add to the form, something like this should work:
$( document ).ready(function() {
setupSelect2();
});
$( document ).ajaxComplete(function() {
setupSelect2();
});
function setupSelect2() {
$('.user_select').select2({
minimumInputLength: 2
});
});
Put all of that in some external js file, include it in application.js, and see if that solves your problem.

from the solution provided in this ActiveAdmin issue
we see how to call javascript / jQuery using ActiveAdmin, for a one off use. Other answers provide ways to include .js files into the ActiveAdmin config.
here is a code snipit for implementing the OP's own solution with Arbre the HTML builder syntax that is used within ActiveAdmin:
script do
raw %(
$(document).on('has_many_add:after', () =>
$('select.user_select').select2({
minimumInputLength: 2
})
)
)
end
This felt helpful since for those who may not be familiar with how to implement JS in ActiveAdmin pages as an option to implement the selected Answer.

Javascript focus does not work on dynamically loaded input box

I have a HTML markup in a template which has input element. I load it via Ajax call and put in existing html using jQuery's $(selector).html(response).
Basically it is a pop up box which loads from template. After loading pop up box I want to set focus on input box. I've written this code :
$("#prescribe-input").focus() after content is appended in existing HTML but it does not work. I tried doing it in traditional javascript way too document.getElementById("prescribe-input").focus()
Both do not work. For testing purpose I tried creating sample input box in Index.html of an app and set focus. it works perfectly. The problem is when I load html from template using $().html() it does not work.
Any way to focus it properly?
I know the code is very less here but the question is self explanatory I believe.

if you are using jquery then you can use .on() on dynamically generated elements
$("#prescribe-input").on( "focus", function() {
//do what ever you want
});

You should do this in the callback function:
$(selector).html(response, function(){
$("#prescribe-input").focus();
})

Loading HTML forms through php then using JQuery to submit forms

I have a dilema which I'm unsure how to approach right now. I know that JQuery needs to have a unique set of ID's to be called in the document ready function. I go through PHP and read my mysql table to print out these HTML forms and with each form is a button that will add a new item to this table.
The issue here is that I cannot have an idea of how many forms there will be so I would like to write the JQuery code so that it can dynamically read anytime that the button is clicked, but know which button was clicked so that the proper ID's can pass.
I've seen some examples but they have more to do with CSS styling, are there any ideas or thoughts as to how this problem could be remedied?

If you are writing out the forms in a for loop with php you can assign each submit button an id using the iterator, like submit_1, submit_2 etc and then you can have an on click handler in jquery using a selector contains, something like:
$(document).on('click', 'input[id*="submit_"]', function() {
//code goes here
alert( $(this).prop('id') );
});

Is it possible to show and hide sub form onclick in a Zend form

Just wondering whether is it possible to show and hide a subform within a zend form on either a radio check event or button onclick event. As I have a form with user field elements and now I want a sub form with password elements which will give the user the ability to optionally change their password. However I only want to show the password elements on request (ie: click a radio button 'Change Password' and the change password elements appear).
Is this possible with Zend\Form or would I need to use client side javascript to show and hide the elements?

It is possible but that kind of thing is client side so you need to use javascript in order to do it. Personnaly, I like to use jQuery for that kind of stuff, it makes it a lot easier. Here is an example on how you could do it.
class My_Form extends Zend_Form {
$field = $this->createElement('select', 'myselect');
$field->setLabel('Choose to display the form or not');
$field->setMultiOptions(array('1'='Display', '2'=>'Do not display'));
$this->addElement($field);
$field = $this->createElement('text', 'optionaltext');
$field->setLabel('This is an optional field');
$this->addElement($fiel);
}
Now, in your layout, you should include jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
And finally, you should include another .js file (or simply embed the code in <script> tags on your page).
$(document).ready(function() {
$(function() {
//Function triggered when changing the value in the drop down
$('#myselect').change(function(event) {
if($('#myselect').val() == 1) {
//Show elements
$('#optionaltext').show();
//The following line shows/hides all the dd/dt wrappers as well
$('[id*=optionaltext]).show();
} else {
//Hide elements
$('#optionaltext').hide();
//The following line shows/hides all the dd/dt wrappers as well
$('[id*=optionaltext]).hide();
}
});
});
});
Now please keep in mind that I haven't tested the code and I just wrote that on top of my head before I actually finished my first coffee of the day so... it might have a few bugs. This being said, it should be a good start for what you want to do. Please just ask your questions here if there is something missing or if there is a bug you can't find. Hope this helps !

Passing a dynamic text input into a link via javascript

So i've been at this for hours and havn't figure it out and I know there is an easy solution so I figured I would ask here. I am trying to pass the value of a text area into a link as part of a twitter share button. I think the problem is with global scopes I am able to get the variable from within my external javascript but not from my main php file. For example.
Here is the html:
<div id="share_twitter">
Friends Twitter Username (optional) <input type="text" name="friends_twitter" value="#" />
<script type="text/javascript">
window.document.write('');
</script>
Then I have the Javascript in extenral.js which is suppose to get the value of "friends_twitter" and send it back to the main page which will allow me to make a dynamic link to that persons twitter.
I tried this var friends_twitter_input = $("input[name=friends_twitter]"); but got undefined if i do window.friends_twitter_input = $("input[name=friends_twitter]"); it works a bit better but still not as intended.
I also wrote code to detect key change which works but only if it's placed inside of external.js
I may be going about this all wrong but I can't seem to get it staight. Anyhelp would be great.
Update
I'm getting the error "friends_twitter_input is not defined" in firebug but not sure why
inside custom.js
$(document).ready(function(){
var friends_twitter_input = $("input[name=friends_twitter]").val();
$(".twitter-share-button").click(function() {
var friends_twitter_input = $('input[name=friends_twitter]').val();
});
}
inside index.php
<script type="text/javascript">
window.document.write('');
</script>
I think i need to not write the share link until the input has a value or define the value as null.
Thanks for all the help.

Not quite sure about the structure of all your code but a few things that may help.
To get the value from the input button this is the code you need.
var friends_twitter_input = $("input[name=friends_twitter]").val();
Also make sure that the code that tries to read the value of the input text is executed after the input text is in place.
To execute your javascript after the page load use this:
$(document).ready(function() {
//All your javascript here.
});
To hook up to the oncahnge event of the input text do this (inside the ready handler)
$("input[name=friends_twitter]").onchange(function() {
var friends_twitter_input = $(this).val();
});
Please note that the code in the onchange event is just for demo purposes you should probably want to use onblur or better hook up in the onclick event of the submit button.