JavaScript, JQuery 및 JQWidgets의 이상한 실행

Question

OK, ... JQuery v2.2.3, JQWidgets v4.1.2를 사용하여 프런트 엔드에 대한 ASP.NET MVC 5 백엔드에 대해 ASP.NET C#을 사용하고 있습니다.

내 페이지는 거대하게 크기 때문에 SPA와 유사합니다. 내가 어려움을 겪고있는 부분은 스크립트가 동기식 Ajax 호출을 사용하여 모든 JQXGrid를 다시 채워 넣어야한다고 가정한다. 나는 Ajax가 동기 적이기위한 것임을 알고 있지만, Ajax 호출은 반복 호출을 무시한다.

1. 최종 사용자가 계정 드롭 다운에서 새 항목을 선택하면 스크립트가 그리드를 닫고 선택을 지우고 새 계정 대화 상자를 엽니 다.
2. 계정을 만든 후에는 새 계정 만들기 대화 상자가 닫힙니다.
3. (이상한 곳) 스크립트는 페이지의 모든 JQXGrid에 추가 정보를 반영하도록 다시 채워야합니다.
4. 마지막으로 생성 된 계정은 계정을 만든 드롭 다운에서 자동으로 선택됩니다. ,
   1. 최종 사용자가 계정 드롭 다운 메뉴에서 새로운 선택이 스크립트는 그리드를 닫 선택을 지우고 열립니다 여기

스크립트가 실제로 현재 상태로하고있는 것입니다 새 계정 대화.
5. 계정을 만든 후에는 새 계정 만들기 대화 상자가 닫힙니다.
6. 그런 다음 스크립트는 추가를 반영하기 위해 페이지의 모든 JQXGrid를 다시 채 웁니다.
7. 스크립트가 각 드롭 다운 아래에 중복 드롭 다운을 만들고 있습니다.
8. 생성 된 계정은 계정을 만든 드롭 다운에서 자동으로 선택됩니다. 그러나 격자를 선택하면 해당 계정 만 표시되고 중복 격자가 선택되면 대화 상자가 닫히면 모든 계정이 및으로 표시되고 클릭 한 (중복) 클릭하면 화면에 그대로 유지됩니다.

   function PopulateAccounts(rePopulate) { 
       PopulateAccountArray("jqxSubAccountDropdownGrid", F, null, null, rePopulate); 
   } 
   

   : 여기

   <div class="col-sm-7"> 
       <div id="jqxSubAccountDropdownButton"> 
        <div id="jqxSubAccountDropdownWidget" style="font-size: 13px; font-family: Verdana; float: left;"> 
         <div id="jqxSubAccountDropdownGrid"></div> 
        </div> 
       </div> 
   </div> 
   

   이 시퀀스를 시작 자동으로 채운 예상되는 스크립트 섹션 : 여기

모든 JQXGrids가 모델로하고 있습니다 내 HTML/면도기 스크립트 섹션 다음은 새 계정을 저장하고 레코드 ID GUID를 다시 기록하는 스크립트 섹션입니다.

여기에 바인딩 이벤트 그리드를 생성하고 할당 할 예정이다 스크립트 섹션 : 여기

function AccountsMulticolumn(GridName, data, rePopulate) { 
    var _Object = $("#" + GridName); 
    var _ObjectParent = _Object.parent(); 
    var _ObjectParentParent = _Object.parent().parent(); 

//  if (rePopulate) { 
//   _Object.remove(); 
//   _ObjectParent.append("<div id='" + GridName + "'></div>") 
//  } 

    var source = { localdata: data, datatype: "array" }; 

    $(_ObjectParentParent).jqxDropDownButton({ width: 150, height: 25 }); 
    $(_Object).jqxGrid({ 
     width: 550, 
     height: 200, 
     source: source, 
     theme: 'energyblue', 
     columns: [ 
      { text: '', datafield: 'AccountIndex', width: 0 }, 
      { text: 'Account Name', datafield: 'AccountName', width: 300 }, 
      { text: 'Account Type', datafield: 'AccountType', width: 200 } 
     ] 
    }); 

    $(_Object).jqxGrid('selectionmode', 'singlerow'); 

    $(_Object).bind('rowselect', function (event) { 
     var args = event.args; 
     var row = $(_Object).jqxGrid('getrowdata', args.rowindex); 

     if (row["AccountName"].toString().toLowerCase() !== "new") { 
      var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row["AccountName"] + '</div>'; 
      _ObjectParentParent.jqxDropDownButton('close'); 
     } 
     $(_ObjectParentParent).jqxDropDownButton('setContent', dropDownContent); 
     if (row["AccountName"].toString().toLowerCase() === "new") { 
      _ObjectParentParent.jqxDropDownButton('close'); 
      $("#divNewAccountDetails").dialog("open"); 
      $(_Object).jqxGrid('clearselection'); 
      g_JQXGridName = GridName; 
     } 
    }); 
} 

을 API에서 데이터를 가져 와서 JQXGrid에 대한 사용 가능한 형식으로 구문 분석 스크립트 부분입니다 기능 :

function PopulateAccountArray(GridName, ShowNew, rePopulate) { 
    callService("GET", g_WebServiceAccountsGetAllSpecialURL, null, function (jsonResult) { 
     var data = new Array(); 

     var AccountIndex_Default = [""]; 
     var AccountName_Default = [""]; 
     var AccountNotes_Default = [""]; 

     if (ShowNew) { 
      AccountName_Default = ["New"]; 
     } 

     var _oAccountID = []; 
     var _oAccountName = []; 
     var _oAccountNotes = []; 

     if (jsonResult.length > 0) { 
      for (i = 0; i < jsonResult.length; i++) { 
       _oAccountID[i] = jsonResult[i].RecordID; 
       _oAccountName[i] = jsonResult[i].AccountName; 
       _oAccountNotes[i] = jsonResult[i].AccountType; 
      }; 

      var AccountIndex_FromService = _oAccountID; 
      var AccountName_FromService = _oAccountName; 
      var AccountType_FromService = _oAccountNotes; 

      var AccountIndex = AccountIndex_Default.concat(AccountIndex_FromService); 
      var AccountName = AccountName_Default.concat(AccountName_FromService); 
      var AccountType = AccountNotes_Default.concat(AccountType_FromService); 
     } else { 
      var AccountIndex = AccountIndex_Default; 
      var AccountName = AccountName_Default; 
      var AccountType = AccountNotes_Default; 
     } 

     for (var i = 0; i < AccountIndex.length; i++) { 
      var row = {}; 
      row["AccountIndex"] = AccountIndex[i]; 
      row["AccountName"] = AccountName[i]; 
      row["AccountType"] = AccountType[i]; 
      data[i] = row; 
     } 

     AccountsMulticolumn(GridName, data, rePopulate); 
    }); 
} 

그리고 마지막으로 내 AJAX 호출 :

function callService(Type, Url, Data, successFunction) { 
    $.ajax({ 
     type: Type,      // GET or POST or PUT or DELETE verb 
     dataType: "json", 
     async: false, 
     url: Url,      // Location of the service 
     data: Data,      // Data sent to server 
     success: successFunction, 
     error: serviceErrorHandler  // When Service call fails 
    }); 
} 

Answer 1

밝혀, 나는 내 자신의 가장 큰 적입니다. 함수 호출 배치가 꽤 많이 실현되었습니다. 중요. 그래서 내 함수, mvc 면도기 코드 배치를 완전히 다시 작성한 후 AJAX 호출에서 동기 호출을 사용하고 JQ 위젯 그리드에 대한 격자 데이터를 지정하면 모든 문제점이 해결되었습니다.