Question

I’m working with a third party that is generating div content based on a post response from my server (java servlet). One problem I have is that we have a list of radio buttons leveled in a form.

When I hit submit on that form, I need to make a post call to my server and re-render that div in the third party site. I have used different variations of jQuery to no avail.

I’ve included the most recent jQuery (also tried a sub 1.4 release of jQuery). When I hit the submit button on my form, I just render the same page and I do NOT render a call to the server.

How can I do this, update a div on the local page that renders my post results based on a form I write? Below is what I currently have:

Form:

    <form action='\' id=\"form1\">... radio buttons ... </form>
    <input hidden field name = value passed from Java method>
    <input hidden field id = value passed from Java method>
    <input hidden field the value of the selected checkbox>

HTML:

    <script language='Javascript' type='text/javascript'>
    $(\"#form1\").submit(function(event) {
      event.preventDefault();

      var $form = $( this ),
        name2= $form.find( 'input[name=\"name\"]' ).val(),
        id2= $form.find( 'input[name=\"id\"]' ).val(),
        url = $form.attr( 'action' );
    $.post( url, { name2:name, id2:id },
      function( data ) {
         var content = $( data ).find( '#content' );
         $( \"#this_div\" ).empty().append( content );
      });
    });
    </script>

Answer 1

Sending AJAX Requests from a Third Party site to your server:

Due to browser security requirements, it is not currently possible to make cross-domain AJAX requests to a third-party server. This means that the $.post request is limited to what is referred to as the same-domain policy.

Thus, if your server is example.com and the third party server is domain.com, domain.com cannot make AJAX requests to your server.

However, there is a technique you can use to circumvent this browser security. While it’s not possible for XMLHttpRequests to be made cross domain, JavaScript <script> tag blocks can load JavaScript from any domain.

Script tag remoting, or JSONP, involves using a script tag to send a request to your server:

Script tag:

// from domain.com to your server, example.com, make a request using a script tag
var urlWithParams = "http://example.com/getHTMLForm.do?id2=" + id2 + "&name2" + name2;
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src", urlWithParams);

// create a script tag, which invokes your servlet 
document.getElementsByTagName("head")[0].appendChild(script);

getHTMLForm.do is a hypothetical servlet that you’re currently using to post the data and get HTML in the response. Instead of passing the parameters in the Request body using POST, you’ll pass the data as query parameters.

Server response::

The server then responds with JSON that you generate on the server, but it’s wrapped — or padded — inside a JavaScript function that is defined on the web page making the request.

// your response from your server
insertFormOnPage({"html":"<form action='#'><input name='name' /><input name='id' /></form>", "elem" : "#content"});

Third party Client side code:

For this technique to work, the third party site must have a function defined that matches the one your server will return:

function insertFormOnPage( data ) {

    alert( data.html ); // prints the HTML for debugging
    alert( data.elem ); // prints the selector you want to insert into

    // inject the HTML into the #content DIV
    $( data.elem ).html( data.html );
}

HTML on the third party site:

<!-- Let's just assume the third party site's DIV is empty for simplicity -->
<div id="#content"></div

Explanation:

• Your server returns pure JavaScript to the client side, as JavaScript, as a function that executes immediately.

• The function receives the following items as properties in a JavaScript object: The HTML, and the div id.

• The function accesses the object’s html and elem properties to access both the html string and the selector.

• Using jQuery, the function injects the HTML inside the DIV#content element.

The last and final thing you should know about this technique is that it only supports GET methods, since that is how JavaScript is fetched from the server. This means that you’ll need to make sure your server is configured to accept GET requests for this data and not POST requests.

JSONP Using jQuery:

While the above solution helps describe the concepts of what is happening under the hood, you may also want to check out jQuery getJSON. Specifically, look at the JSONP examples, which are the only way to make cross-domain requests without reloading the page.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });