我有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响应
答案 0 :(得分: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
) );
答案 1 :(得分:0)
我认为ajax-req-handler.php
存在问题你有while循环,并且必须处理多个记录。 如果你得到多条记录,那么用jquery编写的文档就绪部分将根据数据集中的最后一条记录执行。
请提供样本数据,以便进行相应的审核。
答案 2 :(得分:0)
问题以下不是脚本没有向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');