2012-11-27 3 views
0

jQuery Mobile과 함께 Visual Studio 2012를 사용하여 MVC4 모바일 앱을 개발하고 있습니다. 체크 박스와 라디오 버튼의 상태를 기억해야만 쿠키에 값을 저장할 수 있습니다. pageinit 이벤트에서 페이지로 돌아 왔을 때 값을 설정했지만 컨트롤이 시각적으로 업데이트되지 않습니다. 페이지 렌더링을 모바일로 사용하여 Firebug를 사용하면 값이 올바르게 변경된 것을 알 수 있습니다. 나는이 같은 요소 ('새로 고침') checkboxradio를 호출 시도했다 :checkboxradio undefined

$('#btnCompany').prop('checked', true)checkboxradio('refresh'); 

하지만 난 항상 checkboxradio가 정의되지 않은 및 지원되지 않습니다 말하는 오류가 발생합니다. 컨트롤이 라디오 버튼이라는 것을 알고 있습니다. 이 문제를 해결하기 위해 jQuery Mobile에서 코드를 추출하여 라디오 버튼과 체크 박스를 새로 고쳤습니다. 다시 말해서 입력이 올바르게 체크되어있을뿐만 아니라 라벨 클래스가 적절히 변경되었음을 분명히 볼 수 있습니다. 그러나 시각적으로 아무것도 바뀌지 않습니다. 그들은 원래 그랬던 것처럼 보입니다. 내가 놓친 게 있니?

$("input[type='radio']").checkboxradio("refresh"); 

것은 그때 숨어 컨테이너 div 보여주는하지만 실패로 상쾌한 시도했다 : 나는 pageinit 이벤트에서이 전화를해도 왜 나는 checkboxradio가 지원되지 않는 없다는 오류를 얻고있다. 내가 시도한 것은 컨트롤을 시각적으로 새로 고칩니다. 모든 도움이 크게 감사하겠습니다 !!!

다음은 checkboxradio를 우회하는 페이지를 새로 고치기 위해 호출하는 함수입니다. 여기

function SetSearchFormState() { 
if ($.cookie('cmdSearchForm') != null) { 

    //$('#searchParamsDiv').hide(); 

    var formData = JSON.parse($.cookie('cmdSearchForm')); 

    $('#SearchText').val(formData.SearchText);   

    // Set all search buttons to not selected.  
    $('.searchBtn').each(function() { 
     $(this).prop('checked', false); 
     RefreshCheckboxRadio(this, false); 
    }); 

    // Set the appropriate search button selected. 
    $('#hidSearch').val(formData.hidSearch); 
    switch (formData.hidSearch) { 
     case 'Opportunity': 
      $('#btnOpportunity').prop('checked', true); 
      RefreshCheckboxRadio($('#btnOpportunity'), true); 
      break; 
     case 'Company': 
      $('#btnCompany').prop('checked', true); 
      RefreshCheckboxRadio($('#btnCompany'), true); 
      break;    
     case 'Contact': 
      $('#btnContact').prop('checked', true); 
      RefreshCheckboxRadio($('#btnContact'), true); 
      break; 
    } 

    // Set all status buttons to not selected. 
    $('.statusBtn').each(function() { 
     $(this).prop('checked', false); 
     RefreshCheckboxRadio(this, false); 
    });   

    // Set the appropriate status button selected. 
    $('#hidStatus').val(formData.hidStatus); 
    switch (formData.hidStatus) { 
     case 'Lead': 
      $('#btnLead').prop('checked', true); 
      RefreshCheckboxRadio($('#btnLead'), true); 
      break; 
     case 'Prospect': 
      $('#btnProspect').prop('checked', true); 
      RefreshCheckboxRadio($('#btnProspect'), true); 
      break; 
     case 'Customer': 
      $('#btnCustomer').prop('checked', true); 
      RefreshCheckboxRadio($('#btnCustomer'), true); 
      break; 
    }   

    // Set the appropriate include button selected. 
    $('#hidAllUsers').val(formData.hidAllUsers); 
    $('#btnAllUsers').prop('checked', false); 
    RefreshCheckboxRadio($('#btnAllUsers'), false); 
    if (formData.hidAllUsers == 'True') { 
     $('#btnAllUsers').prop('checked', true); 
     RefreshCheckboxRadio($('#btnAllUsers'), true); 
    } 

    $('#hidDead').val(formData.hidDead); 
    $('#btnDead').prop('checked', false); 
    RefreshCheckboxRadio($('#btnDead'), false); 
    if (formData.hidDead == 'True') { 
     $('#btnDead').prop('checked', true); 
     RefreshCheckboxRadio($('#btnDead'), true); 
    } 

    //$('#searchParamsDiv').show(); 
    $("input[type='radio']").checkboxradio("refresh"); 
    $("input[type='checkbox']").checkboxradio("refresh"); 
} 
}; 

