Question

我有一个Bootstrap模式对话框，其中一个按钮调用一个发出AJAX请求的脚本。我需要添加disabled =＆＃34;禁用＆＃34;如果AJAX响应成功，则调用该按钮的属性。

这是我的模态对话框：

＆＃13;

<div class="modal" id="contact1CallModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Call Contact</h4>
      </div>
      <div class="modal-body">
        <p>Calling John Citizen</p>
      </div>
      <div id="ajaxError1" class="alert alert-danger text-center" role="alert" style="display:none">
        Error Response
      </div>
      <div id="ajaxSuccess1" class="alert alert-success text-center" role="alert" style="display:none">
        Success Response
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="callContact1" class="btn btn-success">Start Call</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

＆＃13;

以及点击“开始呼叫”按钮时运行的脚本：

＆＃13;

$("#callContact1").click(function() {
  console.log('starting call back request');
  $.ajax({
      url: "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contact1CallBack ;?>",
      data: {},
      type: "GET"
    })
    .then(function(data, status, xhr) {
      var httpStatus = status;
      var httpResponseCode = (xhr.status);
      var httpResponseText = (xhr.responseText);
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
      console.log('httpResponseText: ' + httpResponseText);
      $('#ajaxSuccess1').html('Call in Progress').show();
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var httpResponseCode = (xhr.getAllResponseHeaders);
      var httpResponseText = (xhr.responseText);
      var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
      console.log('httpResponseText: ' + httpResponseText);
      //make alert visible 
      $('#ajaxError1').html(ajaxError).show();
    })
})

＆＃13;

不确定如何添加添加已禁用的行=＆＃34;已停用＆＃34; “开始通话”按钮的元素？

Answer 1

如果通话成功，您可以在then函数中添加此行

.then(function(data, status, xhr) {
      $("#callContact1").prop( "disabled", true );
      var httpStatus = status;
      var httpResponseCode = (xhr.status);
      var httpResponseText = (xhr.responseText);
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
      console.log('httpResponseText: ' + httpResponseText);
      $('#ajaxSuccess1').html('Call in Progress').show();
    })

如果要在单击按钮后立即添加，请将其添加为单击功能的第一行

$("#callContact1").prop( "disabled", true );

Answer 2

如果ajax响应成功，请执行此代码。

$( "#callContact1" ).prop( "disabled", true );

添加＆＃34;禁用＆＃34;通过AJAX属性到Bootstrap按钮

2 个答案: