Forum:

HTML Pages with CSS and JavaScript

Question on jQuery ajax functionality & troubleshooting called bean in JSF page

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

The objective in this function is that when I enter a value in the toAccountNumber text field and then move off of the text field then the selected option in my facilityCodes drop down would be selected from the ajax call I'm making via the jsp page below. However, it would appear that I am not getting to the method in my backing bean and therefore I'm not getting the value from the backing bean to match to the select option.

I am assuming that my debugger will not execute when executing the jQuery code, is that correct?

After trying my ajax call and could not get my debugger to execute I just put in an alert to see if I could see the value of "data" but there I'm getting a dialog box with the rendered HTML code in it and not the value I should be getting from the bean in the jsp that I'm calling.

My jQuery code is:

The code in my changeSelectedFacilityCode.jsp page:

Any help/direction would be greatly appreciated. Thank you.

Eric Pascarello

author

Posts: 15385

posted 9 years ago

have you used a tool such as Firebug or Fiddler to see the XMLHttpRequest go out and come back?

Eric

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

Melinda Savoy wrote:I am assuming that my debugger will not execute when executing the jQuery code, is that correct?

Which debugger?

In any case, giving us JSP doesn't help us at all--we need the rendered HTML, as has been mentioned to you previously.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

I have not tried Fiddler. I will try that now. My apologies I forgot to mention that I am working in IBM RAD 7.5.5.1 and using it's debugger. I will send the rendered HTML momentarily. Thanks.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

My alert gives me the following in the Message from webpage dialog box:

Here is my rendered HTML code from view source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
 
 
<html>
<head>
<title>A/R Transfer Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript" src="js/calendar_us.js"></script>
<script language="JavaScript" src="js/jquery-1.4.2.js"></script>
<script language="JavaScript"> 
	$(function() {
		$("#ARTransferForm\\:toAccountNumber").blur(function() {
	   		var toAccountNumber = $(this).val().substring(0,2);
	   		$.get('changeSelectedFacilityCode.jsp', {text:toAccountNumber}, function(data) {
	   			alert('This is what is in data' + data);
	   			//$('select[id$=facilityCodes]').val(data);
            });
	   	});
   	});
</script>
<link href="theme/stylesheet.css"  rel="stylesheet" type="text/css">
<link href="theme/calendar.css" rel="stylesheet" type="text/css">
</head>
<body>
	
<form id="ARTransferForm" name="ARTransferForm" method="post" action="/CSC-ARXfer/faces/index.jsp" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="ARTransferForm" value="ARTransferForm" />
 
		<tr style="border: none">
			<td align="left" style="border: none" colspan="2"><font face="Arial" size="2"><b><u>INFO</u>:</b></font></td>
		</tr>			
		<table width="790" border="2" align="center">
			<tr style="border: none">
				<td align="left" style="border: none" colspan="2"><font face="Arial" size="2" color="blue"><b>A/R Transfer Application</b></font></td>
			</tr>
			<tr style="border: none">
				<td align="left" style="border: none"><font face="Arial" size="2">User: </font><font color="red"><b>SAVOYM</b></font></td>
				<td align="left" style="border: none"><font face="Arial" size="2">Entry Date: </font><font color="red"><b>08/31/2010</b></font></td>
			</tr>
		</table>
		<br/>
		<tr style="border: none">
			<td align="left" style="border: none" colspan="2"><font face="Arial" size="2"><b><u>DETAILS</u>:</b></font><br><br></td>			
		</tr>
		
		<table width="790" border="2" align="center">
			<tr style="border: none">
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">From Account No.</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:fromAccountNumber" type="text" name="ARTransferForm:fromAccountNumber" maxlength="20" size="10" /> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Account No.</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toAccountNumber" type="text" name="ARTransferForm:toAccountNumber" maxlength="20" size="10" /> </td>
			</tr>
			<tr style="border: none">
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">From Patient Name</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:fromPatientName" type="text" name="ARTransferForm:fromPatientName" maxlength="60" size="10" /> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Patient Name</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toPatientName" type="text" name="ARTransferForm:toPatientName" maxlength="60" size="10" /> </td>
			</tr>			
			<tr style="border: none">
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">From Unit No.</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:fromUnitNumber" type="text" name="ARTransferForm:fromUnitNumber" maxlength="10" size="10" /> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Unit No.</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toUnitNumber" type="text" name="ARTransferForm:toUnitNumber" maxlength="10" size="10" /></td>
			</tr>		
			<tr style="border: none">
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">From Plan Code</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:fromPlanCode" type="text" name="ARTransferForm:fromPlanCode" maxlength="10" size="10" /> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Plan Code</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toPlanCode" type="text" name="ARTransferForm:toPlanCode" maxlength="10" size="10" /></td>
			</tr>
			<tr>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">From Service Date</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap>
					<input id="ARTransferForm:fromServiceDate" type="text" name="ARTransferForm:fromServiceDate" maxlength="10" size="10" />
					<script language="JavaScript">
						new tcal ({
						'formname': 0,
						'controlname': 'ARTransferForm:fromServiceDate'
						});
					</script> <font face="arial" size="1" color="red"><i>(Click the calendar icon to set the From Service Date)</i></font>
				</td>
				<td style="border: none" colspan="2" nowrap> </td>
			</tr>
			<tr>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">From Account Amt</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap>
					<input id="ARTransferForm:fromAccountAmt" type="text" name="ARTransferForm:fromAccountAmt" maxlength="10" size="10" /> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Account Amt</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toAccountAmt" type="text" name="ARTransferForm:toAccountAmt" maxlength="10" size="10" /></td>
			</tr>
			<tr>
				<td style="border: none" colspan="2" nowrap> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Facility Code</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap>
					<select id="ARTransferForm:facilityCodes" name="ARTransferForm:facilityCodes" size="1">	<option value="0" selected="selected">Select Facility Code</option>
	<option value="Y">Y-THA</option>
	<option value="X">X-THAMH</option>
	<option value="I">I-THAZ</option>
	<option value="V">V-THC</option>
	<option value="D">D-THD</option>
	<option value="T">T-THDN</option>
	<option value="A">A-THFW</option>
	<option value="C">C-THHEB</option>
	<option value="K">K-THK</option>
	<option value="P">P-THP</option>
	<option value="V">V-THS</option>
	<option value="N">N-THSH</option>
	<option value="G">G-THSW</option>
	<option value="W">W-THW</option>
