how to set div content into another div

Sign in to vote

User475983607 posted

Use $.clone().

$( "#includedContent").clone().appendTo( "#includedContent2" );

jQuery reference.

https://api.jquery.com/clone/

Thursday, January 16, 2020 9:06 PM

0

Sign in to vote

User-1634604574 posted

but when i want to print that div

includedContent2

will not display in print window why?

  function printpage() {
            var sWinHTML = document.getElementById('includedContent2').innerHTML;
             var winprint = window.open("","");
             winprint.document.open();

            winprint.document.write('<html><head><style type="text/css">');



              var fileref2 = document.createElement("link");
            fileref2.setAttribute("rel", "stylesheet");
            fileref2.setAttribute("type", "text/css");
            fileref2.setAttribute("href", '@Url.Content("~/bootstrapp/css/bootstrap.css")');
             winprint.document.head.appendChild(fileref2);

            winprint.document.write('</style></head><body onload="window.print()">');
            winprint.document.write(sWinHTML);
            winprint.document.write('</body></html>');
            winprint.document.close();
            winprint.focus();
            winprint.print();
            winprint.close();


            }

Friday, January 17, 2020 9:27 AM

0

Sign in to vote

User475983607 posted

but when i want to print that div

includedContent2

will not display in print window why?

I assume my initial response solved your first question. Now you are asking for a query to access iframe HTML?

    <script>
        $("#includedContent > iframe").clone().appendTo("#includedContent2");

          function printpage() {
              var sWinHTML = $('#includedContent2 > iframe')//.iframe.contentWindow.document;
              var iframe = sWinHTML[0].contentWindow.document.getElementsByTagName("html")[0];
              console.log(sWinHTML);
              console.log(iframe);

Remember to use dev tools when debugging.

Friday, January 17, 2020 1:46 PM

0

Sign in to vote

User-1634604574 posted

i get this error Cannot read property 'contentWindow' of undefined

Friday, January 17, 2020 2:14 PM

0

Sign in to vote

User475983607 posted

i get this error Cannot read property 'contentWindow' of undefined

I can't see your latest code. The best I can do is share a tested and working example. Keep in mind that your original iframe markup has a bug in the src but I assume you got passed that otherwise the iframe would show a 404.

@{
    ViewData["Title"] = "IFrame";
}

<h1>IFrame</h1>

<div id="includedContent">
    <iframe class='iframe_2'
            style='width:100%;border:none;white-space: nowrap'
            allowfullscreen
            scrolling='no'
            src='/temp/index.html'
            type='text/html'></iframe>
</div>
<div id="includedContent2">

</div>

<div>
    <input id="Button1" type="button" value="button" onclick="printpage()" />
</div>

@section scripts {
    <script>
        $("#includedContent > iframe").clone().appendTo("#includedContent2");

        function printpage() {
            var sWinHTML = $('#includedContent2 > iframe');
            var iframe = sWinHTML[0].contentWindow.document.getElementsByTagName("html")[0];
            console.log(sWinHTML);
            console.log(iframe);
        }
    </script>

/temp/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

Friday, January 17, 2020 2:41 PM

0

Sign in to vote

User475983607 posted

With printing...

        $("#includedContent > iframe").clone().appendTo("#includedContent2");

        function printpage() {
            var sWinHTML = $('#includedContent2 > iframe')[0].contentWindow.document.getElementsByTagName("html")[0];
            console.log(sWinHTML.innerHTML);
            var winprint = window.open("", "");
            winprint.document.write(sWinHTML.innerHTML);

            winprint.document.close(); 
            winprint.focus(); 

            winprint.print();
            winprint.close();

            return true;
        }

Friday, January 17, 2020 2:53 PM

0

Sign in to vote

User-1634604574 posted

i have the same error Uncaught TypeError: Cannot read property 'contentWindow' of undefined

Friday, January 17, 2020 3:06 PM

0

Sign in to vote

User475983607 posted

zhyanadil.it@gmail.com

i have the same error Uncaught TypeError: Cannot read property 'contentWindow' of undefined

I don't have special tools or super powers to see your code. If you copied the example is should work. I tested the code above on Chrome, FireFox, IE, and Edge successfully.

There's not much I can do for you at this point.

Friday, January 17, 2020 3:16 PM

0

Sign in to vote

User-1634604574 posted

a.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link href="/temp/p3.css" rel="stylesheet" />
<!--<link href="/temp/bootstrap.min.css" rel="stylesheet" />-->
<!--<link href="/temp/bootstrap-theme.min.css" rel="stylesheet" />-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.2.5/math.min.js"></script>


<style>
.table {display: table;}.Title {display: table-caption;text-align: center;font-weight: bold;font-size: larger;}.Heading {display: table-row;font-weight: bold;text-align: center;}.Row {display: table-row;}.Cell {display: table-cell;border: solid;border-width: thin;padding-left: 5px;padding-right: 5px;}.grid-container {display: grid;grid-template-columns: auto auto;padding: 10px;}.grid-container2 {display: grid;grid-template-columns: auto auto auto;padding: 5px;}.grid-item {padding: 15px;font-size: 15px;text-align: left;}.grid-item2 {padding: 5px;font-size: 23px;}
</style>

<div class="div_content_print" id="div_content_print" style="height: auto; margin-left: 0px ">


    <!--<div class="grid-container">
        <div class="grid-item2">Material Request</div>
        <div class="grid-item2"></div>
        <div class="grid-item2 div_series"></div>
    </div>    
    <div class="grid-container2">
    <div class="grid-item div_require_date"></div>
    <div class="grid-item div_transaction_date"></div>
    <div class="grid-item div_company"></div></div>
    ---------------------------------------------------------------------------------
  
    <div class="grid-container3">
        <div class="grid-item" style="">
            <div class="table" style="width:100%;" id="table">
                <div class="Heading">
                    <div class="Cell"><p>Items</p></div>
                    <div class="Cell"><p>Quantity</p></div>
                    <div class="Cell"><p>For Warehouse</p></div>
                    <div class="Cell"><p>Schedule Date</p></div>
                </div>
            </div>
        </div>
    </div>-->

    <!------------------------------------------------------------------------------------------->
</div>





<script>
    function ToFloat(value) {
        if (parseFloat($(value).val()).length == 0 || isNaN(parseFloat($(value).val()))) {
            return parseFloat("0");
        }
        else {
            return parseFloat($(value).val().replace(/[^\d\.\-\ ]/g, ''));
        }
    }

    var parent_url = document.referrer
    var url_string = parent_url
    var url = new URL(url_string);
    var c = url.searchParams.get("series");


    var company
    var required_date
    var transaction_date
    var series

      //   $.ajax({
      //      type: 'GET',
      //      url: '/Buying_Material_Request/detail_material_request_item',
      //      data: { series: c },
      //      success: function (response) {
      //          data = $.map(response, function (v, a) {
      //              let row = '<div class="Row">'
      //                  + '<div class="Cell">' + v.item_code + '</div>'
      //                  + '<div  class="Cell">' + v.qty + '</div>'
      //                  + '<div  class="Cell">' + v.warehouse_name + '</div>'
      //                  + '<div class="Cell">' + v.schedule_date + '</div>'
      //              '</div>';
      //              $(".table").append(row);

      //               })
      //      }

      //    })

      //$('<div class="grid-container"><div class="grid-item2">Material Request</div><div class="grid-item"></div><div class="grid-item2">' + series + '</div></div>    <div style="background-color:black !important;width: 918px; height:1px"></div>    <div class="grid-container2"><div class="grid-item div_require_date"><b>Require Date : </b>' + required_date + '</div><div class="grid-item div_transaction_date"><b>Transaction Date : </b>' + transaction_date + '</div><div class="grid-item div_company"><b>Company : </b>' + company + '</div></div>           <div class="grid-container3"  ><div class="grid-item"  style=""> <div class="table" style="width:100%;" id="table"><div class="Heading"><div class="Cell"><p>Items</p></div><div class="Cell"><p>Quantity</p></div><div class="Cell"><p>For Warehouse</p></div><div class="Cell"><p>Schedule Date</p></div></div></div>   </div></div>     </div><br><br>').appendTo('#div_content_print');


         //$.ajax({
         //   type: 'GET',
         //   url: '/Buying_Material_Request/detail_material_request_item',
         //   data: { series: c },
         //   success: function (response) {
         //       data = $.map(response, function (v, a) {
         //       //    alert(v.item_code)
         //           let row = '<div class="Row">'
         //               + '<div class="Cell">' + v.item_code + '</div>'
         //               + '<div  class="Cell">' + v.qty + '</div>'
         //               + '<div  class="Cell">' + v.warehouse_name + '</div>'
         //               + '<div class="Cell">' + v.schedule_date + '</div>'
         //           '</div>';
         //           $(".table").append(row);


         //            })
         //   }

         //}).done(function () {
         //$(' <div class="grid-container3"  ><div class="grid-item"  style=""> <div class="table" style="width:100%;" id="table"><div class="Heading"><div class="Cell"><p>Items</p></div><div class="Cell"><p>Quantity</p></div><div class="Cell"><p>For Warehouse</p></div><div class="Cell"><p>Schedule Date</p></div></div></div></div>  ').appendTo('#div_content_print');

         //})



     

  //  $.when(

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Buying_Material_Request/detail_Material_Request",
            data: {
                series: c
            },
            success: function (response) {
                data = $.map(response, function (item, a) {
                    //  alert(item.company_name)
                    company = item.company_name
                    required_date = item.schedule_date
                    transaction_date = item.transaction_date
                    series = c


                })
            }


        }).done(function () {
            $.ajax({
                type: 'GET',
                url: '/Buying_Material_Request/detail_material_request_item',
                data: { series: c },
                success: function (response) {
                    data = $.map(response, function (v, a) {
                        let row = '<div class="Row">'
                            + '<div class="Cell">' + v.item_code + '</div>'
                            + '<div  class="Cell">' + v.qty + '</div>'
                            + '<div  class="Cell">' + v.warehouse_name + '</div>'
                            + '<div class="Cell">' + v.schedule_date + '</div>'
                        '</div>';
                        $(".table").append(row);


                    })
                }

            })

            $('<div class="grid-container"><div class="grid-item2">Material Request</div><div class="grid-item"></div><div class="grid-item2">' + series + '</div></div>    <div style="background-color:black !important;width: 918px; height:1px"></div>    <div class="grid-container2"><div class="grid-item div_require_date"><b>Require Date : </b>' + required_date + '</div><div class="grid-item div_transaction_date"><b>Transaction Date : </b>' + transaction_date + '</div><div class="grid-item div_company"><b>Company : </b>' + company + '</div></div>           <div class="grid-container3"  ><div class="grid-item"  style=""> <div class="table" style="width:100%;" id="table"><div class="Heading"><div class="Cell"><p>Items</p></div><div class="Cell"><p>Quantity</p></div><div class="Cell"><p>For Warehouse</p></div><div class="Cell"><p>Schedule Date</p></div></div></div>   </div></div>     </div><br><br>').appendTo('#div_content_print');

            if (company == "") { $(".div_company").addClass("hide") }
            if (required_date == "") { $(".div_required_date").addClass("hide") }
            if (transaction_date == "") { $(".div_transaction_date").addClass("hide") }

        })

    })
     //$.get("/Buying_Material_Request/detail_material_request_item", {
     //           series: c,
     //       }, function (data) {
     //           var row;
     //           $.each(data, function (i, v) {
     //                  let row = '<div class="Row">'
     //                   + '<div class="Cell">' + v.item_code + '</div>'
     //                   + '<div  class="Cell">' + v.qty + '</div>'
     //                   + '<div  class="Cell">' + v.warehouse_name + '</div>'
     //                   + '<div class="Cell">' + v.schedule_date + '</div>'
     //               '</div>';
                   
     //           });

     //        $(".table").append(row);
     //       });




  //  ).then(function () {
    
    

