CODEWITHSUNDEEP
javascriptphpjqueryajax
Zainul Abideen
Zainul Abideen

Reputation: 1900

Check Checkbox using ajax response

I have HTML checkbox and I'm trying to check it using the script I received as an ajax response. Here is my 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>

Here is my AJAX request. 

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

Here is my 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

And Here is the code that I'm getting as 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>

The response seems Ok but still, it's not setting the value of my checkbox to checked. I tried copying the response and pasted in my 1st file (file where checkbox is defined and ajax request is initiated). It's working there. The problem is only with ajax response

Upvotes: 4

Views: 9457

Answers (3)

Zainul Abideen
Zainul Abideen

Reputation: 1900

The problem Here is not that the script is not adding checked attribute to the <input type='checkbox'>. script is working as expected and adding checked attribute. The problem is it's not just a checkbox instead it's toggle switch where <input type='checkbox'> is set to display: none by default and also it adds and remove some classes to it's self defined div with class='toggle' whenever clicked, to show whether the switch is On or Off. So, doing this $(".sms-settings-form #sale-sms").attr('checked', true); is not enough because this will only check the checkbox but it will not effect the user interface, The toggle switch will still appear to be 'Off' even though it's not. To effect the UI we need to add and remove some classes from .toggle Here is the code that will work:

$(".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');

Upvotes: 1

user2341406
user2341406

Reputation:

Untested, but put all of your code in Javascript instead of injecting it into the 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 );

} );

And for PHP; instead do.

$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
) );

Upvotes: 1

Jatinder Kumar
Jatinder Kumar

Reputation: 513

I think there is problem with ajax-req-handler.php

You have while loop, and must be processing multiple records. If you are getting multiple records, then document ready section written in jquery will execute according to last record in the data set.

Please provide sample data, to review it accordingly.

Upvotes: 0

Related Questions