Need help with an AJAX workflow
Sorry, I couldn't be more descriptive with the title, I'll cover in detail below:
I have a web application in which I want to implement some AJAX functionality. It is currently running ASP.NET 3.5 with VB.NET codebase. My current "problem" is that I want to be able to dynamically fill the DIV when the user clicks an item in the list. The list item currently contains a string HttpUtility.UrlEncode()
(ASP.NET) of content to appear in the DIV.
Example:
<li onclick="setFAQ('The+maximum+number+of+digits+a+patient+account+number+can+contain+is+ten+(10).');">
What is the maximum number of digits a patient account number can contain?</li>
I can partially decode the string using a JavaScript function unescape()
, but it doesn't fully decode the string. I would rather pass the id faq to the JavaScript function, and then somehow pull the information out of the database where it originated from.
I'm 99% sure it's impossible to call an ASP function from within a JavaScript function, so I'm a bit stumped. I'm kind of new to AJAX / ASP.NET, so this is a learning experience for me.
source to share
First of all, if you are pulling questions from the db on page load, you most likely have all the answers too, so just continue with your current approach, shuffling the answers around on the page, as your code sample does.Unless your FAQ list contains thousands and thousands of questions, doing this "AJAX way", hitting db on every click of a list item, there isn't much for you here. If it has a lot of questions, then a straight list is the wrong way to go anyway.
Second, there are two things to keep in mind:
- you put html inside html attribute
- the attribute specifies the javascript function to call
So, you need to make sure your "answer" escapes both html and valid js. By valid js, I mean it cannot have newlines and must escape quotes properly. For example the following html - although valid html - will not trigger onclick and you will just get a js syntax error:
<li onclick="setFAQ('This line's
multi line and has a single quote in it!')"
To account for this, I would say that HttpUtility.HtmlAttributeEncode
in tandem with is System.Web.Script.Serialization.JavaScriptSerializer
more appropriate for the markup you showed.
JavaScriptSerializer json = new JavaScriptSerializer();
string answerString = "This line's\nmulti line and has a single quote in it!";
string onClickJS = String.Format("setFAQ({0})", json.Serialize(answerString));
string onClickAttr = HttpUtility.HtmlAttributeEncode(onClickJs);
Better yet, use a .NET object ListItem
and lose completely HtmlAttributeEncode
:
ListItem faqItem = new ListItem(questionString);
faqItem.Attributes.Add("onclick", String.Format("setFAQ({0})", json.Serialize(answerString)));
The html part is automatically escaped for you, plus it's much cleaner.
As far as your javascript is concerned, you don't need to decode anything in setFAQ()
. Just take its argument and include the "div" response in it:
function setFAQ(answer) {
document.getElementById('answer').innerHTML = answer
}
source to share