</select>
				</td>
			</tr>
			<tr>
				<td style="border: none" colspan="2" nowrap> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">To GL Acct No.</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toGLAccountNumber" type="text" name="ARTransferForm:toGLAccountNumber" maxlength="20" size="10" /></td>
			</tr>
			<tr>
				<td style="border: none" colspan="2" nowrap> </td>
				<td align="left" style="border: none" nowrap><font face="Arial" size="2">Reason Code</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap>
					<select id="ARTransferForm:reasonCodes" name="ARTransferForm:reasonCodes" size="1">	<option value="0" selected="selected">Select Reason Code</option>
	<option value="1">1-Xfer Pmt to Correct Pat Acct</option>
	<option value="2">2-Xfer Pmt to Correct Ins Plan</option>
	<option value="3">3-Xfer Pmt to Correct Unit #</option>
	<option value="4">4-Xfer Pmt Made via P/R Ded</option>
	<option value="5">5-Interest/Late Penalty Payment</option>
	<option value="6">6-Xfer Pmt to GL Acct</option>
</select><br>
				</td>
			</tr>
		</table><br/><br/>
		<table width="790" border="0" align="center">
			<tr>
				<td style="border: none" align="center" colspan="4" nowrap><input type="submit" name="ARTransferForm:j_id_jsp_453235467_21" value="Submit" /></td>
			</tr>
		</table>
		<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1:j_id2" />
</form>
</body>
</html>

Thanks for taking the time to take a look at this and help me with my issue. Thank you again.

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

Have you verified that this selector, $("#ARTransferForm\\:toAccountNumber"), is returning what you think it is? I'm not convinced that's the correct ID, but I could be wrong. I'd also be nervous about cross-browser compatibility.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

I did verify that the selector is indeed returning a value because I did an alert there before modifying my code.

Can you tell me how in my debugger when I call the bean from the changeSelectedFacilityCode.jsp page that I jump over to my code? I put a breakpoint there but I never get there so I cannot see what is actually going to my java code. Hope that makes sense.

Thanks.

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

Did an alert where?

Have you used anything to see if the request is being sent from the browser? Someone else mentioned Fiddler, or Firebug, or any other similar tool?

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

I had done an alert right above the $.get in the code below:

I am working on a support issue at the same time that I'm working with you so I've not been able to get Fiddler started unfortunately. I may have to wait until tomorrow to get back with you on this. Sorry for the delay but thanks for your help.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

I finally got Fiddler2 to work as I had forgotten that it does not like using http://localhost:...

At any rate, the request header looks like this:

The rendered HTML, per Fiddler2, again look like:

I don't know if this helps but the http looks like this in the response section of Fiddler2 down at the very bottom of the screen:

The ?text=46 at the end of my http is the value that is being passed as a parameter in my jQuery code above.

I have a question - when jQuery executes the code and I have a breakpoint in the java bean in RAD, should the break point not be executed in my IDE, if the bean is actually being executed by jQuery?

