Skip to main content

Implement Modal in rails

Sometimes we need to show a modal window that comes flying on the website which really feels good as we do not have to load a new page.The reason why i love using modals is that you can show two things at the same time.For example:-Suppose user registers and logs in to your website,then immediately after a matter of seconds,you can show a modal to show/edit his profile OR add some more info about himself or similar stuff and all the user can do is just click button to continue/reject without changing the previous screen.Trust me...it feels good.see the example1,example2
   Similarly if You talk in context of Rails,If the user is in index page,you can render the show action in the Modal,Wowwww...so user can either see the stuff he clicked on index page or cancel the modal,thereby reducing your effort to reload or write extra code for index->show and again show->index.Enough of lectures...lets start the main stuff
To add MODAL to your application just follow two steps expecting that your are using CSS Framework such as Boostrap,Zurb:-

  1. Add modal to your layout (application.html.erb)
  2. Call your modal using   $('#myModal').modal();
  3. Render partial inside modal body using js.erb(ajax call)
this is all you need to do.Lets see the code:-

==============application.html.erb
<!-- add modal view partial -->
<%= render(:partial => 'shared/main_layout_dialog_modal') %>

===========app./views/shared/_main_layout_dialog_modal.html.erb


 ======================index.html.erb

  <!-- add remote true to each show link on index page -->
 <%= link_to(u.name,users_path(user.id),:remote=&gt;true)%>



=================- _show.html.erb

html/erb code for show comes here


=====================show.js.erb
  $('#myModal').modal();
  $('#myModal').find('.modal-body').html("<%= escape_javascript(render(:partial => 'users/show')) %>");
================================================================= 


So every click on index page will show a modal with _show.html.erb rendered inside the modal-body

 
 


Comments

Post a Comment

Popular posts from this blog

Access files on AWS S3 bucket using aws-sdk-s3 with Rails 6

This is a quick post to share few easy methods to access files on AWS S3. The below custom utility methods uses  aws-sdk-s3 Firstly lets define a constant to access files on S3 -  ##to manage S3 Resources S3 = Aws::S3::Resource.new( region: "YOUR-REGION", access_key_id: "YOUR-AWS-KEY", secret_access_key: "YOUR-AWS-SECRET") ##to query S3 S3_client = Aws::S3::Client.new( access_key_id: configatron.aws.s3.credentials.access_key_id, secret_access_key: configatron.aws.s3.credentials.secret_access_key, region: configatron.aws.s3.region ) Now, lets use the S3 OBJECT to access files in different ways -  1. Get all files in a S3 FOLDER     ##this gives a array of file paths present in the folder specified by prefix attribute          s3objects = S3.bucket("my-output-bucket").objects({prefix: "/inputs/any-random-user-folder"}).collect(&:key) ##you can also delete the file if found ...
Post a Comment
Read more

Setting Axios to put/post dynamically

 Let me avoid wasting more time and quickly jump on the problem statement. What is the problem statement -  - I want to use the same React component both for Create/Update. How I achieved it -  - Firstly for new object, it worked smoothly and I wanted to reuse the same component again for edit/update too. - I sent the existing values as props and saved them into the corresponding states. - I reused the existing method ( axios server call ) so that it dynamically POST/PUT as needed.This is show below -         //this method calls post/put dynamically - simple code here..no rocket science methodCall = () => { const { Id, editable, details } = this.state; //check if new or existing record if (editable) { return API.put(`/post/${Id}`, details); } else { return API.post("/post", details); } }; //call this method onClick/onSubmit - as you want to handleSubmit = (event) => { event.preventDefault(); ...
Post a Comment
Read more

So easy to install ruby on rails on ubuntu 12.04/centos 6 and start development

Its easy to start development on ubuntu/centos using vmware and start development.i will start the code on certain assumptions : you know ruby on rails you are aware of how to make use of google(in case u are stuck and want to explore more without spoon feeding) LAST BUT NOT LEAST---you love coding short preview of sequence you need to follow:  START -> get vmware -> get ubuntu/centos -> get rvm -> get ruby -> get rails----END--THAT'S IT Lets start and finish this quickly using below mentioned steps: install vmware player if you are using windows/mcintosh from https://my.vmware.com/web/vmware/downloads  NOW.vmware player need image file of the operating system you want,so hit the url and get centos at http://vault.centos.org/6.2/isos/ OR ubuntu at http://www.ubuntu.com/download/desktop ONCE both vmware player and ubuntu/centos are downloaded,follow the steps to first install vmware(very simple) and mounting ubu...
Post a Comment
Read more