Pass ID from linksDIV to IFRAME

JavaScript
1

Hi

I am opening model window on click of a link.

But having problem in passing link id’s

How can i pass ID from linksDIV links to IFRAME

any solution is accepted whether its Javascript or PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="linksDIV">
<a class="qlink" ID="1">quickview</a>
<a class="qlink" ID="2">quickview</a>
<a class="qlink" ID="3">quickview</a>
</div>

<div id="dialog" style="display:none;" title="Dialog Title">
<iframe frameborder="0" scrolling="yes" width="100%" height="100%" src="quickview.php?id="></iframe>
</div>
<script>
 $(document).ready(function() {
$( ".qlink" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
$("#dialog").dialog({
    autoOpen: false,
    position: 'center' ,
    title: 'EDIT',
    draggable: false,
    width : 800,
    height : 700, 
    resizable : true,
    modal : true,
    });
});
</script>
</body>
</html>

Thanks
Vineet

2

Hi,

I couldn’t help with the modal as you didn’t include a reference to the library you are using in your code.

However, this is one way to pass a parameter to an iframe:

DEMO

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pass params to iframe</title>
    <style>
      iframe{
        border: none;
        background: pink;
      }
    </style>
  </head>
  <body>
    <p>
      <a href="#" class="qlink" id="1">Link 1</a> |&nbsp;
      <a href="#" class="qlink" id="2">Link 2</a> |&nbsp;
      <a href="#" class="qlink" id="3">Link 3</a>
    </p>
    <iframe src="iframe.html" width="500" height="100"></iframe>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(".qlink").on("click", function(e){
        e.preventDefault();
        $("iframe").attr("src", "iframe.html?id=" + this.id);
      });
    </script>
  </body>
</html>

iframe.html

<h1>Click a link</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    function getUrlParameter(sParam){
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++){
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam){
          return sParameterName[1];
        }
      }
    }

    var id = getUrlParameter("id");
    if(id){
      $("h1").text("You clicked link " + id);
    }
  });
</script>

I’m assuming you’re using jQuery anyway.
If not, let me know and it can be removed.

3

Hi Pullo

Many thanks for the solution.

Yes i m using jquery and this solution works great.

Thanks
Vineet

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.