I just want to ask if it is possible to re-render the same view through dojo xhrpost?
On my /app/index.phtml page I have a button that will fire an action through dojo xhrpost which will call the same /app action controller.
It successfully calls the controller but the page is not rendering with the updated data.
Here's the ajax call part
var xhrArgs = {
url: "/app",
handleAs: "text",
load: function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
}
dojo.xhrPost(xhrArgs);
Controller
public function indexAction()
{
$apps = new Application_Model_Application();
if($this->_request->isPost()){
$this->view->apps = $apps->getAppsById("2");
}else{
$this->view->apps = $apps->getAllApps();
}
$this->render();
}
I'm getting the response on firebug which gives me the rendered page but the actual view itself is not re-loaded with the new apps data ($this->view->apps)
Am I missing something? Please help.
You'll need to use Dojo to render the new retrieved data into the DOM of your page. The controller will return it into the variable, but won't display it.
Hope that helps,
Related
I'm using ajax within the play (scala) framework to run some code after a click event occurs on a page. I want to return the results of that code execution on the same page.
EDIT: the goal of this is to display some rows from the database, along with form elements to fill out to update cells of the databse, all without reloading/or going to a new page
Is there a way to pass html + (scala) values into
Ok(...).as(HTML)
to display without directing to new a page?
I know Ok can take things like:
Ok(<h1>it works</h1>).as(HTML)
but I can't figure out how to combine that with scala values as well. Is there a smarter way to do this?
EDIT: the ajax looks like this:
var ajaxCall = function() {
var ajaxCallBack = {
success : onSuccess,
error : onError
}
jsRoutes.controllers.Application.scrape().ajax(ajaxCallBack);
};
var onSuccess = function(data) {
$("#results").append(data);
}
var onError = function(error) {
alert(error);
}
For sure you can. You can use TWIRL templates:
Create a template "views/Application/contacts.scala.html
#(users: List[User])
<h1>Users</h1>
<ul>
#for(user <- users) {
<li>#user.name</li>
}
</ul>
in the controller:
Ok(views.html.Application.contacts(users))
I have two controllers, A and B. A is responsible for representing some data in a grid view. Assume I have a button called "ShowInfo" which brings additional info about the selected record. And to retrieve the info about the selected record is the job of controller B.
The info is so little that it'd take just a tiny place in the corner if I navigate to another view. So I thought I'd rather bring that info inside a jQuery dialog without navigating to anywhere. But I'm a bit confused as to how to do it.
Here's the action method in controller B that is responsible for providing that info in a partial view.
public class BController:Controller{
public ActionResult GetInfo(int recordID){
RecordInfo info=RecordsRepository.GetRecordInfoById(recordID);
return PartialView(viewName:"RecordInfo",model:info);
}
}
I don't know, maybe the action method needs to different. Maybe I should return JSON instead of Partial view, but anyway, how do I do that?
You can use the jquery .get or .load methods. For example, to replace the contents of <div id="SomeElement"></div> with the partial view returned by GetInfo()
$('#ShowInfo').click(function() {
var url = '#Url.Action("GetInfo", "B")';
var ID = someValue; // the value to pass to the GetInfo method
$.get(url, { recordID: ID }, function(data) {
$('#someElement').html(data);
});
});
You can use Jquery ajax to achieve this.
Wrtire jquery ajax on the view page and call the partial view action from ajax.
receive the result in html format and replace it in the dialog box.
Put following code on main view page(ShowInfo button page)
$(document).ready(function(){
$("#ShowInfo").on("click",function(){ ///give id to showinfo button and attr data-id is record id
var id=$(this).attr("data-id");
$.ajax({
type: "POST",
url: "B/GetInfo",
data: JSON.stringify({ recordID: id }),
dataType: "html",
success: function (html)
{
////put the html response in dialog box
}
});
})
});
Okay...I am coming from C# MVC using partial views/ajax, etc...
Here's what I have: 1 main page with a target ID that renders the default information using a page include.
What I want to do is onclick of a button target the original ID and render a different page as the include. Kind of like RenderPartials in C# MVC.
Can Spring (using Maven) MVC do this or is there a way to go about this that is strait forward?
Thanks,
You don't need to implement partial views just have an empty div and on click of a button make an ajax request get the content and update the div. something like below.
function button_onclick() {
var params = {}; //put parameter if any
$.ajax({
headers: {
Accept : "text/plain; charset=utf-8","Content-Type": "text/plain; charset=utf-8"},
url: "/controller",
method:"GET",
data:params,
success:function(data, textStatus,response) {
var text = response.responseText;
if (text == "") {
return;
}
$( "#DIV_ID" ).text(text);
},
error: function(response) {
alert(response);
// terminate the script
}
});
}
I have an iphone-style list-view system for navigation of a website that looks like this:
The URL is changed dynamically when a panel is loaded via AJAX and the same URL is placed in the browser address bar with puststate. This a allows a page refresh to reload the current page:
this.Historyjs.pushState({}, "", url);
To make this work the pages can return themselves as either a partial page, or a full page. The code to detect the difference is a base controller and looks like:
public bool IsPartialPage
{
get
{
// ListViewer will strip out HTML from a full page if this occurs
return Request.IsAjaxRequest() || !string.IsNullOrEmpty(Request["partial"]);
}
}
An example controller action looks like this (note the Partial View cache expiry):
[OutputCache(Duration=1)]
public ActionResult ListViewerDocumentation()
{
if (!base.IsPartialPage)
{
ViewBag.Layout = "~/Views/Shared/_ListViewLayout.cshtml";
}
return PartialView();
}
The problem I have is that when you navigate using the Browser's back and forward buttons, it will occasionally decide that a previously partial page is sufficient to become the entire page and does not make a call to the server (checked with Fiddler2) and so looks like this:
Any suggestions on a method that will ensure back and forward navigation always pull back a full page and not from its cache of Ajax requests? Is it simply a matter of making the Ajax calls unique, or will the vanilla URL from the back/forward still match?
Turns out the trick is to turn off caching on the Ajax request that pulls the partial pages, not on the server as that is never hit (the light suddenly came on after writing the above question):
$.ajax(
{
cache: false, // << Added this
url: url,
type: "GET",
error: function (jqXHR, textStatus: string, errorThrown: string)
{
// On error (eg. "not found") empty out the display
THIS._removeContent();
},
success: function (data: string, textStatus: string, jqXHR)
{
var $data = $(data);
THIS._insertContent($data, function ()
{
});
}
});
The cache false also apparently ensures the browser will not reuse the page on page back/forward operations.
Noob question here:
I'm using ASP.NET MVC 3 and I'm trying to save an entity through Backbone. Here's what I have:
I defined my Backbone model (Program) as such:
var Program = Backbone.Model.extend({
defaults: function () {
return { name: "" };
},
initialize: function (attrs) {
this.set('name', attrs.name);
},
urlRoot: '/program/add'
});
Then I hook up the model save on the click event of a button:
$('.add-program').click(function () {
var programName = $('.program-name').val();
var program = new Program({ name: programName });
program.save(null, {
success: function (model, response) {
alert('success');
},
error: function (model, response) {
alert('error');
}
});
});
It works on IE (surprisingly!) - ProgramController.Add(string name) gets called fine and I get a success response. But I'm having issues on Chrome and FF - They both trigger the error callback with the slight difference that on Chrome my Controller Action doesn't even get hit at all (it does on FF though). The funny thing is that my action breakpoint does get hit on FF, with the appropriate param value, but still get the error callback.
I'm not sure what's going on here. I tried debugging through Firebug/Chromebug and don't see much on the error callback params (the errorStatus is just ... well... "error"!). I also tried looking at the Network tab and Fiddler and I don't see anything that rings a bell (maybe I'm not looking at the right place). I also tried doing a straight jquery ajax call to the controller and still get the same weird behavior.
Just in case, here's the MVC action (although I don't think the issue is here):
[HttpPost]
public JsonResult Add(string name)
{
var stubbedResponse = new {id = Guid.NewGuid()};
return Json(stubbedResponse);
}
Any ideas what could be causing this?
A Fiddle http://jsfiddle.net/Uj5Ae/2 with your client code seems to be OK. Something with your server response? Or Backbone and Underscore versions not matching?
Or maybe the return false at the end of the click handler, if the event propagation is not handled elsewhere.
Spoiler : that was the event propagation :)