CODEWITHSUNDEEP
javascriptjqueryhtmlpdf
JAVA_RMI
JAVA_RMI

Reputation: 139

touchpdf : same file is opened with different URLs

I have div whose content is added dynamically after page load using ajax

this is my content 

    function getHref(event,elem){
    	event=event || window.event;
    	$.Event(event).preventDefault();    	
    	$('body').on('click','a.view-pdf', function(){    
    		var href=$(this).attr('href');
    		//alert(href);
    		openNav(href); 
    	});                                           	    	
    	document.getElementById("myNav").style.width = "100%";    	  	        		      	
    }
    function openNav(href) {   
    	$("#myNav").pdf( {
    		source: href,
    	} );
    	cross ='<a href="javascript:void(0)" class="closebtn" onclick=closeNav()>&times;</a>';
       	$(".overlay").append(cross);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <div class="image-div-conents">
    <h3 class="circle">MB</h3><div style="float:left" class="doc-name-date">
    <span class="bill-name">Tt</span>
    <span class="bill-date">26 Feb, 2017 8:42 PM</span>
  </div>
 </div>
<a style="text-decoration:none" onclick="getHref(event,this);" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf">
  <img class="img-responsive" src="http://link.com-A43713_20170226203509_6.jpg" alt="No Image" onerror="this.onerror=null;this.src=" text.png"="" ;"="">
  <div class="validitity">
    <span>Validitity:01 Mar, 2018 11:57 AM</span>
  </div>
</a>

when user clicks on image a overlay screen will open and pdf file will be opened while debugging i found i am getting different values of but still same pdf file is opened on overlay screen.

Upvotes: 1

Views: 262

Answers (1)

Sumi Straessle
Sumi Straessle

Reputation: 1136

tl;dr do not reuse same DOM node, create one dynamically.

For some reason, touchpdf (the library) doesn't allow to reuse the same tag (best guess).

HTML

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <div class="image-div-conents">
    <h3 class="circle">MB</h3><div style="float:left" class="doc-name-date">
    <span class="bill-name">Tt</span>
    <span class="bill-date">26 Feb, 2017 8:42 PM</span>
  </div>
</div>
<a style="text-decoration:none" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf">
  <img class="img-responsive" src="http://link.com-A43713_20170226203509_6.jpg" alt="No Image" onerror="this.src=text.png">
  <div class="validitity">
    <span>Validitity:01 Mar, 2018 11:57 AM</span>
  </div>
</a>

<!-- Add this to the main page, where you want to show the PDF -->
<div id="overlay"></div>

JavaScript

function attachCloseBtn(){
  $("#overlay").prepend('<a href="javascript:void(0)" style="float: right;" class="closebtn" onclick=closeNav()>&times;</a>');
}

function cleanUp(){
  $("#overlay").empty();
}

function getFileName(pdfURI){
  if (typeof pdfURI === "string")
    return pdfURI.split("/").reverse()[0].split(".")[0]
  else 
    throw new TypeError("provide a URI!");
}

window.closeNav function(){
  $("#overlay").empty().hide();
}

$('body').on('click','a.view-pdf', function(e){
  e.preventDefault();
  openNav(e.currentTarget.href); 
});     

function openNav(pdfURI) {
  // cleaning up first
  cleanUp();

  // preparing dom environment
  var fileName = getFileName(pdfURI);
  attachCloseBtn();
  $("#overlay").append('<div id="'+fileName+'"></div>'); // <-- placeholder for PDF file

  // opening pdf
  $("#"+fileName).pdf({ // <-- do not forget # for the id!
    source: pdfURI
  });
  $("#overlay").show();
}

Old answer

I'm guessing you're getting side effects from event=event || window.event;

Why not using the event directly with jQuery? I edited your HTML markup and removed the onclick and onerror event listeners. See this fiddle

HTML:

 <a style="text-decoration:none" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf">

JavaScript:

$('body').on('click','a.view-pdf', function(e){    
  e.preventDefault();
  var href = e.currentTarget.href;
  openNav(href); 
});                                                           
function openNav(href) {
  // added for debug
  $("#output").append(href);
}

Upvotes: 1

Related Questions