Again, any help/direction on what I'm doing wrong would be greatly appreciated. Thank you.

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

Melinda Savoy wrote:should the break point not be executed in my IDE, if the bean is actually being executed by jQuery?

Should it *not* be executed? I'm not sure how to parse your sentence.

If the code where the breakpoint is set is being executed, and you're in debug mode, the code should stop executing at the breakpoint.

I guess I'm a little confused: what are you expecting as a response from your Ajax call? In the blur() function you're trying to set a select element's value, so wouldn't you want a number (or whatever) back? You're calling a JSP that appears to render an entire form.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

You're correct, I misstated the breakpoint which is I would like the code to STOP executing at the line where I have the breakpoint in my java code once I type in the value in my text field and then move off the field. My understanding is once I move off the text field the method being called in my jsp page should execute - maybe I'm misunderstanding the way this should work.

You're also correct in that I DO WANT A VALUE RETURNED TO ME so that that the value in "data" can be used ultimately to SELECT the option from the dropdown id called "facilityCodes". I'm not sure why I'm getting the form returned to me therein lies my question to this forum. Right now I'm just trying to do an alert on the "data" value in the jQuery code so that I can see what is being returned to me from the ajax call.

This is the first time I've used jQuery and therefore the reason for my questions.

Hope this makes sense. If not, my apologies.

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

You're getting HTML back because you're calling a JSP page that renders a form, no?

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

I'm working in JSF and I understand that I cannot call a java bean directly from jQuery except through a URL which is why I created this specific JSP page which is in my initial post above. How can I get the value of the bean returned to me?

Thanks.

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

The JSP needs to render whatever it is you want returned, through whatever mechanism(s) JSF allows you.

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 9 years ago

I did some research on accessing a managed bean directly and it seems to require writing a Servlet that your Ajax request can hit which looks up the bean from the FacesContext and then you would just call methods on that bean from the servlet and return whatever data you wanted. Not the end of the world but not a great solution either. All the other Ajax solutions require you to use more tags like the ajax tag in JSF 2 or a component library like Icefaces that already has it built in. What a mess.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

Thanks, Gregg. The more I work with JSF the more I dislike it. I know in Stripes we could just call the action method in the URL for jQuery from our JSP page and life was good.

JSF is definitely not very easy to work with. I'll post to jQuery itself and see if anyone there is working with JSF at all and how to return only the contents of the bean I'm calling and NOT the entire form.

Thanks again.

David Newton

Author

Posts: 12617

I like...

posted 9 years ago

Ew. Isn't there a way to have a managed bean "call through" to a service that could be exposed in a variety of ways? Or is just like any other facade/wrapper/etc. and it's just not designed to be used like that (accessed directly)?

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 9 years ago

David Newton wrote:Ew. Isn't there a way to have a managed bean "call through" to a service that could be exposed in a variety of ways? Or is just like any other facade/wrapper/etc. and it's just not designed to be used like that (accessed directly)?

There probably is and it's probably hidden deep in the entrails of the tags if anyone took the time to muck through it. I haven't used JSF in years (thank God). If anyone around here knows it is probably Tim Holloway.

Melinda, you might consider asking David's question in the JSF forum. The folks that hang out there will probably be more help when it comes to this kind of info. This thread is really treading between 2 different topics at this point.

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

I am very new to JSF and my understanding is that I need to call the bean directly from the JSF page via a JSF component. I am trying to do that here as indicated in my initial post but that is returning an entire form in my jQuery code and not just the value of the bean that I'm calling. That is what is tripping me up. I thought it was a jQuery issue.

To be honest, I do not think I'm ever getting to my bean from the call to this JSP page. But without having the debugging capabilities (for whatever reason not executing), I cannot tell what is going on.

Just banging my head...

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

Thanks, Gregg. I'll try posting David's question there.

Everyone's time and help are very much appreciated.

Regards.

Lee' Bin

Greenhorn

Posts: 16

I like...

posted 9 years ago

David Newton wrote:You're getting HTML back because you're calling a JSP page that renders a form, no?

I think he said is correct。

Melinda Savoy

Ranch Hand

Posts: 387

I like...

posted 9 years ago

That is correct. After doing some more research and getting some more help from the jQuery forum, the rendered HTML form should render the value in a "generated" SPAN. After making some suggested changes to the 2nd JSP page that I'm calling in jQuery, I am now getting an error that says that the managed bean is NOT FOUND.

Once that is fixed then per jQuery I should see the value in my rendered HTML and pick it up from there. We'll see. Thanks.

This parrot is no more. It has ceased to be. Now it's a tiny ad:

Two software engineers solve most of the world's problems in one K&R sized book

https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton