Send data to Fomulario by Dialog

Asked

Viewed 199 times

0

Dear ones, I set the code to display a table in a dialog, but I would like to , when clicking on the icon, the name of the table field was sent to an input field of my form. Another detail, my dialog has a title that should be displayed so q it is called, however this does not occur, the title is presented only when I type some value in the "Search" field. From now on, I appreciate the help.

    <!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=utf-8" />
    <script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="../../css/jquery-ui.css">

<script>

$(function()
{
    $(".input-search").keyup(function()
    {
        //pega o css da tabela 
        var tabela = $(this).attr('alt');
        if( $(this).val() != "")
        {
        $("."+tabela+" tbody>tr").hide();
        $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        } else
        {
        $("."+tabela+" tbody>tr").show();
        }
    }); 
});
$.extend($.expr[":"], 
{
    "contains-ci": function(elem, i, match, array) 
    {
    return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});
$(function() {
    $( "#dialog" ).dialog({
    resizable: false,
      height:250,
      width:600,
      modal: true,
      autoOpen: false,
        open: function(event, ui) {  
        $('.ui-dialog-titlebar-close').html('<span>X</span>');
        $('.ui-dialog-titlebar-close').attr("title", "Clique aqui para fechar");  

    }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
   $(function() {
    $( "#dialog2" ).dialog({
    resizable: false,
      height:400,
      width:500,
      modal: true,
      autoOpen: false,
      open: function(event, ui) {  
        $('.ui-dialog-titlebar-close').html('<span>X</span>');
        $('.ui-dialog-titlebar-close').attr("title", "Clique aqui para fechar");  

    }
    });

    $( "#opener2" ).click(function() {
      $( "#dialog2" ).dialog( "open" );
    });
  });

</script>
</head>
  <body>
     <div id="container">
        <form action="../../function/funcoes.php" name="inserir_C" id="inserir_C" onsubmit="return validateForm()" method="POST" accept-charset="utf-8">
                        <div id="Cliente">
                        <fieldset id="Cliente">
                            <label for="TRANSP">
                            Transportadora:<input name="TRANSP" id="TRANSP" MAXLENGTH="20" value="" />
                            <a href="#dialog" id="opener">Dialog1</a>
                            <a href="#dialog2" id="opener2">Dialog2</a>
                            </label>
                        </fieldset>
                        </div>
        </form>
                            <div id="dialog" title="Cadastro de Transportadora">
                                <form action="#" name="transportadora" id="transportadora"  method="POST" accept-charset="utf-8">  
                                    <title>Cadastro de Transportadoras</title>
                                    <fieldset id="Transportadora">
                                    <label for="NOME_TRASNP">
                                    Nome:<input type="text" name="NOME_TRASNP" id="NOME_TRASNP" value="" required/>
                                    </label></br>
                                    <label for="ENDERECO_TRANSP">
                                    Endereço:<input type="text" name="ENDERECO_TRANSP" id="ENDERECO_TRANSP" value="" required/>
                                    </label>
                                    </fieldset>
                                    <button type="submit" name="transportadora" >CADASTRAR</button>
                                </form>
                            </div>
                <div id="dialog2" title="Procurar de Transportadora" >

                    <div id="table_dialog">
                    <input type="text" id="buscar" class="input-search" alt="listar" placeholder="Buscar nome" />
                        <table class="listar" style="border:solid 1px">
                        <thead><tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>NOME2</th>                      
                        <th>ACAO</th>
                        </tr>
                        </thead> 
                        <tbody>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        <tr>
                        <td>valor 1</td>
                        <td>valor 2</td>
                        <td>valor 3</td>
                        <td><a href="#">Enviar</a></td>
                        </tr>
                        </tbody>
                        </table>
                    </div><!-- fim table_dialog-->
            </div>
</div> <!-- fim Container-->
  </body>
</html>
php jquery
  • 1

    Can create a reproducible Jsfiddle?

  • I’ve put together an easier and more reproducible example, but I don’t know how to use Jsfiddle yet, sorry

  • Just one detail, this example is with the Title view of the dialog without problems, when the table is generated by a php, the title is omitted until some value is entered in the input. I would like this not to happen and the title to be displayed.

1 answer

0


Dear, I got the result, in this example a dialog is called and it contains a div with a table loaded by php, where it has a check box field, when it is selected, and the OK button receives the click, the jquery updates the field of interest with the value of the check. 

            <script type="text/javascript">
            $(function() {$( "#tabs" ).tabs();});
            $(function()
            {
                $(".input-search").keyup(function()
                {
                    //pega o css da tabela 
                    var tabela = $(this).attr('alt');
                    if( $(this).val() != "")
                    {
                    $("."+tabela+" tbody>tr").hide();
                    $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                    } else
                    {
                    $("."+tabela+" tbody>tr").show();
                    }
                }); 
            });
            $.extend($.expr[":"], 
            {
                "contains-ci": function(elem, i, match, array) 
                {
                return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                }
            });
               $(function() {
                $( "#dialog2" ).dialog({
                resizable: false,
                  height:400,
                  width:500,
                  modal: true,
                  autoOpen: false,
                  open: function(event, ui) {  
                    $('.ui-dialog-titlebar-close').html('<span>X</span>');
                    $('.ui-dialog-titlebar-close').attr("title", "Clique aqui para fechar");  

                }
                });

                $( "#opener2" ).click(function() {
                $('input:checkbox').attr('checked',false);
                  $( "#dialog2" ).dialog( "open" );
                });
                $( "#buttonClass" ).click(function() {
                  $( "#dialog2" ).dialog( "close" );
                });
              });

            $(document).ready(function () {
                /* Get the checkboxes values based on the class attached to each check box */
                $("#buttonClass").click(function() {
                    getValueUsingClass();
                });
            });

            function getValueUsingClass(){
                /* declare an checkbox array */
                var chkArray = [];

                /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
                $(".chk:checked").each(function() {
                    chkArray.push($(this).val());
                });

                /* we join the array separated by the comma */
                var selected;
                selected = chkArray.join('') + "";

                /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
                if(selected.length > 1){
                    if(chkArray.length > 1){
                    alert("Selecione apenas uma transportadora");
                    $('input[name=TRANSP]').val("");
                    }else{  
                    $('input[name=TRANSP]').val(selected);}
                }else{
                    alert("Nenhuma transportadora selecionada");    
                }
            }


            </script>

            <title>Teste</title>
            </head>

              <body>
                 <div id="container">
                    <div id="logout">
                    <?php logout(); ?>
                    </div>
                    <?php ListaTabelas("../");?>
                    <div id="fields">
                            <div id="cabecalho">
                                    <div id="container_menu">
                                        <?php Menu("../","current");?>
                                    </div><!-- fim container_menu -->
                            </div> <!-- fim cabecalho -->
                    <!-- Principal, campos para edição e cadastro de produtos-->    

                            <form action="../../function/funcoes.php" name="inserir_C" id="inserir_C" onsubmit="return validateForm()" method="post" accept-charset="utf-8">
                            <div id="tabs">
                                <ul>
                                    <li><a href="#Cliente">Cliente</a></li>
                                    <li><a href="#Endereco">Endereço</a></li>
                                    <li><a href="#Fiscal">Fiscal</a></li>
                                </ul>
                                    <div id="Cliente">
                                    <fieldset class="Cliente">
                                        <label for="TRANSP">
                                        Transportadora:<input name="TRANSP" id="TRANSP" maxlength="20" value="" />
                                        <a href="#dialog2" id="opener2" onclick="unchekbox();"><img src="../../images/lupa.png" width="16" height="16" alt = "Add"/></a>
                                        </label>
                                    </fieldset>
                                    </div>
                            </div>
                            </form>
                    <div id="dialog2" >
                        <div id="table_dialog" >
                        <input type="text" id="buscar" class="input-search" alt="listar" placeholder="Digite o nome da Transportadora"/><input type="button" value="OK" id="buttonClass"> 
                                    <?php
                                    $qry = mysql_query("select CODIGO, NOME from financeiro.transportadora");
                                    $num_fields = mysql_num_fields($qry);//Obtém o número de campos do resultado
                                    for($i = 0;$i<$num_fields; $i++)
                                    {//Pega o nome dos campos
                                    $fields[] = mysql_field_name($qry,$i);
                                    }
                                    //Montando o cabeçalho da tabela
                                    $table = '<table class="listar">';
                                    $table.='<thead><tr>';
                                    for($i = 0;$i < $num_fields; $i++)
                                    {
                                    $table .= '<th>'.$fields[$i].'</th>';
                                    }
                                    $table.='<th>Ações</th></tr></thead>';

                                    //Montando o corpo da tabela
                                    $table .= '<tbody>';
                                    while($r = mysql_fetch_array($qry))
                                    {
                                    $table .= '<tr>';

                                    for($i = 0;$i < $num_fields; $i++)
                                    {                           
                                    $table .= '<td>'.$r[$fields[$i]].'</td>';
                                    }
                                    $table .='<td>';
                                    $table .="<input type=\"checkbox\" name=\"check".$r[$fields[0]]."\" id=\"check".$r[$fields[0]]."\" class=\"chk\" value=\"".$r[$fields[1]]."\" style=\"width:35px;height:15px;\"/>";
                                    //$table .='<a href="../function/delete.php?del='.$r[$fields[0]].'&pag='.$_GET['t'].'"><img src="../images/delete.png" width="16" height="16" /></a>';
                                    $table .='</td>';
                                    $table .= '</tr>';
                                    }
                                    //Finalizando a tabela
                                    $table .= '</tbody></table>';
                                    //Imprimindo a tabela
                                    echo $table;
                                    ?>
                        </div><!-- fim table_dialog-->
                    </div> <!-- fim Dialog2-->
                    </div><!-- fim Fields-->
                </div> <!-- fim Container-->
              </body>
            </html>

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.