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))
Related
I was watching a free interactive course published at angularjs.org to learn Angular, Shaping up with Angular js.
On this course at the very first chapter they say, one of the main reasons to use AngularJS is, it can build “Responsive” web apps. (I know about "Responsive Design" but that's totally a different thing), and explaining it saying that, with Angular you don’t need to refresh your web page to update it with the data getting from the web server (They tell you this, like this is brand new tech!).
I think isn’t that the same thing we did for last 10 years using Ajax? Or is this something totally different?
Please help me to understand this coz I'm new to AngularJS.
From my view “Responsive” web apps. means type of application that updates View regards to model change (MVC).
Angular application UI is full of watchers. For each variable wrapped by {{}} in HTML, Angular creates new watcher and when we update during code running this value, Angular, by using digest cycle updates view respectively. Or ng-repeat directive that creates separate scope per list item and adds watcher as well.
On other hand in pure Javascript I need find my element by id and update it manually.
Consider following example in Fiddle
HTML
<ul>
<li ng-click="loadGeo()">click 1</li>
</ul>
<ul> <pre>
data: {{data|json}}
</pre>
</ul>
JS
var app = angular.module('myModule', ['ngResource']);
app.controller('fessCntrl', function ($scope, Data) {
$scope.data = false;
$scope.loadGeo = function () {
Data.query()
.then(function (result) {
$scope.data = result.data.results[0];
}, function (result) {
alert("Error: No data returned");
});
}
});
app.factory('Data', ['$http', '$q', function ($http, $q) {
var address = 'Singapore, SG, Singapore, 153 Bukit Batok Street 1';
var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';
var factory = {
query: function () {
var data = $http({
method: 'GET',
url: URL
});
var deferred = $q.defer();
deferred.resolve(data);
return deferred.promise;
}
}
return factory;
}]);
On start we have empty data: $scope.data = false;
We click on button, we get Geo data from factory and populate data with Geo output. Our GUI updates without any additional code.
This approach I would call “Responsive” web app
I suggest you to read this great post written by Josh David Miller:
how-do-i-think-in-angularjs-if-i-have-a-jquery-background
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'm trying to put together a snappy webapp, utilizing JS, Prototype and AJAX for all my requests once the GUI has loaded. The app is simple: A set of links and a container element to display whatever the links point to, just like an iframe. Here's an approximate HTML snippet:
<a class="ajax" href="/somearticle.html">An article</a>
<a class="ajax" href="/anotherarticle.html">Another article</a>
<a class="ajax" href="/someform.html">Some form</a>
<div id="ajax-container"></div>
The JS that accompanies the above (sorry it's a bit lengthy) looks like this:
document.observe('dom:loaded', function(event) {
ajaxifyLinks(document.documentElement);
ajaxifyForms(document.documentElement);
});
function ajaxifyLinks(container) {
container.select('a.ajax').each(function(link) {
link.observe('click', function(event) {
event.stop();
new Ajax.Updater($('ajax-container'), link.href, {
method: 'get',
onSuccess: function(transport) {
// Make sure new ajax-able elements are ajaxified
ajaxifyLinks(container);
ajaxifyForms(container);
}
});
});
});
}
function ajaxifyForms(container) {
console.debug('Notice me');
container.select('form.ajax').each(function(form) {
form.observe('submit', function(event) {
event.stop();
form.request({
onSuccess: function(transport) {
$('ajax-container').update(transport.responseText);
// Make sure new ajax-able elements are ajaxified
ajaxifyLinks(container);
ajaxifyForms(container);
}
});
});
});
}
When clicking a link, the response is displayed in the container. I'm not using an iframe for the container here, because I want whatever elements are on the page to be able to communicate with each other through JS at some point. Now, there is one big problem and one curious phenomenon:
Problem: If a form is returned and displayed in the container, the JS above tries to apply the same behavior to the form, so that whatever response is received after submitting is displayed in the container. This fails, as the submit event is never caught. Why? Note that all returned form elements have the class="ajax" attribute.
Phenomenon: Notice the console.debug() statement in ajaxifyForms(). I expect it to output to the console once after page load and then every time the container is updated with a form. The truth is that the number of outputs to the console seems to double for each time you click a link pointing to a form. Why?
I found another way to achieve what I wanted. In fact, the code for doing so is smaller and is less error prone. Instead of trying to make sure each link and form element on the page is observed at any given time, I utilize event bubbling and listen only to the document itself. Examining each event that bubbles up to it, I can determine whether it is subject for an AJAX request or not. Here's the new JS:
document.observe('submit', function(event) {
if (event.target.hasClassName('ajax')) {
event.stop();
event.target.request({
onSuccess: function(transport) {
$('ajax-container').update(transport.responseText);
}
});
}
});
document.observe('click', function(event) {
if (event.target.hasClassName('ajax')) {
event.stop();
new Ajax.Updater($('ajax-container'), event.target.href, {
method: 'get'
});
}
});
Works like a charm :)
trying to display the JQMobile collapsible containing an unsorted list. The collapsible is not shown when the list is appended using an ajax call. The collapsible is correctly shown when the list is added statically. Any advice?
thanks
<script>
$(document).ready(function() {
var updateSectionsPage = function() {
// 1. Get the page and list we need to work with
var $page = $('#homeList');
// 2. Build the URL we need using the data stored on the main view page
var strUrl = 'http://xyz';
// 3. Get the sections and append them to the list
$.ajax({
url: strUrl,
dataType: 'json',
cache: false,
success: function(data) {
$sections = $page.find('#sections');
// 3.1 Delete the existing content, if any
$sections.empty();
// 3.2 Create a new collapsible
$sections.html('<div id="collapsible" data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"></div>');
// 3.3 Create the title of collapsible
$sections.html('<h3>ColdPlay</h3>');
// 3.4 Create the list and store it into a JQuery object
$sections.html('<ul id="list" data-role="listview" data-inset="false"></ul>');
$list = $page.find('#list');
// 3.5 Build HTML that contains the desired information
for (var j in data.list[0].list){
var strHtml = '<li><img src="' + data.list[0].list[j].img + '" /><h4>' + data.list[0].list[j].title + '</h4></li>';
// Make it into a jQuery object...
var item = $(strHtml);
// ...so we can append it to our list.
$list.append(item);
}
// Call the listview widget.
$list.listview();
},
error: function() {
alert("An error occurred. please, try it again!");
}
});
}(); // 4. Call the updateSectionsPage() function
})
</script>
I think you just need to turn your $list.listview(); call into $list.listview('refresh');.
Also, you may benefit from changing up the way you append you new list items. Check this post out. You do not want to nest an append call within a loop if you can avoid it. You will also benefit from not wrapping your strHtml with the jQuery $ selector as it may not be necessary.
That optimization link is courtesy of another SO post here.
Once you create the list,use the following code snippet-
$list.listview('refresh');
$page.trigger('create');
in place of $list.listview();
Also it is not considered a best practice to use $(document).ready() in jquery mobile.See the note below
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
From http://jquerymobile.com/demos/1.0/docs/api/events.html
thanks guys, the issue in my code was on the missing collapsible() widget call. Once the html page is dynamically created, we need to render it with jqmobile widget calls: listview() and collapsible(). Here the working code.
function fillSectionsPage() {
// 1. Get the page we need to work with
var $page = $('#sectionList');
// 2. Build the URL we need using the data stored on the main view page
var strUrl = 'http://xyz';
// 3. Get the sections and append them to the list
$.ajax({
url: strUrl,
dataType: 'json',
cache: false,
success: function(data) {
$sections = $page.find('#sections');
// 3.1 Delete the existing content, if any
$sections.empty();
// 3.2 Append a new collapsible and store it into a JQuery object
$sections.append('<div id="collapsible" data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c"></div>');
$collapsible = $page.find('#collapsible');
// 3.3 Append the title of collapsible
$collapsible.append('<h3>' + data.list[0].title + '</h3>');
// 3.4 Append the list header and store it into a JQuery object
$collapsible.append('<ul id="list" data-role="listview" data-inset="false"></ul>');
$list = $page.find('#list');
// 3.5 Build the list items
var htlmList = [];
for (var j in data.list[0].list){
htlmList[j] = '<li><img src="' + data.list[0].list[j].img + '" /><h4>' + data.list[0].list[j].title + '</h4></li>';
}
// 3.6 Append the list items to the list header
$list.append(htlmList.join(''));
// 3.7 Render the listview and the collapsible
$list.listview();
$collapsible.collapsible();
},
error: function() {
alert("An error occurred, please, try it again!");
}
});
}
Hope to check that tutorial, Collapsible content and Ajax loading with jQuery Mobile and this for How do I toggle the jQuery Mobile Accordion with a button click?
Here is the problem:
By default jQuery Mobile is using GET requests for all links in the application, so I got this small script to remove it from each link.
$('a').each(function () {
$(this).attr("data-ajax", "false");
});
But I have a pager in which I actually want to use AJAX. The pager link uses HttpPost request for a controller action. So I commented the above jQuery code so that I can actually use AJAX.
The problem is that when I click on the link there are two requests sent out, one is HttpGet - which is the jQuery Mobile AJAX default (which I don't want), and the second one is the HttpPost that I actually want to work. When I have the above jQuery code working, AJAX is turned off completely and it just goes to the URL and reloads the window.
I am using asp.net MVC 3. Thank you
Instead of disabling AJAX-linking, you can hijack clicks on the links and decide whether or not to use $.post():
$(document).delegate('a', 'click', function (event) {
//prevent the default click behavior from occuring
event.preventDefault();
//cache this link and it's href attribute
var $this = $(this),
href = $this.attr('href');
//check to see if this link has the `ajax-post` class
if ($this.hasClass('ajax-post')) {
//split the href attribute by the question mark to get just the query string, then iterate over all the key => value pairs and add them to an object to be added to the `$.post` request
var data = {};
if (href.indexOf('?') > -1) {
var tmp = href.split('?')[1].split('&'),
itmp = [];
for (var i = 0, len = tmp.length; i < len; i++) {
itmp = tmp[i].split('=');
data.[itmp[0]] = itmp[1];
}
}
//send POST request and show loading message
$.mobile.showPageLoadingMsg();
$.post(href, data, function (serverResponse) {
//append the server response to the `body` element (assuming your server-side script is outputting the proper HTML to append to the `body` element)
$('body').append(serverResponse);
//now change to the newly added page and remove the loading message
$.mobile.changePage($('#page-id'));
$.mobile.hidePageLoadingMsg();
});
} else {
$.mobile.changePage(href);
}
});
The above code expects you to add the ajax-post class to any link you want to use the $.post() method.
On a general note, event.preventDefault() is useful to stop any other handling of an event so you can do what you want with the event. If you use event.preventDefault() you must declare event as an argument for the function it's in.
Also .each() isn't necessary in your code:
$('a').attr("data-ajax", "false");
will work just fine.
You can also turn off AJAX-linking globally by binding to the mobileinit event like this:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Source: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html