0

I have javascript HTML page which has an action POST to a python file. The python code is supposed to send back a JSON to the HTML. I just do not know how to catch the JSON and parse it. I think I can parse it fine if I catch it, and for the life of me I can't get this to work. Below is the HTML code excerpt as well as the python code excerpt. The JSON is even supposed to be really simple with just one value in it!

HTML CODE EXCERPTS: 

<form action="http://www.MYURLHIDDENHERE.com/cgi-bin/new.py" id="form" method="post" enctype="multipart/form-data" target="resIframe">

    <div style=" width: 0px; height: 0px; overflow: hidden;" >
        <input type="hidden" name="random" id="random" value="">
        <iframe src="" name="resIframe" id="resIframe" onload="iframeLoaded();" ></iframe>
    </div>

And here's where I try to catch it: 

function iframeLoaded() {
var result = $.parseJSON($("#resIframe").contents().find("html").html())
.....
}

I wonder if I am doing something wrong with the "target" stuff above? If I print $("#restIframe") its just an [object Object]. Essentially I am not sure if I am catching the JSON response back in HTML.

And here's the py code excerpt: 

#!/usr/bin/python -tt
# -*- coding: utf-8 -*-
import cgi, os
import cgitb; cgitb.enable()

form = cgi.FieldStorage()
data = {'score': 50}
print "Content-Type: text/html"
#print "Content-Type: application/json"
print

print json.dumps(data)

I've spent HOURS on this and read numerous examples/blogs so any help would be really appreciated!

