Render form partial on click, Rails - javascript

I can't seem to figure this out, and I've tried multiple forums. I would like to render a form when I click a link using javascript. Could someone show a basic example on how to do this?

Just to clarify #Luan Nico answer since you just have to render a form without doing anything extra in your controller you would be better served if you put your form inside a div tag and then toggle that div to show when you click on button.
Fix:
a. Make a div and put your form inside it
<div id="myForm">
<%= render "your_form" %>
</div>
b. Hide that div by css
#myform {
display:none;
}
c. Create your link to show your from:
<%= link_to "Your button","#", id: "yourButton" %>
d. Write your js inside assets/javascript/application.js or make a new file and then require in inside application.js
$(document).on("click","#yourButton",function(){
$(#myform).show();
});

Assuming the form doesn't change when the button is clicked, just have it's visibility toggled, you can put the entire form inside a div, give it an id, and then you can use jquery:
$('#my-button').click(function (){
$('#div-id').toggle();
});
Where my-button is the id of the button in HTML, and div-id is the div id in the HTML (something like <button id="my-button">Click me</button> and <div id="div-id"><!-- form --></div>).
Or you can do it with plain JS as well, if you don't have jquery (getElementById, etc).
If the form changes slightly, you can also use this technique, but you will need to add some conditions. Otherwise, you will have to use AJAX to get the current data.
Just a warning, try to avoid passing the whole form HTML via an ajax call, the best way is to provide just the data via json and using JS to populate the HTML with the data.

Related

page in jquery dialog box

I have dataTable which last column for edit. I have a separate page for edit form. what i want is when edit link is clicked open that page in a jQuery dialog box and submit data.
The correct way to solve this problem
Assuming that you want a popup or a more specific term modal to edit the form, you should not have a separate html view for that but actually make a general form and post data using ajax. Creating a separate page defeats that purpose.
Now assuming that you still want to have a separate page for that. The modal should be like
<div class="modal">
<iframe src="" id="frameSrc">
</iframe>
</div>
where the src contains the url of the page that you want to open, i am guessing from the href. So here is how you would do that in javascript
$(this).on("click", function () {
var editUri = $this.attr('href');
document.getElementById('frameSrc').src = editUri;
});
The javascript will get the url from href and substitute the src in iframe tag in modal.
Hope this helps..
you can do this without alert and you don't need send href to jquery
use fadeIn and some style to make it.
$('a#login').click(function(){
$("#bgstyle").fadeIn('slow');
$('form').fadeIn('slow');
})
Fiddle DEMO
hope this help you
anyway if i wanna do this i prefer to use bootstrap modal.

Saving a value in a hidden_field_tag with Javascript

I have a form in rails app with a field for choosing a city and saving it's id.
= select_tag 'building[city_id]',
options_for_select(cities.map{|c| [c.name, c.id]}),
onchange: "myFunction();", include_blank: "Choose city"
I want to save a city name in a hidden_field_tag as soon as the user chooses something from a select tag. How do I implement this with Javascript?
I'm very new to Javascript, please don't judge hard.
I suggest doing as little JS as possible. So:
Start by adding the hidden field (with a null value) in your Rails view.
Now you'll need to add Javascript to your pages (you may already have a file at app/assets/javascripts/application.js which is included with all your pages; including JS with your Rails templates is its own question). You'll need two functions, and jQuery will make life a lot easier:
A function which checks the value of the select tag, and updates the value of the hidden tag with the value from the select tag.
A function which runs at page load time which attaches an event listener to the select tag; this will listen for the "change" event on the "select" tag and call our first function when it sees it.
These will look something like this (N.B. this code will almost certainly not work for you without changes):
function setHiddenValue() {
// Get the value from the select tag
var selectValue = $('select#building_city_id').val();
// Set the hidden tag's value to the select tag value we got in the last line
$('input[type=hidden]#city_name').val(selectValue);
}
I'm guessing at the selectors for getting the elements, but Rails is putting IDs on them which you can use.
$(document).ready(function () {
$('select#building_city_id').on('change', setHiddenValue());
}
Obviously this is rough and will not work immediately on being pasted in. You'll want to be sure the selectors match what Rails is putting in your HTML, you'll want to be sure the scripts are getting included in your page and the event listener is being set, you'll need to check that jQuery is present, and you'll want to be sure the setHiddenValue function gets the correct value to put in the hidden form tag. But this is how I'd start out on what you're trying to do; the rest is details which are particular to your page.

Target a specific DIV with jQuery to replace HTML

I have a WordPress Loop rendering Forms with which you can edit Posts (so instead of Posts, I return the Forms, one form each post)
That Loop is rendered on a WordPress default Page.
The Rendered Forms are all wrapped in a Div "div id="mydiv""
Those Div's increase their unique ID "mydiv", once per Form rendered, means, first Form has ID "mydiv", second Form in loop has ID "mydiv2" etc.
But that does not really matter in my question here.
I use this below jQuery to submit the Form(s) and after the form is submitted, I would like to replace the form(s) with the Post which has been edited.
This is the code:
jQuery(document).ready(function() {
jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
if (data.length > 0) {
jQuery('.page').empty();
jQuery('.page').html(data);
}
});
});
The issue is, targeting "page", I replace all forms with a single post.
If I target "mydiv" (no matter which one), the form(s) keep(s) displaying, it's not replaced with the edited post.
So, question:
How can I use above code to target the specific DIV's (mydiv, mydiv2, mydiv3, etc)?
I want that the form wrapped in "mydiv" is replaced by the post which this form edits.
Form in "mydiv2" must be kept displaying, as long I don't submit it.
Then, if submitted, also "mydiv2" must be replaced with the Post this form edits.
And so on.
It works great as long I replace the entire page. That means, the code is basically working.
But, I need to target specific DIV's.
Is this possible?
where is ma (t)error?
I tried with this:
jQuery(document).ready(function() {
jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
if (data.length > 0) {
jQuery('.mydiv').empty();
jQuery('.mydiv').html(data);
}
});
});
And made sure, the first form in loop is wrapped in "mydiv".
I also tried to restrict my loop to one rendered Form, but as long I target a specific DIV in my jQuery (not .page) then the code breaks
No successful results!
It just keeps displaying the Form(s)
Any help appreciated!!
Not sure if I understand you correctly.
If you want to target an element by id you use the following syntax: $('#id').

