AJAX Problem

[Pascal Wasem, modifié il y a 14 années.]

Although I read some posts regarding Liferay, Ajax and jQuery, I could not solve my problem:

I just want to do a simple update to div layer:

My jsp:

<%@include file="/WEB-INF/jsp/init.jsp" %>

<!-- import packages -->
&lt;%@page import="java.util.Date" %&gt;


<div id="<portlet:namespace/>MainArea">
    Time on load <br>
    <font color="blue">
        &lt;%= (new Date()).toString()%&gt;
    </font>
    
    <div id="<portlet:namespace/>RefreshArea">
        Time on Refresh <br>
        <font color="red">
            &lt;%= (new Date()).toString()%&gt;
        </font>
        <br>
        <input type="Button" id="<portlet:namespace/>Button" value="Refresh">
    </div>
</div>
    

<script type="text/javascript">
    
    jQuery(document).ready(function(){
        
        jQuery('#<portlet:namespace/>Button').click(function() {
            var url = "<portlet:renderURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString()%>"/>";
            jQuery('#<portlet:namespace/>RefreshArea').load(url);
        });
        
    });
    
</script>

My portlet class:

import java.io.IOException;
import javax.portlet.GenericPortlet;
import javax.portlet.PortletException;
import javax.portlet.PortletRequestDispatcher;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

import org.slf4j.LoggerFactory;

public class AjaxDemoPortlet extends GenericPortlet {

    private static org.slf4j.Logger logger = LoggerFactory.getLogger(AjaxDemoPortlet.class);

    @Override
    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {
        response.setContentType("text/html");
        PortletRequestDispatcher dispatcher =
                getPortletContext().getRequestDispatcher("/WEB-INF/jsp/view.jsp");
        dispatcher.include(request, response);

    }

}

The refresh doubles the MainArea layer and also updates both div layers: MainArea and RefreshArea.
I included two screenshots.

What am I missing?

Thank you!

Best,
Pascal

[Felipe Sere, modifié il y a 13 années.]

Hi Pascal,

I am also interesed in getting to work AJAX. Have you managed to get your code to work? Yours is the only example I find simple enough to understand :-)

Felipe

[Victor Zorin, modifié il y a 13 années.]

This is a bad example. You need two jsps, one for an initial display which will have a div with id that will be populated when JQuery call is made, as in given jsp sample.
Second jsp shall only have the content that will be populated by the AJAX call. In the Java code above Request dispatcher shall redirect to a second jsp, instead of view.jsp. What is happening here, view.jsp is injected into view.jsp as many times as refresh button is pressed. So it works perfectly as it was asked to do.

[Sharana Basavaraj Ballari, modifié il y a 13 années.]

Hi Pascal,

I think you need to pass ID of the dom object that you want to get updated by the ajax call along with the URL.

something like this,

jQuery('#<portlet:namespace/>RefreshArea').load(url #<portlet:namespace/>RefreshArea);

You can read how load works on different scenarios, below is the link.

http://api.jquery.com/load

HTH,
Sharan