내가 jQuery를 모바일의 checkboxradio 새로 고침 방법에서 추출하는 기능입니다 :

function RefreshCheckboxRadio(control, value) { 
if ($(control).is(':radio')) { 
    var parent = $(control).parent('div');   
    var controlId = $(control).attr('id'); 
    var label = $(parent).find("label[for='" + controlId + "']"); 
    var icon = $(label).find(".ui-icon"); 
    //$(parent).hide(); 
    if (value == false) {    
     $(control).removeAttr('checked'); 
     $(label).removeClass('ui-radio-on ui-button-active').addClass('ui-radio-off'); 
     $(icon).removeClass('ui-icon-radio-on').addClass('ui-icon-radio-off'); 
    } else if (value == true) {    
     $(control).attr('checked', 'checked'); 
     $(label).addClass('ui-radio-on ui-button-active').removeClass('ui-radio-off'); 
     $(icon).addClass('ui-icon-radio-on').removeClass('ui-icon-radio-off'); 
    } 
    //$(parent).show(); 
} else if ($(control).is(':checkbox')) { 
    var parent = $(control).parent('div');  
    var controlId = $(control).attr('id'); 
    var label = $(parent).find("label[for='" + controlId + "']"); 
    var icon = $(label).find(".ui-icon"); 
    //$(parent).hide(); 
    if (value == false) { 
     $(control).removeAttr('checked'); 
     $(label).removeClass('ui-checkbox-on ui-button-active').addClass('ui-checkbox-off'); 
     $(icon).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off'); 
    } else if (value == true) { 
     $(control).attr('checked', 'checked'); 
     $(label).addClass('ui-checkbox-on ui-button-active').removeClass('ui-checkbox-off'); 
     $(icon).addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off'); 
    } 
    // $(parent).show(); 
} 
}; 

이 코드는 I를 실행 한 후 여기에 내가 시도하고 문제를 해결하기 위해 호출하는 기능입니다 checkboxradio ('refresh')가 호출 된 경우 값이 정확하고 정확하게 표시되는지 확인할 수 있습니다. 따라서 checkboxradio를 작동시키지 못하더라도 수동으로 작업을 수행해야하며 실제로 Firebug에서 변경 사항을 볼 때 컨트롤이 여전히 모양을 변경하지 않습니다.

+0

나는 오타라고 가정하고 있지만 누락 된 "." '$ ('# btnCompany'). prop ('checked', true) checkboxradio ('refresh');'. 라디오 그룹에 대한 마크 업을 게시 할 수 있습니까? 마크 업/코드를 더 이상 보지 않고'pagein' 이벤트가 페이지의 초기화에서만 시작되므로'pageshow' 이벤트에서 refresh 메소드를 호출 해보십시오. 'refresh' 메소드를 호출하기 전에'checkboxradio()'를 먼저 호출 해보십시오. – Jack

+0

예, 당신 말이 맞아요, 오타입니다. 나는 당신이 아무 소용이없는 제안한 모든 것을 시도했습니다. checkboxradio()를 먼저 호출했지만 동일한 오류가 발생했습니다. 지원되지 않습니다. 나는 페이지 쇼에서 똑같이 부르려고했다. 그게 너무 초조해! 내가 본 모든 곳에서 나는 너무 단순 해 보이지만 며칠 동안 상상할 수있는 모든 것을 시도해 왔으며 일할 수 없다. – Darrell

+0

나는 현재 페이지를 새로 고치고 checkboxradio를 정의하기 위해 호출하고있는 두 가지 기능을 포함하도록 내 게시물을 업데이트했습니다. 함수는 Firebug에서 볼 때 완벽하게 작동하지만 컨트롤은 변경되지 않습니다. – Darrell

답변

1

많은 실험을 거친 끝에 마침내 jQuery Mobile에서 Ajax를 비활성화하고이 코드를 삭제 한 다음 Ajax를 모두 수동으로 처리했습니다. MVC4로 jQuery Mobile 앱을 개발 한 것에 대해 배운 책을 써서 많은 사람들을 도왔을 것입니다. 아쉽게도 시간이 없으며, 유감스럽게도 유료입니다. 언젠가는 누군가가 올바른 방법으로 일하는 법을 문서화하기를 바랍니다. 사람들이 여기저기서 조금씩 시간을 들여 보내는 대신 시간을 할애 할 수있는 단일 소스가 있습니다.