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;
});
});
Related
I wrote the following html file:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body>
<h1> HELLO WORLD </h1>
<button type="button"> CLICK HERE</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('button').click(function() {
$('h1').text("Thank you");
var ans = prompt("Please type your age");
if (ans > 80) {
$('h1').text("You're old");
}
})
</script> </body> </html>
I want to test that once the user clicks on the button and gives an age older than 80, the page behaves as expected and the h1-tag text changes to "You're old".
My question is how to write a Jasmine spec to test this feature?
You need to use "Spy" object to intercept "prompt" function and return your own value. After check the caption text. The code may look like ...
deascribe("test inline function:", function() {
it("caption should be 'too old' for age of more than 80", function () {
spyOn(window, 'prompt').and.returnValue(81);
$('button').click();
expect($('h1').text()).toBe("You're old");
});
});
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
Hello and thank you for reading my post.
Here is what I basically want to do:
in a first HTML page ("parent.html"), there is a button ;
when a user clicks the button a new window pops up ("child.html")
AND the contents of a "div" element in the child window is updated.
The final action is unsuccessful under "Firefox" and "Chrome".
parent.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=UTF-8">
<title>Parent window document</title>
</head>
<body>
<input
type="button"
value="Open child window document"
onclick="openChildWindow()" />
<script type="text/javascript">
function openChildWindow()
{
var s_url = "http://localhost:8080/projectroot/child.html";
var s_name = "ChildWindowDocument";
var s_specs = "resizable=yes,scrollbars=yes,toolbar=0,status=0";
var childWnd = window.open(s_url, s_name, s_specs);
var div = childWnd.document.getElementById("child_wnd_doc_div_id");
div.innerHTML = "Hello from parent wnd";
}
</script>
</body>
</html>
child.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=UTF-8">
<title>Parent window document</title>
</head>
<body>
<div id="child_wnd_doc_div_id">child window</div>
</body>
</html>
IE9 => it works.
Firefox 13.0.1 => it doesn't work. Error message: "div is null".
Chrome 20.0.1132.47 m => doesn't work.
Do you understand that behaviour?
Can you help me make it work in these three cases?
Thank you and best regards.
I think that the window/document is not loaded at the time when you try to access the elements from it. You can do something like
childWnd.onload = function() {
var div = childWnd.document.getElementById("child_wnd_doc_div_id");
div.innerHTML = "Hello from parent wnd";
}
Also you can take a look at the mdn doc.
A better approach to the problem may be to do the changes in the 'child'. You can access the parent window with window.opener. But you should keep in mind that the parent window could be closed so you should consider some type of local storage (e.g. cookie).
I simply cannot find an object in DOM using Firebug (FF).
I want to see elrteOptions object in DOM. I right-click "Inspect Element" on the page, going to DOM tab and typing elrteOptions in the search box. No results.
How to I see it? =)
Thanks.
Code is as simple as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>some</title>
<script src='js/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
var elrteOptions = {
cssClass : 'el-rte',
lang : 'ru',
toolbar : 'maxi',
cssfiles : ['styles/elrte-inner.css']
}
});
</script>
</head>
<body>
test
</body>
</html>
Looks like it had something to do with the browser (Firefox 9.0.1).
After complete re-install: objects started to appear normally.
I am trying to call a Sample API from my JSP using jQuery Ajax, but I am not getting success. I dont know where am I wrong but even simple html page is not getting loaded.
Here is my code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Hello
<div id="temp">
<a href="#" onclick="callGetApplicationDetails();" >Click Here</a>
</div>
<script type="text/javascript">
function callGetApplicationDetails()
{
$.ajax({
url:"serverFile.jsp",
type: "GET",
dataType:'html',
async: true,
data:data,
success: function(responseData) {
if (responseData != null && callback != null) {
alert('success');
$('#temp').html(responseData);
}
},
error: function(){
alert('error');
if (errorCallback !=null) errorCallback();
}
});
}
</script>
</body>
</html>
Even the alert is not popping up of success and failure.
Pls help.
thanks
Hemish
I suggest that you use firebug, and check that the request is making it to the server.