2010-03-02 2 views
1

jQuery-UI의 selectable 플러그인을 사용하여 테이블의 목록을 채우는 양식이 있습니다. 내 양식을 사용하면 사용자가 마음이 바뀌면 하나 또는 여러 개의 목록 항목을 제거 할 수 있습니다. 이 기능은 IE와 Firefox에서 작동합니다. 사용자가 목록을 다운로드하도록 선택하면 목록이 자동으로 지워지고 양식이 재설정됩니다. 이것은 IE와 Firefox에서도 작동합니다.

마지막으로 사용자가 새로 시작할 때 모든 목록 항목을 제거하고 양식을 다시 설정하는 단추를 추가했습니다. 이 기능은 Firefox에서만 작동합니다. IE에서는 목록 항목이있는 필드에서 제거되지만 어떤 이유로 인해 $('#newgroups').removeData()은 무시됩니다. 나는 .remove 나 .tofile 다음에 이전 이름이지만 더 이상 존재하지 않는 그룹과 같은 이름을 가진 그룹을 추가 할 수 있기 때문에 이것을 안다. .clear 다음에 양식이 동일하게 보이지만 이전에 사용한 그룹 이름으로 목록 항목을 만드는 것은 실패합니다. 여기

$(function(){ 
    $('#selectable').selectable({ 
     //rules for how table elements can be selected 
    }); 

    $("input[name='makegroup']").live("click", function(event){ 
     //adding list items 
    }); 

    $("input[name='removegroup']").live("click", function(event){ 
     event.preventDefault(); 
     groups.msg(); 
     groups.remove(); //works in FF and IE 
    }); 

    $("input[name='cleargroups']").live("click", function(event){ 
     event.preventDefault(); 
     groups.msg(); 
     return groups.clear(); //partially fails in IE 
    }); 

    $("form#grouper").submit(function(){ 
     return groups.tofile(); //works in FF and IE 
    }); 

    groups={ 
     grpmsg: $('#grpmsg'), 
     grpselections: $('#newgroups'), 
     grpname: $("input[name='newgroup']"), 
     filetext: $("input[name='filetext']"), 

     add: function(){ 
      //add option to this.grpselections and set this.grpselections.data 
      //compares input data to $grpselections.data() for problems and throws error if necessary    
     }, 

     remove: function(){ 
      var vals= this.grpselections.val();//selected list items 
      for(var i in vals){ 
       this.grpselections.data(vals[i]).removeClass('ui-selected chosen'); 
       this.grpselections.removeData(vals[i]); 
      } 
      this.grpselections.find(':selected').remove(); 
      this.grpname.focus(); 
     }, 

     clear: function(){ //identical to tofile method of resetting form 
      this.grpselections.empty(); 
      this.grpselections.removeData();//DOES NOT WORK IN IE 
      $('#selectable td').removeClass('ui-selected chosen'); 
      this.grpname.focus(); 
      return true; 
     }, 

     tofile: function(){ 
      this.grpselections.select(); 
      var gtxt=''; 
      this.grpselections.find('option').each(function(i){ 
       gtxt += $(this).text() + "\n"; 
      }); 
      if (gtxt.length === 0) { 
       this.msg('nonetofile'); 
       return false; 
      } 
      this.filetext.val(gtxt); 

      //BELOW IS IDENTICAL TO clear function EXCEPT IT WORKS IN IE TOO 
      this.grpselections.empty(); 
      this.grpselections.removeData(); 
      $('#selectable td').removeClass('ui-selected chosen'); 
      this.grpname.focus(); 
      return true; 
      //END INTERESTING BIT 
     }, 

     msg: function(msgtype){ 
       //show error message specific to problem 
    }, 

     addline: function(groupname){ 
      //auxilliary to add function     
     } 
    }; 

}); 

답변

1

처음으로 고백 나는 선택할 수있는 물건을 전혀 사용하지 않았다. 그래서 어둠 속에서 총을 쐈다.

this.grpselections.empty().removeData(); 
+0

체인 연결은 좋은 생각이었습니다. 순서는 역순이 아닌 this.grpselections.removeData(). empty();가되어야하지만 이제는 IE가 행복합니다. 아마도 문제가되었던 것이 체인없는 버전의 작업 순서 였을 것입니다. – dnagirl

+0

머리가 잘 붙어있는 것을 보니 좋다. –

+0

몇 가지 생각을하고 나니, 순서가 잘못되었다. 이벤트는 DOM 트리/체인을 버블 링하고, 자식이 이것을 막지 않는 한 부모는 자식 후에 실행됩니다. –

0

충분하지 않은 정보 : 여기

코드입니다 (I의 형식은 목록 항목을 제거하거나 재설정과 관련되지 않은 기능의 몸을 떠 났어요). 디버거를 넣으십시오. 코드를 작성하고 ie8 개발자 도구를 열어 스크립트를 디버그하고 진행 상황을 확인하십시오.

+0

ie8 개발자 도구를 열었을 때 문제가 사라졌습니다. 개발자 도구가 닫히고 문제가 다시 발생했습니다. 내가 그렇게 숙녀라면 *) 나는 맹렬히 맹세하겠다! – dnagirl

+0

console.log 문을 사용하면 코드가 깨질 수 있습니다. 전체 마크 업 및 스크립트를 붙여 넣을 수 있습니까? – redsquare

관련 문제