Saghir A. Khatri Saghir A. Khatri - 8 days ago 7
jQuery Question

Using Ruby on Rails tag in JavaScript

I have an html button in

html.erb
file. This button generates html controls and appends in table. It was working fine when there was no ruby on rails script involved. But now i have
select_tag
of RoR. This submits my page. My complete code as asked in comments is as follows:



<script type="text/javascript">

$(document).ready(function() {
$("#AddSch").click(function() {
var hidval = $('#valEdu').val();
if(hidval == 0)
{
hidval = 1;
}
else
{
//$('#valEdu').val(++hidval);
hidval++;
}

var rownum=$("#Controls > tbody > tr").length;
var updated_row_num;
if (rownum == 0)
{
updated_row_num=0;
}
else {
updated_row_num=rownum/2;
}
var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>" + input1 + " <%= select_tag('university', options_from_collection_for_select(@Universites, 'id', 'University'),{:prompt => 'University'}) %></td></tr>";
var control = "<tr><td align='center'><button type='button' class='btn_rmv'>Remove</button></td></tr>";

$('#Controls').append(newRow);
$('#Controls').append(control);
return false;
});

$('#Controls').on('click', '.btn_rmv', function() {
var index = $(this).closest('tr').index() + 2
$('#Controls tr:nth-child(n+' + (index - 3) + ')').remove();
return false;
});

});
</script>

<h2 class = "subtitle">
Education
</h2>
<%= form_for (:Educations) do |f| %>
<table width="100%">
<tr style = "text-align:center;">
<td>
<%= f.select :chapter,options_from_collection_for_select(@Chapters, "id", "Chapter"), :include_blank => "Chapter",:id => "DDL_Students",:style => "margin-top: 10px" %>

<%= f.select :University,options_from_collection_for_select(@Universites, "id", "University"), :include_blank => "University",:id => "DDL_Students",:style => "margin-top: 10px" %>
</td>
</tr>
<tr>
<td align="center">
<table id="Controls">
</table>

<div><input id="AddSch" value="Add" type="button" /></div>
<input id="valEdu" type="hidden" value="0" />

</td>
</tr>
</table>
<table width="92%">
<tr>
<td align="center">
<div class="button" style="margin-left:60px;">
<%= f.submit "Next", { :class => "buttonSearch"} %>
</div>
</td>
</tr>
</table>
<% end %>


Removing
type="submit"
changes it to textbox and if I use
type="button"
it never calls that javascript. How can I make it work?

Answer

there's two pointers that I can give you, I can't really reproduce as I dont have your model and controller action setup.

1. You do not want to randomly up or downcase your variables as in:

f.select :University,options_from_collection_for_select(@Universites, "id", "University"), :include_blank => "University",:id => "DDL_Students",:style => "margin-top: 10px"

Instead you want:

f.select :university, options_from_collection_for_select(@universities, "id", "university_name"), :include_blank => "University",:id => "DDL_Students",:style => "margin-top: 10px"

Ideally you wouldn't want the inline styles too, but we'll let that slip for now ;-)

2. I could the variable "input1" is not defined, have a look into your devtools console (F12) and check if there are any JS errors over there.

Hope that helps, Jan

Comments