Visualizzazione dei risultati da 1 a 2 su 2

Discussione: chiamata ajax

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2003
    Messaggi
    605

    chiamata ajax

    Ciao a tutti ragazzi...
    ho preso questo script :
    http://jqueryui.com/dialog/#modal-form
    e sto cercandodi adattarlo facendo una chimata ajax ma senza tanti successi
    chiedo pertanto un vostro caro aiuto....
    allora ho eliminato qualcosa dallo script originale e mi è rimasto questo
    codice:
    <div id="dialog-form" title="Create new user">
        <p class="validateTips">All form fields are required.</p>
        <form>
            <fieldset>
                <label for="SIScodice">Codice Sistema</label>
                <input type="text" name="SIScodice" id="SIScodice" class="text ui-widget-content ui-corner-all" />
                
                <label for="SISdescri">Decrizione Sistema</label>
                <input type="text" name="SISdescri" id="SISdescri" value="" class="text ui-widget-content ui-corner-all" />
                
                <label for="CLIdescri">Cliente</label>
                   <select name="CLIdescri" id="CLIdescri">
                       <option value="1">blabla</option>";
                   </select>
                
            </fieldset>
        </form>
    </div>
    
    <div id="sistem-contain" class="ui-widget">
        <h1>Sistemi:</h1>
        <table id="sistem" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Codice Sistema</th>
                    <th>Decrizione Sistema</th>
                    <th>Cliente</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>
                      kjòlkjòlkjòlk
    
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-sistem">Aggiungi Sistema</button>
    
    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    
    <style>
        body { font-size: 62.5%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin-top:25px; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#sistem-contain { width: 350px; margin: 20px 0; }
        div#sistem-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#sistem-contain table td, div#sistem-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
    </style>
    <script>
        
        
        $(function() {
            var SIScodice = $( "#SIScodice" ),
            SISdescri = $( "#SISdescri" ),
            CLIdescri = $( "#CLIdescri" ),
            allFields = $( [] ).add( SIScodice ).add( SISdescri ).add( CLIdescri ),
            tips = $( ".validateTips" );
    
            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Create account": function() {
                           
                           //chiamata ajax 
                            
                            $( "#sistem tbody" ).append( "<tr>" +
                                "<td>" + SIScodice.val() + "</td>" +
                                "<td>" + SISdescri.val() + "</td>" +
                                "<td>" + CLIdescri.val() + "</td>" +
                                "</tr>" );
                            $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });
            $( "#create-sistem" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
        });
        
    </script>

    fin qui tutto ancora funziona... certo non ho fatto nulla di che..


    poi volevo aggiungere un chiamata ajax... cioè volevo inviare i dati alla pagine php che mi fa linsert nel db e poi riceve aggiungere alla riga della tabella html i dati inseriti...


    pensavo di aggiungere questo pezzo di codice qui ma nulla.... anzi mi da errore...
    codice:
    "Create account": function() {
                           
                           //chiamata ajax 
       
    $.ajax({
     url: '<?php echo site_url('welcome/add_sistema'); ?>' ,
             type : "GET",
             async : false,
             cache: false,
             error:___function(res, stato, error) {
                                 ___//_$('#autogenera').attr('disabled', false);
                                 ___//_$('#autogenera').attr('value', 'Autogenera i seguenti campi:');____
                                 ____msg = $.parseJSON(res.responseText);
                                 ____alert(msg.error);____
                                 ___},
                                 ___success: function(data, textStatus, jqXHR) {
    
                                 ____res= $.parseJSON(data);                         
    
                                 ___}
    
                                 __});
                         
                            $( "#sistem tbody" ).append( "<tr>" +
                                "<td>" + SIScodice.val() + "</td>" +
                                "<td>" + SISdescri.val() + "</td>" +
                                "<td>" + CLIdescri.val() + "</td>" +
                                "</tr>" );
                            $( this ).dialog( "close" );
                    },

    come mi consigliare di fare questa chiamata ajax o come debaggare per risolvere..
    o anche qualche esempio è ben accetto

    grazi mille

  2. #2
    Utente di HTML.it
    Registrato dal
    Jun 2003
    Messaggi
    605
    trovata la soluzione finalmente...
    la posto perchè magari potrebbe essere utili a qualche sventurato come me....
    codice:
    <script>
        $(function() {
            var SIScodice = $( "#SIScodice" ),
            SISdescri = $( "#SISdescri" ),
            CLIid = $( "#CLIid" ),
            allFields = $( [] ).add( SIScodice ).add( SISdescri ).add( CLIid ),
            tips = $( ".validateTips" );
            
            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Createan account": function() {
    //                        $( "#sistem tbody" ).append( "<tr>" +
    //                            "<td>" + SIScodice.val() + "</td>" +
    //                            "<td>" + SISdescri.val() + "</td>" +
    //                            "<td>" + CLIid.val() + "</td>" +
    //                            "</tr>" );
    
                           //chiamata ajax 
                           dataString = $("#sistema-form").serialize();
                           
                          $.ajax({                                      
        url: 'http://localhost/esperimenti/codeigniter/index.php/jquery',                //the script to call to get data    
        data: dataString,
        type:"POST",      
        dataType: 'json',                //data format      
        success: function(output_string){
            
                alert(output_string);
    
                    $( "#sistem tbody" ).append( "<tr>" +
                                "<td>" + output_string['SIScodice'] + "</td>" +
                                "<td>" + output_string['SISdescri'] + "</td>" +
                                "<td>" + output_string['CLIid'] + "</td>" +
                                "</tr>" );  
            
                        //$("#result_table").append(output_string);
        }
      });
    
                            $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });
            $( "#create-sistem" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
            
        });
        
    </script>

    ora però mi piacerebbe aggiungere un pulsante per la modifica dei dati al alto di ogni record. Pensavo di aggiungere alla fine un link


    codice:
             $( "#modifica" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
    ma come potrei fare a passare un id in questo caso per poi fare la query che mi mostra i campi nel form che si apre?
    spero di essermi spiegato
    grazie

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.