What is the simplest way of getting the nth User in a database (User.find(n) in rails) using a field (where n is the input) and a button, and displaying it on the page using Ajax?
<input id="search_input" type="text">
<button id="search_button">Search</button>
<div id="output> Output displayed here </div>
I read the Ajax tutorial on W3Schools where an XMLHttpRequest object is created, but this seems way too long winded for doing something so simple. Is there an easier way in rails?
This is the Javascript function I would have to call when the button is pressed
function find_nth_user() {
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
}
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.rb",true);
xmlhttp.send();
}
and then in file ajax_info.rb (which has to be routed correctly) have the rails code.
I tried searching for Ajax on Rails but all I find is stuff to do with forms_for which I don't think are applicable here. I need to function to execute on a button press.
You shouldn't be dealing with the barebones objects like this. jQuery/Prototype/Zepto exist so you don't have to do this stuff.
Watch this railscast on searching with AJAX: http://railscasts.com/episodes/240-search-sort-paginate-with-ajax
Related
I started learning Rails 3 months ago.And now I'm trying to add Ajax in my Rails app.
So it have some problems.
In my Index.html.erb file:
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET","demo.txt", true);
xhttp.send();
}
</script>
<button type="button" onclick="loadDoc()">click</button>
<p id="demo"></p>
And I created a file that demo.txt.I try to show content in demo.txt when I click the button.But it shows nothing.
So have any tut for me.
Thanks !
The second parameter of the xhttp.open(...) call should be a URL, not simple a file name. If you are running the Rails application with "rails s" then your url might look something like "http://localhost:3000/demo.txt" if the file demo.txt is in your public folder. Without a URL in that second parameter, I suspect that the request is never finding your rails application.
You might also want to dig into jquery (since you tagged it) to understand how to use that library to issue the request. The interface is much simpler than the low-level js.
I want to be able to receive open/save dialog for a pdf file being returned from controller without using 'Html.Beginform' in ASP.NET MVC. I´m using 'Ajax.Beginform' since I can register events to fire OnBegin and OnComplete (which I think I can´t do when using Html.Beginform, or is it?).
I want to state that the problem is not creating and receiving the file from the server when using 'Html.Beginform' because that works fine, but without the events I want to use. I´m using 'Ajax.Beginform' and the file is being returned from the controller but nothing happens after that client side.
My cshtml
#using (Ajax.BeginForm("CreatePdf", "Print", null, new AjaxOptions() { LoadingElementId = "printLoading", OnSuccess = "printPageComplete"}, new { id = "exportForm" }))
{
//Stuff abbreviated
<input type="button" onclick="onPrint()" />
}
My jQuery
function onPrint()
{
//Stuff abbreviated
$("#exportForm").submit();
}
function printPageComplete(result)
{
//this 'result' variable is obviously holding the file from the controller
//stuff abbreviated
//TODO: I need to open file dialog here
}
My Controller
[HttpPost]
public ActionResult CreatePdf(FormCollection collection)
{
//Stuff abbreviated
return File(thePdf, _mimeTypes[ExportFormat.Pdf], "thePdf.pdf")
}
As you can see I´ve managed to get this far as in the printPageComplete function but I´m not sure where to go from here. Should I continue using the ajax form or should I stick with the html form and try to find other way to fire the events I so sorely need to use?
Perhaps I´m going about this all wrong and your help would be very well appreciated.
You can post a form without using Ajax.BeginForm. It is more work, but gives you more flexibility:
$('#exportForm').submit(function (e){
e.preventDefault();
//Do any validation or anything custom
$.ajax({
//set ajax settings
success: function(){
// Handle the success event
}
});
});
I have forms located in multiple areas in my layout page (not nested).
I have a partial view which performs a post to controller action.
What action result do I return in that post to keep the user on the current page?
Is jquery/ajax my only option? I would rather a solution that didn't depend on javascript, maybe even a solution that degrades nicely.
You can use the Request.Referrer property to see what page the user has come from and then just use that to redirect them back there.
This does introduce other issues, e.g. losing ModelState, so you'll have to design for that. Also note that some users can block sending referrer information in their requests to the server - so the Referrer property can be null.
I would recommend using AJAX and then falling back on this.
You just need to do a RedirectToAction("") back to your main view.
To post a form without submitting the whole page, which refreshes the browser, you need to use Ajax/jQuery. The degraded solution is to submit the whole page like you would with a normal form.
Here's how I do it with jQuery.
Html:
<div id="RequestButtonDiv">
<button id="RequestButton" name="Request" type="button">Request</button>
</div>
This calls AddToCart on my Request controller when the RequestButton button is clicked. The response is placed inside the RequestButtonDiv element.
<script type="text/javascript">
$(document).ready(function () {
$('#RequestButton').click(function (event) {
$('#RequestButton').text('Processing...');
$('#RequestButton').attr('disabled', true);
submitRequest();
});
});
function submitRequest() {
$.ajax({
url: '<%: Url.Action("AddToCart", "Request", new { id = Model.RowId, randomId = new Random().Next(1, 999999) } ) %>',
success: function (response) {
// update status element
$('#RequestButtonDiv').html(response);
}
});
}
</script>
Controller action:
public ActionResult AddToCart(int id)
{
var user = AccountController.GetUserFromSession();
user.RequestCart.AddAsset(id);
return View("~/Views/Assets/Details_AddToCart.ascx");
}
The controller returns a partial view. You could also return Content("some stuff") instead.
Holler if you have questions or need more detail.
I've a bit of an odd issue with FCKEditor in my MVC project.
I've essentially got a View which renders a Partial View containing my FCKEditor (javascript, html and any other bits to make my control reusable throught my app)
I'm calling FCKEditor by doing the following:
<script src="<%= Url.Content("~/Scripts/fckeditor/fckeditor.js") %>" type="text/javascript" ></script>
<script type="text/javascript">
window.onload = function () {
var sBasePath = '<%= Url.Content("~/Scripts/fckeditor/") %>';
var oFCKeditor = new FCKeditor('FckEditor1');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.ReplaceTextarea();
}
</script>
To validate my form, I'm using jQuery.Validate with the following code:
//FORM VALIDATION
$("#NewPageForm").validate({
errorContainer: "#errorblock-div1, #errorblock-div2",
errorLabelContainer: "#errorblock-div2 ul",
wrapper: "li",
rules: {
titleTxt: "required",
FckEditor1: "required"
},
messages: {
titleTxt: "You must enter a page title.",
FckEditor1: "You must enter at least some content."
},
submitHandler: function (form) {
form.submit();
}
});
Locally, when debugging my project, this works absolutely fine and throws up an error to the user when they leave the editor blank.
However, when I publish the application and run it from the server, whenever the editor has content in, the form won't validate, telling me that my FCKEditor control is empty, when it clearly isn't.
If I take away the validation, and submit the form with all the relevant boxes filled, the collection of collection("FckEditor1") is also empty, but again, running this locally works first time, every time.
I've had a search around and what seems to be happening is that my text area <%= Html.TextArea("FckEditor1", New With {.name = "FckEditor1", .class = "required"})%> isn't being populated with the content entered into the FCKEditor, even though this is the box that FCK is linked to.
The issue exists in all the browsers I've tried (IE8 and FF).
Not sure if it's also worth noting that FCK still renders fine too?
I'm not entirely convinced it's an issue with my code as it runs perfect locally. Is there anything I need to configure server-side or in web.config that could be causing it?
Has anyone else come across this or have any ideas as to how to solve the issue?
EDIT
I think I could be partway there with a fix.
I've added the following so far:
$('#publishBtn').button().click(function () {
if (typeof (FCKeditorAPI) == "object") {
FCKeditorAPI.GetInstance("FckEditor1").UpdateLinkedField();
} else {
alert('this is not an object!');
}
if ($("#FckEditor1").val() == "") {
alert("FCKEditor is empty");
} else {
$("#NewPageForm").submit();
}
});
Though, I now get sent to a blank page when the form is submitted, though nothing in my controller seems to be the issue - at least I don't think so as if there was an issue there, it'd do the same on my local machine.
One thing that may be causing your issue if you are validating on the server is that once it's on IIS you cannot post HTML content without the request validation preventing the FCKContent from being passed. Cassini wont check this so it works on your local machine.
try adding this to your the action which is called when you post to validate:
[ValidateInput(false)]
public ActionResult UpdateAction()
{
}
If possible, use CKEditor instead; it integrates with MVC much better.
http://ckeditor.com/
http://ckeditor.com/what-is-ckeditor
I found the source of my problem, and it's to do with the way I'm handling multiple submit buttons in my controller.
I've tweaked it and it's now fixed.
I am trying to get my head around MVC at the moment.
What I want to do is this;
function TestClickFunc(userId) {
$.post("/Users/UpdateEmailDistributionListFlag", { id: userId });
}
However I cannot use JQuery directly in a javascript method like this.
I have been hunting around for examples, but now I need to refer to you. How do I ready JQuery for this Javascript method?
I want to call the UpdateEmailDistributionListFlag method on the Users controller and send a parameter userId.
The link to the js file is broken (http://ajax.microsoft.com/ajax/jquery-1.4.1.min.js), so you actually don't have jQuery included. Try this one instead: http://code.jquery.com/jquery-1.4.1.min.js
Dont use onclick="xxx". Horrible! Let jQuery set it all up:
$(function(){
$('input:checkbox').change(function() {
var userId = $(this).attr('userId');
$.post("/Users/UpdateEmailDistributionListFlag", { id: userId });
});
});
This will post a request to your action when the checkbox is clicked. I don't know exactly how you DOM works and I made that up on the spot just to give you the gist. By the way you sound like someone who could do with some jQuery IntelliSense (aren't we all?!)
This is assuming you use something like:
<%: Html.CheckBoxFor(x => x.EmailDistributionListFlag, new { userId = Model.UserId })%>
I take it you have an action like this ready and waiting:
[HttpPost]
public void UpdateEmailDistributionListFlag(int userId)
{
//log something
}