CODEWITHSUNDEEP
javascriptjqueryhtmlajaxiframe
BvO
BvO

Reputation: 31

Ajax/jquery result does not display in iframe. Displays in new page instead

I have searched stackoverflow and other forums, but I cannot get past the problem described. below.

The issue manifests itself in the same way in IE 11 and Firefox 10.0.2.

I want to submit (POST) a form to a website (http://mirgo2.co.uk/bridgesolver) and display the result (a bridge table with dealt hands) on the page.

The javascript is as follows:

<script>
// -------------Create the form
  var formData = new FormData();
  var content = '[Board "1"]' + '\n' +
               '[Dealer "N"]' + '\n' +
               '[Vulnerable "EW"]' + '\n' +
               '[Deal "N:K97.K43.6432.QT8 Q52.765.KJ.76543 AT8.AQ2.9875.AK9 J643.JT98.AQT.J2"]'; // the body of the new file...
  var blob = new Blob([content], { type: "text/plain"});

  formData.append( "fileToUpload", blob, "somename.pbn" )

  formData.append("event",0); 

// ------------Submit the form
      $.ajax({
          url: 'http://mirgo2.co.uk/bridgesolver/upload_file.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#theTarget").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });
</script>

The target is an iframe, defined on the page as follows:

<iframe id="theTarget" name="theTarget" ></iframe>

The result is close but not quite.

  1. The form is submitted as expected as shown in the Firefox F12 network display
  2. The submit returns success as demonstrated with the displayed formData alert
  3. But the iframe shows as empty on the page behind the alert
  4. Instead the requested data displays on its own, after OK is clicked on the success alert . The page with the iframe disappears and the board is displayed in the same browser window.

I do not understand why this happens, nor can I find another way to achieve the result.

All suggestions welcome.

Bram van Oosterhout

PS: The comments reminded me of the following that may be relevant. The page that issues the request is returned from domain bram.van-oosterhout.org The request is issued to domain mirgo2.co.uk. And the successful display in the browser window originates from dds.bridgewebs.com

The recommendation to use iframe is specific to the fact that the domain of the result is not the domain that returned the page containing the ajax request.

I should also have said above that the mechanism works when the server mirgo2.co.uk returns an error message. When the filename is incorrect (for instance: somename.txt) the server (mirgo2.co.uk) returns an error message, which is displayed in the correct location on the page. But when the correct result is returned from dds.bridgewebs.com my page is superseded by the result presented by dds.bridgewebs.com.

Update 27/6/2017 11:20: I think I have found the cause of my issue.

The code returned by mirgo2.co.uk is: 

<script language="JavaScript" type="text/JavaScript">
var filename="http://mirgo2.co.uk/bridgesolver/uploads/5951a6d4a9d308.60317801.pbn";
</script>
<body>
<script language="JavaScript" type="text/JavaScript">
location.replace("http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=" + filename);</script>
</body>

When that is placed in the iframe, it is executed and the location.replace will replace the whole page.

That explains the symptoms.

I am not very familiar with the javascript API. Any suggestions how I translate the above to the desired returndata="http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=" + filename)?

Upvotes: 2

Views: 393

Answers (2)

BSalita
BSalita

Reputation: 8931

I too was interested in obtaining double dummy solutions using the same underlying website. In my case I wanted to issue an HTTP GET request to obtain the solution. As a canonical test, I passed a request where North holds all the spades, East holds all the hearts, South holds all the diamonds, West holds all the clubs. Vulnerability is None.

curl "https://dds.bridgewebs.com/cgi-bin/bsol2/ddummy?request=m&dealstr=N:AKQJT98765432...%20.AKQJT98765432..%20..AKQJT98765432.%20...AKQJT98765432&vul=None"

The site responds with a json string

{"sess":{"sockref":"(null)","ddtricks":"0d0d00d0d000d0d00d0d"},"contractsNS":"NS:NS 7S","contractsEW":"EW:NS 7S","scoreNS":"NS 1510","scoreEW":"EW -1510","vul":"0"}

The "ddtricks" item is encoded as a 5x4 matrix of hex digits. The first five hex digits are North's trick taking count (NT, spades, hearts, diamonds, clubs) followed by South, East, West. Directions and suits are always fixed in order. However, the request string can encode any direction as the first character of dealstr ("N:...").

Upvotes: 0

BvO
BvO

Reputation: 31

I have resolved the issue by brute force. The implementation works when this:

  success: function (returndata) {
      $("#theTarget").html(returndata);

is replaced by:

  success: function (returndata) {
    var re = new RegExp(
      '\"(http://mirgo2.co.uk/bridgesolver/uploads/.*?.pbn)\"' +
      '[\\s\\S]*?' +
      '\"(http://dds.bridgewebs.com/.*?=)\"'   
       );
    var myResult = returndata.match( re );

    document.getElementById('theTarget').setAttribute( 'src',
                                 myResult[2] + myResult[1] );

The regular expression extracts the two urls in the returned content. The iframe then displays the data requested by the url.

The observations that led me to this are discussed above.

I highly recommend the IE 11 F12 debugging facilities. Especially the Network tab and sub tabs.

Thanks for listening.

Upvotes: 1

Related Questions