How to show selectable text in Popup? Javascript & PHP

Question

I'm working with a URL shortener script Yourls. Work is going fine after getting some help from you guys. Thank you for that. Every button is pressed for shorten URL, a popup appear, showing Short URL for that Page. This simple method is fine for Firefox, but I cannot select the text/Shorten URL in Popup in Internet Explorer. Any suggestions how to show selectable text in popup?

This is the code of the page:

<?php 
// Start YOURLS engine
require_once( dirname(__FILE__).'/includes/load-yourls.php' );

function selfURL() { $s = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : ""; $protocol = strleft(strtolower($_SERVER["SERVER_PROTOCOL"]), "/").$s; $port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]); return $protocol."://".$_SERVER['SERVER_NAME'].$port.$_SERVER['REQUEST_URI']; } function strleft($s1, $s2) { return substr($s1, 0, strpos($s1, $s2)); }

?>
<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div id="container">
    <?php
    // Part to be executed if FORM has been submitted
    if ( isset($_REQUEST['url']) ) {
        $url     = yourls_sanitize_url( $_REQUEST['url'] );
        $return  = yourls_add_new_link( $url );     
        $shorturl = isset( $return['shorturl'] ) ? $return['shorturl'] : '';

        echo <<<RESULT
        "<script type='text/javascript'>alert('$shorturl');</script>"
RESULT;

    // Part to be executed when no form has been submitted
    } else {

        $site = YOURLS_SITE;
        $var = selfURL();
        echo <<<HTML
        <form method="post" action="">      
        <p><input type="hidden" name="url" value="$var" /></p>
        <p><input type="submit" value="Shorten" /></p>
        </form> 
HTML;
    }
    ?>
</div>
</body>
</html>

I want to edit the code where its saying

"<script type='text/javascript'>alert('$shorturl');</script>"

How can I make the text selectable to copy?

And can any one please tell me why the page http://taimoorsultan.com/y/ is redirecting to another page when we press the button? Is it possible to show the popup on the same page without going to next page? I have already pasted the complete code above.! Thank you!

This is the Current Code::

<?php 
// Start YOURLS engine
require_once( dirname(__FILE__).'/includes/load-yourls.php' );

function selfURL() { $s = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : ""; $protocol = strleft(strtolower($_SERVER["SERVER_PROTOCOL"]), "/").$s; $port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]); return $protocol."://".$_SERVER['SERVER_NAME'].$port.$_SERVER['REQUEST_URI']; } function strleft($s1, $s2) { return substr($s1, 0, strpos($s1, $s2)); }

