Problem: I am loading a modal form from an ajax call. Within the modal, I have a span element holding an email address. I am needing to capture the value of the span element in javascript. Currently, I have a button click that calls a function to obtain the text.

Code to read text: function AccountHistoryRedeemSendEmail(emailType) { clearNotifications(); console.log('Hit AccountHistoryRedeemSendEmail'); var url = "../../utility/account/ajaxAccountHistoryRedeemSendEmail.aspx"; var params = "eType" + emailType; //console.log($('#lblHRedeemEmailAddress')); console.log('Output text: ' + $('#lblHRedeemEmailAddress').text()); params += "&HRedeemEmailAddress=" + $("#lblHRedeemEmailAddress").text(); params += "&timestamp=" + new Date(); // new Ajax.Request( // url, // { // method: "get", // parameters: params, // onSuccess: parseAjaxResponseAccountHistoryRedeemSendEmail // } // ); }

The error being returned is: "Uncaught TypeError: Cannot read property 'text' of null "

I understand the error is telling me $('#lblHRedeemEmailAddress') is returning a null. Naturally, I have verified my element name to be correct. I have also inspected the element in chrome and verified it is present in the document. Here is html in the document:

<span id="lblHRedeemEmailAddress">[email protected]</span>

< img src="sendemail.jpg" id="SendEmail" alt="Email Certificate" onclick="AccountHistoryRedeemSendEmail('lblEmail');">

So, the question: Why is my lblHRedeemEmailAddress element null when I try to access it from the function? And, how do I fix this?

Problem: I am loading a modal form from an ajax call. Within the modal, I have a span element holding an email address. I am needing to capture the value of the span element in javascript. Currently, I have a button click that calls a function to obtain the text.

Code to read text: function AccountHistoryRedeemSendEmail(emailType) { clearNotifications(); console.log('Hit AccountHistoryRedeemSendEmail'); var url = "../../utility/account/ajaxAccountHistoryRedeemSendEmail.aspx"; var params = "eType" + emailType; //console.log($('#lblHRedeemEmailAddress')); console.log('Output text: ' + $('#lblHRedeemEmailAddress').text()); params += "&HRedeemEmailAddress=" + $("#lblHRedeemEmailAddress").text(); params += "&timestamp=" + new Date(); // new Ajax.Request( // url, // { // method: "get", // parameters: params, // onSuccess: parseAjaxResponseAccountHistoryRedeemSendEmail // } // ); }

The error being returned is: "Uncaught TypeError: Cannot read property 'text' of null "

I understand the error is telling me $('#lblHRedeemEmailAddress') is returning a null. Naturally, I have verified my element name to be correct. I have also inspected the element in chrome and verified it is present in the document. Here is html in the document:

<span id="lblHRedeemEmailAddress">[email protected]</span>

< img src="sendemail.jpg" id="SendEmail" alt="Email Certificate" onclick="AccountHistoryRedeemSendEmail('lblEmail');">

So, the question: Why is my lblHRedeemEmailAddress element null when I try to access it from the function? And, how do I fix this?

• javascript
• jquery
• html
• asp
• ajax

• 1 looks like $ is not referring to jQuery try jQuery('#lblHRedeemEmailAddress').text() instead – Arun P Johny Commented Oct 24, 2014 at 11:51
• Arun, that was the issue. Thank you! – Aaron Ward Commented Oct 24, 2014 at 12:35

1 Answer 1

If lblHRedeemEmailAddress didn't exist, jQuery would return an empty result set, upon which you would still be able to call text. $ is probably referring to some other library, such as prototype.

Read up on noConflict or create a closure where $ is set to jQuery:

(function($) {
   // for anything in here, $ will be jQuery
})(jQuery);