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

Using Geocoder to get street name,state,city,country etc in Your Rails app

Recently i implemented Google map for one of the module where User will enter his location/address and other relevant geo-details should get autopopulated.Well,This was posible because of   Geocoder  and by using it you can get every small details such as postalcode,country code,zipcode,street name,state name,state code,latitude,longitude(and more) ready in your hands easily.Its really awesome. I have used to it get all relevant information about the location that the user enter using Geocomplete ,another awesome autocomplete library to get locations. Suppose you have a users table and also few columns such as longitude,latitude,state,postal code,street name,address,country  and want to autopopulate other fields just by using address entered by the user then you are reading the right blog,So its easy,let me show you how. User will enter address using Geocomplete and store that address in address column in users/locations table Then,use Geocoder to fetch other geo...
Post a Comment
Read more

Adding Emoji icons to Rails application

Its very easy to add emoji icons/images to your rails application. It seems complex but its all easy using javascript.The steps can be simplified as shown below:- add the javascript(download jemotion ) include it in your view file(where you want :) to be shown as this -----------------------> thats it....done first you need to add this wonderful js which works really great and nice from home page . We are interested in only the js and emotions folder(containing the smileys/GIF images). once you download just include it in your view file and copy/dump the emotions folder(containing images) to app/assets/images for RAILS 3+. as i did where i want the users to view their comments after they submit their comment. You also need to give a unique id to make  the js understand where it needs to convert your symbols to icons.see below code and hope you will understand how to use it. Keep in mind two thing:- dont forget t...
1 comment
Read more

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