//需求:在一个DIV(可能有多个类似的DIV)里面实现ajax翻页。
//实现思路:点击翻页,获取数据后,删除该div下的所有元素,然后将需要显示的商品单元逐一填入。详细代码如下。
//问题:点击翻页,获取数据后,可以删除div下的所有元素,同时也可以将商品单元逐一填入,但是会同时触发商品单元内的onclick事件。百思不得其解。望高手给予解惑。/********** 详细代码部分 ***********/
//html片段
<div>
<div>
此处是翻页按钮区域,主要是控制翻页显示的代码,不详述。
仅使用一个关键方法:onClick="javaScript:topage("+(p+1)+","+IPage+",'"+key+"')"
</div>
<div id="<%=key%>" class="contents">
<!-- 一个完整的商品展示单元 -->
<DIV style="left: <%=left %>px; top: 9px;" class="commodity_column">
<img src="image/test.gif" class="commodity_column_pic" onClick="openCommodity('<%=bean.getBusinessid()%>');"/>
<span class="commodity_name" onClick="javaScript:openCommodity('<%=bean.getBusinessid()%>');">
<%=bean.getC_brand()+bean.getC_categories()+" "+bean.getC_model()%>
</span>
<span class="commodity_property">
<%=bean.getCommodityp1()%>
</span>
<span class="commodity_provider">
<%=bean.getCommprovider()%>
</span>
<span class="commodity_property">
报名结束日期:<%=bean.getApplyendtime()%>
</span>
</DIV>
<!-- 一个完整的商品展示单元 end-->
</div>
</div>
//相关的js代码。 /*为一个元素对象赋予事件响应,以及处理该事件的逻辑。
*参数:
* obj:目标元素。
* evt:事件[如:click,dblClick等]
* fn:处理该事件的function
*/
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
/**
* 向指定容器添加一个完整的商品展示单元。
* parentID:容器id
* no:单元位置编号
* date:单元数据内容,一个数组对象。
*/
function addPart(parentID,no,date){
var parent = Get(parentID);
if(parent){
var c_div = document.createElement("div");
c_div.setAttribute("id",date[0]);
c_div.className="commodity_column";
c_div.style.top="9px";
c_div.style.left=(no*205)+"px";
var cImg = document.createElement("img");
c_div.setAttribute("id",date[0]+"_img");
cImg.src="commoditys/"+date[0]+"/"+date[1];
cImg.className="commodity_column_pic";
var cName = document.createElement("span");
c_div.setAttribute("id",date[0]+"_name");
cName.className="commodity_name";
cName.innerHTML=date[2];
var cPropert = document.createElement("span");
cPropert.className="commodity_property";
cPropert.innerHTML=date[3];
var cProvider = document.createElement("span");
cProvider.className="commodity_provider";
cProvider.innerHTML=date[4];
var cEndtime = document.createElement("span");
cEndtime.className="commodity_property";
cEndtime.innerHTML=date[5];
var fg1 = document.createElement("br");
var fg2 = document.createElement("br");
var fg3 = document.createElement("br");
c_div.appendChild(cImg);
c_div.appendChild(cName);
c_div.appendChild(fg1);
c_div.appendChild(cPropert);
c_div.appendChild(fg2);
c_div.appendChild(cProvider);
c_div.appendChild(fg3);
c_div.appendChild(cEndtime);
parent.appendChild(c_div);
addEventSimple(cImg,"click",openCommodity(date[0]));
addEventSimple(cName,"click",openCommodity(date[0]));
}
}
/**
* 翻页总体方法。
* 描述:从后台获取内容数据(一个字符串),经过前台的切割变成多个商品信息。
* pageNO 需要访问的页面
* allPage 总共页面
* key 属于哪一类商品
*/
function topage(pageNO,allPage,key){
if(pageNO>=allPage){
return;
}else{
//访问后台得到需要的数据。
var url = "ajaxService.do?method=getActivitiesByPage&pageNO="+pageNO+"&key="+key;
var responset;
ajaxCheck(url,'', function(responseText){
//alert(responseText);
responset = responseText;
if(responseText.search("error")>=0){
}else{
//删除key容器下所有商品
var parentNode = Get(key);
clearAllNode(parentNode);
var area = responseText.split("#");
if(area.length>0){
var nowPage = area[area.length-1]
for(var i=0;i<area.length-1;i++){
var activeInfo = area[i].split("*");
addPart(key,i,activeInfo);
}
}
}
});
}
//实现思路:点击翻页,获取数据后,删除该div下的所有元素,然后将需要显示的商品单元逐一填入。详细代码如下。
//问题:点击翻页,获取数据后,可以删除div下的所有元素,同时也可以将商品单元逐一填入,但是会同时触发商品单元内的onclick事件。百思不得其解。望高手给予解惑。/********** 详细代码部分 ***********/
//html片段
<div>
<div>
此处是翻页按钮区域,主要是控制翻页显示的代码,不详述。
仅使用一个关键方法:onClick="javaScript:topage("+(p+1)+","+IPage+",'"+key+"')"
</div>
<div id="<%=key%>" class="contents">
<!-- 一个完整的商品展示单元 -->
<DIV style="left: <%=left %>px; top: 9px;" class="commodity_column">
<img src="image/test.gif" class="commodity_column_pic" onClick="openCommodity('<%=bean.getBusinessid()%>');"/>
<span class="commodity_name" onClick="javaScript:openCommodity('<%=bean.getBusinessid()%>');">
<%=bean.getC_brand()+bean.getC_categories()+" "+bean.getC_model()%>
</span>
<span class="commodity_property">
<%=bean.getCommodityp1()%>
</span>
<span class="commodity_provider">
<%=bean.getCommprovider()%>
</span>
<span class="commodity_property">
报名结束日期:<%=bean.getApplyendtime()%>
</span>
</DIV>
<!-- 一个完整的商品展示单元 end-->
</div>
</div>
//相关的js代码。 /*为一个元素对象赋予事件响应,以及处理该事件的逻辑。
*参数:
* obj:目标元素。
* evt:事件[如:click,dblClick等]
* fn:处理该事件的function
*/
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
/**
* 向指定容器添加一个完整的商品展示单元。
* parentID:容器id
* no:单元位置编号
* date:单元数据内容,一个数组对象。
*/
function addPart(parentID,no,date){
var parent = Get(parentID);
if(parent){
var c_div = document.createElement("div");
c_div.setAttribute("id",date[0]);
c_div.className="commodity_column";
c_div.style.top="9px";
c_div.style.left=(no*205)+"px";
var cImg = document.createElement("img");
c_div.setAttribute("id",date[0]+"_img");
cImg.src="commoditys/"+date[0]+"/"+date[1];
cImg.className="commodity_column_pic";
var cName = document.createElement("span");
c_div.setAttribute("id",date[0]+"_name");
cName.className="commodity_name";
cName.innerHTML=date[2];
var cPropert = document.createElement("span");
cPropert.className="commodity_property";
cPropert.innerHTML=date[3];
var cProvider = document.createElement("span");
cProvider.className="commodity_provider";
cProvider.innerHTML=date[4];
var cEndtime = document.createElement("span");
cEndtime.className="commodity_property";
cEndtime.innerHTML=date[5];
var fg1 = document.createElement("br");
var fg2 = document.createElement("br");
var fg3 = document.createElement("br");
c_div.appendChild(cImg);
c_div.appendChild(cName);
c_div.appendChild(fg1);
c_div.appendChild(cPropert);
c_div.appendChild(fg2);
c_div.appendChild(cProvider);
c_div.appendChild(fg3);
c_div.appendChild(cEndtime);
parent.appendChild(c_div);
addEventSimple(cImg,"click",openCommodity(date[0]));
addEventSimple(cName,"click",openCommodity(date[0]));
}
}
/**
* 翻页总体方法。
* 描述:从后台获取内容数据(一个字符串),经过前台的切割变成多个商品信息。
* pageNO 需要访问的页面
* allPage 总共页面
* key 属于哪一类商品
*/
function topage(pageNO,allPage,key){
if(pageNO>=allPage){
return;
}else{
//访问后台得到需要的数据。
var url = "ajaxService.do?method=getActivitiesByPage&pageNO="+pageNO+"&key="+key;
var responset;
ajaxCheck(url,'', function(responseText){
//alert(responseText);
responset = responseText;
if(responseText.search("error")>=0){
}else{
//删除key容器下所有商品
var parentNode = Get(key);
clearAllNode(parentNode);
var area = responseText.split("#");
if(area.length>0){
var nowPage = area[area.length-1]
for(var i=0;i<area.length-1;i++){
var activeInfo = area[i].split("*");
addPart(key,i,activeInfo);
}
}
}
});
}
解决方案 »
- JavaScript中的ContextMenu的问题
- 如何给<input type="file" id="uploadFile" />赋值?
- javascript制作日历 农历代码错误 如何修改
- 请教一个循环在页面建立div的问题
- 选择列表框后值进入文本框 ,有点小错误求助
- 有个javascript调用后台函数的问题,使用AJAX的
- js求救:当表单的数据都输完之后,点击空白处,会自动触发点击“保存”按钮
- 在一个frame里怎样向另一个Frame传递参数,并刷新界面呢?
- 高手救命,小弟有个鼠标跟随图片问题,请大虾帮忙,在线等,急急急急急!!!
- 各位请看,问题来了!!!关于IE5 和 5.5 以上版本的差异
- 控件安装后怎么自动刷新页面
- JavaScript事件监听完整实例(含注释)
function remove(element) {
removeAllEvents(element);
element.parentNode.removeChild(element);
},
function removeAllEvents(node) {
removeEvents(node);
if(node.firstChild) {
var _node = node.firstChild;
while(_node) {
if(_node.nodeType == 1) {
removeAllEvents(_node);
}
_node = _node.nextSibling;
}
}
},
function removeEvents(node) {
for(var each in node) {
if(typeof(node[each]) === 'function') {
node[each] = null;
}
}
},