Using JSONText in Django - ajax

I'm using JSONText to load a JSON call in my Jquery but for some reason the request is failing,
Here is the code,
urls.py
urlpatterns = patterns('',
#JSON Response
(r'^json/$', json_request)
)
views.py
from django.utils import simplejson
def json_view(request):
print 'json_view being called'
to_json = {
"key1": "value1",
"key2": "value2",
"key3": "value3",
"key4": "value4"
}
return HttpResponse(simplejson.dumps(to_json), mimetype='application/json')
def json_request(request):
variables = RequestContext(request)
return render_to_response('ajaxtest.html',variables)
ajaxtext.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
#mainViewContainer{
background-color:red;
height:100px;
width:200px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var main_container = $("<div>").attr("id", "mainViewContainer");
main_container.append($('<div id="table_layout" />')
.append($('<table id="table_set"/>').
append('<thead><tr> <th>ID</th><th>Name</th> <th>DOB</th> <th>Date Enrolled</th> </tr></thead>')));
$.getJSON("/json_view",function(census_data){
$(census_data).each(function(k,v){
$('#table_set').append();
trObj = $('<tr>');
trObj.append($('<td>').html(v.key1));
trObj.append($('<td>').html(v.key2));
trObj.append($('<td>').html(v.key3));
trObj.append($('<td>').html(v.key4));
$('#table_set').append(trObj);
});
main_container.appendTo(document.body)
});
</script>
</head>
<body>
</body>
</html>

You don't have a route for json_view in your urls.py. Try to add one:
urlpatterns = patterns('',
#JSON Response
(r'^json/$', json_request)
(r'^json_view/$', json_view)
)
(note the slash at the end of ^json_view/)

Related

How to set and change ( title of page ) in inertiajs and vue3

I'm using vue3 and inertiaJs with Laravel8
I want to change the (TITLE of page) if I change the page
I checked in Inertia documentation this code but it doesn't work with me and the title of the page doesn't change
I installed vue-meta
metaInfo() {
return() {
title: “Home Page”,
}
}
return() is a property, not a function. :) So you should do it like this: return
// parent
metaInfo: {
meta: [{
vmid: 'description',
name: 'description',
content: 'my standard description',
}]
}
// child
metaInfo() {
return {
meta: [{
vmid: 'description',
name: 'description',
content: this.description,
}]
}
},
Learn more at this Vue doc
In "inertia-vue3", how do we know that "description" has changed?
import { Head } from '#inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
In the view-source, nothing can be understood !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>test</title>
<body>
</body>
</html>
As per v0.4.0 of Inertia, they now bundle their own inertia-head component you can use to add meta tags and update the title. There is no longer a need for vue-meta.
Simply add the following directly to your page components:
<inertia-head>
<title>Your page title</title>
<meta name="description" content="Your page description">
</inertia-head>
You can find more information in the change logs of v0.4.0.

String is null on Thymeleaf page after adding to model

My controller:
#Controller
public class IndexController {
#RequestMapping(value = "/index")
public String index(Model model) {
model.addAttribute("message", "Hello World!");
return "index";
}
}
My page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset = "ISO-8859-1" />
<link href = "css/styles.css" rel = "stylesheet"/>
<title>Spring Boot Application</title>
</head>
<body>
<h4>Spring boot.</h4>
<p th:utext="${message}"></p>
</body>
</html>
Upon loading and rendering, this HTML appears; how do I get the message to appear?
<!DOCTYPE html>
<html>
<head>
<meta charset = "ISO-8859-1" />
<link href = "css/styles.css" rel = "stylesheet"/>
<title>Spring Boot Application</title>
</head>
<body>
<h4>Spring boot.</h4>
<p></p>
</body>
</html>
Ensure you have imported the thymeleaf dependency into your project.
Use th:text="${message}"
Method in IndexController is never being called, because this:
#RequestMapping(value = "/index")
Should be this:
#RequestMapping(value = "/")

Ember qunit tests are being called twice

