Copy div to a popup - javascript

How can I copy an entire div to a popup window?
What I`m trying to do:
function ImprimirTela() {
var text = "<html>\n<head>\n<title>Impressão Guia</title>\n";
text += "<script src='~/js/jquery-1.4.2.js' type='text/javascript' language='javascript' />\n";
text += "</head>\n<body>\n";
text += "<input type='button' value='Imprimir esta página' onclick='window.print();' style='float: right' />\n";
text += "<div id='conteudo'>\n";
text += $("#divDadosBasicos").html($(querySelector).html());
text += $("#divHipotesesDiagnosticas").html($(querySelector).html());
text += "</div>\n/body>\n</html>";
var newWindow = window.open('', 'Impressao', 'width=900,height=700');
newWindow.document.write(text);
}
I dont know if this is the better way to do it. If you think/know a easier way to do it, please share
Thanks in advance!

Fix some of these errors and it will work fine
Script tag is not closed properly
body tag not closed properly
querySelector is not defined. (I am commenting that portion)
function ImprimirTela() {
var text = "<html>\n<head>\n<title>Impressão Guia</title>\n";
text += "<script src='~/js/jquery-1.4.2.js' type='text/javascript' language='javascript'></script>\n";
text += "</head>\n<body>\n";
text += "<input type='button' value='Imprimir esta página' onclick='window.print();' style='float: right' />\n";
text += "<div id='conteudo'>\n";
//define querySelector
//text += $("#divDadosBasicos").html($(querySelector).html());
//text += $("#divHipotesesDiagnosticas").html($(querySelector).html());
text += "</div>\n</body>\n</html>";
var newWindow = window.open('', 'Impressao', 'width=900,height=700');
newWindow.document.write(text);
}

You could use a Jquery Modal Popup
http://jqueryui.com/demos/dialog/
Check it out, it has the functionality that you need.
It has several events you can tweak to modify the data.

Just tested this, and the code seems to be working just fine as long as querySelector is defined, and it's in a document.ready function and you are testing this on an actual webserver (like WAMP/LAMP etc.). It will not work in places like jsFiddle etc.

Related

Pass javascript variable through html code in Javascript

I have a JavaScript within which am dynamically creating an HTML form with a Confirm button. When clicking on the confirm button, certain JavaScript variables need to be passed to another JS method within the same file. But am getting an error in the code that I've written that doesn't adhere to the same js file but another jsp file, though it doesn't directly link or is affected by it in any way.
JS Function with the Button onclick
if (dropElem == "stream ui-draggable ui-draggable-handle") {
var newAgent = $('<div>');
jsPlumb.addEndpoint(newAgent,connectorProperties);
newAgent.attr('id', i).addClass('streamdrop');
var elemType = "table";
$("#container").addClass("disabledbutton");
$("#toolbox").addClass("disabledbutton");
$('#container').append(newAgent);
$("#lot").append(
"<h4>TABLE</h4></br>"+
"<h5> Select a Table </h5></br>"+
"<div class='col-md-12'>"+
"<select id='attr-combobox-style' name='attr-combobox-style' class='form-control' id='tableListDropDownCombo'>"+
"<option value='Select an option'>Select an option</option>"
);
for(var q=0;q<StreamArray.length;q++)
{
$("#attr-combobox-style").append(
"<option value="+StreamArray[q][0]+">"+StreamArray[q][0]+"</option>"+
"</select>"+
"</div>"
);
}
$("#lot").append(
"<div class='form-group'></br>"+
"<label class='col-md-12 control-label' for='tableFormConfirmButton'></label></br>"+
"<label class='col-md-12 control-label' for='tableFormConfirmButton'></label></br>"+
"<label class='col-md-12 control-label' for='tableFormConfirmButton'></label></br>"+
"<label class='col-md-2 control-label' for='tableFormConfirmButton'></label>"+
"&nbsp<button id='tableFormConfirmButton' name='tableFormConfirmButton' class='btn btn-primary' onclick='storeTableFormInfo("+newAgent+","+i+","+e+","+mouseTop+","+mouseLeft+","+elemType+")'>Confirm</button>"+
"&nbsp&nbsp<button id='tableFormCancelButton' name='tableFormCancelButton' class='btn btn-danger'>Cancel</button>"+
"</div></br>"
);
$("property").show();
$(".toolbox-titlex").show();
$(".panel").show();
i++; //Increment the Element ID for the next dropped Element
finalElementCount=i;
}
Error on Console
Since I didn't make any changes to any other files, I'm guessing that the error caused here is due to the syntax line where I've tried to pass the multiple javascript variables(newAgent,i,e,mouseTop,mouseLeft,elemType) in the onclick function of the Confirm button.
Any suggestions in this regard will be highly appreciated.
You need to declare javascript global variable and need to define first in script tag like below
<script type='text/javascript' >
var myGlobalVariable = false;
</script>
<script type='text/javascript' src='js/Other.js'></script>
...
<script type='text/javascript' >
// other java script code that depend on Other.js
</script>

Getting values outside a HTML form

Inside my content.js I am writting a new HTML page with a pre polulated form, which contains var a and var b. Those 2 variables are created before, inside content.js, so I can easily use them inside my HTML page. Now I want to override those variables a and b as the user finishes editing the form and presses the button Accept. Is there anyway I can achieve this?
This is a part of the code
var a="FName";
var b="LName";
var myWindow = window.open("Accept", "myWindow", "width=450, height=300");
myWindow.document.write(
"<html>"+
"<head>"+
'<script> function closeWindow(){ var x = document.getElementById("firstname").value alert(x); window.close();}'+
"</script>"+
"</head>"+
"<body>"+
"<form>"+
"<div id=leadinformation>"+
"<p id=titleParagraph>You are about to create a new Lead:</p>"+
"First Name....."+ "<input type=text id=firstname value="+a+">" +"<br>"+
"Last Name....."+ "<input type=text id=lastname value="+b+">" +
"</div>"+
"<div>"+
"<button id=Accept onClick=closeWindow() >Accept</button>"+
"<button id=Close onClick=closeWindow() >Close</button>"+
"</div>"+
"</form>"+
"</body>"+
"<html>"
);
myWindow.document.getElementById('Accept').onclick=Accept;
myWindow.document.getElementById('Close').onclick=Close;
function Accept(){
alert(myWindow.document.getElementById('firstname').innerText);
}
function Close() {//do smthing
}
Sorry for bad formating.
Currently the output of the Accept(); is empty at the moment. How can I get first name input result?
What I want to achieve:
1) I am creating a button on a page
2) When I click on the button a new html page pops out (the one that I am hardcode writing it)
3) I pre populate the form with some variables that I created before
4) When Clicking The Accept button on the form the Accept() function is triggered where I would want to use those input values the user has written.
This should help you: Sharing global javascript variable of a page (...).
The question is about "How to share a variable to another page in an iframe", but this works for a new windows as well.
i.e.:
myWindow.document.write(
"<html>" +
"<head>" +
'<script>' +
'function closeWindow(){' +
'var x = document.getElementById("firstname").value;' +
'alert(x);' +
'// do something to parent.a and parent.b here, just because you can:' +
'parent.a = "Oh, would you look at it, it works!";' +
'parent.b = "And it is so pretty too!";' +
'window.close();' +
'}' +
"</script>" +
"</head>" +
" Your body code here, etc " +
"</html>"
);
Also, please note that your code lacks a semicolon (;) after inserting value to var x in your new window's JavaScript code. That will most probably make your code malfunction. The closing </html> tag lacks the slash, but I don't know if that's gonna break anything; you'd better fix that as well, just in case.

how to search appended html in jquery?

I want create somthing like wordpress comment reply form. in WP when you click on reply button a from apear under the reply button.
I do appending form after clicking reply button, but my problem is if i click again another form append to container.
for handeling this I want search container before append form, if form exist it sholudn't append another one but it seems search wouldn't work for appended html.
what's your suggestion for this problem?
$(document).on('click','.reply-btn',function(){
...
var form="<div class='col-xs-12' >"+
"<form role='form' method='post'>"+
....
"</form>"+
"</div>";
var container=$(this).closest('div');
if(container.html().search(form)<0){
container.append(form)
}else{
alert('it'e also appended')
}
})// .reply-btn
Your html string and the html returned by the dom structure may not be the same, what you should do is to check whether container has a form like
$(document).on('click', '.reply-btn', function () {
var container = $(this).closest('div');
if (container.find('form').length == 0) {
var form = "<div class='col-xs-12' >" +
"<form role='form' method='post'>" + ....
"</form>" +
"</div>";
container.append(form)
} else {
alert('it\' e also appended ')
}
})
use find and length to check the element present or not
if(container.find("form").length){
// already there
}
$(document).on('click','.reply-btn',function(){
var form="<div class='col-xs-12' >"+
"<form role='form' method='post'>"+
....
"</form>"+
"</div>";
var container=$(this).closest('div');
if(container.find('form').length <1)
container.append(form)
}else{
alert('it is also appended')
}
});

HTML in string with JavaScript code, JS not working

Here is my test javascript function
<script type="text/javascript">
function test() {
var sHTML = "<script type='text/javascript'> " +
"function showmsg() { " +
"alert('message'); " +
"} " +
"<\/script>" +
"<div>" +
"<a href='#' onclick='javascript:showmsg(); return false;'>click</a>" +
"</div>";
var divTemp = document.createElement("div");
divTemp.innerHTML = sHTML;
var d = document.getElementById("div1");
d.appendChild(divTemp);
}
</script>
When I run this function, the div along with a tag is added in the div1, but when I click on anchor tag, it says showmsg is not defined, which is indicating that browser is NOT parsing the script tag.
How to achieve this without any 3rd party library?
Update:
The possible usage is, I want to allow user to create HTML templates along with JavaScript code, then my JS library will use those HTML templates to render user defined markup, plus allowing user to implement his/her custom logics through JS.
You need to run eval on the script contents when using innerHTML. Try something like:
var scripts = divTemp.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++) {
eval(scripts[i].textContent);
}
Obviously, you need to do this in end, after injecting the innerHTML into the DOM.
Browsers do not run JavaScript code when a <script> tag is dynamically inserted like that.
Instead of that, you can just define the function directly!
function test() {
window.showmsg = function() {
alert("message");
};
var sHTML = "<div>" +
"<a href='#' onclick='javascript:showmsg(); return false;'>click</a>" +
"</div>";
var divTemp = document.createElement("div");
divTemp.innerHTML = sHTML;
var d = document.getElementById("div1");
d.appendChild(divTemp);
}
Libraries like jQuery have code to strip <script> blocks out of text that's being stuffed into some element's innerHTML, and then evaluate it with eval(), so that's one thing to do if the code is somehow "stuck" in a block of content.
Using jquery, is this can help you :
$('<script>function test(){alert("message");};</' + 'script><div>click</div>').appendTo(document.body)
http://jsfiddle.net/TSWsF/

Problems with javascript print function

I have this javascript code to print html table from a PHP document.
function printReport()
{
var data = '<input type="button" value="Print this page" onClick="window.print()">';
data += '<input type="button" value="Close this page" onClick="window.close()">';
data += '<table border="0"';
data += $('#reportTable').html();
data += '</table>';
myWindow=window.open('','','scrollbars=yes,resizable=yes,width=500,height=400');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
};
It opens the new windows, displays the content right, the close button works fine, however the print button doesnt work.
My printer is working properly, I printed from word or any other app and works fine.
My problem is: the print function window.print() is NOT working.
If anyone could give me a hand, would be appreciated.
Cheers
Change:
data += '<table border="0"';
to
data += '<table border="0">';
and tell us the net result. Tested with simple HTML content within the table. Assuming your .html() call returns valid table data, the window should be printable now.
Working fiddle here: http://jsfiddle.net/aV85r/

Categories