Alloy AJAX Full Example?

[Chris Halverson，修改在13 年前。]

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:

<script language="javascript" type="text/javascript">
  var phoneLookupRequest = AUI().use('aui-io-request', function(A) {
    var path="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>";
    A.io.request(path + '/GetPhoneNumberInfoServlet', {
      autoLoad: false,
      dataType: 'json',
      method: 'POST',
      form: { id: 'phonenumberlookupform2' },
      on: {
          success : function() { alert(this.get('responseData').username);  A.one('#phonenumberinforesultdiv2').html(this.get('responseData').username); }
      }
    });
  });

  AUI().one('#phonenumberinfobtn2').on('click', function(e) {
    alert("In click area");
    phoneLookupRequest.start();
    });

</script>

<div id="phonenumberlookupform">
<aui:form name="phonenumberlookupform2">
<aui:input name="pn" label="label-phonenumber-entry" inlineLabel="left" inlineField="true" />
<aui:button type="submit" value="Lookup" id="phonenumberinfobtn2" class="phonenumberinfobtn2" />
</aui:form>

<div id="phonenumberinforesultdiv2"></div>
</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，修改在13 年前。]

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.

<script language="javascript" type="text/javascript">
  function <portlet:namespace/>phoneLookupRequest() {

   AUI().use('aui-io-request', function(A) {
    var path="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>";
    A.io.request(path + '/GetPhoneNumberInfoServlet', {
      // autoLoad: false,
      dataType: 'json',
      method: 'POST',
      form: { id: 'phonenumberlookupform2' },
      on: {
          success : function() { alert(this.get('responseData').username);  A.one('#phonenumberinforesultdiv2').html(this.get('responseData').username); }
      }
    });
  });
}

  AUI().one('#phonenumberinfobtn2').on('click', function(e) {
    alert("In click area");
    <portlet:namespace/>phoneLookupRequest();
    });

</script>

<div id="phonenumberlookupform">
<aui:form name="phonenumberlookupform2">
<aui:input name="pn" label="label-phonenumber-entry" inlineLabel="left" inlineField="true" />
<aui:button type="submit" value="Lookup" id="phonenumberinfobtn2" class="phonenumberinfobtn2" />
</aui:form>

<div id="phonenumberinforesultdiv2"></div>
</div>

[Rafa Quinonero，修改在12 年前。]

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.

<script language="javascript" type="text/javascript">
  function <portlet:namespace/>phoneLookupRequest() {

   AUI().use('aui-io-request', function(A) {
    var path="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>";
    A.io.request(path + '/GetPhoneNumberInfoServlet', {
      // autoLoad: false,
      dataType: 'json',
      method: 'POST',
      form: { id: 'phonenumberlookupform2' },
      on: {
          success : function() { alert(this.get('responseData').username);  A.one('#phonenumberinforesultdiv2').html(this.get('responseData').username); }
      }
    });
  });
}

  AUI().one('#phonenumberinfobtn2').on('click', function(e) {
    alert("In click area");
    <portlet:namespace/>phoneLookupRequest();
    });

</script>

<div id="phonenumberlookupform">
<aui:form name="phonenumberlookupform2">
<aui:input name="pn" label="label-phonenumber-entry" inlineLabel="left" inlineField="true" />
<aui:button type="submit" value="Lookup" id="phonenumberinfobtn2" class="phonenumberinfobtn2" />
</aui:form>

<div id="phonenumberinforesultdiv2"></div>
</div>

That code is not working