Liferay is a Gartner Magic Quadrant Leader for the Sixth Year! Find out why


Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
David Ilechukwu
Populate Search Container Results from DropDown Using Alloy UI Ajax?
February 28, 2013 7:21 AM

David Ilechukwu

Rank: Regular Member

Posts: 116

Join Date: June 7, 2010

Recent Posts

I have a dropdown (an <aui-select>) on my jsp page. I also use a search results container on the same page - whose results is dependent on the value selected in the dropdown like this:

 3    List<Book> books = (List)request.getAttribute("books");
 6    <aui:select name="Books">
 9    for (Book book : books) {
11            <aui:option value="<%= book.getBookId() %>">
12                <%= book.getBookName() %>
13            </aui:option>
15    }
17    </aui:select>
20    headerNames="name,roles,null"
23    <liferay-ui:search-container-results
24        results="<%= books %>"
25        total="<%= books.size() %>"
26    />
28    <liferay-ui:search-container-row
29        className="com.lis.project.model.Book"
30        escapedModel="<%= true %>"
31        keyProperty="bookId"
32        modelVar="book"
33    >
34        <liferay-ui:search-container-column-text
35            name="book-name"
36            property="bookName"
37        />
38    </liferay-ui:search-container-row>
39    <liferay-ui:search-iterator paginate="<%= false %>" />

Now the problem is that I need to make an AJAX call to a class with populates the List books variable - each time something new is selected in the Books dropdown.
The only example I've seen uses Liferay.DynamicSelect - which is only suitable for 2 dependent dropdowns - and not for a jsp variavle dependent on a dropdown.

Which corresponding Liferay js method should I use - liferay-service, liferay-auto-fields? Very scarce documentationon this.

Anybody has any ideas about this? Need to urgently get this off the way, ASAP.

Regards All
Murali Karteek
RE: Populate Search Container Results from DropDown Using Alloy UI Ajax?
May 16, 2013 12:15 AM

Murali Karteek

Rank: Junior Member

Posts: 37

Join Date: March 5, 2012

Recent Posts

Hi David,

Any Solution for your requirement, I am searching for that.
If you have any solution can you guide me ?

Thanks& regards,
Nate Cavanaugh
RE: Populate Search Container Results from DropDown Using Alloy UI Ajax?
June 28, 2013 9:30 AM

Nate Cavanaugh


Rank: Junior Member

Posts: 79

Join Date: November 27, 2006

Recent Posts

Hi David,
There are a couple of ways you can handle this, but I can explain better in psuedo-code and conceptually, since there's a lot I don't know about your app and needs in general.

Here are the possibilities I can think of, depending on what you need to do:

1. You don't need a search container specifically:
If you only need a JSON object to read from and don't specifically need a search container, I would recommend using Liferay.Service(). I'm assuming you're on 6.1 or later, so you can easily see the API docs generated for your portal here (assuming you're running it locally on 8080): http://localhost:8080/api/jsonws/
But this is also automatically generated for your own portlet if you have services generated. You could see it here, for example: http://localhost:8080/davids-portlet/api/jsonws
If you click into any of the methods, for instance: http://localhost:8080/api/jsonws?signature=%2Fuser%2Fget-user-by-id-1-userId
Enter in a userId , press invoke, and you'll see that it will return a JSON object. If you click on the JavaScript example, it will give you the code to run that particular example.
So for instance:
2  { userId: 10197 },
3  function(obj) {
4    console.log(obj);

With the object that's returned (if it's a method that returns multiple results, it will be an array of objects), you can either pass it to the AlloyUI Template (you can see an example of this here:

So, putting this one together, you can do something like:
 1<div id="<portlet:namespace />bookList"></div>
 2<aui:script use="aui-base,aui-template">
 3    var template = new A.Template('<ul><tpl for="."><li>{name} - {roles}</li></tpl></ul>');
 5    var bookSelect ='<portlet:namespace />Books');
 7    bookSelect.on('change', function(event) {
 8        Liferay.Service(
 9            '/davids-portlet/get-books',
10            { bookId: bookSelect.val() }
11            function(books) {
12                template.render(obj, '#<portlet:namespace />bookList');
13            }
14        );
15    });

