Ver Mensaje Individual
  #3 (permalink)  
Antiguo 04/06/2012, 06:35
amelper
 
Fecha de Ingreso: mayo-2012
Ubicación: ISLAS CANARIAS
Mensajes: 5
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Enviar variables .POST y mostrar resultado en .DIALOG

Se supone que en ciertas webs existirá un botón HTML con un parámetro "onclick".

Al hacer click debe mostrar una alerta si no hay texto seleccionado, pero si lo hay debe abrir un .dialog el cual será el archivo PHP clipper.php ubicado en un servidor fijo, y que recibirá, mediante POST, las variables indicadas (Texto Seleccionado, URL, Título de web).

Por GET me funciona perfectamente pero tiene las limitaciones propias del GET, y no puedo tener dichas limitaciones.

Adjunto ejemplo de clipper.php (fichero receptor de variables),fichero clipper.js (fichero con JQuery), y fichero clipper.html (fichero con boton llamador):

Código Javascript:
Ver original
  1. function QJ()
  2. {
  3.     x = document.createElement('div');
  4.     x.appendChild(window.getSelection().getRangeAt(0).cloneContents());
  5.  
  6.     var urlclip   = 'http://www.*******.com/clipper.php';
  7.     var style     = '-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;border:5px #000000 solid;box-shadow:3px 3px 3px #000;z-index:1000;background:#fff;';
  8.     var divid     = 'UT'+Math.round(Math.random()*100);
  9.     var head      = document.getElementsByTagName('head')[0];
  10.  
  11.     var jquery    = document.createElement('script');
  12.     jquery.type   = 'text/javascript';
  13.     jquery.src    = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js';
  14.  
  15.     var jqueryui  = document.createElement('script');
  16.     jqueryui.type = 'text/javascript';
  17.     jqueryui.src  = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js';
  18.  
  19.     head.appendChild(jquery);
  20.     head.appendChild(jqueryui);
  21.  
  22.     jquery.onload = function()
  23.     {
  24.         jqueryui.onload = function()
  25.         {
  26.             $('<div id="'+divid+'"></div>').dialog(
  27.             {
  28.                 autoOpen:   true,
  29.                 id:         divid+'dialog',
  30.                 title:      "Clipper",
  31.                 width:      480,
  32.                 height:     300,
  33.                 modal:      true,
  34.                 resizable:  false,
  35.                 buttons:
  36.                 {
  37.                     "close":
  38.                     {
  39.                         text:  'close this clipper',
  40.                         click: function()
  41.                         {
  42.                             $(this).dialog('close');
  43.                         }
  44.                     }
  45.                 }
  46.             }).width(480).height(300).css(style);
  47.  
  48.             $.ajax(
  49.             {
  50.                 url:      urlclip,
  51.                 dataType: 'text',
  52.                 type:     'POST',
  53.                 data:
  54.                 {
  55.                     u:location.href,
  56.                     q:escape(x.innerText),
  57.                     t:escape(document.title)
  58.                 },
  59.                 success:function(data_resultado)
  60.                 {
  61.                     $('#'+divid).empty().html(data).dialog('open');
  62.                 }
  63.             });
  64.         }
  65.     }
  66. }
Código PHP:
Ver original
  1. <?php
  2.  
  3. $userid = islogin();
  4.  
  5. echo "<form name='select' method='POST' action='clipper.php'>";
  6. echo "<input type='text' name='title' value='".$_POST['t']."'><br>";
  7. echo "<input type='hidden' name='url' value='".$_POST['u']."'><br>";
  8. echo "<textarea name='texto'>".$_POST['t']."'></textarea><br>";
  9. echo "<input type='submit' name='send' value='send'>";
  10. echo "</form>";
  11.  
  12. ?>
Código HTML:
Ver original
  1. <button name="clipper" onclick="javascript:function%20U(){var%20head=document.getElementsByTagName('head')[0];var%20script=document.createElement('script');script.type='text/
  2. javascript';script.src='http://0.0.0.0/clipper.js';head.appendChild(script);script.onload=function(){QJ();};};U();">clipper</button>
  3. </body>
  4. </html>

Un saludo.