Question

我使用http://proto.io/freebies/onoff/创建开/关按钮。按钮单击时，此按钮具有幻灯片动画。我有一些代码并与开/关按钮proto.io结合。但是，当我与PHP，MySQL和Ajax结合使用时，按钮滑动不起作用。我该如何解决这个问题？

这是我的代码：的的index.php

<?php
$query=mysql_connect("localhost","learn","learnpass");
mysql_select_db("study",$query);
include("connection1.php");
$result = mysql_query("SELECT * FROM mytable ORDER BY id");
?>

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<div>
<table id="datatables" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Text</th>
    </tr>
    </thead>
    <tbody>
    <?php while ($row = mysql_fetch_array($result)) { ?>
        <tr>
            <td><?php echo $row["id"]; ?></td>
            <td><?php echo $row["name"]; ?></td>
            <td><?php echo $row["text"]; ?></td>
            <td>
                <div class="onoffswitch">
                    <input type="hidden" value="<?php echo $row["id"]; ?>" />
                    <input type="checkbox" class="onoffswitch-checkbox"
                        <?php
                        if($row['text']=="off")
                        {
                            echo "checked";
                        }
                        ?>>
                    <label class="onoffswitch-label" for="myonoffswitch<?php echo $row["id"]; ?>">
                        <div class="onoffswitch-inner"></div>
                        <div class="onoffswitch-switch"></div>
                    </label>
                </div>
                <div id="display">
                </div>
            </td>
        </tr>
    <?php
    }
    ?>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function(){
        $('.onoffswitch').click(function(){
            var hiddenValueID = $(this).children(':hidden').val();
            if ($(this).children(':checked').length == 0)
            {
                var valueData = 'on';
            }
            else
            {
                var valueData = 'off';
            }

            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: {value: valueData, id: hiddenValueID} ,
                done: function(html){
                    $("#display").html(html).show();
                }
            });

        });
    });
</script>
</div>

这个 ajax.php

<?php
$query=mysql_connect("localhost","learn","learnpass");
mysql_select_db("testdb",$query);
if(isset($_POST['value']))
{
$value=$_POST['value'];
$id=$_POST['id'];
mysql_query("update mytable set text='$value' where id=$id");
echo "You have Chosen the button status as:" .$value;
}
?>

Answer 1

尝试为您的输入提供与

标签相匹配的 ID

在http://proto.io/freebies/onoff/

的示例中

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
                                  id="onoffswitch1" checked="">
<label class="onoffswitch-label" for="onoffswitch1">

在代码中替换这些行：

<input type="checkbox" class="onoffswitch-checkbox"
<?php if($row['text']=="off"){echo "checked"; }?> 
id="myonoffswitch<?php echo $row["id"]; ?>" >

<label class="onoffswitch-label" for="myonoffswitch<?php echo $row["id"]; ?>">

这应该可以解决问题。

Answer 2

的index.php

        <?php
    $query = mysql_connect("localhost", "learn", "learnpass");
    mysql_select_db("study", $query);
    include("connection1.php");
    $result = mysql_query("SELECT * FROM mytable ORDER BY id");
    ?>

    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>

    <div>
            <table id="datatables" class="display">
                    <thead>
                            <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Text</th>
                            </tr>
                    </thead>
                    <tbody>
                            <?php while ($row = mysql_fetch_array($result)) { ?>
                                    <tr>
                                            <td><?php echo $row["id"]; ?></td>
                                            <td><?php echo $row["name"]; ?></td>
                                            <td><?php echo $row["text"]; ?></td>
                                            <td>
                                                    <div class="onoffswitch">
                                                            <input type="hidden" value="<?php echo $row["id"]; ?>" />
                                                            <input type="checkbox" class="onoffswitch-checkbox"
                                                            <?php
                                                            if ($row['text'] == "off") {
                                                                    echo "checked";
                                                            }
                                                            ?>>
                                                            <label class="onoffswitch-label" for="myonoffswitch<?php echo $row["id"]; ?>">
                                                                    <div class="onoffswitch-inner"></div>
                                                                    <div class="onoffswitch-switch"></div>
                                                            </label>
                                                    </div>
                                                    <div></div><!-- <div id="display"></div> -->
                                            </td>
                                    </tr>
                                    <?php
                            }
                            ?>
                    </tbody>
            </table>
            <script type="text/javascript">
                    $(document).ready(function() {
                            $('.onoffswitch').click(function() {
//add this bellow line;
                                    var message_DIV = $(this).closest('div.onoffswitch').parent().children('div').eq(1);
                                    var hiddenValueID = $(this).children(':hidden').val();
                                    if ($(this).children(':checked').length == 0)
                                    {
                                            var valueData = 'on';
                                    }
                                    else
                                    {
                                            var valueData = 'off';
                                    }

                                    $.ajax({
                                            type: "POST",
                                            url: "ajax.php",
                                            data: {value: valueData, id: hiddenValueID},
                                            success: function(html) {
                                                    message_DIV.html(html);
                                            }
                                    });

                            });
                    });
            </script>
    </div>

在$ .ajax中更改成功并且id =“display”不会得到结果，因为while循环同时将相同的id分配给同一页面上的多个div

开/关按钮幻灯片proto.io无法使用Ajax PHP和MySQL

2 个答案:

的index.php