Jquery solution for loading a map from another .aspx?

Question

Trying to achieve a Jquery print template (C# ASP.net) which gets my map from my Default.aspx and appends it to a print page (Print.htm) whereby I can edit the HTML. so far...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>

  <script type="text/javascript">

  $(document).ready(function() {
  $("#Printbtn").click(function() {  

  var mapObj = $("MapCell_Map1");
  var mapHtmlStr = mapObj.html();

         mapHtmlStr = mapHtmlStr.replace(/CURSOR: crosshair; /g, "");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove",          "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].keyFocus=true;", "");


        $.ajax({url:"print.htm", context: document.body, 
        success: function(response){


        var printDoc = $(response);
        printDoc.find("#mapPanel").html(mapHtmlStr);
        var pwin = window.open("Print.htm");
        var pdoc = window.document.open();
        pdoc.write(printDoc.html());
        pdoc.close();

        });

        return false;

  });
  });     
</script>

Doesn't fire, just posts back after the button click...

<asp:Button runat="server" id="Printbtn" Text="Print" Forecolor="white"/>

Print.htm page...

html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>


</head>
<body>
<div id="MapPanel">

</div>
</body>
</html>

Why are you using javascript to do this? It seems it would be much easier, both to code and to maintain, to do this via asp.net — Shai Cohen, Feb 20 '13 at 14:15
Thanks Shai. So how would I display my map window onto a print template? — Hardgraf, Feb 20 '13 at 14:19

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

If the Html you want to add is static you could load a separate Html file into memory and then add the dynamic Html to the hidden div before writing contents to the new window

jQuery Example (Untested):

function printmap() {
    var mapObj = $("#Map1");
    var mapHtmlStr = mapObj.html();
    // snip - do string replacements as shown in question
    $.ajax({url:"print.html", context: document.body, 
        success: function(response){
            var printDoc = $(response);
            printDoc.find("#mapPanel").html(mapHtmlStr);
            var pwin = window.open("#");
            var pdoc = window.document.open();
            pdoc.write(printDoc.html());
            pdoc.close();
    });
}

Further non-jQuery examples of loading Html File in Javascript are shown in this post:

edited May 23 '17 at 11:49

Community

1
1

answered Feb 20 '13 at 14:21

Rob Willis

4,706
2
28
20

That's probably because the opened Url is '#' so the browser assumes that it's loading an anchor on the current page. The window.open method has a lot of options that enable you to customise it's appearance, see http://www.w3schools.com/jsref/met_win_open.asp. Setting the name of the new window to 'Print' and hiding the toolbar should give the sort of appearance that you're after. – Rob Willis Feb 20 '13 at 15:03
Why are you trying to redirect? Are you not dynamically generating the Window contents in Javascript? – Rob Willis Feb 20 '13 at 15:21
I am trying to use the window.open method and getElementbyID to open a print template with my map when the user fires the 'print' button. I can get it to do this. The issue I'm having is then how to add any HTML and CSS to the print template as the url resulting from the window.open stays at 'default.aspx' and therefore I cannot define an HTML file for the print template. Hope this makes sense! – Hardgraf Feb 20 '13 at 15:24
The approach shown in the answer should resolve this, it loads the Print page html in Javascript (using jQuery), adds the map html to the template and then opens a new Window with the combined result. So you shouldn't need to load a different file in the new window. – Rob Willis Feb 20 '13 at 15:28
You'll need to create a new Html file with your images and CSS as well as an empty DIV with the ID of 'mapPanel' and then load it and alter it using the jQuery based approaches shown above. – Rob Willis Feb 20 '13 at 15:34
No, the Javascript should all live on the current Map page and should be called when the Print Button is clicked. The new Print.html file should only contain static Html & CSS. – Rob Willis Feb 20 '13 at 16:06
I've updated the answer to show it as a more complete replacement of the printmap function shown in the question – Rob Willis Feb 20 '13 at 16:24
yeah, $("#PrintButton").click(printmap); should do the trick. – Rob Willis Feb 20 '13 at 16:38
You don't need the 'var s = obj.innerHTML;' line anymore. Do the replacement on the 'mapHtmlStr' variable instead – Rob Willis Feb 20 '13 at 17:25
What happens? Does the event fire? Is the Id of the element on the page definitely Map1? What browser are you using, are there any errors on the console? – Rob Willis Feb 20 '13 at 17:38
1

The event not firing is probably down to ASP.NET renaming your controls $("button[id$=Printbtn]") or $("input[id$=Printbtn]") should resolve this. Also adding "return false" to the bottom of the printmap function should stop it reloading. – Rob Willis Feb 20 '13 at 18:08
Changing mapObj to get correct Id ("var mapObj = $("#MapCell");") should fix the issue of not getting the html – Rob Willis Feb 20 '13 at 18:10
You still need to remove the use of the 's' variable, change to use 'mapHtmlStr' on all lines e.g. 's = s.replace(/CURSOR: crosshair; /g, "");' should become 'mapHtmlStr = mapHtmlStr.replace(/CURSOR: crosshair; /g, "");' – Rob Willis Feb 21 '13 at 10:51
Can you add a Javascript 'alert' e.g. 'alert("Success");' line above the 'var mapObj' line and before the 'var printDoc' line and confirm that both alert dialogs appear? – Rob Willis Feb 21 '13 at 10:55
The button selector has switched back to #Printbtn" is that a mistake? Do you get any errors in you browser Javascript console? (in IE click F12 for Dev Tools then select the Console tab) – Rob Willis Feb 21 '13 at 11:16
I changed it yes. It's now set to $("button[id$=Printbtn]").click(function() { Works either way with Alert("Success"); in isolation so button must be firing. I've ran the Web Developer console in Firefox but don't get any Javascript errors pointing to that script. I have other Jquery scripts on the page (.show() etc) which all run fine. Must be something in the syntax causing problems somewhere. Only error I get is 'Syantax error, missing } after property list' – Hardgraf Feb 21 '13 at 11:44
yeah it looks like you need an extra '});' line between 'pdoc.close();' and 'return false;' – Rob Willis Feb 21 '13 at 13:07
Thanks, still nothing. Managed to get window.open("print.htm"); to open from the button click event handler. Must be something in the script somewhere. I think I've probably defined the incorrect URL somewhere. Code Updated... – Hardgraf Feb 21 '13 at 14:51
Can you add 'alert("Response: " + response);' after the 'success: function(response){' line and confirm if the Print.htm contents is shown in the dialog? – Rob Willis Feb 21 '13 at 15:06
Ok, I'm getting GET errors in the JS log (Web Dev console) relating to the map div. – Hardgraf Feb 21 '13 at 15:18
This is the article from which I took the original Javascript code which works fine but I need to determine the HTML/CSS within the print template window... http://arkblog.wordpress.com/2007/12/19/print-made-easy/#more-21 – Hardgraf Feb 21 '13 at 15:28

Jquery solution for loading a map from another .aspx?

1 Answers1