on my page I have the following:
<span id="attach-file" class="link">Attach a file</span>
<div id="attach-file-form">
</div>
Give that attaching a file is not a common use case, I don't want the attach-file-form elements to be present on load, it would slow everything down.
What I would like to happen is the user clicks "Attach a file", jQuery AJAX GET to get the form and inject it inside of attach-file-form.
What's the right way in Rails to go about this?
in jQuery I have:
$("#attach-file").live("click", function() {
DO A GET TO A custom Method in the Attachment Controller
Inject inside the div
});
Does this sound right?
Having the file upload form present on the page but hidden will have pretty much zero impact on the performance of your site. I'd recommend just defaulting the file upload form to hidden, and triggering display of the form when your button is clicked.
Then your JQuery code can be as simple as:
$("#attach-file").live("click", function() {
$("#file_upload_form").show();
});
If you do need to get this from the server, you can use the jQuery.get method to make a call to a Rails controller, which can output the form for you:
$("#attach-file").live("click", function() {
$.get("/controller/action", function(html) {
$("#file_upload_form").html(html);
}
});
Related
I am trying to set up a table in an index view of my "relations" controller including an editable dataslider which directly safes the "preference" value to my db.
Is it possible to combine bootstrap dataslider with "best_in_place" or form method or is that nonsense? (I am newbie on ruby on rails) Does anybody have any suggestions ? Thanks for your help!
I am using "bootstrap slider rails"
Doing what you want through forms may be a little challenging - you'll have to nest each one in a form, ensure that submitting the form doesn't reload the page, etc.
The easiest thing to do might be to pass an onChange function to your data slider that posts the data to the backend. Something along the lines of this (I don't know the data-slider component so I'm sort of guessing as to syntax):
html:
<input id="slider" />
js:
$("#slider").slider().change(function(data) {
$.post({ url: "my/url",
success: function(response) { ... },
...
});
});
When using a g:uploadForm, is there anyway to detect that the file upload has been completed by javascript? I want to use this as an event to show a modal dialog that shows information about the uploaded file.
It is easy to detect by the controller because that is simply when the upload function finishes execution but how can I make my GSP detect this and therefore react.
Since you are posting to/targeting an iframe for your form submission it should be easy enough for your controller that accepts the upload to render some jquery to the iframe to notify the parent window that the upload is complete. In this example I will use a custom jquery event.
Containing GSP:
$(document).on("upload-complete", function(e) {
console.log("Upload completed.");
});
GSP template rendered by the controller within the iframe:
parent.$(document).trigger({
type: 'upload-complete'
});
The above jquery should accomplish what you are looking to do.
You can try using the Ajax Uploader plugin.
This is what you would need
<uploader:uploader id="yourUploaderId"
url="${[controller:'yourController', action:'yourAction']}" />
There are callbacks associated:
<uploader:onSubmit>
<uploader:onProgress>
<uploader:onComplete>
<uploader:onCancel>
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 using the data-remote along with data-URL to make an Ajax call via jquery ujs and it is working.
However, I can't understand how I'm to process the returned value.
For example, I have a controller action which returns some HTML - how do I attach a JS function (I presume) to replace the HTML in an existing div when the Ajax call finishes? I've set data-type to :html btw.
I can see the HTML is being returned by sniffing the network traffic.
I've got it to work by writing my own Ajax call (rather than using jquerys ujs version) but it feels as though I've reinvented the wheel - but I can't find how to use jquerys data-remote to make the call for me, and to then have it update a div (for example).
Thanks,
Ian
i presume that you have a button with the id "button" and a div with the id "add_some_content"
$("#button").click( function(){
$.get("some_random_url", function(data) {
$("#add_some_content").html(data);
});
});
or as jxpx777 pointed out:
$("#button").click(function(){
$("#add_some_content").load("some_random_url");
});
if you now press on the button, an ajax get request for your url is made. the answer from that page is attached to the div.
I'm trying to navigate to a different .html page using
$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)
PlayGame.html is being transitioned to, however, none of the following are firing:
$(document).bind("mobileinit", function()
{
alert(1);
});
$('#gamePage').live('pageinit',function(event, ui)
{
alert('pageinit');
});
$('#gamePage').live('pagebeforeshow',function(event, ui)
{
alert('booooo');
});
However, if I do window.location.href = "PlayGame.html" then everything fires accordingly.
What am I missing?
Thanks
Tom
If the code in your example is in the <head> of the PlayGame.html document then it will not be included when the jQuery Mobile framework grabs the page via AJAX. That is why your custom code runs when you load the whole page but not when clicking on a link from another page.
You will want to either put your custom JavaScript in a single file and include it on every page (so it will be available no matter what page the user enters your site from) or you will want to move the custom JavaScript for each page into the <div data-role="page"> element for each page (so it will be included when the page is pulled into the DOM).
The reason is that when you click on a link to an external file, jQuery Mobile uses AJAX to pull out the first instance of a <div data-role="page"> element and places that element in the current DOM, everything else in the document is discarded.
Here is some suggested reading about how jQuery Mobile navigation works: http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html