How to display a particular div in jquery? - php

Question

I have written some code for displaying a particular div in html. The code is shown below :
<div id="pdfdiv_1">
<section class="report">
<div class="top-box"></div>
<div class="row">
<div class="col-md-12 text-center">
<img src="<?php echo base_url()?>reports-assets-new/images/banner.png" class="bannerimg" style="
width: auto;">
</div>
<div class="col-md-5">
<div class="info-wrapper">
<?php if(!empty($user_details->st_profile)){ ?>
<img src="<?php echo base_url();?>uploads/user-profile/<?php echo $user_details->st_profile;?>" style="width: 22%;">
<?php } else {?>
<img src="<?php echo base_url()?>reports-assets-new/images/img2.png">
<?php } ?>
<div class="info-wrap-inner">
<p><span>Name </span> : <?php echo $user_details->st_name;?></p>
<p><span>Age </span> : <?php echo $age;?></p>
<p><span>Education </span> : <?php echo $user_details->st_qualification;?></p>
<p><span>Mobile </span> : <?php echo $user_details->st_mobile;?></p>
<p><span>Email </span> : <?php echo $user_details->st_email;?></p>
<p><span>Date of test </span> : <?php $s=$user_details->c_date; $dt = new DateTime($s); $date = $dt->format('d-m-Y'); echo $date; ?></p>
</div>
</div>
</div>
<div class="col-md-7 report-wrapper">
<h1 class="heading">SKILL FINDER TEST REPORT</h1>
<p><?php echo $test_details->description;?></p>
</div>
</div>
</div>
</section>
<section class="skills">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><span>IDENTIFY SKILLS BASED ON YOUR INTERESTS</span></h1>
</div>
</div>
<div class="row">
<?php echo $test_details->description3;?>
</div>
</section>
</div><!-- pdfdiv close -->
I have written a code for displaying the div pdfdiv_1 in jquery as shown below :
<script>
function pdfP(exam_id,test_id,base_url) {
var test = document.getElementById('pdfdiv_1').innerHTML;
console.log(test);
$.ajax({
type: 'POST',
data: {test : test,exam_id:exam_id,test_id:test_id},
url: base_url+"reports/reports_pdf_new/skill_finder",
success: function (data) {
window.location.href = base_url+"reports_pdf_new/"+exam_id+"/"+test_id;
},
});
}
</script>
When I am printing the console output, it is only printing the first section part but not the second section tag.
The output in console is :
<section class="report">
<div class="top-box"></div>
<div class="row">
<div class="col-md-12 text-center">
<img src="<?php echo base_url()?>reports-assets-new/images/banner.png" class="bannerimg" style="
width: auto;">
</div>
<div class="col-md-5">
<div class="info-wrapper">
<?php if(!empty($user_details->st_profile)){ ?>
<img src="<?php echo base_url();?>uploads/user-profile/<?php echo $user_details->st_profile;?>" style="width: 22%;">
<?php } else {?>
<img src="<?php echo base_url()?>reports-assets-new/images/img2.png">
<?php } ?>
<div class="info-wrap-inner">
<p><span>Name </span> : <?php echo $user_details->st_name;?></p>
<p><span>Age </span> : <?php echo $age;?></p>
<p><span>Education </span> : <?php echo $user_details->st_qualification;?></p>
<p><span>Mobile </span> : <?php echo $user_details->st_mobile;?></p>
<p><span>Email </span> : <?php echo $user_details->st_email;?></p>
<p><span>Date of test </span> : <?php $s=$user_details->c_date; $dt = new DateTime($s); $date = $dt->format('d-m-Y'); echo $date; ?></p>
</div>
</div>
</div>
<div class="col-md-7 report-wrapper">
<h1 class="heading">SKILL FINDER TEST REPORT</h1>
<p><?php echo $test_details->description;?></p>
</div>
</div>
</div>
</section>
Can anyone help me out in this ?
I cant print all the html code present inside the div pdfdiv_1.
The html code :
<div class="download-pdf">
<div class="row">
<div class="col-12">
<div class="card p-4 mt-0">
<h2 class="text-center mb-0">Congratulations!</h2>
<p class="lead text-center" style="margin-top: -18px">
<br>
<div class="button-wrapper" style="text-align: center;">
<button onclick="pdfP(<?php echo $exam_id;?>,<?php echo $test_id;?>,'<?php echo base_url();?>')" class="btn btn-primary d-block mx-auto">Download PDF</button>
<span id="pdfloader"></span>
</div>
</div>
</div>
</div>
</div>

Answer 1

There are some mistakes on html tags placement.
This code might fix them :
<div id="pdfdiv_1">
<section class="report">
<div class="top-box"></div>
<div class="row">
<div class="col-md-12 text-center">
<img src="<?php echo base_url()?>reports-assets-new/images/banner.png" class="bannerimg" style="
width: auto;">
</div>
<div class="col-md-5">
<div class="info-wrapper">
<?php if(!empty($user_details->st_profile)){ ?>
<img src="<?php echo base_url();?>uploads/user-profile/<?php echo $user_details->st_profile;?>" style="width: 22%;">
<?php } else {?>
<img src="<?php echo base_url()?>reports-assets-new/images/img2.png">
<?php } ?>
<div class="info-wrap-inner">
<p><span>Name </span> : <?php echo $user_details->st_name;?></p>
<p><span>Age </span> : <?php echo $age;?></p>
<p><span>Education </span> : <?php echo $user_details->st_qualification;?></p>
<p><span>Mobile </span> : <?php echo $user_details->st_mobile;?></p>
<p><span>Email </span> : <?php echo $user_details->st_email;?></p>
<p><span>Date of test </span> : <?php $s=$user_details->c_date; $dt = new DateTime($s); $date = $dt->format('d-m-Y'); echo $date; ?></p>
</div>
</div>
</div>
<div class="col-md-7 report-wrapper">
<h1 class="heading">SKILL FINDER TEST REPORT</h1>
<p><?php echo $test_details->description;?></p>
</div>
</div>
</section>
<section class="skills">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><span>IDENTIFY SKILLS BASED ON YOUR INTERESTS</span></h1>
</div>
</div>
<div class="row">
<?php echo $test_details->description3;?>
</div>
</div>
</section>
</div><!-- pdfdiv close -->
Generally the IDE show these errors in red.
Example with IntelliJ softwares :