Loading HTML forms through php then using JQuery to submit forms

I have a dilema which I'm unsure how to approach right now. I know that JQuery needs to have a unique set of ID's to be called in the document ready function. I go through PHP and read my mysql table to print out these HTML forms and with each form is a button that will add a new item to this table.
The issue here is that I cannot have an idea of how many forms there will be so I would like to write the JQuery code so that it can dynamically read anytime that the button is clicked, but know which button was clicked so that the proper ID's can pass.
I've seen some examples but they have more to do with CSS styling, are there any ideas or thoughts as to how this problem could be remedied?
If you are writing out the forms in a for loop with php you can assign each submit button an id using the iterator, like submit_1, submit_2 etc and then you can have an on click handler in jquery using a selector contains, something like:
$(document).on('click', 'input[id*="submit_"]', function() {
//code goes here
alert( $(this).prop('id') );
});

How to grab the contents of a div and insert it into a hidden input

I built a simple CMS in Laravel 4. I've decided to switch from my old editor to this markdown editor.
My old editor used a textbox and so all I had to do was submit the form and it was passed from the view to the controller and inserted into the database etc.
However, this new editor works by turning the markdown into html and that html is inserted within a div that looks like this:
<div id="preview" class="wmd-preview"></div>
I still want to use my old form to submit the contents of the div, so my question is this:
Is there a way to insert the contents of my "preview" div into some sort of hidden input in my form?
Alternatively, is there a better way to submit the contents of my post?
get the content of your div by its id
var a = document.getElementById('preview').innerHTML;
document.getElementById('hid').value = a //create a hidden input give it an id hid
To answer your question about firing the function every time a key is pressed, I would use a jQuery event listener like .keyup().
http://api.jquery.com/keyup/

Categories