0

I am new to the Javascript. Actually i have a Javascript function.

function addHyperlink(val,row){
      var temp = row.id;
            var temp2 = row.assignee;
            var temp3 = row.status;
            var temp4 = row.area;
            var temp5 = row.product;
            var temp1 = '<?php echo $_SESSION['username']; ?>';

            var redirect="edit_comments.php?id=" + temp + "&username=" + temp1 + "&assig=" + temp2 + "&stat=" + temp3 + "&areaa=" + temp4 + "&prod=" + temp5;
return '<a href="' + redirect + '" >Edit Remarks</a>';
}

if I click on "Edit Remarks" hyperlink it will redirect to "edit_comments.php" page with parameters. it's working fine. Now I want to change the function so that if I click on "Edit Remarks" hyperlink, the "edit_comments.php" page open as pop-up window instead of new tab or new window.

Could any one please help me what I need to change in that function?

Thanks in advance.

Br, Mahadev

Raghavendra
  • 3,530
  • 1
  • 17
  • 18
MAHADEVASWAMY HN
  • 73
  • 5

4 Answers4

1

You can use the Window.open() function to open a URL in a new window, like this 

var myWindow = window.open("http://www.yoururl.com", "", "width=200, height=100");

You can find all the properties you can set here

http://www.w3schools.com/jsref/met_win_open.asp

Bare in mind many browsers will try to prevent this kind of popup.

So in your code you can 

function addHyperlink(val,row){
    var temp = row.id;
    var temp2 = row.assignee;
    var temp3 = row.status;
    var temp4 = row.area;
    var temp5 = row.product;
    var temp1 = '<?php echo $_SESSION['username']; ?>';

    var redirect="edit_comments.php?id=" + temp + "&username=" + temp1 + "&assig=" + temp2 + "&stat=" + temp3 + "&areaa=" + temp4 + "&prod=" + temp5;


    return '<a href="#" onclick="window.open(\'' + redirect + '\', \'\', \'width=200, height=100\')">Edit Remarks</a>';

}

That should get you going in the right direction I think

Andrew Aitken
  • 671
  • 3
  • 14
  • Thanks for the response. after adding your code, php page will come in pop-up window. but it's coming before clicking on hyperlink. Could you please help me what to do? – MAHADEVASWAMY HN Jul 22 '15 at 09:28
  • Ah Apologies I misunderstood exactly what you were asking for there, I'll edit my answer – Andrew Aitken Jul 22 '15 at 09:37
  • @raghavendra and Andrew Aitken: Your code "return 'Edit Remarks';" is working fine i am getting php page in pop-up window. in that pop up window i need 2 buttons "SAVE" and "CANCEL". If i click on SAVE or CANCEL button the pop-up window should close. how can I make this? – MAHADEVASWAMY HN Jul 22 '15 at 09:52
  • You'll need to lookup window.close() or self.close() but you will have problems in the latest version of Mozilla which prevents scripts closing windows they did not open. As you are so new to JavaScript I would suggest perhaps doing as @s.casella mentioned in his answer and using something like jQuery which will give you a whole library of functions which will really help you here. – Andrew Aitken Jul 22 '15 at 09:58
  • @raghavendra & Andrew Aitken: everything working fine. thanks for your great effort. – MAHADEVASWAMY HN Jul 23 '15 at 07:31
1

You can take a look at the dialog solution, where the link is rendered inside an IFRAME element. With a dialog no new window or tab is created and you never leave your current page cause it would remain in the background.

Plus it won't get caught by any popup blockers.

If that's what you want you can read: How to display an IFRAME inside a jQuery UI dialog

Community
  • 1
  • 1
s.casella
  • 11
  • 4
1

you can code like this

function windowOpenner(url) {
    var myWindow = window.open(url, "window name", "width=200, height=100");
//you can add element/tags like this or using createElement
myWindow.document.write("<input value='close' type='button' onclick='window.close()' />");
}

function addHyperlink(val,row){

  var redirect="edit_comments.php";

return '<a href="#" onclick="windowOpenner(\''+redirect+'\')">Edit Remarks</a>';

}

document.write(addHyperlink())
Raghavendra
  • 3,530
  • 1
  • 17
  • 18
0

UPDATE: Instead of showing result in pop up window, this method Uses Modal, which gives similar look and feel but also more control over what you can do with the pop up, like save or close the information in pop up

Use Ajax for what you want:

HTML Part: Step 1: Create a hidden DIV with display: none property and absolute position at the center of page

Javascript Part: Step 2: Add a Click Event on "Edit Remarks", and call your php files through Ajax, passing appropriate parameters

Step 3: if Ajax is successful, onsuccess: make the hidden DIV visible, and add the response you get from Ajax Call in the DIV content

--

right now your Edit Remark renders like: <a href="redirect_url" >Edit Remarks</a>

change it and give it an ID: <a id="edit_remarks" href="redirect_url" >Edit Remarks</a>

HTML:

<div id="popup" style="display:none;position:absolute;left:35%;top:35%;min-width:80%;min-height:80%;">
<div class="popup_content">
</div>
</div>

javascript/jquery

    $('#edit_remarks').click(function(){
     $.ajax({
      method: 'POST',
      url: 'edit_comments.php',
      data: {id: temp, username: temp1 } //(as many variables u want to send)
     }).done(function(msg){
      $('#popup .popup_content').html(msg);
      $('#popup').show();
    });

});
Ajay Bisht
  • 585
  • 6
  • 8