//});

    //$.ajax({
    //    type: "POST",
    //    url: "/Buying_Material_Request/detail_Material_Request",
    //    data: {
    //        series: c
    //    },
    //    success: function (response) {
    //        data = $.map(response, function (item, a) {

    //            company = item.company_name
    //            required_date = item.schedule_date
    //            transaction_date = item.transaction_date
    //            series = c

    //            $(".div_series").append(c)
    //            $(".div_require_date").append("Require Date : "+required_date)
    //            $(".div_transaction_date").append("Transaction Date : "+transaction_date)
    //            $(".div_company").append("Company : "+company)

    //        })
    //    }


    //}).done(function () {

    //})



    // $.ajax({
    //        type: 'GET',
    //        url: '/Buying_Material_Request/detail_material_request_item',
    //        data: { series: c },
    //        success: function (response) {
    //            data = $.map(response, function (v, a) {
    //                let row = '<div class="Row">'
    //                    + '<div class="Cell">' + v.item_code + '</div>'
    //                    + '<div  class="Cell">' + v.qty + '</div>'
    //                    + '<div  class="Cell">' + v.warehouse_name + '</div>'
    //                    + '<div class="Cell">' + v.schedule_date + '</div>'
    //                '</div>';
    //                $(".table").append(row);

    //                 })
    //        }

    //      })


        // $('<div class="grid-container"><div class="grid-item2">Material Request</div><div class="grid-item"></div><div class="grid-item2">' + series + '</div></div>    <div style="background-color:black !important;width: 918px; height:1px"></div>    <div class="grid-container2"><div class="grid-item div_require_date"><b>Require Date : </b>' + required_date + '</div><div class="grid-item div_transaction_date"><b>Transaction Date : </b>' + transaction_date + '</div><div class="grid-item div_company"><b>Company : </b>' + company + '</div></div>           <div class="grid-container3"  ><div class="grid-item"  style=""> <div class="table" style="width:100%;" id="table"><div class="Heading"><div class="Cell"><p>Items</p></div><div class="Cell"><p>Quantity</p></div><div class="Cell"><p>For Warehouse</p></div><div class="Cell"><p>Schedule Date</p></div></div></div>   </div></div>     </div><br><br>').appendTo('#div_content_print');

                    //if (company == "") { $(".div_company").addClass("hide") }
                    //if (required_date == "") { $(".div_required_date").addClass("hide") }
                    //if (transaction_date == "") { $(".div_transaction_date").addClass("hide") }


               



//000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000



</script>

main.cshtml

        function printpage() {

          
             var sWinHTML = $("#div_content_print iframe").contents().find('body')[1];
            console.log(sWinHTML.innerHTML);
            var winprint = window.open("", "");

           

            winprint.document.write(sWinHTML.innerHTML);

            winprint.document.close(); 
            winprint.focus(); 

            winprint.print();
            winprint.close();

            return true;
}

$("#p_print").click(function () {

printpage()

})

why i cannot show style in a.html inside print window

Friday, January 17, 2020 3:48 PM

0

Sign in to vote

User475983607 posted

Hold on a second buckaroo. The code you shared above is NOT the example I provided. You went off on your own cowboy. I recommend debugging your code with the browser's dev tools.

Friday, January 17, 2020 3:53 PM

Asked by:

how to set div content into another div

Question

All replies

zhyanadil.it@gmail.com