ads
  • 1
  • 2
  • What does `$("#resIframe").contents().find("html").html()` return? It's probably better to handle the form submit via `$.ajax`. Without seeing the actual data returned from POST it's hard to know. Can you use your console and post the POST data return from PY? – Michael Tallino Jul 11 '15 at 00:53
  • The ("#resIframe") is only a specific Iframe where I want to print the output. Instead of $.parseJSON I have also tried $jQuery.parseJSON and none of them seem to work. I don't think POST is actually returning anything to the HTML file - that's the problem! – ads Jul 11 '15 at 01:17
  • How do I check what the POST data return from PY is, in the console? – ads Jul 11 '15 at 01:19
  • Chrome: http://stackoverflow.com/questions/9163251/chrome-source-of-post-data Firefox: https://addons.mozilla.org/en-us/firefox/addon/firebug/ – Michael Tallino Jul 11 '15 at 01:20
  • Thanks for chrome developer tools! Seems super useful for future as well - used it to check what's returned: Its just returning "null". That seems to be the problem. Looks like I am just not catching the JSON that's supposed to be sent back by the PY code. – ads Jul 11 '15 at 01:37
  • I know that the call is going to python as from python I'm also saving the data sent through the form (e.g. an image). But the return from python to HTML doesn't seem to be happening :( – ads Jul 11 '15 at 01:39
  • This thread shows what the intention was: http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript , i.e. the hope was python returns html results to resIframe since that was the specified "target" in the POST call. But nothing seems to be returning there. – ads Jul 11 '15 at 01:54
  • Looking at http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript ---- I tried $.parseJSON($("#resIframe #resIframe").contents().find("html").html()) ---- but this turns out to be "null". What am I doing wrong? – ads Jul 11 '15 at 04:14
  • For more info: var tempnow = $('#resIframe #resIframe').contents().find("html").html(); GIVES "undefined" and var iframe = document.querySelector('#resIframe'); GIVES "[object HTMLIFrameElement]" and var result = $.parseJSON($("#resIframe #resIframe").contents().find("body").html()); GIVES "null". Any help with debugging would be really appreciated! – ads Jul 11 '15 at 04:50
  • `$("#resIframe").contents().text()` will do – initialxy Jul 11 '15 at 06:22
  • Nope that doesn't seem to work! var tempnew = $("#resIframe #resIframe").contents().text(); -> this returns empty text and var tempnew = $("#resIframe").contents().text(); -> this does not even execute. I wonder if this could be an issue with godaddy handling iframes? – ads Jul 11 '15 at 06:47
  • Hold on a sec, where are you running this script? You must be running it on `http://www.MYURLHIDDENHERE.com` otherwise browser's [cross-origin request](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) security policy will block it. If you are running this on `localhost` to test your code, you have to disable Chrome's security policies. See [here](http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome). – initialxy Jul 11 '15 at 07:01
  • > $("#resIframe").contents().text(); -> this does not even execute What exactly do you mean by does not even execute? You saw a big red error that complains about cross-origin content being blocked didn't you? – initialxy Jul 11 '15 at 07:07
  • Yes I am running the script on the same site in godaddy. The script is in cgi-bin/ folder with public_html. And by "it didn't even execute" I meant, there was no error, but the iframe the html page didn't load anything else in the iframe either. It seemed to be "stuck" trying to do something. – ads Jul 11 '15 at 07:18
  • Did your `http://www.MYURLHIDDENHERE.com/cgi-bin/new.py` ever work? Judging by your Python code, it's not exclusively responding to POST request. So just load up `http://www.MYURLHIDDENHERE.com/cgi-bin/new.py` in your browser tab and see if you see anything at all. Also the reason why `$('#resIframe #resIframe')...` seems to kind of work is not because it works better, but because the selector `#resIframe #resIframe` didn't match anything at all, so jQuery just gave you a dummy wrapper. See, this is when it'd be super duper useful to master Chrome debugger. Watch the network tab. – initialxy Jul 11 '15 at 07:45
  • The jQuery selectors make no sense .. can only have one `#resIframe` since ID's are unique and `find('html')` will never work – charlietfl Jul 11 '15 at 12:36
  • And yes the python itself DOES work! For instance if I remove the target from the form action, i.e., make it
    then it indeed redirects to http://www.MYURLHIDDENHERE.com/cgi-bin/new.py and prints the correct output: {'score': 50}. This is why I suspect the error is with html catching the post back.
     – ads Jul 11 '15 at 15:55
  • I wonder if it could be a godaddy error because of something like this: http://stackoverflow.com/questions/5863326/godaddy-injecting-html-into-pages-while-using-preview-dns Tried all this also doesn't work - http://stackoverflow.com/questions/16103407/get-html-inside-iframe-using-jquery – ads Jul 11 '15 at 16:00
  • Tried everything here as well: http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript Again to reiterate, the python code is working just fine, and if I remove the target="resIframe" from the form act="..", then it redirects to the python page and gives the correct output! So seems like the problem is only in the output being returned to the html iframe OR in me being unable to extract the body from the returned iframe. – ads Jul 11 '15 at 16:07
  • See, here is where you fire up your debugger-fu. Random strangers on the internet can't do magic. You want to see a few things from the Chrome debugger to know where it went wrong. 1. Keep Network tab open. Once you submit, do you see a new request appear there? If yes, click on it and then click on response tab. Do you see your JSON? 2. If yes, click on Elements tab at top. Use the magnifying glass icon to find your iframe and see what's in there. 3. If you see your JSON. Now go to Console tab and just fire up some JS actions and see what you get. Try to just get your iframe's contents out. – initialxy Jul 11 '15 at 18:20
  • So did all your suggestions. When I hit submit, there IS a new request, and there is a response and the response indeed has my JSON! So the response is: {"score": 50}. Now step 2 of your suggestion, clicking magnifying glass icon on top of iframe here is what I see only - h1#score 750px x 132px - so no JSON there! – ads Jul 12 '15 at 02:36
  • Sorry now it seems to be fixed!!! There was some image questionMark.png that I was adding to the iFrame but didn't have that image in the location. Wow can't believe that messed with it AND that I missed it. Thanks a lot initialxy! Also now with $("#resIframe").contents().text() I get {"score": 50}. So I guess I just need to extract the number 50 from this JSON. – ads Jul 12 '15 at 02:45
  • Also thanks again now I will definitely use Chrome debugger regularly! – ads Jul 12 '15 at 04:06

1 Answers1

0

$("#resIframe").contents().text() worked as initialxy suggested and thanks a lot to initialxy for help with debugging overall!

ads
  • 1
  • 2