Performing a POST in window.open() - javascript

I'm trying to open a popup and I'd like to send data using the post method when it opens.
Can anyone help me.
I am getting "Uncaught syntax error. Unexpected token }"
function MapIt(){
var ListIds = selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
var urlStr = "http://www.dev.theabc.com/bingmaps/Map ";
$('<form action=' + urlStr + ' ' + ' target="submission" onsubmit="window.open("", "Map",' + opts + ' "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes");return true;" method="post"><input type="hidden" name="listid" value="' + ListIds + '"></form>').submit();
}

After knowing that you don't realy wanted a post.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
MapIt = function() {
ListIds = '1234';//selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
$('#myHidden').val(ListIds);
window.open('opener.html','Map', opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no');
}
});
</script>
</head>
<body>
<button id="run" onclick="MapIt()">run</button>
<input type="hidden" id="myHidden">
</body>
</html>
An then in your opener.html
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
var listIds = window.opener.document.getElementById('myHidden').value;
$('#valuesRead').text(listIds);
});
</script>
</head>
<body>
<span id="valuesRead"></span>
</body>
</html>
BEWARE This has in some browsers (Chrome for one) security objections if you run it locally

Actually... your syntax is wrong in the form
It should look like this
$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
You have to escape the " inside the string... oh and a coma is missing after the opts...
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
MapIt = function() {
ListIds = '1234';//selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
var urlStr = "http://wwwd.dev.theabc.com/bingmaps/Map";
$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
}
});
</script>
</head>
<body>
<button id="run" onclick="MapIt()">run</button>
</body>
</html>

Related

Code execution speed is slower and slower in time

