I want to add a Ajax link into my application. When I click on the link it should pop up a modal dialog which contains event's details..
I add this link in my helper class.
link_to(event.name, events_path(#event), :remote => true
Then I create js file to insert content into hidden div.
$('.modal').html(<%= escape_javascript(render(#event)) %>);
$('.modal').dialog();
In here modal is my hidden div. But it could not pop up any modal dialog. I cannot understand what is the error and why is it not working. Plz can anybody help me to correct this?
Change
$('.modal').html(<%= escape_javascript(render(#event)) %>);
to
$('.modal').html("<%= escape_javascript(render(#event)) %>");
From a JS point of view, your code will be invalid because you're not wrapping your render in quotes and it will try to evaluate your HTML.
EDIT
If you're trying to link to this on a show click, you'll need to use show.js.erb to show your modal dialog rather than create.js.erb. create will only be called if you POST a form to /events whereas here it looks like you're trying to show just the details of the event.
Put the code above (with quotes) in the show.js.erb, make sure you have a respond.js response in your show method on the controller, and try it again.
Could be possible that you didnt install Jquery since the rails default is Prototype library. I would upgrade to Rails 3.1 which makes it easy to use jquery:
rails new example -j jquery
or install jquery:
http://railscasts.com/episodes/136-jquery
Related
I am doing a module using modal windows, where in the index I am showing all the records, saving data, editing and deleting everything using ajax. Pressing the respective buttons in the row of each record opens the modal window depending on the button. But I would like to press the "edit" button to send the log id to the controller, search the data and return it in the modal window. To send the id to the controller should I place a form on each button?
A traditional non-AJAX edit button that you would typically see in a Rails index page would look something like this:
<td><%= link_to 'Edit', edit_thing_path(thing) %></td>
You would need to do three things to AJAX-ify this:
change the link_to so that it sends an AJAX request instead,
get the things_controller#edit method to respond with JSON,
write some JS that picks up the JSON response from the server, and populates it in the modal's form.
An alternative approach, which might be easier, would be to use UJS as recommended by the Rails core team. In this case:
change the link_to to request a JS response
change the controller's edit method to respond by rendering a JS file
build a JS file that renders the modal server, side, and then replaces the current modal in your HTML with the newly-built modal form, and then
reveal the modal in the page
Have a look here in the Rails Guides (for Rails v4.2).
To do that I really like to use Best In place its supper simple to use and implement.
there is also a video on how to use it, its a bit old 302-in-place-editing
I have an admin form that updates a model via a html submit. I'd like to be able to send the form's contents to an Ajax modal dialog for a 'preview' via a link or button in the admin form.
Is there a way to send the form's contents to the modal dialog via Ajax without breaking the html submit? So far all I can do is get the data into the modal as html which breaks the js rendering. All the Ajax submit examples I find attach to the form which will break the html submit.
Suggestions and/or pointers are appreciated.
We are using Rails 3.2.12 for what it's worth.
I suppose it depends on how you are rendering your modal. If you're doing it server side and just need to get the form values to your ajax controller action you could do something like this with jquery"
$.post(ajaxUrl + "?" + $("#myform").serialize())
to generate a query string of your form values that you could sent to you ajax model.
Or if you're building the modal client side try
$("#myform").serializeArray()
to get an array of name, value pairs
This is what it took to get this to work under Rails 3.2.12
View:
<%= link_to 'Preview Promotion UI', admin_preview_promotion_url, id: :promotion_preview %>
The above link is inside the form do/end.
Javascript in application.js
$("#promotion_preview").live('click', (function (event) {
event.preventDefault();
$.post("/store/admin/promotions/preview",
$(event.currentTarget.parentElement).serialize().replace('=put&', '=post&'),
{},
"script"
);
}));
Rails.js injects some hidden code in the page that sets the type of response to PUT and then gets in the way of the routing. At least in this case simply replacing PUT with POST fixes things.
With this bit of code I can post my form updates as usual and activate a modal dialog "preview" using the form data.
I'm new to using jquery modal dialog boxes with rails and was wondering how I can :
show a jquery modal dialog box
with 1 field (eg "title")
post this form to a rails controller (via
ajax)
have the modal dialog form
redisplay if field is not filled in
(with normal red css in error field)
Any tutorials or examples welcome.
Using Rails 3 and jQuery. Thanks for your time.
Here's an example of how I'd do it: https://github.com/ramblex/modal-form.
You should be able to:
download the app
run bundle
rake db:migrate
rails s
Go to localhost:3000/articles and the modal form should come up when you click on the 'New article' link.
An error message should be shown when the title field is left empty. Otherwise it should create the article and display it.
Hope it helps.
For modal box I use jQuery Tools.
Once you set that up, next step is to bind an ajax request when the form is submitted (eg: form.submit(function(){ $.post... })) and post the form's data to controller.
Third step is setting up your Rails controller to respond to ajax request (using respond_to block) and render something as response (probably using :layout => false).
If validation failed, you will replace content of your modal box with this response body, or if successful (let's say response was just head :ok), you will display a success message.
I hope this makes sense to you.
i just started building a small test app to help me learn MVC. i have a view that displays user comments. Under each comment i would like to have a reply action link. Clicking on the link should return a small form for adding a comment directly above the reply link.
What is the general approach for this? I'm imaging the form would be a partial view that i can somehow return using the reply link. Thanks for any help!
Using jQuery to retrieve and post the forms in partial views is how I would do it.
Just return partial view to be loaded by jQuery load:
$('#comment').load('/MyController/ActionReturnsPartial');
You should not have to retrieve anything from the server if the user is not providing any extra information along with the retrieval.
Instead of retrieving the form when the user clicks, just let the page render a form below each comment. Put the form in a div with style="display: none;". Then, when the user cliks the link, use jQuery to show the form. Something like
$('.commentlink').click(function(){
$(this).closest('div').find('.formdiv').show();
});
You may also be able to use jQuery's .toggle() method.
I have MVC 1.0 app on VS2008.
I have webpage that has a search form fields and then when search button clicked uses
Ajax.BeginForm to load results in a div. Works great!
But the results have a pager that just uses an anchor with href passing in page index to controller action.
Of course the same action that is used when the search button is clicked.
So what happens is the results are displayed in new page by themselves. Because the links
are not called using Ajax.
So how can I structure my views and actions so that when a link is clicked in the pager
that the form is submitted to the action as well as the page index for the results??
Do you understand me??
Malcolm
I think I understand what you are saying.
Currently, you're using Ajax to dynamically update your results to a div. Kewl.
The trick here is to make sure each 'page' in the pager has a similar javascript function defined on the onclick event. This way, the pager doesn't do a 'postback' to the server, but the javascript method is ran ... which calls some ajax.
here's some sample html...
<a href="#" onclick="DoPagedSearch(1)>1</a> |
<a href="#" onclick="DoPagedSearch(2)>2</a> .. etc
does this make sence? make sure the pager is NOT inside a form AND notice the '#' characters? that makes sure that when u click on the text, it doesn't try and goto another HTML page, elsewhere.
Do you know how to wire up any javascript to an html element? How do u create the html code for the pager?
try that and keep us posted.
Use jquery to have the page anchors make an ajax call to the controller. Return the results as JSON or xhtml or whatever format makes you feel happy and use that to replace the content of the div, or build up and replace the contents if JSON.
If you haven't dug into jquery, I highly recommend it. The documentation is rather excellent. Let me provide you a few useful links for this:
JSON.net serializer
jQuery Documentation
fair example of using jquery for paging
The example uses an rss feed (xml) as the source, but It should get you going.