Question

我的要求是我需要替换$ with JQuery，我必须动态创建<div/>。

我需要使用Jquery显示数据。

请解释我这个例子的控制流程：

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
This is the <b>AjaxApp</b> portlet in View mode.

<script type="text/javascript" 
src="/html/js/jquery/jquery.js"></script>
<aui:form>


<aui:input name="pid" label="pid" id="pid"></aui:input>
<aui:button name="getData" value="Get Details"  

id="getData"></aui:button>

</aui:form>

<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>

<portlet:resourceURL var="resourceURL"></portlet:resourceURL>
<script type="text/javascript">
$("#<portlet:namespace/>getData").click(function() {
    var nameVal = jQuery("#<portlet:namespace/>pid").val();
 alert('hi'+nameVal);
 jQuery.ajax({
        url :'<%=resourceURL%>',            
        data: {pid:nameVal},
        type: "POST",
    dataType: "json",
     success: function(data) {              
           $("#a").html(data);


document.getElementById("a1").innerHTML="<font color=green>PID 

:</font>"+data["pid"]; 


document.getElementById("a2").innerHTML="<font color=green>Pname: 

</font>"+data["pname"]; 


document.getElementById("a3").innerHTML="<font color=green>Ptype: 

</font> "+data["ptype"]; 
          }
        });
    });


</script>

我是liferay和ajax的新手。需要帮助才能解决此问题？

Answer 1

我看了评论，你想要这个吗？

jQuery('#a1').html("<font color=green>PID :</font>"+data["pid"]); 
jQuery('#a2').html("<font color=green>Pname:</font>"+data["pname"]);
jQuery('#a3').html("<font color=green>Ptype:</font>"+data["ptype"]);

如果你想动态显示它，你必须指定一个容器，如body或另一个div，并删除你的html div。

var div = jQuery('<div id="a1"></div>').html("<font color=green>PID :</font>"+data["pid"]); 
var div2 = jQuery('<div id="a2"></div>').html("<font color=green>Pname:</font>"+data["pname"]);
var div3 = jQuery('<div id="a3"></div>').html("<font color=green>Ptype:</font>"+data["ptype"]);

jQuery('body').append([div, div2, div3]);

如何在Jquery中动态创建div？

1 个答案: