We Keep Coding

How to create a jQuery click handler based on a matching pattern?

I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/

Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});

JQuery not working in html.erb file but works in Console

Alright, so I have searched through a lot of relevant questions and tried the solutions, however, I am still unable to get this to work when I load it from my local machine using Google Chrome but it works when I copy and paste the script that is loaded in the browser page into the console.
I have a script as such in the html.erb code:
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click","#<%=parent_question.id%>_<%=trigger_option%>",function() {
if($("#<%=parent_question.id%>_<%=trigger_option%>").prop('checked', true)){
<% for i in child_options %>
document.getElementById("<%=child_question.id%>").style.display = "block";
document.getElementById("<%=child_question.id%>_<%=#option[i].id%>").style.display = "block";
<%end%>
}
});
});
</script>
Basically what this code does is dynamically creating scripts to display following questions and input fields depending on whether or not the someone selects Yes in the radio button from the previous question.
The following is a sample of a script when outputting into a browser:
$(document).ready(function(){
$(document).on("click","#17_43",function() {
if($("#17_43").prop('checked', true)){
document.getElementById("18").style.display = "block";
document.getElementById("18_45").style.display = "block";
}
});
});
And the following HTML inputs and thingies it controls:
<p> Hello there :) </p>
<fieldset id="17">
Yes
<input type="radio" value="Yes" name="17" id="17_43">
No
<input type="radio" value="No" name="17" id="17_44">
</fieldset>
<p id="18" style="display: none;"> Thanks for helping!!! </p>
<input type="text" id="18_45" placeholder="HELLO" style="display: none;">
Any kind of help is much appreciated!

First, have you checked if the tag is correctly populated where <%=...=> is placed?
Second, this isn't an answer to your problem, but I think you should use a different structure to do this.
Like on your html instead of rendering divs with "ids" of numbers, you would render divs with a class like "question" and add a data attribute such as "data-id", with data-id reflecting the question id to whatever fields, or "mark" the inputs with an id such as "checkbox_#{id}"
Then you can have a js file:
$('.question').on('click', function() {
var id = $(this).data('id');
if ($('#checkbox_'+id).prop('checked', true)){
document.getElementById('p_'+id).style.display = "block";
document.getElementById('input_text_'+id).style.display = "block";
}
});
If you're adding the questions and whatever dynamically, you might want to make a function that binds the click handler, like:
function bindQuestions() {
$('.question').on('click', function() {
........
});
}
Then whenever you load new elements into the dom you can run "bindQuestions();"

I think I fixed it, thanks to gaetanoM for pointing it out.
I had some conflicting IDs in the HTML code that I had not noticed causing some conflicts in executing the scripts, following that I noticed that due to that, part of my code which does the opposite when selecting the radio button that hides the input and question fields conflicted with the ID's and such.
Thanks so much for all your help!

Pressing Button Increments data then push to Multidimentional Array

I have this problem regarding about when I pushed the button it adds another element plus the name of the element also increments well in array, kind of hard to explain but I'll provide some screenshots.
I searched through this site saw a bunch of solutions and whatnots, unfortunately I can't seem to apply it on my problem.
Here are the screenshots of what is my desire output.
If I press the Add button, another fieldset would show up above it
The result would be
So if I press the "Add" button again, it would show up another never ending cycle of fieldset with corresponding incremented input type names.
Code:
Layout of the Fielset
<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus">
<div class="condition">
<div class="clear"></div>
<div>Label</div>
<div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div>
<div class="clear" style="padding-top:5px;"></div>
<div>URL to Like</div>
<div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div>
<div class="clear" style="padding-top:5px;"></div>
</div>
</fieldset>
Code to initiate the function
<a onclick="fb_likeus_add();">Add</a>
function fb_likeus_add() {
var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>';
$("#fb_likeus_td").prepend(fieldset_data);
}
The main problem is on when I press the add button how to increment the names of an input element while prepending the data to the div, I have no idea on where/what to start with. But I've thought of something what it should look like.
Array = [
div1 ['name_1', 'url_1'],
div2 ['name_2', 'url_2'],
div3 ['name_3', 'url_3'],
div4 ['name_4', 'url_4'],
div5 ['name_5', 'url_5']
and so on, it increments when you click the add button.
];
It's kind of hard to explain, still hope you guys understand my problem.
Would be glad if you guys help me, it means a lot. Thanks in advance.

One solution to this is to have a hidden 'template' div somewhere on the page that contains the markup that you want to insert. In this specific case the markup is relatively simple, so you could get away with just storing the template markup as a JavaScript string, but that's generally less maintainable over time than using a hidden div on the page.
In any case, once you have your template markup, you just need to add a small amount of JavaScript code to keep track of how many times you've added a new fieldset to the page. With that, you can update your fb_likeus_add() function to perform a simple string-replacement on the template markup, inserting the correct sequence numbers before you prepend it to the div.
That may sound a bit involved but it really takes very little code:
//initialize this when the page loads
var numAdded = 0;
function fb_likeus_add() {
//increment the counter
numAdded++;
//grab the template html
var templateHtml = $("#template").html();
//write the new count into the template html
templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded)
.replace(/url_/g, "url_" + numAdded);
//prepend the updated HTML to the document
$("#container").prepend(templateHtml);
};
Here's an example: http://jsfiddle.net/Dw8e7/1/

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});

Try this:
$('.table input:checkbox').not('div.checker input').uniform()

Javascript not Working in Rails app page

I have a javascript a portion of this is as given below which on clicking an anchor tag with class to_comment will show up text box within div classes mentioned in the js.
$(".to_comment").live("click", function(){
$(this).parents(".activity_content").find(".activity_new_comment").show();
$(this).parents(".activity_content").find(".input_new_comments").click();
$(this).parents(".activity_content").find(".input_new_comments").focus();
return false;
});
I have this simple anchor tag in a page in the slim file as :
= link_to("Comment", "#", :class => "to_comment")
And I have hardcoded the text area to appear in the div tag in a _new.html.slim partial as follows:
.activity_new_comment style="display: block;"
.actor_logo_new_comment style="display: none;"
.activity_content
.actor_name_new_comment style="display: none;"
form#new_commentactivity_22.new_comment accept-charset="UTF-8" action="/comments" data-remote="true" method="post"
div style="margin:0;padding:0;display:inline"
input#comment_owner_id name="comment[owner_id]" type="hidden" value="2"
input#comment__activity_parent_id name="comment[_activity_parent_id]" type="hidden" value="22"
.input_new_comments_container
textarea#comment_text_activity_22.input_new_comments cols="40" name="comment[text]" rows="1" style="color: rgb(102, 102, 102);"
#copy_comment_text_activity_22.copy_new_comment Write a comment...
.activities_comment_btn style="display: none;"
But the hyperlink on clicking doesnt load the text area in the corresponding div tag from the partial. The js file is loading in the browser and a sample alert is also working !!

Try putting your Javascript code in a block
$(document).ready(function() {
// code here
});
to ensure the code gets executed after the dom is loaded completely. Otherwise it may happen that your HTML is not loaded completely when Javascript it trying to find elements having the to_comment class.

The first thing I notice is that .actor_logo_new_comment is set to display: none, yet there are no calls to show it in your code. Note that calling .show() on an element won't show all of it's children - you'll need to call .show() on the hidden elements directly.