论坛

主页 » Liferay Portal » English » 3. Development

组合视图 统一视图 树状图
讨论主题 [ 上一个 | 下一个 ]
toggle
Chris Halverson
Alloy AJAX Full Example?
2011年1月18日 上午6:15
答复

Chris Halverson

等级: New Member

帖子: 18

加入日期: 2006年11月14日

最近的帖子

I'm in the process of migrating my LR 5.1 (with ext environment) to 6.x (using the plugins). I'm basically rewriting from scratch to make things "right" with the current version. Due to this, I thought I'd try to stick with using Alloy to handle my Ajax calls instead of jQuery as I have done in the past. This is causing all sorts of headaches and is causing me to think I should just stay with jQuery because everything still works. Alloy looks nice and I'd love the UI consistency and not have to worry about another library and such, but the documentation is severely lacking.

My portal makes use of a ton of Ajax calls to servlets. The servlets (generally) return JSON data which I display without refreshing the whole page. jQuery makes this very simple and I have it working all over the place.

I cannot, however, seem to get the Alloy io-request or anything to work correctly. There's one blog post and various scattered snippets in the forum, but not a complete example.

Does anybody have a simple JSP that shows all the Alloy that's needed (not just "our code goes here") to make an Ajax servlet call and update a DIV on a page?

I've tried to do something like:

 1<script language="javascript" type="text/javascript">
 2  var phoneLookupRequest = AUI().use('aui-io-request', function(A) {
 3    var path="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>";
 4    A.io.request(path + '/GetPhoneNumberInfoServlet', {
 5      autoLoad: false,
 6      dataType: 'json',
 7      method: 'POST',
 8      form: { id: 'phonenumberlookupform2' },
 9      on: {
10          success : function() { alert(this.get('responseData').username);  A.one('#phonenumberinforesultdiv2').html(this.get('responseData').username); }
11      }
12    });
13  });
14
15  AUI().one('#phonenumberinfobtn2').on('click', function(e) {
16    alert("In click area");
17    phoneLookupRequest.start();
18    });
19
20</script>
21
22<div id="phonenumberlookupform">
23<aui:form name="phonenumberlookupform2">
24<aui:input name="pn" label="label-phonenumber-entry" inlineLabel="left" inlineField="true" />
25<aui:button type="submit" value="Lookup" id="phonenumberinfobtn2" class="phonenumberinfobtn2" />
26</aui:form>
27
28<div id="phonenumberinforesultdiv2"></div>
29</div>


But I keep getting a "phoneLookupRequest.start() is not a function". This appears to be what the blog entry is implying to do. Am I anywhere close?

Thanks!

Chris
Deb Troxel
RE: Alloy AJAX Full Example?
2011年1月18日 下午12:14
答复

Deb Troxel

等级: Junior Member

帖子: 81

加入日期: 2010年2月22日

最近的帖子

Hi Chris,

In your example phoneLookupRequest is being assigned the value returned from AUI().use(...) which, I believe, is the AUI instance (same as 'A' within the function callback). You would want to call start() on the io.request, which you aren't holding on to at all.

I modified your code sample below to show one approach you could try. In this version autoLoad defaults to true, so the request will execute as soon as you click and aui-io-request is ready.

 1
 2<script language="javascript" type="text/javascript">
 3  function <portlet:namespace/>phoneLookupRequest() {
 4
 5   AUI().use('aui-io-request', function(A) {
 6    var path="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>";
 7    A.io.request(path + '/GetPhoneNumberInfoServlet', {
 8      // autoLoad: false,
 9      dataType: 'json',
10      method: 'POST',
11      form: { id: 'phonenumberlookupform2' },
12      on: {
13          success : function() { alert(this.get('responseData').username);  A.one('#phonenumberinforesultdiv2').html(this.get('responseData').username); }
14      }
15    });
16  });
17}
18
19  AUI().one('#phonenumberinfobtn2').on('click', function(e) {
20    alert("In click area");
21    <portlet:namespace/>phoneLookupRequest();
22    });
23
24</script>
25
26<div id="phonenumberlookupform">
27<aui:form name="phonenumberlookupform2">
28<aui:input name="pn" label="label-phonenumber-entry" inlineLabel="left" inlineField="true" />
29<aui:button type="submit" value="Lookup" id="phonenumberinfobtn2" class="phonenumberinfobtn2" />
30</aui:form>
31
32<div id="phonenumberinforesultdiv2"></div>
33</div>
Rafa Quinonero
RE: Alloy AJAX Full Example?
2012年4月11日 上午1:38
答复

Rafa Quinonero

等级: Junior Member

帖子: 37

加入日期: 2012年3月22日

最近的帖子

Deb Troxel:
Hi Chris,

In your example phoneLookupRequest is being assigned the value returned from AUI().use(...) which, I believe, is the AUI instance (same as 'A' within the function callback). You would want to call start() on the io.request, which you aren't holding on to at all.

I modified your code sample below to show one approach you could try. In this version autoLoad defaults to true, so the request will execute as soon as you click and aui-io-request is ready.

 1
 2<script language="javascript" type="text/javascript">
 3  function <portlet:namespace/>phoneLookupRequest() {
 4
 5   AUI().use('aui-io-request', function(A) {
 6    var path="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>";
 7    A.io.request(path + '/GetPhoneNumberInfoServlet', {
 8      // autoLoad: false,
 9      dataType: 'json',
10      method: 'POST',
11      form: { id: 'phonenumberlookupform2' },
12      on: {
13          success : function() { alert(this.get('responseData').username);  A.one('#phonenumberinforesultdiv2').html(this.get('responseData').username); }
14      }
15    });
16  });
17}
18
19  AUI().one('#phonenumberinfobtn2').on('click', function(e) {
20    alert("In click area");
21    <portlet:namespace/>phoneLookupRequest();
22    });
23
24</script>
25
26<div id="phonenumberlookupform">
27<aui:form name="phonenumberlookupform2">
28<aui:input name="pn" label="label-phonenumber-entry" inlineLabel="left" inlineField="true" />
29<aui:button type="submit" value="Lookup" id="phonenumberinfobtn2" class="phonenumberinfobtn2" />
30</aui:form>
31
32<div id="phonenumberinforesultdiv2"></div>
33</div>


That code is not working emoticon