?>
<!DOCTYPE html>
<html>
<head>
<!--Testing-->
   <?php if(isset($_REQUEST['url']): // <-- only include jQuery if url set ?>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>
  <?php endif; ?>
<!--Testing-->
</head>

<body>



<div id="container">
    <?php
    // Part to be executed if FORM has been submitted
    if ( isset($_REQUEST['url']) ) {
        $url     = yourls_sanitize_url( $_REQUEST['url'] );
        $return  = yourls_add_new_link( $url );     
        $shorturl = isset( $return['shorturl'] ) ? $return['shorturl'] : '';

        echo <<<RESULT

RESULT;

    // Part to be executed when no form has been submitted
    } else {

        $site = YOURLS_SITE;
        $var = selfURL();
        echo <<<HTML
        <form method="post" action="">      
        <p><input type="hidden" name="url" value="$var" /></p>
        <p><input type="submit" value="Shorten" /></p>
        </form> 
HTML;
    }

    ?>


</div>

<?php if(isset($_REQUEST['url']): // <-- only include the div if url set ?>
<div id="dialog-modal" title="Basic modal dialog">
  <p><?php echo htmlspecialchars($shorturl); ?></p>
</div>
<?php endif; ?>


</body>
</html>

The text which will be shown in the popup, I simple want to make that selectable. — Taimoor, Jan 09 '13 at 10:34
@Taimoor That is browser-dependent functionality. There's no way to guarantee that it will be selectable. You'll have to make your own alert function. — Waleed Khan, Jan 09 '13 at 10:35
Yes, in firefox its selectable but not in Internet Explorer. Any way to show that text in ? Maybe in this way it can be selectable! — Taimoor, Jan 09 '13 at 10:37

MrCode · Accepted Answer · 2013-01-09T11:41:07.943

0

It isn't possible to change select-ability of the text in Internet Explorer. alert()'s are very basic ways of displaying a message and there are no configurable options, other than the message.

If you want more control you'll have to display the message on the page instead, or create your own dialog or use something like the jQuery UI Dialog.

For example on the page instead:

echo '<p>' . htmlspecialchars($shorturl) . '</p>';

Or in an <input>:

 echo '<input type="text" value="' . htmlspecialchars($shorturl) . '" />';

To add a jQuery Dialog to your page, your <head> section would need to look like (using the jQuery CDN):

<head>
  <?php if(isset($_REQUEST['url'])): // <-- only include jQuery if url set ?>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>
  <?php endif; ?>
</head>

Add the div that will become the dialog to within your <body> element:

<?php if(isset($_REQUEST['url'])): // <-- only include the div if url set ?>
<div id="dialog-modal" title="Basic modal dialog">
  <p><?php echo htmlspecialchars($shorturl); ?></p>
</div>
<?php endif; ?>

edited Jan 09 '13 at 11:41

answered Jan 09 '13 at 10:41

MrCode

63,975
10
90
112

Can you please explain and help in using jQuery UI Dialog for above code? – Taimoor Jan 09 '13 at 10:53
@Taimoor see my edit - added an example of a jQuery UI Dialog. – MrCode Jan 09 '13 at 10:57
Thanks a lot, yes its working! But a little problem, the dialog box is also appearing on the first page when I load the website. How to disable it? have a look http://taimoorsultan.com/y – Taimoor Jan 09 '13 at 11:00
You can add a condition to the jQuery part - I have added an `if` statement around the div and the jquery includes. – MrCode Jan 09 '13 at 11:11
Dreamweaver is showing error in the first and last line, and also seeing error when uploaded file. I think there is also a problem?
– Taimoor Jan 09 '13 at 11:22
Parse error: syntax error, unexpected ':' This is the error on this line: – Taimoor Jan 09 '13 at 11:26
Still getting errors. I guess I'm doing some thing wrong. I have added the current code in the question, and here is the output of that code http://taimoorsultan.com/y Please have a look! – Taimoor Jan 09 '13 at 11:40
There was a missing `)` around the if statements. Have a look now. – MrCode Jan 09 '13 at 11:41
Can you please tell me how to display Popup on the same page? I mean currently popup shows at the next page which is blank. – Taimoor Jan 09 '13 at 11:44
What do you mean by display it on the same page? It's already on the same page isn't it? – MrCode Jan 09 '13 at 11:45
Yes, but when the popup appears, the button of shortening link disappear. And when I close the dialog box, the it just show a blank page. – Taimoor Jan 09 '13 at 11:47
You would need to move the form out of the `else` so that it always shows. – MrCode Jan 09 '13 at 11:51
Means I can delete the else? – Taimoor Jan 09 '13 at 11:54
Yes because you want to show the form always, instead of before when it only shows if the form wasn't submitted. – MrCode Jan 09 '13 at 11:55
Yeaa! Done. :D Thanks a lot MrCode.. Wish you success and happiness in your future :D Thanks – Taimoor Jan 09 '13 at 11:57
No problem, same to you :) – MrCode Jan 09 '13 at 11:57

score 0 · Answer 2 · answered Jan 09 '13 at 10:42

0

This is different behavior from browser to browser. You can not do this with alert. Instead use a custom dialog window. You could use the jQuery UI Dialog plugin or the Twitter Bootstrap Modal plugin.

answered Jan 09 '13 at 10:42

Esben

1,943
1
18
37

Can you please explain a bit How can I use jQuery UI Dialog plugin with above code I have given? – Taimoor Jan 09 '13 at 10:49

How to show selectable text in Popup? Javascript & PHP

2 Answers2