How to embed web-service reponse within the portlet that called it?

Question

Apologies for starting another thread but I kind of solved the issue of my first thread but now I run into a different issue.

Background:

I have a portlet which takes 3 Parameters (Temperature,FromUnit,ToUnit) and passes them on to an external WebService located here: http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp

I did not want the portlet to actually redirect to the URL of the webService and the only way to do that appeared to be AJAX using jquery which I have done now. However I also want the response of the webService to be embedded in the same portlet that I used to call it and that's where I am having issues.

This is what I got so far, here is my portlet page:

  <html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
    </head>
    <body>


        <script src="http://localhost:8080/my-greeting-portlet/jquery.js"></script>
        <script type="text/javascript" src="http://localhost:8080/my-greeting-portlet/js/script.js"></script>



    <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>



    <%@ page import="javax.portlet.PortletPreferences" %>

    <portlet:defineObjects />
    <%

    PortletPreferences prefs = renderRequest.getPreferences();
    String Temperature = (String)prefs.getValue("Temperature","Temperature");

    PortletPreferences prefs2 = renderRequest.getPreferences();
    String FromUnit = (String)prefs2.getValue("FromUnit", "FromUnit");

    PortletPreferences prefs3 = renderRequest.getPreferences();
    String ToUnit = (String)prefs3.getValue("ToUnit","ToUnit");



    %>



    <portlet:renderURL var="editGreetingURL">

        <portlet:param name="jspPage" value="/edit.jsp" />

    </portlet:renderURL>


    <div id="contact_form">  
    <form name="callWebService" id="callWebService" action="">
     <fieldset> 
        <label for="Temperature" id="Temperature_label">Temperature </label>  
        <input type="text" name="Temperature" id="Temperature" size="30" value="" class="text-input" />  
        <label class="error" for="Temperature" id="Temperature_error">This field is required.</label>
        <br />  

        <label for="FromUnit" id="FromUnit_label">From unit  </label>  
        <input type="text" name="FromUnit" id="FromUnit" size="30" value="" class="text-input" />  
        <label class="error" for="FromUnit" id="FromUnit_error">This field is required.</label>
        <br />  

        <label for="ToUnit" id="ToUnit_label">To Unit    </label>  
        <input type="text" name="ToUnit" id="ToUnit" size="30" value="" class="text-input" />  
        <label class="error" for="ToUnit" id="ToUnit_error">This field is required.</label>  

        <br />  
        <input type="submit" name="submit" class="button" id="submit_btn" value="submit" />  
      </fieldset>  
    </form>  
    </div>  


    </body>
    </html>

And here is the jquery code:

$(function() {  
  $('.error').hide();  
  $(".button").click(function() {  
    // validate and process form here  
    var dataString = $("#callWebService").serialize();  
    // alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp",  
      data: $("#callWebService").serialize(), 
      success: function() {  
        $('#contact_form').html("<div id='message'></div>");  
        $('#message').html("<h2>Contact Form Submitted!</h2>")  
        .append("<p>We will be in touch soon.</p>")  
        .hide()  
        .fadeIn(1500, function() {  
          $('#message').append("<img id='checkmark' src='images/check.png' />");  
        });  
      }  
    });  
    return false;   



    $('.error').hide();  
      var Temperature = $("#Temperature").val();  
        if (Temperature == "") {  
      $("#Temperature_error").show();  
      $("#Temperature").focus();  
      return false;  
    }  
        var FromUnit = $("input#FromUnit").val();  
        if (FromUnit == "") {  
      $("label#FromUnit_error").show();  
      $("input#FromUnit").focus();  
      return false;  
    }  
        var ToUnit = $("input#ToUnit").val();  
        if (ToUnit == "") {  
      $("label#ToUnit_error").show();  
      $("input#ToUnit").focus();  
      return false;  
    }  

  });  
});

Everything seems to be working, or at least I do not get errors but it seems that this part of the code is completely ignored:

success: function() {  
           $('#contact_form').html("<div id='message'></div>");  
          $('#message').html("<h2>Contact Form Submitted!</h2>")  
        .append("<p>We will be in touch soon.</p>")  
          .hide()  
          .fadeIn(1500, function() {  
           $('#message').append("<img id='checkmark' src='images/check.png' />");  
      });

When I press the "submit" button nothing happens. No redirection to the webservice URL (good) but also the custom message defined above does not show up (bad). The screen remains exactly as it is.

When I uncomment the "alert" in the jquery code and the parameters are definitely picked up correctly and I would assume that they are being passed to the webService URL but nothing else is happening.

Is this because the webservice URL returns a response that overwrites my message or something like that?

How can I get the webService response embedded into the portlet?

Again, many thanks for looking at this, it is much appreciated!

Answer 1

You ran into a Cross Domain Scripting problem.

Read this and this to resolve the problem

How to embed web-service reponse within the portlet that called it?

Question

1 answers

solution1
1 2013-08-27 19:39:55

How to embed web-service reponse within the portlet that called it?

Question

1 answers

solution1 1 2013-08-27 19:39:55

solution1
1 2013-08-27 19:39:55