This is the code fragment I have :
<html>
<script type="text/javascript">
function Run()
{var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"];
window.location.href = "index.php?w1=" +a;}
</script>
<body>
<input type="button" id="upload" value="RUN" onclick="Run();" />
<body>
</html>
when clicked 'RUN', I need to send array value to multiple pages one after the other without shifting between pages.
1. Page1 index.php // a has no use, executed first
2. Page2 index2.php // a is used here, executed second
3. Page3 index3.php // a is used here, executed third
Is it possible?
Sounds like you can achieve what you're trying with ajax. To make them run synchronously (one after the other), you could call the next PHP page in the success callback of the currently running ajax.
Some pseudo code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var data = "my data";
$.ajax({ url: 'index.php',
data: { data: data },
type: 'post',
success: function(output) {
runindex2(output.data);
}
});
function runindex2(data) {
$.ajax({ url: 'index2.php',
data: { mydata: data },
type: 'post',
success: function(output) {
runindex3();
}
});
}
function runindex3()....
</script>
Best case:
Use ajax.
<html>
<head>
<script type="text/javascript">
var xmlhttp = new Array;
var url = new Array;
// Create 3 instances.
for (var i = 0; i < 3; i++) {
xmlhttp[i] = new XMLHttpRequest;
}
var arr = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];
// function which will run
// on button click.
function Run() {
var url1 = "test.php?w1=" + arr;
var url2 = "test1.php?w1=" + arr;
var url3 = "test2.php?w1=" + arr;
url = [url1, url2, url3];
for (var i = 0; i < 3; i++) {
xmlhttp[i].open("GET", url[i]);
xmlhttp[i].onreadystatechange = function() {
if (this.readyState == 4) {
document.write(this.responseText);
}
}
xmlhttp[i].send(null);
}
}
</script>
</head>
<body>
<input type="button" id="upload" value="RUN" onclick="Run();" />
<body>
</html>
Complex Solution:
use 4 iframes in the document. First keep them display none. Then on button click, open the url in all the iframes.
<html>
<head>
<script type="text/javascript">
var url = new Array;
var arr = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];
// function which will run
// on button click.
function Run() {
var url1 = "test.php?w1=" + arr;
var url2 = "test1.php?w1=" + arr;
var url3 = "test2.php?w1=" + arr;
url = [url1, url2, url3];
var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
iframes[i].src = url[i];
}
}
</script>
</head>
<body>
<input type="button" id="upload" value="RUN" onclick="Run();" />
<iframe style='display:none;'></iframe>
<iframe style='display:none;'></iframe>
<iframe style='display:none;'></iframe>
<body>
</html>
Another method:
In your server you can include other 2 files to a file.
here I have included test1.php and test2.php in test.php
<?php
var_dump($_GET["w1"]);
include "test1.php";
include "test2.php";
?>
html:
<html>
<head>
<script type="text/javascript">
var arr = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];
// function which will run
// on button click.
function Run() {
window.location.href = "test.php?w1=" +arr;
}
</script>
</head>
<body>
<input type="button" id="upload" value="RUN" onclick="Run();" />
<body>
</html>
Related
I want to pass results (return value of POST) from one page into other embedded page, and I don't know how can I do it.
The structures look like:
main html page (Welcome.html) which has ej2 file (Buttom.html):
Welcome.html:
<html>
<body>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
xhr.open("POST", "/addGrade", true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
data = // logic to get the data (i skipped adding this part)
xhr.send(data);
xhr.onloadend = function () {
// HERE I WANT TO PASS THE RESULTS TO Buttom.html
};
}); // click on submit
}); // ready
</script>
<form id="gradeForm">
<p>
<label>Name:</label>
<input type="text" name="name" id="name">
</p>
<p>
<label>Grade:</label>
<input type="text" name="grade" id="grade" value="100">
</p>
<p>
<button type="button" id="submit" >submit</button>
</p>
</form>
<div>
<%include Buttom.html%>
</div>
</body>
</html>
Buttom.html:
<head>
</head>
<body>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
}); // ready
</script>
<p id="ppp">
<!-- Here I want to add the results -->
<p>
</body>
How can I pass the results from POST (in welcome.html) to Buttom.html (i.e into function of js in Buttom.html) ?
Welcome.HTML
$(document).ready(function(){
$("#submit").click(function(){
xhr.open("POST", "/addGrade", true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
data = // logic to get the data (i skipped adding this part)
xhr.send(data);
xhr.onloadend = function () {
// If your data is big then use cookies or create form and send it to another page
var url = "YourPage?data=" + encodeURIComponent(YOUR_DATA);
window.location.href = url;
};
}); // click on submit
}); // ready
ON Buttom.html:
$(document).ready(function(){
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["name"] != null) {
// YOUR CODE
}
});
});
I want to get an id from the query and display it in html.
I want to keep things in separate javascript files, because in the future, it will retrieve a json from php and will filter it based on some checkboxes, radio buttons, etc. and then display the result.
In this moment, I get a blank page, and the id value is not shown, so I'm doing something wrong.
http://localhost:10600/js1/index.php?id=5
index.php
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
</head>
<body>
<div class="results"></div>
</body>
</html>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="display.js"></script>
<script type="text/javascript" src="sequence.js"></script>
config.js
function getId() {
id = "<?php echo $_GET['id']; ?>";
}
display.js
function updateHtml() {
window.onload = function() {
document.querySelector('.results').innerHTML = id;
}
}
sequence.js
function seq()
{
getId();
updateHtml();
}
seq();
Please try the following:
index.php
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
</head>
<body>
<div class="results"></div>
</body>
</html>
<script type="text/javascript">
var id;
function getId() {
id = "<?php echo $_GET['id']; ?>";
}
</script>
<script type="text/javascript" src="display.js"></script>
<script type="text/javascript" src="sequence.js"></script>
function getParameters() {
var url_params = window.location.search.substring(1); // Removing characters : ?
var params = url_params.split("&");
var res = {};
for (var i = 0, c = params.length; i < c; i++) {
var split = params[i].split("=");
res[split[0]] = split[1];
}
return res;
}
Returns an object {param: value}
In index.php within body you can do like this one
<input type="hidden" name="hidden_id" id="hidden_id" value="<?=$_GET['id']?>">
In JS :
If you are using jQuery,then you should do like this one.
$(document).ready(){
var strHiddenId = $("#hidden_id").val();
$(".results").html(strHiddenId);
}
We are attempting to save a URL stored in a string to a text file, but we can't seem to get it to work. It will not save into the file, although our testing shows that the function is actually running when it should be.
The code for this is here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button onclick="instagramclick()">Login to instagram</button>
<button onclick="myFunction()">Test Button</button>
<script>
function myFunction() {
alert("Hello World");
}
function instagramclick(){
alert("button clicked");
window.location.href = "https://instagram.com/oauth/authorize/?client_id=8a612cd650344523808233c0468c80ed&redirect_uri=http://u-ahmed.github.io/HookedUp/instagram.html&response_type=token";
}
function WriteDemo(link)
{
var fso, f, r;
var ForReading = 1, ForWriting = 2;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.OpenTextFile("database.txt", ForWriting, true);
f.Write(link);
f.Close();
r = f.ReadLine();
return(r);
}
window.onload = function writedamnyou(){
var token = window.location.href.substring(62);
if (token != ""){
// document.write(token);
var link = "https://api.instagram.com/v1/users/self/feed?access_token=" + token;
// w = window.open('database.txt')
WriteDemo(link);
// document.write(stuff);
}
};
</script>
<p id="no"></p>
</body>
</html>
Thanks in advance.
I'm using JStree to display an XML file, and after displaying it the user can create, rename, or delete some nodes, and sor sure these changes appear only on the displayed xml and not reflected on the original file, I want to know how to reflect this changes to the original XML fie back after clicking like a submit button, or at least how to get the data changed.
Update
The code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu-editor</title>
<script type="text/javascript" src="src/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="src/jstree/jquery.cookie.js"></script>
<script type="text/javascript" src="src/jstree/jquery.hotkeys.js"></script>
<script type="text/javascript" src="src/jstree/jquery.jstree.js"></script>
<link href="themes/!style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="src/jstree/!script.js"></script>
<script type="text/javascript" src="src/UIMTreeProcessor.js"></script>
<style type="text/css">
.
.
.
//css stuff
</style>
</head>
<body>
<div id="dummy"></div>
<div id="mylist">
<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>
</div>
<div id="submit" class="submit_btn">Submit</div>
</body>
<script type="text/javascript" class="source below">
var _url = "cafe.xml";
var _uimTree = null;
$(function () {
getTopContent();
});
getTopContent = function(){
$.ajax({
type: "GET",
url: _url,
dataType:"xml",
cache: false,
beforeSend:function(){
//do something before send
},
success: function(data){
processXML(data);
},
error:function(e){
alert("Error: "+e);
}
});
}
processXML = function(root){
_uimTree = new UIMTreeProcessor(root, $("#mylist"));
_uimTree.doProcess();
}
$('#submit').on('click',function(){
//alert the entire XML after edits via (getXML)
});
</script>
And the UIMtreeprocessor Library code
function UIMTreeProcessor(data, treeEl) {
this.data = data;
this.treeEl = treeEl;
}
UIMTreeProcessor.prototype.initTree = function(data){
this.treeEl.jstree({
"json_data" : {
"data":data,
"progressive_render":"true"
},
"plugins" : ["themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"],
"core":{"animation":0}
});
}
UIMTreeProcessor.prototype.doProcess = function(){
//Find root:
var _root = $(this.data).children(':first-child');
var _a_feed = new Array();
this.vsTraverse($(_root), _a_feed);
var _treedata = [{"data":_root[0].nodeName,"children":_a_feed, "state":"open"}];
this.initTree(_treedata);
}
UIMTreeProcessor.prototype.vsTraverse = function(node, arr){
var _ch = $(node).children();
for(var i=0; i<_ch.length; i++){
var _vsArr = new Array();
this.vsTraverse(_ch[i], _vsArr);
var _a_att = this.vsTraverseAtt(_ch[i]);
if(null!=_a_att){
_vsArr.push([{"data":"Attributes "+"["+_ch[i].nodeName+"]","children":_a_att, attr : { "class" : "uim_attr"}}]);
}
if(null!=_ch[i].firstChild && 3==_ch[i].firstChild.nodeType){
arr.push([{"data":_ch[i].nodeName + ": " + _ch[i].firstChild.textContent,"children":_vsArr, "state":"open"}]);
}else{
arr.push([{"data":_ch[i].nodeName,"children":_vsArr, "state":"open"}]);
}
}
}
UIMTreeProcessor.prototype.vsTraverseAtt = function(node){
var _a_atts = null;
if(null!=node.attributes && node.attributes.length > 0){
_a_atts = new Array();
for(var i=0; i<node.attributes.length; i++){
_a_atts.push(node.attributes[i].nodeName + ":" + node.attributes[i].nodeValue);
}
}
return _a_atts;
}
Edit: I was really wrong in my original answer.
There is a get_xml method in the xml_data plugin, which is supposed to do what you describe. I have not tested it myself, but if it's anything like json_data.getJSON, the output will contain all kinds of JStree metadata which you will not want to put back into your XML.
what's wrong here?
OPTIONS https://twitter.com/oauth/request_token 401 (Unauthorized)
jsOAuth-1.3.4.js:483 XMLHttpRequest cannot load
https://twitter.com/oauth/request_token. Origin "http://localhost:8080"
is not allowed by Access-Control-Allow-Origin.Object
<!DOCTYPE html>
<html>
<head>
<!--
A simple example of PIN-based oauth flow with Twitter and jsOAuth.
This is mostly based on/copied from <http://log.coffeesounds.com/oauth-and-pin-based-authorization-in-javascri>.
Get jsOAuth at <https://github.com/bytespider/jsOAuth/downloads>
-->
<meta charset="utf-8">
<title>jsOauth test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jsOAuth-1.3.4.js"></script>
<style type="text/css" media="screen">
</style>
<script>
$(document).ready(function() {
var options = {
consumerKey: 'YOUR_CONSUMER_KEY',
consumerSecret: 'YOUR_CONSUMER_SECRET'
};
var requestParams;
var accessParams;
var oauth = OAuth(options);
oauth.get('https://twitter.com/oauth/request_token',
function(data) {
console.dir(data);
window.open('https://twitter.com/oauth/authorize?'+data.text);
requestParams = data.text
},
function(data) { alert('darn'); console.dir(data) }
);
$('#pinbutton').click(function() {
if ($('#pin').val()) {
oauth.get('https://twitter.com/oauth/access_token?oauth_verifier='+$('#pin').val()+'&'+requestParams,
function(data) {
console.dir(data);
// split the query string as needed
var accessParams = {};
var qvars_tmp = data.text.split('&');
for (var i = 0; i < qvars_tmp.length; i++) {;
var y = qvars_tmp[i].split('=');
accessParams[y[0]] = decodeURIComponent(y[1]);
};
oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);
getHomeTimeline();
},
function(data) { alert('poop'); console.dir(data); }
);
}
});
function getHomeTimeline() {
oauth.get('https://api.twitter.com/1/statuses/home_timeline.json',
function(data) {
entries = JSON.parse(data.text);
var html = [];
for (var i = 0; i < entries.length; i++) {
html.push(JSON.stringify(entries[i]));
};
$('#timeline').html(html.join('<hr>'));
},
function(data) { alert('lame'); console.dir(data); }
);
}
});
</script>
</head>
<body>
<h1>jsOauth test</h1>
When you get a PIN, enter it here.
<input id="pin" type="text" value=""><button id='pinbutton'>Save</button>
<div id="timeline">
</div>
</body>
</html>
I could give you the answer, but what you're doing is against the Twitter API Terms of Service. OAuthing in JavaScript exposes the secret credentials to anyone who visits the site and that is A Bad Thing. Please do this on your back-end.