Change file_field_tag appearance

 

HTML:

<span class="btn btn-large btn-warning btn-file">
    Choose File
    <%= file_field_tag :attachment %>
</span>

CSS:

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
Advertisements

Ruby on Rails: putting class with submit_tag

<%= submit_tag("Update", :id=>"button", :class=>"Test", :name=>"submit") %>

First parameter is required and it would be value and they any parameter you want to specify, can be done in a hash like :key=>”value”.

stop event propagation

SO we will stop propagation at that point so that click will be performed for one div.

Sample Code-

<!DOCTYPE html>
<html>
<head> 
<title>Check Out Propagation</title>
</head>
<body>
</div> </div> <style type="text/css"> #third{ height: 300px; width: 300px; background-color: black; } #outer{ height: 200px; width: 200px; background-color: red; } #inner{ height: 100px; width: 100px; background-color: yellow; } </style> function innerFunc(event){ event.stopPropagation(); console.log("inner was cliked"); } function outerFunc(event){ event.stopPropagation(); console.log("outer was cliked"); } function thirdFunc(event){ console.log("third was cliked"); } var inner = document.getElementById('inner'); inner.addEventListener('click', innerFunc); var outer = document.getElementById('outer'); outer.addEventListener('click', outerFunc); var third = document.getElementById('third'); third.addEventListener('click', thirdFunc); function mouseOver(event){ console.log("mouse over third"); } third.addEventListener('mouseover', mouseOver); </body></html>

Deploy Rails to Heroku

Follow these steps for deploying your app on heroku.

  1. Create a new Heroku account.
  2. In the terminal, log in using the email address and password of Heroku account:
    $ heroku login
    
  3. In Gemfile, add the pg gem to your Rails project. Change:
    gem sqlite
    

    to

    gem 'sqlite3', group: :development
    gem 'pg', '0.18.1', group: :production
    
  4. In Gemfile, add the rails_12factor gem::
    gem 'rails_12factor', group: :production
    
  5. In the terminal, install the gems using:
    $ bundle install
    
  6. Check config/database.yml is using the postgresql adapter. Change:
    production:
      <<: *default
      database: db/production.sqlite3
    

    to

    production:
      <<: *default
      adapter: postgresql
      database: db/production.sqlite3
    
  7. Commit your changes to git:
    $ git add .
    $ git commit -m "My first Commit"
    
  8. In the terminal, create an app on Heroku:
    $ heroku create
    
  9. Push your code to Heroku:
    $ git push heroku master
    
  10. If you are using the database in your application, migrate the database by running:
    $ heroku run rake db:migrate
    
  11. If you need to seed your database with data, run:
    $ heroku run rake db:seed
    
  12. Get the URL of your app and visit it in the browser:
    $ heroku apps:info
    

    This will open your app on browser.

Create unique id in link_to tag rails

<%= link_to "Edit", edit_question_path(question.id),method: :get, :remote => true, id: "myBtn_#{question.id}" %>

This is how you can create a unique id using #.

id: “myBtn_#{question.id}”

 

 

Delete using ajax and fade out

 

Step 1: In your index.html.erb  Add

:remote => true, :class => 'class_name' in

app/views/controller_name/index.html.erb.

Like this,

<%= link_to "Delete", question_path(question.id),method: :delete ,data: { confirm: "Are you sure?"}, :remote => true, :class => "delete_question"%>

Step 2: Create a file, destroy.js.erb, put it inside folder .erb files (under app/views/controller_name). It should look like this:

console.log("here") noty({text: 'Question is successfully destroyed!!', type: 'success', timeout: 1500, theme: 'defaultTheme',maxVisible: 5,template: '
',progressBar: true}); 
$(function() {    
$('#die_<%=@question.id%>.question').fadeOut(1000); 
});

now , if you got the above code its good else I m expaining too.

So, console.log (“here”) is just to check if we are redirected to right page or in simple words wheather ajax is working or not.

noty is just a notification for this you have to install noty.

If you dont able to install ,I will definetly write in other blog till then delete whole noty statement.

here comes the main part i.e. the function

a Simple function in which I am passing the id of class which is to unique so i have added  the id of each question like here so as to make it unique.

Step 3: Add format.js { render :layout => false } to your controller (app/controllers/question_controller.rb). Your destroy method should now look like this:

def destroy
 
 @question.destroy
 respond_to do |format|
 format.html { redirect_to '/', notice: 'Question was successfully destroyed.' }
 format.json { head :no_content }
 format.js { render :layout => false }
 end
 end

And now you are done.

Hope it helps.

 

ArgumentError in class#create while applying Ajax.

Screen Shot 2017-07-26 at 11.59.57 AM

For these type of errors you must hav not initialized the vairiable with new keyword causing it to make a empty class.

 

<%@answer=Answer.new%>
 
 <%= form_for @answer, remote: true do |f|%>
 
 <%= f.text_area :content ,placeholder: "Write your answer", :class => 'a2', required: true%> <br>

<%= f.hidden_field :question_id , :value => question.id %>
 
 <%= f.submit value:"Answer" ,:class => 'button1' ,id: 'create_answer_submit'%>
 <%end%>
 <br>

So the line @answer = Answer.new will save you.

or in other case like <%@answer_feed=Answer.all.order(created_at: :desc)%>.

Just for example purpose.

And do take while rendering , do check that the partial file is in home or in someother folder

Hope it helps

Create a free website or blog at WordPress.com.

Up ↑