Question

我有HTML复选框，我试图使用我收到的脚本作为ajax响应来检查它。这是我的HTML：

<form class="form-vertical sms-settings-form">
    <div class="form-group">
        <div data-toggle="tooltip" title="SMS to the customer at the time of sale." class="form-group opt-transport">
               <label for="sale-sms">Sale SMS</label>
               <input type="checkbox" id="sale-sms" data-toggle="toggle" data-on="Send" data-off="Don't Sent">
         </div>
        <textarea data-toggle="tooltip" class="form-control" id="sale-sms-content"></textarea>
    </div>

    <button type="button" class="btn btn-success sms-settings-btn">Save Settings</button>
</form>

这是我的AJAX请求。

$(document).ready(function(){
    $.post("ajax-req-handler.php", {key: "load-saved-settings"}, function(data){ $(".exec-ajax-script").html(data); });
});

这是我的ajax-req-handler.php

$sql = "SELECT * FROM settings";
$result = $conn->query($sql);
if(num_rows($result)>0){
    while($row=$result->fetch_assoc()){
        $id = $row['id'];
        $setting_name = $row['name'];
        if($id == 1 && $setting_name == 'sale-sms') $sms_content = $row['value'];
        if($id == 2 && $setting_name == 'send-sms') $send_sms = $row['value'];

    }
} ?>
<script type="text/javascript">
    $(document).ready(function(){
        $(".sms-settings-form #sale-sms").prop(<?php echo ($send_sms == 1) ? "'checked', 'checked'" : ""; ?>);
        $(".sms-settings-form textarea").val("<?php echo $sms_content; ?>");
    });

</script> <?php

以下是我作为AJAX resopnse获得的代码

<script type="text/javascript">
    $(document).ready(function(){
        $(".sms-settings-form #sale-sms").prop('checked', 'checked');
        $(".sms-settings-form textarea").val("Hello [name], Your mobile number is [mobile]. your total amount is Rs. [total] out of which you paid Rs. [paid] and your due amount is [due] for the bill number # [bill] on [date] ");
    });

</script>

响应似乎正常，但仍然没有设置我的复选框的值来检查。我尝试复制响应并粘贴在我的第一个文件中（文件中定义了复选框并启动了ajax请求）。它在那里工作。问题仅在于ajax响应

Answer 1

未经测试，但将所有代码放在Javascript中，而不是将其注入HTML dom。

$.ajax( {
  url: 'ajax-req-handler.php',
  data: { key: 'load-saved-settings' },
  dataType: 'json'
} ).done( function( data ) {

  if( data.send_sms === 1 ) {
    $(".sms-settings-form #sale-sms").prop('checked', true);
  }

  $(".sms-settings-form textarea").val( data.textarea );

} );

对于PHP;相反。

$sql = "SELECT * FROM settings";
$result = $conn->query($sql);
if(num_rows($result)>0){
  while($row=$result->fetch_assoc()){
      $id = $row['id'];
      $setting_name = $row['name'];
      if($id == 1 && $setting_name == 'sale-sms') $sms_content = $row['value'];
      if($id == 2 && $setting_name == 'send-sms') $send_sms = $row['value'];

  }
}

echo json_encode( array(
  'send_sms' => $send_sms,
  'textarea' => $sms_content
) );

Answer 2

我认为ajax-req-handler.php

存在问题

你有while循环，并且必须处理多个记录。如果你得到多条记录，那么用jquery编写的文档就绪部分将根据数据集中的最后一条记录执行。

请提供样本数据，以便进行相应的审核。

Answer 3

问题以下不是脚本没有向checked添加<input type='checkbox'>属性。脚本按预期工作并添加checked属性。问题是它不仅仅是一个复选框而是它的切换开关，默认情况下<input type='checkbox'>设置为display: none，并且它还添加和删除了一些类。每次点击都会自定义div class='toggle'，以显示切换是On还是Off。因此，执行此$(".sms-settings-form #sale-sms").attr('checked', true);是不够的，因为这只会检查复选框，但不会影响用户界面。切换开关仍然会显示为“关闭”。即使它没有。为了实现UI，我们需要添加和删除.toggle中的一些类以下代码将起作用：

$(".sms-settings-form #sale-sms").attr('checked', true);
$(".sms-settings-form textarea").val("Hello [name], Your mobile number is [mobile]. your total amount is Rs. [total] out of which you paid Rs. [paid] and your due amount is [due] for the bill number # [bill] on [date] ");
$(".toggle").addClass('btn-primary');
$(".toggle").removeClass('btn-default');
$(".toggle").removeClass('off');

使用ajax响应检查Checkbox

3 个答案: