멋

# 플라워팀 구현 Tip

include 페이지를 ajax로 처리하기 위해서 .load()를 사용했으나, css가 적용이 안되는 오류가 발생했다. 
혼자서 바둥바둥 해결해 보려했지만 실패.... 결국은 역시 데꾸벅님께서 해결!!

 .load() 사용불가 : HTML5에서는 innerHtml 기능을 제공하지 않고 있다. 대안으로 plugin.js에 정의된 innerShiv를 이용해보자.
innerShiv에서는 innerHtml을 제공하는 브라우져는 innerHTML로 그 외는 appendChild로 처리하고 있다. 
(참고로 resultDataSet 는 HTML형태 이다.)

        /**
         *  JQuery를 이용한 페이지 로딩
         */
        function searchCategoryProducts(val) {
            //불러올 URL 조립
            var urlStr = $("#selViewCategory");
            urlStr = "${pageContext.request.contextPath}/main/include/listByCategory.xhtml?viewCategoryId="+val;
            // 삽입할 페이지 호출
            // $("#inc_area").load(urlStr, {}, function(){});  --> 사용불가  
            $.get(urlStr,{},function(resultDataSet,statusTxt,xhr){
             if(statusTxt=="success"){
              $("#inc_area").html( $(innerShiv(resultDataSet,false)) );
             }
            });
        }



# plugin.js에 정의된 innerShiv

/**
 * HTML5 innerHTML Problem
 * @see http://jdbartlett.github.com/innershiv/
 */
window.innerShiv = (function() {
 var d, r;

 return function(h, u) {
  if (!d) {
   d = document.createElement('div');
   r = document.createDocumentFragment();
   /*@cc_on d.style.display = 'none';@*/
  }

  var e = d.cloneNode(true);
  /*@cc_on document.body.appendChild(e);@*/
  e.innerHTML = h.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
  /*@cc_on document.body.removeChild(e);@*/

  if (u === false) return e.childNodes;

  var f = r.cloneNode(true), i = e.childNodes.length;
  while (i--) f.appendChild(e.firstChild);

  return f;
 }
}());