Also, you could look at: if you wanted to use that JSON object to populate a table that's not necessarily a search container (instead of printing just a plain list).

2. You do want to use search container:
I would recommend doing something pretty simple. Create your portletURL that will display the results in the search container with id set to a placeholder value. Something like:
<portlet:renderURL var="getBooksURL">
<portlet:param name="struts_action" value="/davids-portlet/get_books" />
<portlet:param name="bookId" value="{0}" />

Then in your JSP, you would fire off an ajax request to that URL, replacing the bookID placeholder with the one from your select, and in the ajax request you would only grab the search container out.

So something like this:
 2    List<Book> books = (List)request.getAttribute("books");
 5    <aui:select name="Books">
 7    for (Book book : books) {
 9    <aui:option value="<%= book.getBookId() %>">
10        <%= book.getBookName() %>
11    </aui:option>
13    }
15    </aui:select>
17<div id="<portlet:namespace />booksSearchContainer">
18    <liferay-ui:search-container
19        headerNames="name,roles,null"
20    >
21        <liferay-ui:search-container-results
22            results="<%= books %>"
23            total="<%= books.size() %>"
24        />
26        <liferay-ui:search-container-row
27            className="com.lis.project.model.Book"
28            escapedModel="<%= true %>"
29            keyProperty="bookId"
30            modelVar="book"
31        >
32            <liferay-ui:search-container-column-text
33                name="book-name"
34                property="bookName"
35            />
36        </liferay-ui:search-container-row>
37        <liferay-ui:search-iterator paginate="<%= false %>" />
38    </liferay-ui:search-container>
41<portlet:renderURL var="getBooksURL">
42    <portlet:param name="struts_action" value="/davids-portlet/get_books" />
43    <portlet:param name="bookId" value="{0}" />
46<aui:script use="aui-base,aui-io-plugin">
47    var bookSelect ='<portlet:namespace />Books');
49    var booksSearchContainer ='#<portlet:namespace />booksSearchContainer');
51    bookSelect.on('change', function(event) {
52        //Here we'll replace our placeholder of {0} with the select's current value
53        var url = A.Lang.sub('<%= getBooksURL %>', [bookSelect.val()]);
55        booksSearchContainer.load(url,
56            {
57                //This tells the ajax to only insert the matching selector from the response into our div
58                selector: '#<portlet:namespace />booksSearchContainer > .lfr-search-container'
59            }
60        );
61    });

I hope that helps emoticon
David Ilechukwu
RE: Populate Search Container Results from DropDown Using Alloy UI Ajax?
July 10, 2013 6:02 AM

David Ilechukwu

Rank: Regular Member

Posts: 116

Join Date: June 7, 2010

Recent Posts

Thanks a lot, Nate.
Please I have a slightly different scenario trying to bug my head off (please read below):

Hi Folks,
Here's my scenario:
I have a search container (created using <liferay-ui:search-container> tag which shows a list of Employee Education Records).
Just above the search container, I have an Add Button, which shows a Hidden Div with fields to populate a new Employee Education Record.
After filling the fields (Instititution Name, Gpa/Score obtained, Year started, Year Ended), I am able to successfully push the new record into the SearchContainer using javascript so that the new record is immediately visible to the User in the search container.

However, the new record is actually created only when the user clicks the "Save" button on the right hand side (I am using a form-ui navigator which allows me to have only one Save button).

(1) Now question is how do I get the records inside the Search container from inside my ActionCommand class? So that I can persist them in the database?

Please help folks - this is very urgent. I have less than 3 hours to fix this.
Thanks emoticon

Any help please?
Am I in the right direction or is there a better way to to do this?