I recently upgraded my "ember-cli" to "2.10.0" and "ember-cli-qunit" to "3.0.1" but each test module is getting run twice. However when I try the code in jsbin I am unable to recreate the issue. My test looks like:
import Qunit from 'qunit';
Qunit.module("[Reporting]", function (hooks) {
hooks.before(function () {
console.log("before");
});
hooks.after(function () {
console.log("after");
});
Qunit.test("test 1", function (assert) {
console.log("test 1");
assert.equal(1,1);
});
Qunit.test("test 2", function (assert) {
console.log("test 2");
assert.equal(1,1);
});
}
I can see that my quint version is 2.1.1 and jquery version is 1.11.3.
My Index.html file looks like this;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Studio Tests</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
{{content-for 'test-head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/studio-blessed1.css">
<link rel="stylesheet" href="assets/studio.css">
<link rel="stylesheet" href="assets/test-support.css">
<style>#blanket-main { position: relative; z-index: 99999; }</style>
{{content-for 'head-footer'}}
{{content-for 'test-head-footer'}}
</head>
<body>
{{content-for 'body'}}
{{content-for 'test-body'}}
<script src="assets/vendor.js"></script>
<script src="assets/test-support.js"></script>
<script src="assets/studio.js"></script>
<script src="assets/blanket-options.js"></script>
<script src="assets/blanket-loader.js"></script>
<script src="testem.js"></script>
<script src="assets/tests.js"></script>
{{content-for 'body-footer'}}
{{content-for 'test-body-footer'}}
</body>
</html>
I found the issue with my test. I was trying to configure the set of tests that would loaded based on a query parameter I send when running the tests. The way I was trying to do that basically wrong.
In my test-helper.js, I had added :
import Resolver from 'studio/resolver';
import {setResolver} from 'ember-qunit';
import TestLoader from 'ember-cli-test-loader/test-support';
setResolver(Resolver.create());
//ADDED THIS PROTOTYPE AS PER MENTIONED IN https://github.com/ember-cli/ember-cli-test-loader
TestLoader.prototype.shouldLoadModule = function(moduleName) {
//return (moduleName.match(/[-_]test$/));
var additionalCondition = true;
var dirName = QUnit.urlParams.directory;
if (dirName) {
additionalCondition = moduleName.indexOf(dirName + '/') === 0 && (moduleName.indexOf('/', dirName.length + 1) === -1);
}
return additionalCondition;
};
TestLoader.load();
But instead I had to do:
import Ember from 'ember';
import resolver from './helpers/resolver';
import {
setResolver
} from 'ember-qunit';
import TestLoader from 'ember-cli-test-loader/test-support';
Ember.$(document).ready(function () {
TestLoader.prototype.shouldLoadModule = function (moduleName) {
//return (moduleName.match(/[-_]test$/));
var additionalCondition = true;
var dirName = QUnit.urlParams.directory;
if (dirName) {
additionalCondition = moduleName.indexOf(dirName + '/') === 0 && (moduleName.indexOf('/', dirName.length + 1) === -1);
}
return additionalCondition;
};
});
setResolver(resolver);
But now I am getting following error when calling andThen helper method:
Assertion after the final `assert.async` was resolved
So:
//THIS FAILS(BUT USED TO WORK BEFORE QUINT UPGRADE)
test("DUMMY TEST 2", function (assert) {
clickSomeElement();
andThen(()=> {
assert.equal(1, 1);
});
});
I am using really classic version of ember "1.10.1". Not sure if it was caused by it! Could use some help resolving it. Posted here too: https://github.com/ember-cli/ember-cli/issues/6293

loading a test file using AJAX

Im newbie to Ajax and need to load a test file contents from the server,
Here is my html page and views.py
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#test1").click(function(){
$("#test2").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="test1">This is first block</div>
<div id="test2">This is second block</div>
</body>
</html>
views.py
def ajax_page(request):
variables = RequestContext(request)
return render_to_response('ajaxtest.html',variables)
urls.py
(r'^ajax/$',ajax_page),
When I run it and debug using the IE debugger, I get the msg,
"GET /ajax/demo_test.txt HTTP/1.1" 404 3295
Question:
Can I get a file from the server a load it in test-2?..How can I specify the location of the file to the server?
Please try this:
Create a view to return the demo_test.txt:
def demo(request):
return render(request, 'demo_test.txt')
And create a url to fetch the above by the .load() method:
url(r'^demo/$', 'app.views.demo'),
In your script, pass the url to the .load() method:
$(document).ready(function () {
$("#test1").click(function () {
$("#test2").load(/demo/);
return false;
});
});

Json response can't not be evaluated by eval

**index.jsp (client side)**
**************************************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!--
function request(callback) {
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
alert(xhr.responseText);
var text = xhr.responseText;
var myObject = eval('(' + text + ')');
callback(myObject.Addresses);
}
};
xhr.open("GET", "jsonResponse.jsp", true);
xhr.send(null);
}
function readData(oData) {
alert(oData);
}
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
return xhr;
}
//-->
</script>
</head>
<body>
<p>
<button onclick="request(readData);">Afficher le fichier XML</button>
<div id="output"></div>
</p>
</body>
</html>
***jsonResponse.jsp (server side)***
**********************************************************************************
<%--
Document : jsonResponse
Created on : Mar 4, 2012, 8:39:23 PM
Author : ghorbel
--%>
<%#page import="org.json.JSONException"%>
<%#page import="org.json.JSONArray"%>
<%#page contentType="text/html; charset=UTF-8"%>
<%#page import="org.json.simple.JSONObject"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<%
JSONObject json = new JSONObject();
JSONArray addresses = new JSONArray();
JSONObject address;
try
{
int count = 15;
for (int i=0 ; i<1 ; i++)
{
address = new JSONObject();
address.put("CustomerName" , "Decepticons" + i);
addresses.put(i,address);
}
json.put("Addresses", addresses);
}
catch (JSONException jse)
{
}
response.getWriter().flush();
response.setContentType("application/json");
response.getWriter().write(json.toString());
%>
</body>
</html>
The result of 'alert(xhr.responseText);' (the json return response from the server).
*************************************************************************************************
{"Addresses":[{"CustomerName":"Decepticons0"}]}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
****************************************************************************************
The problem here that the 'var myObject = eval('(' + text + ')');' cannot evaluate the json return response from the server.(the result is just above).
My question. Why the result contains these extra linges.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
</body>
</html>
when it' supposed to return just
{"Addresses":[{"CustomerName":"Decepticons0"}]}.
If someone can tell me what's wrong with the program.
I use Netbeans , Glassfish.
Thanks in advance.
As well as your code your JSP contains literal HTML. You only want the <%#page import...%> and your central code inside <% ... %> that does the work.

Resources