Я работаю с сервлетами с шаблонами freemarker, я использую jQuery для вызовов AJAX, вот мой код:
function openCompareView(event) {
var itemIds = getItemIdsToCompare();
var imgs = getItemImagesToCompare();
if (itemIds.length > 0) {
var url = "../shop/quickview/compareview.jsp";
var params = "cvids=" + itemIds + "&ims=" + imgs
jQuery.ajax({
url: url,
data:params,
type:'POST',
dataType:'html',
context: document.body,
success: function(result){
console.log(result);
// jQuery('#compareview-container').html(" "+(result));
var div = document.createElement('div');
div.innerHTML = result;
var elements = div.childNodes;
window.document.getElementById('compareview-container').innerHTML=div.innerHTML;
}
})
}
}
Вот шаблон бесплатного маркера:
<html>
<head>
<assign cdnUrl="http://abc.com">
<style>
#expressorder,#exproductid {
margin: -100px;
}
</style>
<link href="/css/qv.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/qv-ie.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/css/qv-ie8.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/qv-ie7.css" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/compare-view-ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/compare-view.css" />
</head>
<body>
<div style="width:100%; float: left;">
<div class="compare-view_header">Comparison View
<!-- <div id="cv_main_img"> -->
<!-- <div id="cv_main_img_handle" style="height: 20px; padding-left:100px; float:right">-->
<!-- <img id="drag-handle" src="/images/4_direction.png"-->
<!-- style="position: relative; left: -10px; top: -5px; cursor: pointer;" width="24" /> -->
<!-- </div>-->
<!-- </div>-->
</div>
<!-- close button -->
<span id="close-it">
<a href="javascript:closeCompareView();">
<img src="/images/quick-view-close-icon.png" id="close-it-img" />
<div id="close-it-text">Close</div>
</a>
</span>
<!-- close button -->
</div>
<div id="compare-top-bar">
<table width="300" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td><a href="javascript:window.print();"><div id="compare-print">Print</div></a></td>
<td><a href="javascript:void(0);"><div id="compare-pdf">Create a PDF</div></a></td>
<td><a href="javascript:loadEmailPage();"><div id="compare-email">Email</div></a></td>
<td><div id="compare-social">
<div style="margin-top: 1px; float: left; margin-right: 5px;">Social</div>
<a href="https://twitter.com/share" target="_blank">
<img src="/products/images/tweetn.png" />
</a>
<a href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)" title="Share on Facebook..." target="_blank">
<img src="/products/images/facebookn.png" />
</a>
</div></td>
</tr>
</table>
</div>
<div id="compare-content" style="float: left">
<div id="cvcontainer" >
<form name = "compareForm" id = "compareForm" action="../shop/quickview/compareMail.jsp">
<input type="hidden" id="emailContent" value="${emailContent}"/>
<input type="hidden" id="cvids" value=""/>
<input type="hidden"name="axn" value="emailForm"/>
<div id="header"></div>
<div id="compare-holder" style="background: -moz-linear-gradient(center top , #24507D 0%, #143867 100%) repeat scroll 0 0 transparent; margin-top: 10px; padding: 10px 3px 10px 4px;">
<if !items>Nothing to compare <else><assign
itemnum=0>
<foreach it in items>
<div id="cv_${it.item.id}" class="compare-slate" style="float: left"><a
href="javascript:removeCompareViewItem(${it.item.id});">
<div id="removeBtnDiv" class="compare-remove">Remove</div>
</a>
<div class="compare-image"><img id="cv_img_${itemnum}"
src="${cdnUrl}/cache/rh/${it.item.productImage}" /></div>
<div class="compare-gray-box">
<div class="compare-label">Suggested Price</div>
<if it.item.itemPrice>$${it.item.itemPrice}<else> </if>
<div class="clear"></div>
</div>
<div class="compare-white-box">
<div class="compare-label"><if it.item.sizeLabel>${it.item.sizeLabel}<else> </if></div>
<div class="clear"></div>
</div>
<div class="compare-gray-box-info">
<div class="compare-label">Description</div>
<a href="/my-servlets/CatalogSearch?id=${it.item.id}&prodimage=${it.item.productImage}&top=Y" class="compare-item-label">${it.item.name}</a>
<br />
<br />
${it.item.description}
</div>
<div class="compare-gray-box">
<div class="compare-label">Companion Availability</div>
Yes
</div>
<div class="compare-color-box">
<div class="compare-label">Colors</div>
<!--Use code from Quick View -->
<div style="float: left; paddig: 8px; margin-top: 10px; width: 100%;">
<!--sw--><assign knt=0> <foreach kolor in it.itemkolors><assign
knt=knt+1> <if ((kolor.discontinued==
"1") || (kolor.discontinued== "3")) && ((found==
"N") || !swatchcolor || (kolor.colorName !=swatchcolor)||discontinued||closeout)>
<div id="cv_${it.item.id}_s1_${knt}" class="swatch-names">${kolor.swatchColor} <!--<div id="s1_${knt}_arrow" class="swatch-arrow"></div>-->
</div>
<div
onmousemove="
document.getElementById('cv_${it.item.id}_s1_${knt}').style.display='inline-table';
document.getElementById('cv_${it.item.id}_s1_${knt}').style.left=mouseX+'px';
document.getElementById('cv_${it.item.id}_s1_${knt}').style.top=mouseY+'px';"
onmouseout="document.getElementById('cv_${it.item.id}_s1_${knt}').style.display='none';">
<a
href="javascript:updateImgSrc('${cdnUrl}','${kolor.productImage}','cv_img_${itemnum}');"
style="background-image: url(${cdnUrl}/cache/swatchgifs/${kolor.colorGif});">
<div id="d1_${knt}" class="kolor_swatch" style="height: 20px; width: 20px; float: left; margin: 0 5px 5px 0; background-image: url(/swatch/gifs/${kolor.colorGif}); border: #ccc solid 1px;">
<img src="/swatch/gifs/${kolor.colorGif}" alt="${kolor.swatchColor}" width="20px"
height="20px" border="2"></div>
</a></div>
</if> </foreach> <assign first="Y"> <foreach kolor in itemkolors><assign
knt=knt+1> <if (kolor.discontinued==
"2" || kolor.discontinued== "3") && ((found==
"N") || !swatchcolor || (kolor.colorName !=swatchcolor)||!discontinued)>
<if first=="Y"><assign first="N"> <br class="clearfloat">
<span style="float: left">Discontinued</span><br>
</if>
<div id="cv_${it.item.id}_s1_${knt}" class="swatch-names">${kolor.swatchColor} <!--<div id="s1_${knt}_arrow" class="swatch-arrow"></div>-->
</div>
<div
onmousemove="
document.getElementById('cv_${it.item.id}_s1_${knt}').style.display='inline-table';
document.getElementById('cv_${it.item.id}_s1_${knt}').style.left=mouseX+'px';
document.getElementById('cv_${it.item.id}_s1_${knt}').style.top=mouseY+'px';"
onmouseout="document.getElementById('cv_${it.item.id}_s1_${knt}').style.display='none';">
<a
href="javascript:updateImgSrc('${cdnUrl}','${kolor.productImage}','cv_img_${itemnum}');"
style="background-image: url(${cdnUrl}/cache/swatchgifs/${kolor.colorGif})">
<div class="kolor_swatch" style="height: 20px; width: 20px; float: left; margin: 0 5px 5px 0; background-image: url(/swatch/gifs/${kolor.colorGif});">
<img src="/swatch/gifs/${kolor.colorGif}" width="20px" height="20px"></div>
</a></div>
</if> </foreach> <assign first="Y"> <foreach kolor in itemkolors><assign
knt=knt+1> <if (kolor.discontinued== "9") && ((found==
"N") || !swatchcolor || (kolor.colorName !=swatchcolor)||!discontinued)>
<if first=="Y"><assign first="N"> <br class="clearfloat">
<span style="float: left">Closeouts</span><br>
</if>
<div id="cv_${it.item.id}_s1_${knt}" class="swatch-names">${kolor.swatchColor} <!--<div id="s1_${knt}_arrow" class="swatch-arrow"></div>-->
</div>
<div
onmousemove="document.getElementById('cv_${it.item.id}_s1_${knt}').style.display='inline-table';
document.getElementById('cv_${it.item.id}_s1_${knt}').style.left=mouseX+'px';
document.getElementById('cv_${it.item.id}_s1_${knt}').style.top=mouseY+'px';"
onmouseout="document.getElementById( 'cv_${it.item.id}_s1_${knt}').style.display='none'";
>
<a
href="javascript:updateImgSrc('${cdnUrl}','${kolor.productImage}','cv_img_${itemnum}');"
style="background-image: url(${cdnUrl}/cache/swatchgifs/${kolor.colorGif})">
<div class="kolor_swatch" style="height: 20px; width: 20px; float: left; margin: 0 5px 5px 0; background-image: url(/swatch/gifs/${kolor.colorGif});">
<img src="/swatch/gifs/${kolor.colorGif}" width="20px" height="20px"></div>
</a></div>
</if> </foreach> <!--end sw--></div>
<div class="clear"></div>
</div>
</div>
<!--compare slate--> <assign itemnum=itemnum+1> </foreach> </if>
<div class="clear"></div>
</div>
<!--compare holder--> <!--End my content-->
<div class="footer-gap"></div>
</form>
</div>
</div>
</body>
</html>
Вызов AJAX не показывает всплывающее окно и выдает следующую ошибку:
SCRIPT601: неизвестная ошибка времени выполнения
в следующей строке:
window.document.getElementById('compareview-container').innerHTML=div.innerHTML;
Я пытался jQuery('#compareview-container').html(results)
Страница обновляется и:
SCRIPT438: объект не поддерживает свойство или метод 'extension'
jquery.min.js, строка 2 символа 11496
Я пытался:
document.getElementById('compareview-container').innerHTML=""+result;
document.getElementById('compareview-container').innerHTML=result;
SCRIPT601: неизвестная ошибка времени выполнения
Есть идеи?