In my project I need to see sensors data in textarea window
and after some time to save those data in txt file.
I use this code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var updateInterval = 50;
var updateChart = function(count) {
count = count || 1;
Val1 = Math.floor((Math.random() * 100) + 1);
Val2 = Math.floor((Math.random() * 100) + 1);
Val3 = Math.floor((Math.random() * 100) + 1);
$(document).ready(function() {
var $textarea = $('textarea');
$textarea.scrollTop($textarea[0].scrollHeight);
});
var d = new Date();
$("#output").append(document.createTextNode(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + " - , " + Val1 + ", " + Val2 + ", " + Val3 + "\n"));
}
setInterval(function() {
updateChart()
}, updateInterval);
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
Filename: <input type="text" name="name" value=" .txt">
<textarea id='output' cols="40" rows="10" name="text" style="border:solid 2px blue;">
Time ,Val1, Val2, Val3
</textarea>
<input type="submit" value="SAVE">
</form>
</body>
</html>`
The problem is in the fact: my code execution speed is slower and slower if time
between start and file saving moment is longer !
If I use 20 samples/sec this amount of slowdown is not acceptable.
Is it possible to get faster code and much less dependent of time (txt file size) ?

Generate HTML with JavaScript and jQuery - JavaScript not executing?

Following to this post, I recreated the code with jQuery. jsFiddle says, that everything should be find and I can't find any mistakes either. Here's the Code:
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
Now the problem might be that the JavaScript is not even executed, my HTML looks like this:
<head>
<?php include 'components/_head.php';?>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/postGen.js"></script>
<script type="application/javascript" src="postGen.js">
document.addEventListener('DOMContentLoaded', function() {
generatePost("Testing Title", "I don't know", "This is || a paragraph");
}
</script>
</head>
<body>
<header>
<?php include 'components/header.php';?>
</header>
<main>
<?php include 'components/main.php';?>
<div class="fullscreencontainer">
<img class="background" src="img/background.jpg">
<div class="title">
<h2>Der Bürger als Edelmann</h2>
<h4>von Moliére</h4>
</div>
</div>
<div class="container">
<div id="postcontainer">
/* ? */
</div>
<div class="sidebar">
</div>
</div>
</main>
<footer>
<?php include 'components/footer.php';?>
</footer>
</body>
The structure of the files:
index.php
js/jquery-1.11.3.min.js
js/jquery-migrate-1.2.1.min.js
js/postGen.js This file contains the code written in the first code-box
Inspector shows nothing new.
Console shows:
Syntax Error: Missing ) after argument list
EDIT:
The final Code:
<script type="application/javascript">
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>')
$('#post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>');
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
</script>
Seems you were calling the generatePost() function too early (when document loads, but at the same time, thats also when you load your jQuery... why you were getting the ")" Missing error..).
So I changed the HTML to:
<head>
</head>
<body>
<main>
<div class="container">
<div id="postcontainer">
</div>
</div>
</main>
</body>
And the jQuery to:
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>').attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
Just calling the function at the end of the document.ready. Also, as you can see, I also ran into some issues about how the post's id was being assigned, so ended up switching that up as well, assigning it with some simple string interpolation.
Cheers,
PG

How can use multiple javascript?

Hello everyone I'm trying to run multiple javascripts. My first javascript is which has change function working fine but second one does not work. So how can i run multiple javascript code? Here is my code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#main').on('change', '.select-box', function () {
if ($(".select-box option[value='3']").attr('selected')) {
$('#demo').html("<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>");
}
if ($(this).val() == 5) {
document.getElementById("demo").innerHTML = "Woo";
}
});
});
</script>
<script>
var x = "", i;
for (i = 0;i < 3;i++) {
x = x + "<option value='" + i + "'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML = "<select>" + x + "</select>";
</script>
</head>
<body>
<div id="main">
<select class="select-box">
<option>Select an option</option>
<option value="1">no alert</option>
<option value="2">no alert too</option>
<option value="3">alert</option>
</select>
<p>
<br/>
</p>
<div id="demo"></div>
</div>
<p id="demo2"></p>
</body>
</html>
You can try something like this if you want to use jQuery and some other javascript libs
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
In your code there is additional the type="text/javascript" missing in the script tag. So it schould look like this:
<script type="text/javascript">
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
</script>
This script:
<script>
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
</script>
Tries to get the element demo2 before it exists. Move the script to somewhere after demo2, maybe right before </body>.
Or, alternatively, put that last part in a ready handler like your first script:
<script>
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
$(document).ready(function() {
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
});
</script>
And here's how I'd do it, by the way:
var demo2 = document.getElementById('demo2');
for(var i = 0; i < 3; i++) {
var item = document.createElement('option');
item.value = i;
item.appendChild(document.createTextNode(i.toString()));
demo.appendChild(item);
}

function is undefined

This Link is a sample
<script type="text/javascript" language="javascript">
$.blockUI({ overlayCSS: { backgroundColor: 'orange'} , message: '<img src="icon/wait.gif" /><div style=\'font-family:Tahoma;font-size:large\'> ...???? ??? ???? ??? ????</div>' });
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
function test()
{
var certification = "";
var address;
var idCompany="821229021";
var Empty = true;
for (var i = 0; i < 10; i++)
{
idCompany =idCompany + i.toString();
idCompany=idCompany + ".png";
address="Image/CertificationCompany/"+idCompany;
if (UrlExists(address))
{
//certification += "<img style='margin:5px;padding:5px;cursor: pointer; border: 1px solid GrayText;' width='103px' height='80px;' src='Image/CertificationCompany/" + idCompany + "' />";
certification +="<a href='Image/CertificationCompany/" + idCompany + "' rel='prettyPhotoCertification[pp_gal]' title=' ?????? ????????? ???? "+document.title+"'><img style='margin:5px;padding:5px;cursor: pointer; border: 1px solid GrayText;' width='103px' height='80px;' src='Image/CertificationCompany/" + idCompany + "' alt='????????? ??' /></a>";
Empty = false;
}
idCompany="821229021";
//$.unblockUI();
}
if(Empty ){
certification = "updating<br /><img src='icon/Updated.png' />";
}
$("#contentCertification").html(certification);
}
$.unblockUI();
</script>
HTML
<input type="button" value="click me" onclick="test();"/>
2) In IE, $.blockUI() does not work and it appears that the browser has hung.
This Link is a sample
<script type="text/jscript" language="javascript">
should be
<script type="text/javascript">
How are you loading jQuery and the plugins? Ensure that you don't use a self closing script tag, doesn't work on IE.
<script src="js/blockui.js" /> <!-- WRONG -->
<script src="js/blockui.js></script> <!-- CORRECT -->

window.open in javascript?

<head>
<script language="javascript" type="text/javascript">
function openMe()
{
var win = window.open("about:blank");
var str="";
for(var a in win){
str+=a+"<br/>";
}
document.getElementById("data").innerHTML = str;
win.document.write("Karandeep Singh");
}
</script>
</head>
<body>
<div>
<input type="button" value="OK" onclick="openMe()"/>
</div>
<div id="data">
</div>
The above code is open a document and write on it. but it is not working in safari.
you need proper html...
do it like this,
demo
function openMe()
{
var win = window.open();
var str="";
for(var a in win){
str+=a+"<br/>";
}
document.getElementById("data").innerHTML = str;
var windowHTML =
"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\n" +
"<html>\n" +
"<head></head>\n" +
"<body>Hello World</body>\n" +
"</html>";
win.document.write(windowHTML);
win.document.close();
}​

Categories

Resources