stackoom
  简体   繁体   中英

JavaScript Print function issue

 原文  2016-08-12 17:51:37  5   3    javascript/ php/ twitter-bootstrap/ twitter-bootstrap-3/ bootstrap-modal

Question

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me? 

<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
    height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39;  text-align:center;float:left;margin-right:20px;}

.shadow(@shadow){
  -webkit-box-shadow:@shadow;
  -mox-box-shadow:@shadow;
  box-shadow:@shadow;
}


.label-danger{

    margin-left:10px;
    margin-top:10px;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>

var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    //console.log(ev.target);
}

function drop(ev) {

    ev.stopPropagation()
    var EklenecekDiv=ev.target;
    var data = ev.dataTransfer.getData("text");
    //console.log(ev.target);
    console.log($(ev.target).parent());


    var divim=ev.target;

        var c = divim.children;
        console.log(c.lenght);
            /*if(c[2]==null)
            {
                 EklenecekDiv=$($(ev.target).parent());
                 EklenecekDiv.append()
                var label1=document.getElementById(data);

                var MyLabelAdd1=document.createElement("div");
                MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
                $(MyLabelAdd1).attr("name","KolonAdi");
                EklenecekDiv.append(MyLabelAdd1);
                divim.remove();
                label1.remove();
                return;
                console.log(EklenecekDiv);
            }




        if(c[3]!=null)
        {
            c[3].remove();

        }*/




    var label=document.getElementById(data);

    var MyLabelAdd=document.createElement("div");

    MyLabelAdd.appendChild(document.createTextNode($(label).html()));
        $(MyLabelAdd).attr("name","KolonAdi");
        if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
        if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }

    EklenecekDiv.appendChild(MyLabelAdd);
    label.remove();
}
function tiklandi()
{

    alert("Okey");
}
function Click(e){
    if(SecilenItem==null)
    {
        alert("Lütfen Alan Seçiniz");
        return;
    }

    var item=SecilenItem;
    var div=document.getElementById("Itemler");
    var label=document.createElement("span");
    $(label).addClass("label label-danger col-xs-1");
    $(label).attr("id","drag");
    $(label).attr("draggable","true");
    $(label).attr("ondragstart","drag(event)");

    $(label).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 


    label.appendChild(document.createTextNode(item));
    div.appendChild(label);
    //console.log($(label).html());


    var KolonDiv=document.createElement("div");
    $(KolonDiv).attr("ondrop","drop(event)")
    $(KolonDiv).attr("ondragover","allowDrop(event)");
    $(KolonDiv).addClass("divKolon");
    KolonDiv.style.marginLeft=Bosluk+"px";
    $(KolonDiv).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 

    $(KolonDiv).resizable();
    $(KolonDiv).draggable();

    var Kolonlar=document.getElementById("Kolonlar");
    Kolonlar.appendChild(KolonDiv);





};

function CiktiGetir(e){
    var KolonlarinChildren=document.getElementsByClassName("divKolon");
    var printContents = document.getElementById("Kolonlar");
     var originalContents = document.body.innerHTML;

    printContents=printContents.innerHTML;



     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;


}
function TabloAlanTiklandi (e){



     SecilenItem=$(e).text();
     $(e).parents(".dropdown").find('.btn').html( $(e).text()  );
    //e.remove();
}

function FontLi(e)
{
    YaziFont=$(e).text();
     $(e).parents(".dropdown").find('.btn').html( $(e).text()  );
}

function StilDegistir(e)
{

}

