Populate Search Container Results from DropDown Using Alloy UI Ajax?

[David Ilechukwu，修改在11 年前。]

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:

<%
    List<book> books = (List)request.getAttribute("books");
%&gt;  

    <aui:select name="Books">
              
&lt;%
    for (Book book : books) {
%&gt;
            <aui:option value="<%= book.getBookId() %>">
                &lt;%= book.getBookName() %&gt;
            </aui:option>
&lt;%
    }
%&gt;                     
    </aui:select>

<liferay-ui:search-container headernames="name,roles,null">
  
	<liferay-ui:search-container-results results="<%= books %>" total="<%= books.size() %>" />

	<liferay-ui:search-container-row classname="com.lis.project.model.Book" escapedmodel="<%= true %>" keyproperty="bookId" modelvar="book">
		<liferay-ui:search-container-column-text name="book-name" property="bookName" />
	</liferay-ui:search-container-row>
	<liferay-ui:search-iterator paginate="<%= false %>" />
</liferay-ui:search-container>
</book>

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，修改在10 年前。]

Hi David,

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

Thanks& regards,
Karteek

[Nate Cavanaugh，修改在10 年前。]

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:

Liferay.Service('/user/get-user-by-id',
  { userId: 10197 },
  function(obj) {
    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: http://deploy.alloyui.com/demos/template/

So, putting this one together, you can do something like:

<div id="<portlet:namespace />bookList"></div>
<aui:script use="aui-base,aui-template">
	var template = new A.Template('<ul><tpl for="."><li>{name} - {roles}</li></tpl></ul>');

	var bookSelect = A.one('<portlet:namespace />Books');

	bookSelect.on('change', function(event) {
		Liferay.Service(
			'/davids-portlet/get-books',
			{ bookId: bookSelect.val() }
			function(books) {
				template.render(obj, '#<portlet:namespace />bookList');
			}
		);
	});
</aui:script>

Also, you could look at: http://alloyui.com/versions/1.5.x/examples/datatable/ 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}" />
</portlet:renderURL>

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:

<%
    List<book> books = (List)request.getAttribute("books");
%&gt;

    <aui:select name="Books">
&lt;%
    for (Book book : books) {
%&gt;
    <aui:option value="<%= book.getBookId() %>">
        &lt;%= book.getBookName() %&gt;
    </aui:option>
&lt;%
    }
%&gt;
    </aui:select>

<div id="<portlet:namespace />booksSearchContainer">
	<liferay-ui:search-container headernames="name,roles,null">
	    <liferay-ui:search-container-results results="<%= books %>" total="<%= books.size() %>" />

	    <liferay-ui:search-container-row classname="com.lis.project.model.Book" escapedmodel="<%= true %>" keyproperty="bookId" modelvar="book">
	        <liferay-ui:search-container-column-text name="book-name" property="bookName" />
	    </liferay-ui:search-container-row>
	    <liferay-ui:search-iterator paginate="<%= false %>" />
	</liferay-ui:search-container>
</div>

<portlet:renderurl var="getBooksURL">
	<portlet:param name="struts_action" value="/davids-portlet/get_books" />
	<portlet:param name="bookId" value="{0}" />
</portlet:renderurl>

<aui:script use="aui-base,aui-io-plugin">
	var bookSelect = A.one('<portlet:namespace />Books');

	var booksSearchContainer = A.one('#<portlet:namespace />booksSearchContainer');

	bookSelect.on('change', function(event) {
		//Here we'll replace our placeholder of {0} with the select's current value
		var url = A.Lang.sub('&lt;%= getBooksURL %&gt;', [bookSelect.val()]);

		booksSearchContainer.load(url,
			{
				//This tells the ajax to only insert the matching selector from the response into our div
				selector: '#<portlet:namespace />booksSearchContainer &gt; .lfr-search-container'
			}
		);
	});
</aui:script></book>

I hope that helps

[David Ilechukwu，修改在10 年前。]

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

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