0

これは私の作成したテーブルです：

    <table class="table table-striped table-bordered" id="example">
    <thead>
    <?php
        foreach ($fields as $field_name => $field_display){
             echo "<th>".$field_display."</th>";
        }
    ?>
    </thead>
    <tbody>
    <?php
        foreach ($users as $row){
        echo "<tr>";
        foreach($fields as $field_name => $field_display){
            if($field_name == 'username'){
            echo "<td><a href='#' onclick=\"edituserdata('".$row->username."')\">".$row->$field_name."</a></td>";
        }else{
            echo "<td>".$row->$field_name."</td>";
        }
        }
        echo "</tr>";
        }
    ?>
    </tbody>
    </table>

そして、これは私が行をクリックしたときに表示されるブートストラップモーダルです：

    <!-- Modal -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Update you're data</h3>
</div>
<div class="modal-body">
        <?php echo form_open('main/update'); ?>

        <?php 

        $name = array(
                'name' => 'name',
                'id' => 'name',
                'value' => set_value('name')
        );
        ?>

        <div class="control-group">
            <label class = "control-label" for="name">Name:</label>
            <div>
                <input type="text" name="name" placeholder="Name" id="name" value="">
                <?php echo form_error('name', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Username:</label>
            <div>
                <input type="text" name="username" placeholder="Username" id="username" value="">
                <?php echo form_error('username', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Password: </label>
            <div>
                <input type="password" name="password" placeholder="Password" id="password" value="">
                <?php echo form_error('password', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Retype password: </label>
            <div>
                <input type="password" name="password1" placeholder="Retype password" id="password1" value="">
                <?php echo form_error('password1', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Email address: </label>
            <div>
                <input type="email" name="email" placeholder="Email" id="email" value="">
                <?php echo form_error('email', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Phone number: </label>
            <div>
                <input type="tel" name="tel" placeholder="Phone number" id="phone_number" value="">
                <?php echo form_error('tel', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Description: </label>
            <div>
                <input type="text" placeholder="Description" name="descr" id="description" value="">
                <?php echo form_error('descr', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>


</div>
<div class="modal-footer">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span5" id="message_add_user_id">
        </div>

        <div class="span7">
            <button id="add_user_submit" type="button" class="btn btn-success">Update <i class="icon-white icon-check"></i> </button>
            <button class="btn" onClick="document.location.reload(true)" data-dismiss="modal" >Close</button>
        </div>          
    </div>
</div>
<?php echo form_close();?>

モーダルが表示される関数は次のとおりです。

    function edituserdata(username){
      $('#myModal1').modal('show');
    }

行をクリックすると、そのユーザーのデータをブートストラップモーダルのテキストフィールドに入れたいと思います。どうやってやるの？

4

1 に答える 1

1

あなたはおそらく次のようにajaxを介してすべてをやりたいと思うでしょう：

テーブルhtmlページ

<table class="table table-striped table-bordered" id="example">
    <thead>
    <?php
        foreach ($fields as $field_name => $field_display){
            echo "<th>$field_display</th>";
        }
    ?>
    </thead>
    <tbody>
    <?php
        foreach ($users as $row){
            echo "<tr>";
            foreach($fields as $field_name => $field_display){
                if($field_name == 'username'){
                    echo "<td><a href='#' onclick=\"edituserdata('".$row->username."')\">".$row->$field_name."</a></td>";
                } else {
                    echo "<td>".$row->$field_name."</td>";
                }
            }
            echo "</tr>";
        }
    ?>
    </tbody>
</table>   

<!-- Modal -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Update you're data</h3>
    </div>
    <div class="modal-body">

        <!-- NOTE THE EMPTY MODAL -->

    </div>
    <div class="modal-footer">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span5" id="message_add_user_id">
                </div>

                <div class="span7">
                    <button id="add_user_submit" type="button" class="btn btn-success">Update <i class="icon-white icon-check"></i> </button>
                    <button class="btn" onClick="document.location.reload(true)" data-dismiss="modal" >Close</button>
                </div>          
            </div>
        </div>
    </div>
</div>

Ajaxページ

<?php echo form_open('main/update'); ?>

<?php 
    // TODO get username from $_GET['username'] and then retrieve all user information from db
    // TODO echo user data into form fields

    $name = array(
            'name' => 'name',
            'id' => 'name',
            'value' => set_value('name')
    );
    ?>

    <div class="control-group">
        <label class = "control-label" for="name">Name:</label>
        <div>
            <input type="text" name="name" placeholder="Name" id="name" value="">
            <?php echo form_error('name', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Username:</label>
        <div>
            <input type="text" name="username" placeholder="Username" id="username" value="">
            <?php echo form_error('username', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Password: </label>
        <div>
            <input type="password" name="password" placeholder="Password" id="password" value="">
            <?php echo form_error('password', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Retype password: </label>
        <div>
            <input type="password" name="password1" placeholder="Retype password" id="password1" value="">
            <?php echo form_error('password1', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Email address: </label>
        <div>
            <input type="email" name="email" placeholder="Email" id="email" value="">
            <?php echo form_error('email', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Phone number: </label>
        <div>
            <input type="tel" name="tel" placeholder="Phone number" id="phone_number" value="">
            <?php echo form_error('tel', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Description: </label>
        <div>
            <input type="text" placeholder="Description" name="descr" id="description" value="">
            <?php echo form_error('descr', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

<?php echo form_close();?>

テーブルページのJavascript

<script>
    function edituserdata(username) {
        $.get('url-to-ajax-page', {username: username}, function(resp) {
            $('#myModal1 .modal-body').html(resp);
            $('#myModal1').modal('show');
        });
    }
</script>

ここで行うのは、ユーザー名のテーブルを作成することです。ユーザー名をクリックすると、フォームデータにユーザーデータを入力してモーダルで表示するページにajax呼び出しが行われます。

だから、これはあなたが始めるはずです。フォームの送信に関しては、残りの部分を書き出す時間がありませんが、送信ボタンをクリックしたときに別のajaxクエリを実行すると、おそらく同じajaxURLにデータが投稿されます。投稿されたデータにエラーがあった場合にデータが戻ってきたら、モデル本体のコンテンツをajax応答に置き換えます。それ以外の場合は、ウィンドウを閉じます。

于 2013-06-10T15:54:47.387 に答える