Get Form result page

Question

I'm looking for a way to some how target a GET Form result page to a div. So far most of the solutions were telling me to use Iframe instead, but my purpose is to make some change to the result page and using Iframe seem to activate the cross domain scripting rule which prevent me from getting the page content.

And the result page is usually raw XML.

<html>
<head>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.9.2.custom.css" >
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<script src="js/jquery.xslt.js"></script>
<script type="text/javascript">

$(function() {
    var xmlContent = $("#CFrame").contents().find("*").text();

    $('#SResult').xslt({xml:xmlContent, xslUrl:'stylesheet/styleSheet.xsl'});
});

// prepare the form when the DOM is ready 
function submitForm() { 
    // bind form using ajaxForm 
    $('#searchForm').ajaxForm({ 
        // dataType identifies the expected content type of the server response 
        dataType:  'xml', 
        // success identifies the function to invoke when the server response 
        // has been received 
        success:   processXml
    });
    return false; 
}

function processXml(responseXML) { 
    // 'responseXML' is the XML document returned by the server; we use 
    // jQuery to extract the content of the message node from the XML doc 
    var message = $(responseXML).text(); 
    $("#SResult").text(message); 
}
</head>
<body>
   <form id="searchForm" method="GET" action="http://111.11.111.11:1111/search" onSubmit="submitForm()">
     <!--.... Some input go here-->
    <input type="submit" value="Search" />
<div id="SResult">
</div>
<iframe id="CFrame" name="ContentFrame" frameborder="1" height="1000px" width="1000px" scrolling="no"></iframe>
</body>
<script>
loadUI();
</script>
</html>

Thanks,

Am I understanding this correctly? You are trying to submit a form (using GET) to a separate page on a different domain than yours, and then load that page's results (raw XML) into a div on your page? — wired_in, Jan 07 '13 at 05:02
If that's correct, then A: You are going to have cross-domain issues and B: why are you trying to load XML directly into your page, which is HTML? — wired_in, Jan 07 '13 at 05:03
Yes, thats correct. A: I was hoping to avoid that by focusing on the form response. B: A function use jquery xslt plugin will transform the xml into html for displaying. — MikeNQ, Jan 07 '13 at 05:18
Either way, you can't make a get or post request to another domain unless you use a server proxy, or you have control over the other domain, and you add Access-Control-Allow-Origin headers that allow your domain access. — wired_in, Jan 07 '13 at 05:23

Bk Santiago · Answer 1 · 2013-01-07T04:51:17.677

0

Are you submitting a form using get method then response will be display on a div tag?

you can use Jquery ajax.

Example

$.ajax({
   type: "POST",
   url: "url here",
   data: {id: someIdTobePass},
   success: function(response){
      //do the jquery manipulation
      $("#myDivID").html("the response is " + response);
   }
});

edited Jan 07 '13 at 04:51

answered Jan 07 '13 at 03:15

Bk Santiago

1,523
3
13
24

Yes I tried that based on example of Ajax Form, but it does not seem to work. Can you provide me a simple example for this ? Thanks – MikeNQ Jan 07 '13 at 03:39
i edited the message. you can post your codes if you can't understand it. – Bk Santiago Jan 07 '13 at 04:51
OP is trying to do a cross-domain request – wired_in Jan 07 '13 at 05:24

intelis · Answer 2 · 2013-01-07T05:00:23.607

0

You could use the $.get helper method in jQuery.

jQuery API

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] );

Code Sample

$.get("test.php", { name: "John", time: "2pm" },function(data){
   $("#mydiv").html(data);
});

edited Jan 07 '13 at 05:00

answered Jan 07 '13 at 04:54

intelis

7,829
14
58
102

OP is trying to do a cross-domain request – wired_in Jan 07 '13 at 05:24

score 0 · Accepted Answer · edited May 23 '17 at 12:27

You can't make a get or post request to another domain unless you use jsonp, a server proxy, or you have control over the other domain. If you have control over the domain you are making the ajax call to, you can add a Access-Control-Allow-Origin response header to the page you are trying to request, which would allow your domain access.

Since you are doing a GET request that returns XML, I would suggest using this jQuery plugin which uses YQL as a proxy. Also, you can use this guide to see how it works or do it without the plugin.

A resolved stackoverflow question that addresses this same issue: Cross-Domain Requests with jQuery

Get Form result page

3 Answers3