I want to make a WEB page move screen transition in ajax .
I wrote in one.html
<html>
<head>
<meta charset="UTF-8">
<title>Top</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.pjax.js"></script>
</head>
<script type="text/javascript">
$(function() {
$.pjax({
area: '#main'
});
$(document).bind('pjax:render', function() {
$('#main').attr({
'class': 'fadeInUp'
});
});
});
</script>
<body>
<p>
name
</p>
<input type="text" name="name" size="10">
<p class="button">Next</p>
</body>
</html>
in two.html
<p>
age
</p>
<input type="text" size="10">
<p class="button">Next</p>
But when I put Next button in one.html,Page not found (404)
Request URL:http://127.0.0.1:8000/app/two.html error happens.
I cannot understand why such an error happens.What is wrong in my codes?How should I fix this?
http://127.0.0.1:8000/app/two.html
so the link you can set blow:
<p class="button">Next</p>
Related
I want to grab the current, post edited value of my textarea elements when onblur occurs. Despite having changed the content, the DOM keeps giving me the original content. For example...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blur updates</title>
<script>
viewContent = function(id) {
console.log(document.getElementById(id).innerHTML);
};
</script>
</head>
<body>
<p>
Edit one, then click in two. Does the value change in the console?
<br/> No, it does not.
</p>
<br/>
<form>
<textarea id="1" onblur="viewContent('1')" cols="24" rows="4">one</textarea>
<textarea id="2" onblur="viewContent('2')" cols="24" rows="4">two</textarea>
</form>
</body>
</html>
Any edits to the textareas are not reflected in the console. How do I get the current content?
use .value instead of .innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blur updates</title>
<script>
viewContent = function(id) {
console.log(document.getElementById(id).value);
};
</script>
</head>
<body>
<p>
Edit one, then click in two. Does the value change in the console?
<br/> No, it does not.
</p>
<br/>
<form>
<textarea id="1" onblur="viewContent('1')" cols="24" rows="4">one</textarea>
<textarea id="2" onblur="viewContent('2')" cols="24" rows="4">two</textarea>
</form>
</body>
</html>
Further readings:-
value
Element.innerHTML
<!doctype html>
<html>
<head>
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
In the above code snippets I am trying to print the value associated with input which has id ="one".
But I am getting error as
cannot read property 'value' of null.
You need to put your JavaScript at the end of the body. Placing it in head, means, it will execute even before the DOM elements are ready. Placing it at the end of body, means, JS will execute after the body elements are loaded:
<html>
<body>
<input type="text" id="one" name="acc" value="iss" />
<script type='text/javascript'>
var a = document.getElementById('one').value;
console.log(a);
</script>
</body>
</html>
If you use JQuery, then your code should be in $(document).ready(function(){ ... })
you need to place the <script>...</script> part at the end of your document:
<!doctype html>
<html>
<body>
<input type="text" id="one" name="acc" value="iss">
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</body>
</html>
Or you use document.onready event:
<!doctype html>
<html>
<head>
<script>
document.addEventListener("load", function() {
var a=document.getElementById("one").value;
console.log(a);
});
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
I have a problem with the window.opener function (JS):
I created 3 simple pages to simulate my problem:
test.php:
<html>
<head>
</head>
<body>
<input type="button" onclick="window.open('first_page_in_popup.php', 'Popup', 'width=470,height=500');">
<input type="text" id="content" name="content" >
</body>
</html>
first_page_in_popup.php:
<html>
<head>
<script type="text/javascript" >
window.opener.document.getElementById('content').value= "Test from first page in popup";
window.open('second_page_in_popup.php', 'Popup');
</script>
</head>
<body>
</body>
</html>
second_page_in_popup.php:
<html>
<head>
<script type="text/javascript" >
window.opener.document.getElementById('content').value= "Test from second page in popup";
</script>
</head>
<body>
</body>
</html>
Result:
In IE, the input field has the content "Test from second page in popup".
In Chrome and Firefox, the content is : "Test from first page in popup".
The Error Message:
window.opener.document.getElementById(...) is null
try parent.window.opener instead of window.opener
Source: window.opener is null in firefox
I solved the problem by changing the code of page "first_page_in_popup.php" to:
<html>
<head>
<script type="text/javascript" >
window.opener.document.getElementById('content').value= "Test from first page in popup";
window.location.href = 'second_page_in_popup.php';
</script>
</head>
<body>
<p> First Page </p>
<input type="text" id="first" name="first">
</body>
</html>
window.opener.document.getElementById(...) is null
that means content in window.opener.document.getElementById is null or undefined
please try to define
content in second php as defined in first php
hope this will work.
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
I have a page that contains a dynamically loaded <iframe>. This iframe contains a <form>.
When the user submits the <form>, a new page is loaded within the <iframe> saying Thanks.
Instead of using a second page, i want the parent page to show the Thanks message.
So basically i am in my <iframe>, and i want to call a function on the parent frame.
How can i do that ?
From an iframe, it is possible to call a function declared on the parent window using window.top.functionName(). But for this to work, both pages should be hosted on the same domain. They are subject to Same Origin Policy. That means if you want to test this example, you should use a server (wamp, xampp, etc..).
page.html (updated)
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
window.foo = function(){
alert('page 1 is executing this code');
}
$(function(){
$('body').append('<iframe src="iframeContent.html"></iframe>');
});
</script>
</head>
<body></body>
</html>
iframeContent.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
i am the iframe. This is my button.
<button onclick="javascript:window.top.foo()">click me</button>
</body>
</html>
I've done a little example for you.
Here is the main page (index.html) containing the iframe
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
And here is the iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// show the thanks div on the top document (not in the iframe)
$("#thanks", top.document).show();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
EDIT : An alternative is to create a function inside the main page and call it in the iframe using parent.nameOfTheFunction()
The main page (index.html)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
showThanks = function(){
$("#thanks").show();
};
</script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
The iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// call showThanks function from the main frame
parent.showThanks();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>