function EkAlanClick(e){
    if($("#EkAlan").val()==null)
    {
        alert("Lütfen Alan Giriniz");
        return;
    }
    var h1=document.createElement("h1");
    var item=$("#EkAlan").val();
    var div=document.getElementById("Itemler");
    var label=document.createElement("span");
    $(label).addClass("label label-danger col-xs-1");
    $(label).attr("id","drag");
    $(label).attr("draggable","true");
    $(label).attr("ondragstart","drag(event)");

    $(label).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 


    label.appendChild(document.createTextNode(item));
    div.appendChild(label);
    //console.log($(label).html());


    var KolonDiv=document.createElement("div");
    $(KolonDiv).attr("ondrop","drop(event)")
    $(KolonDiv).attr("ondragover","allowDrop(event)");
    $(KolonDiv).addClass("divKolon");
    $(KolonDiv).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 

    $(KolonDiv).resizable();
    $(KolonDiv).draggable();

    var Kolonlar=document.getElementById("Kolonlar");
    Kolonlar.appendChild(KolonDiv);


$("#EkAlan").val("");



}

function BoslukEkle(e)
{
    if($("#Aralik").val().lenght==0)
    {
        alert("Aralik Degeri Giriniz");
        return;
    }
    Bosluk=$("#Aralik").val();
    alert(Bosluk);
    $("#Aralik").val("");
}

function BoyutEkle(e)
{
    if($("#YaziBoyutu").val().lenght==0)
    {
        alert("Boyut Degeri Giriniz");
        return;
    }
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");   

}


</script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Calendar</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->

  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">



  <!-- Left side column. contains the logo and sidebar -->


  <!-- Content Wrapper. Contains page content -->

    <!-- Content Header (Page header) -->


    <!-- Main content -->
   <div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
   <div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
    <span class="caret"></span></button>

    <ul id="Secenekler" class="dropdown-menu">
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
      <li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
    </ul>
  </div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>

    <div class="col-xs-1"></div>
      <input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">

      <label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>

      <div class="col-xs-4" ></div>
    <label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
    <label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">

<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1"  onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
    <span class="caret"></span></button>

    <ul id="Fontlar" class="dropdown-menu">
      <li><a onClick="FontLi(this)" href="#">Georgia</a></li>
      <li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
      <li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
      <li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
      <li><a onClick="FontLi(this)" href="#">Arial</a></li>
      <li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
      <li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
      <li><a onClick="FontLi(this)" href="#">Impact</a></li>
      <li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
      <li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
      <li><a onClick="FontLi(this)" href="#">Verdana</a></li>
      <li><a onClick="FontLi(this)" href="#">Courier New</a></li>
      <li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
    </ul>
  </div>

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>

</div>


<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>






    <!-- /.content -->

  <!-- /.content-wrapper -->



  <!-- Control Sidebar -->

  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>

<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->

</body>
</html>

3 answers

solution1
 1  2016-08-12 18:10:52

It's not an optimal solution but can you try replacing CiktiGetir function with this: 

function CiktiGetir(e){
    var htmlElement = document.querySelector("html");
    var printContents = document.getElementById("Kolonlar");

    // Make body invisible, append new element to HTML
    document.body.style.display = "none";
    htmlElement.appendChild(printContents);

    window.print();

    // Make body visible again, remove the added element
    document.body.style.display = "initial";
    htmlElement.removeChild(printContents);
}

Replacing HTML content breaks the JS events and dynamic contents.

solution2
 0  2016-08-12 17:58:29

You are replacing the body HTML 

document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;

So you will need to reatach the events.

Try the "on" jquery method. Something like 

$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });

solution3
 0  2016-08-12 18:20:04

My code was just an example. You will have to adapt it to your code.

You need to reatach the events after replace body content.

If, you dont want to to this, you can refresh the entire page. 

function CiktiGetir(e){
    var KolonlarinChildren=document.getElementsByClassName("divKolon");
     var printContents = document.getElementById("Kolonlar");
     printContents=printContents.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     location.reload();
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript print function Problems with javascript print function Print javascript function tree Print Preview with javascript not function Safari print issue with javascript window.print() Javascript: Issue with window.print Javascript HTML Window Print Issue Print the popup using print function of javascript cant print images with JavaScript print function print variable outside function in javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM