简体   繁体   中英

How to call data target attribute in jquery popup window by php id

enter image description here I am developing a Online Library Management system. I have preview button for many books. I have added jquery popupwindow modal to preview my books. The popupwindow is working fine but it's not showing the exact book associated with that button. How to do that? Please help

Below is my button code:

<button id="prev" class="btn btn-danger basic-demo_button" data-target="#<?php echo $row['bookid']; ?>" ><i class="fa fa-pencil"></i> Preview</button>

Below is the popup window div:

<div id="" class="example_content basic-demo"><?php echo '
            <embed src="assets/img/'.$row['BookSummary'].'"/>'?></div>
                                    </div>

And this is the jquery script for popupwindow:

<script src="src/popupwindow.js"></script>
<script>

var Demo = (function($, undefined){

  $(function(){
        QuickDemo();
    example2();
    });
  function QuickDemo(){
        $(".basic-demo").PopupWindow({
            autoOpen    : false,
            nativeDrag: false
        });
        $(".basic-demo_button").on("click", function(event){
            $(".basic-demo").PopupWindow("open");
        });
    }
  })(jQuery);
</script>

Now the problem how to get the books by its corresponding id that I have set in the data-target attribute of my button.

You should add a data-id attr to the button:

<button id="prev" data-id="<?php echo $row['bookid']; ?>" class="btn btn-danger basic-demo_button" data-target="#<?php echo $row['bookid']; ?>" ><i class="fa fa-pencil"></i> Preview</button>

And then provide a unique id attr to each popup:

<div id="basic-demo-<?php echo $row['bookid']?>" class="example_content basic-demo"><?php echo '
        <embed src="assets/img/'.$row['BookSummary'].'"/>'?></div>
                                </div>

This should work:

$(".basic-demo_button").on("click", function(event){
    var id = $(this).data("id");
    $("#basic-demo-"  + id).PopupWindow("open");
});

untested. so let me know if it doesn't work.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM