How to handle jquery and ajax call in single page application using coded ui

Question

Hi,
I am facing a very tricky situation while using coded ui. My application interact with ajax and I was facing the issue to handle the ajax in the login page and other pages. I went through the post : http://stackoverflow.com/questions/17849074/jquery-ajax-success-not-getting-triggered-with-coded-ui-test-project 
and got solution for my problem. Now when ever a ajax is getting called in the page its getting handle with app config file. However the issue I am facing right now is. 
When i click on a button a window will appear which is actually a "div tag". Please see the image below. In  the that window when I have to select a item from drop down, the ajax will get called, however it will get called only for the window,
it wont be called for the entire page.. i.e. it will update only the window. I am not able to handle this ajax call, script gets stuck in refresh state. I will request you guys to provide a work around for it.
I would like to add more details - Visual studio version - 2013 update 3, IE11. 
Application details: Its a single page application which uses bootstrap framework. All the ajax call are dynamic.
Thanks in advance.

Answer 1

Thanks for the reply.
The window is not exactly a pop up window. Its a div tag in the same page. As this is my first time to work on  a single page application I am not sure how it works. For the entire page I am able to handle the ajax call however the action performed
in the div tag is not getting handled.
Code for the window, I am not sure to what extend will it be helpful.
<div class="modal-content"><div class="modal-header"><div class="bootstrap-dialog-header"><div class="bootstrap-dialog-close-button" style="display: none;"><button class="close">×</button></div><div
class="bootstrap-dialog-title">Move Item to different task [FocusAudit]</div></div></div><div class="modal-body"><div class="bootstrap-dialog-body"><div class="bootstrap-dialog-message"><div><div
id="dashboard">
  <table class="TFtable">
    <tbody><tr>
      <td colspan="2">
            You are about to move the  24 selected item item to a different task. Select the task to which to move this item, (Optionally) enter notes about the task change, and click 'Change' to continue.
          </td>
    </tr>
    <tr>
      <td>Select New WorkFlow:</td>
      <td><select class="form-control" id="MA_workflow" onchange="ChangeWorkFlow()"><option value="647446014">Batches<option value="647446007">Claim<option value="647446065"
selected="">Workflow1</option></select></td>
    </tr>
    <tr>
      <td>Select New Task:</td>
      <td><select class="form-control" id="MA_actions"><option value="647446025">BatchRebuild</option><option value="647446054">Complete</option><option value="647446039">DataIntegrityCheck</option><option
value="647446038">FocusAudit</option><option value="647446053">FocusAuditMiner</option><option value="647446037">FocusAuditSelect</option><option value="647446055">LocationRouter</option><option
value="647446029">MineForSBT</option><option value="647446022">OCRtoWebDE</option><option value="647446024">OnePass</option><option value="647446049">OnePassRouter</option><option
value="647446050">OnePassUS</option><option value="647446060">QAuditImporter</option><option value="647446045">QIAutoAuditGrader</option><option value="647446058">QIAutoAuditInjector</option><option
value="647446048">QIMiner</option><option value="647446040">QISampler</option><option value="647446056">QIVerify</option><option value="647446059">QIVerifyGrader</option><option
value="647446047">QIVerifyUS</option><option value="647446021">RecoRules</option><option value="647446082">Review</option><option value="647446042">Router</option><option
value="647446023">Validate</option><option value="647446081">Verify</option><option value="647446080">WebDEFileCreator</option></select></td>
    </tr>
    <tr>
      <td>Select New Status:</td>
      <td>
        <select class="form-control" id="MA_status">
          <option value="ready">Ready</option>
          <option value="reject">Rejected</option>
          <option value="hold">Held</option>
          <option value="ready">Keep Status From Original Task</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2">Notes:</td>
    </tr>
    <tr>
      <td colspan="2">
        <textarea name="MA_statusnote" class="form-control" id="MA_statusnote" maxlength="250" rows="5" cols="40"></textarea>
      </td>
    </tr>
    <tr>
      <td style="text-align: right;" colspan="2">
        <input class="btn btn-default list-inline" id="btnSubmit" onclick="prepareData_MoveToAction();" type="button" value="Change">
        <input class="btn btn-cancel" id="btnCancel" style="padding-left: 5px;" onclick=" dialogInstance2.close();" type="button" value="Cancel">
      </td>
    </tr>
  </tbody></table>
  <div id="overlayDialog" style="display: none;">
    <div style="width: 100%; text-align: center;">
      <h1>Processing...</h1>
      <img src="Images/ajax-loader.gif">
    </div>
  </div>
  <div id="dData_MoveToAction" style="display: none;" data-itemcount="24" data-oldactionidno="647446079" data-oldstatus="ready" data-oldactionname="FocusAudit" data-fnparent="PS"></div>
</div>
<script id="scrpd" language="text/javascript">
  <!--
  var cworkflow =$('#MA_workflow option:selected').text();
   function initMoveToAction()
     function ChangeWorkFlow(){
       $('#overlayDialog').show(300);
    var _newworkflowname=$('#MA_workflow option:selected').text(); 
    if(cworkflow!=_newworkflowname)
     getItemType();
     cworkflow = _newworkflowname;
   function getItemType()
      var _workflowid=$('#MA_workflow option:selected').text();
       var formData = { workflowid: _workflowid}
        var sPage = './Handlers/GenericFn.ashx?action=getitemtype';
       $.ajax({
                url: sPage,
                type: "POST",
                data: formData,
                datatype: JSON,
                success: function (data, textStatus, jqXHR) {
                var newItemActions = jQuery.parseJSON(data);
                  $('#MA_actions').empty();
                  $.each(newItemActions, function(i, option) {
               $('#MA_actions').append($('<option></option>').attr("value", option.Value).text(option.Key));
                     $('#overlayDialog').hide(300);
                error: function (data) {
                  var error = jQuery.parseJSON(data.responseText)
                   SetProdSummary();
                   dialogInstance2.close();
                    ErrorMessage(error.ErrorCaption, error.ErrorDescription, error.IsCloseWindow);
        function prepareData_MoveToAction()
             var ma_oldstatus, ma_oldactionname, ma_actionidno,ma_oldactionid, ma_statusNote,ma_itemNewStatus,ma_itemtotalno, ma_newworkflowname,ma_fnparen;
                ma_itemNewStatus = $('#MA_status option:selected' ).val();
                ma_actionidno=$('#MA_actions option:selected').val();
                ma_newworkflowname=$('#MA_workflow option:selected').text();
                ma_statusNote = $("#MA_statusnote").val();
            var params = $("#dData_MoveToAction");
            if (params.data("oldstatus"))
                ma_oldstatus = params.data("oldstatus");
            if (params.data("oldactionname"))
                ma_oldactionname = params.data("oldactionname");
            if (params.data("oldactionidno"))
                ma_oldactionid = params.data("oldactionidno");
             if (params.data("itemcount"))
                ma_itemtotalno = params.data("itemcount");
             if (params.data("fnparent"))
                ma_fnparen = params.data("fnparent");
            var formData = { currentstatus: ma_oldstatus, oldactionid:ma_oldactionid,newstatus: ma_itemNewStatus, actionid: ma_actionidno, oldactionName:ma_oldactionname, statusnote: ma_statusNote,totalno:ma_itemtotalno,  newworkflowname:
ma_newworkflowname,fnparent:ma_fnparen};            
            var sPage = './Handlers/ItemAction_MoveToAction.ashx?action=movetoaction';
             $('#overlayDialog').show(300);
              $('#btnSubmit').attr('disabled',true);
              $('#btnCancel').attr('disabled',true);
            $.ajax({
                url: sPage,
                type: "POST",
                data: formData,
                datatype: JSON,
                success: function (data, textStatus, jqXHR) {
                    SetProdSummary();
                    $('#overlayDialog').hide(300);
                   dialogInstance2.close();
                error: function (data) {
                  var error = jQuery.parseJSON(data.responseText)
                   SetProdSummary();
                   dialogInstance2.close();
                    ErrorMessage(error.ErrorCaption, error.ErrorDescription, error.IsCloseWindow);
      -->
</script></div></div></div></div><div class="modal-footer" style="display: none;"><div class="bootstrap-dialog-footer"></div></div></div>
I agree the point the UI has to be active or else the script will have issue during the playback. In my scenario I have to work on that window. I have to perform action on it. Now when the window(div thing) comes up the page in the background goes disable
till the action is performed on the window or the window is closed. I have to perform action on it then only I can proceed with the TC automation. Please let me know any option to solve this problem.
Thanks 
Ahetejazahmad Khan.