jQuery not returning to calling page 1

wbodger · Mar 7, 2014

I have this code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<title>Proof of Concept PR3327</title>
<script type="text/javascript" src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>[/URL]
<script type="text/javascript">
    $(function () {

        $("#frm-send").submit(function () {

            $, get("GetPptInfo.asp", function (data) {
                $(".result");
                alert("it worked");
            });
            return false; // don't let the form be submitted
        });

    });
</script>
</head>
<body>

<form name="GetPptInfo" action="GetPptInfo.asp" method="POST"> 
    Enter ppt id: <input type="text" id="pptid" name="pptid" />
    <input type="submit" value="submit" />
</form>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>

in one page, that sends the form info to GetPptInfo.asp, which *should* (or so I thought) run the code and send the result back to the calling page. Instead it stays on GetPptInfo.asp:

Code:

<%Option Explicit%>
<!-- #include file="../../lib/out.inc" -->
<!-- #include file="../../lib/liHead.inc" -->

<%
'response.ContentType="text/HTML"
'response.Charset="ISO-8859-1"
dim pptid : pptid = request("pptid")

session("dataEntrySiteID")=left(pptid,3)

on error resume next
dim pptsql : pptSQL = "SELECT coalesce(CONVERT(int,formversion),0) as formversion  FROM dbEDRN316.dbo.vwMaxConsentFormVersion where study_participant_id='"&pptid&"'"
dim rs1 : rs1 = RunWithRS(pptsql)

if rs1("formversion")=0  then
response.write("this is not a valid participant id, please try again.")
else

dim irbsql : irbsql = "SELECT max(LEFT(version,1) ) as formversion FROM [NewCompass].[dbo].[tblProtocolSiteIRBInfo] where protocolID="&session("selected[s][/s]protocolid")&"and deleteflag=0 and siteid="&session("dataentrysiteid")
dim rs2 : rs2 = RunWithRS(irbsql)

if err <> 0 then
  response.write(err.description)
  response.write("<br>Damn it Jim, I am a doctor, not a magician!")
else
  if rs2("formversion") > rs1("formversion") then

  response.write("There is a newer IRB approved version of the forms. Has particpant "&pptid&" reconsented for version "&rs2("formversion")&"?")
  else
  response.write("Its all good, no worries")
  end if
  set rs1=nothing
  set rs2=nothing
  rs1.close
  rs2.close
end if
end if
on error goto 0
%>

The code works, it does everything that I have asked it to EXCEPT making this call ala AJAX and simply updating the div on the calling page, it displays my response.write, but it stays on GetPptInfo.asp. I would like it t return that response.write info to the calling page (pptinfo.asp) and update a div on that page. Help?

Willie

jpadie · Mar 8, 2014

Code:

 [COLOR=#EF2929]$, get("GetPptInfo.asp", function (data) {[/color]
                $(".result");
                alert("it worked");
            });
            return false; // don't let the form be submitted

that does not look right. so probably the function is not firing and the form submitting.

the normal shorthand function is

Code:

$.get(url, function(data){});

or use the long hand (more flexible) ajax call $.ajax({options})

wbodger · Mar 10, 2014

OK, if I change my code to this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<title>Proof of Concept PR3327</title>
<script type="text/javascript" src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>[/URL]
<script type="text/javascript">
    $(function () {

        $("#frm-send").submit(function () {
            var data = $(this).serialize(),
          action = "GetPptInfo.asp",
          method = "post";

            $.ajax({
                url: action,
               type: method,
                data: data
            })
                .done(function(data) {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            });
            return false; // don't let the form be submitted
        });
</script>
</head>
<body>
<form name="GetPptInfo"> 
    Enter ppt id:
    <input type="text" id="pptid" name="pptid" />
    <input type="submit" value="submit" />
</form>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>

then I get nothing returned (at least not that I can see. Is this because of the asynchronous nature of ajax? Am I trying to use it incorrectly? I know that I don't quite get it and I have read many blogs and articles, but until I can get it to work I have a hard time really taking it apart and understanding it. GetPptInfo.asp does a response.write for the different scenarios it comes up with dependent upon user input. Thank you for your help

wb

jpadie · Mar 10, 2014

there are some errors in your javascript and html code. Between them they will break the functionality.

try this instead

Code:

<!DOCTYPE html>
	<html>
		<head>
			<title>Proof of Concept PR3327</title>
				<script type="text/javascript" src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>[/URL]
				<script type="text/javascript">

					$(document).ready(function(){
					
						$("#frm-send").on('submit', function(e){
							e.preventDefault();
							$.ajax({
								url: "GETPptInfo.asp",
								type: "POST",
								data: $(this).serialize(),
								dataType: 'html',
								success: function(data){
									$('#txtHint').html( data );
								}
							});
						});

					});
				</script>
		</head>
		<body>
			<form name="GetPptInfo" id="frm-send"> 
				<div>
					Enter ppt id:
						<input type="text" id="pptid" name="pptid" />
						<input type="submit" value="xsubmit" />
				</div>
			</form>
			<div id="txtHint">Customer info will be listed here...</div>
		</body>
	</html>
</html>

wbodger · Mar 10, 2014

That did it, thanks! Now... I see that I did not name the form what I was calling it. In the Success: function(data) and $('txtHint').html(data), are those both referring to the data that was part of the ajax call? So those were both dependent on the data that was submitted and this is how they are bound? Is this an example of deferred?

Again, thank you
wb

jpadie · Mar 10, 2014

the .success option in the ajax handler calls a function when the ajax request has been successfully responded to.

the .html() method returns the current html of the element selected. if you pass any value it substitutes the html of the selected element with the value passed.

in this case we pass 'data' which is the the variable passed into the success function. which in turn is the html that your server returns as a result of the ajax call (not what is uploaded, but what is received). personally i prefer to use json.

i am not sure what you mean by deferred. no; it is not a jQuery deferred process, but rather ajax is inherently asynchronous, so the success handler gets called at some arbitrary point in time when the response is received. in the meantime the rest of the function is executed. In the alternative you can force the ajax request to be synchronous by adding an option {async : false}

wbodger · Mar 10, 2014

Got it, thank you very much for the response. Now, how would this be done differently with JSON, if you have the time? I have no particular directive for how to accomplish this and am looking for possible solutions for the final implementation.

Continuing thanks,
wb

jpadie · Mar 10, 2014

i don't know about json with asp. in php you would return something like this

Code:

$return = array('result'=>'ok', 'data'=>array('orange', 'banana', 'apple'));
echo json_encode($return);
die;

then in javascript

Code:

$.ajax({
    url: "GETPptInfo.asp",
    type: "POST",
    data: $(this).serialize(),
    dataType: 'json',
    success: function(data){
        if(data.result == 'ok'){
            var s = '';
            for(var i = 0 ; i < data.data; i++){
                s = s & data.data[i] & '<br/>';
            }
            $('#txtHint').html( s );
        }
    }
});

wbodger · Mar 10, 2014

Got it, thx again!

jpadie · Mar 10, 2014

this line was wrong

Code:

for(var i = 0 ; i < data.data; i++){

it should have been

Code:

for(var i = 0 ; i < data.data[red].length[/red]; i++){

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

jQuery not returning to calling page 1

wbodger

Programmer

jpadie

Technical User

wbodger

Programmer

jpadie

Technical User

wbodger

Programmer

jpadie

Technical User

wbodger

Programmer

jpadie

Technical User

wbodger

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor