In my rails form i want to get mobile/contact details of a user. It could be more than one. How can I add text boxes dynamically once the user clicks the "add more" button.
To do this you will need to do some javascript and some ruby code to get working .
First on click of Add More,you need to show a partial already hidden inside your view.If This needs to be dynamic,then you need to call an ajax and then load the partial in a predefined placeholder
for example:-
load partial in advance in our view and hide it first
<div id="user_contact_details" style="display:hidden;">
<%= render(:partial => 'user/contact_details') %>
</div>
######Now,ON CLICK of the Add More button,show this hidden partial using js
##add more button
Add More
$('#add_more').click(function(){
##toggle partial placeholder
$("#user_contact_details").toggle('slow');
})
...the same can be done using ajax,you can also load partial using some conditions such as if user has more than one contact details..then load another partial with different form than previous one...
Although..this might not be the unique solution,but atleast you can have an idea of how it can done.
I did this for you in JSFIDDLE, please refer this from my JSFIDDLE.
http://jsfiddle.net/Manoj_Menon/eyxt6kjh/
Related
I am trying to figure out how can I use the button value from view to corresponding controller. I have three button which I have grouped them. Based on user selection, I want to do different functions (eg: List the task, form to add the tasks..etc). For that I want to pass the button value to the controller.
<div class="btn-group btn-group-justified">
Task Lists
Task Category
Add Task
</div>
I am not sure if there is better way to do this than button groups. I am not familiar with javascript also.
To make it clear, I have user information on the left side of the page which is already designed. These buttons are on the top of the right side of the page. Upon selecting the buttons, right side of the page should change/reloaded based on the selection.
You can try following
<div class="btn-group btn-group-justified">
Task Lists
Task Category
Add Task
</div>
You can use links to go to the controller action you want (if I understand your question correctly). You would use the paths/routes to the specific action you want. It would look something like this:
Task Lists
Or you can do it in rails direction, using the link_to method:
<%= link_to "Task Lists", tasks_lists_path, class: "btn btn-primary" %>
Again, this depends what the routes you are using are. If you want to pass parameters with the link, it gets a bit more complicated, but not much.
For more information: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
One option is triggering an ajax post request when the button is clicked and send the data to a particular controller action.
Could also just pass params through a link_to.
Pretty stumped at the moment trying to figure something out. I have a modal that shows a table, and for each of the entries in the table, I have actions (i.e., show, edit, delete, etc). When the user clicks on "Edit" for an entry row in this model, I want it to populate another model with a form to show the data associated with that entry.
Is there a convenient way to do this? For one, I do not know how to pass a parameter to a modal from another modal. I don't know how to make this form "reinitialize" after it's already been rendered when the first page is loaded.
Any suggestions?
I have been in the same situation and I suggest that you just keep the one modal and replace the contents through AJAX (IMO). Once you have rendered into the modal in the first place, your links can then just render as AJAX the same way that they would and overwrite the information inside the modal. The way I did it was this:
Populate the modal (you've already done that).
Create a link = link_to "Text", "url", remote: true (let's say this is the edit action).
Run the edit action in the controller as usual.
The edit.js.erb file would contain one line: $('#Modal_content').html("<%= j render 'edit' %>") (#Modal_content is just a div that I put in my modal so that I can replace all the contents without messing up the close button and other modal required html).
The _edit.html.erb file is called where you would put all of what you needed that comes from the edit action.
As for passing information, the id is passed through the link that you click on to call the controller#edit action.
Let me know if you need more details, but that should get you most of the way there.
I am a newbie to RoR, and I was using Chartkick with HighCharts to display some graphs from my sqlite database. The graphs are daily and weekly, so I have two .erb-s with the query for each of them, and I want the index.html.erb dynamically change between them in my with a click of a button.
This is the code from the daily_graph.erb:
<div><%= line_graph Product.where(date_time: "2014-03-03 00:00:00".."2014-03-03 23:45:00").group(:date_time).sum(:value) %></div>
This is the code from the weekly_graph.erb:
<div><%= line_graph Product.where(date_time: "2014-03-03 00:00:00".."2014-03-09 23:45:00").group(:date_time).sum(:value) %></div>
How can I manipulate with these views in my index.erb, so when I click the WEEK button, daily_graph will disappear, showing weekly_graph, and the contrary.
Two things:
1) Keep the views dumb. Do the SQL query inside the controller, and set it as a variable that the view accesses. So, it would be:
# Inside your controller
def index
#daily_products = Product.where(date_time: "2014-03-03 00:00:00".."2014-03-03 23:45:00").group(:date_time).sum(:value)
#weekly_products = Product.where(date_time: "2014-03-03 00:00:00".."2014-03-09 23:45:00").group(:date_time).sum(:value)
end
Then your view would just be:
<div class="graph"><%= line_graph #weekly_products %></div>
<div class="graph hidden"><%= line_graph #daily_products %></div>
2) the .erb file is used for server-side templating, so switching back and forth would need to happen on the client side. You can have both graphs on the page and use an event handler to disable / show the respective graphs when the button is pushed.
On the index page, lets say you have <button id="flipGraphs">Change</button>
Using jQuery, you can do:
$(function(){ // If you are not familiar with jQuery, this will run when the page is loaded and ready
$('#flipGraphs').click(function(){
$('.graph').toggle(); // toggles all of the divs as hidden / shown
});
});
Also, add this to your application.css file:
.hidden{
display: none;
}
You want to turn those ERB views into partials... then you can make a new controller action that renders the particular partial your interested in, and you can fetch that controller action with jQuery ajax calls... see: Rails: Rendering Partials through Ajax for more examples
Also conventionally you would not execute model finder methods in the view ... set controller instance variables and reference them instead... this will lead directly to an overall more DRY result.
I am trying to implement two pages. The first page being a selection of the items I want to show on the second page.
On my first page, I have done a selection of the items which I want to render.
On click of a button, 1. the ids of these items will be placed in an array and 2. the user will be redirected to a new page through:
window.location.replace("/schedule");
Right now, I want to achieve the following:
Do an ajax call through rails to get each of the array items. i.e. make an ajax calls to the urls of myclass/[id]. The id belonging to the items in the array.
I am not sure how I could get my array items from the current page to the next page or if there is a better way of achieving this. Any advice or suggestion will be greatly appreciated.
Add :remote => true to your form. Then, app will render your action_name.js.erb view instead of action_name.html.erb. In js file you can put code, which will repleace div without redirection, f.e.
$('#div_id').html('<%= escape_javascript render(your_partial_name) %>');
You don't need to do anything special in partial and controller action, its all the same.
I'm using same partial view in create.aspx view page twice, part of my code is:
<%Html.RenderPartial("LocationVerifyControl"); %>
<%Html.RenderPartial("LocationVerifyControl"); %>
In the mvc view user controls, it had a button and test code for it:
$('#btnVerify').click(function() { alert("clicked by btnVerify");}
I watched the warning dialog pop up twice when clicked the button, the main view page had contents with same ids. How to solve this kind of problems? To prevent same ids in main view page, put my using html ids in the view data and pass them to partial view?
If I understand your question correctly, you are looking to add unique functionality to two different buttons with the same id.
It's not really valid to have more than one element with the same id. If there will be multiple you should just make it a class. You might want to first run your markup through W3C Validation.
Second you can do this by wrapping the partials in a div or whatever element you like. Something like this:
<div id="first">
<% Html.RenderPartial("LocationVerifyControl"); %>
</div>
<div id="second">
<% Html.RenderPartial("LocationVerifyControl"); %>
</div>
Then your script section can reference the buttons independently.
$('#first #btnVerify').click(function () {
alert('first button click');
});
$('#second #btnVerify').click(function () {
alert('second button click');
});
Notice that I'm just saying to find the id=first then find a id=btnVerify within the id=first.