CreateUserWizard - DuplicateUser Error Message not getting clear - Part 2 (jQuery)

Problem:

In Part-1 I tried to solve this problem using JavaScript. Here I will share the code to do the same using jQuery.

If you are new to jQuery, I will suggest you to first go through THIS short and sweet article to begin with before jumping to this code.

To get to know the background please refer Part-1.

So lets see what needs to be done to solve this problem using jQuery.

Steps:

1. Setup your page to use jquery. How-To ?

2: Convert CreateUserStep to Template. Sample ClickHere.

3: Find LiteralControl named ErrorMessage ...change it to Lable Control:

<td align="center" colspan="2" style="color:Red;">

<asp:Label ID="ErrorMessage" runat="server" CssClass="errmsg" EnableViewState="False"></asp:Label>

</td>

Note I added CssClass="errmsg". You don't need to have that class in your stylesheet. It is just what we will use to find this button in jQuery. 

4: Convert CUW to CustomNavigationTemplate . This is to get CreateUser button in .aspx source.

5: Add CssClass  to Create Button like below:

<CustomNavigationTemplate>

<table border="0" cellspacing="5" style="width:100%;height:100%;">

<tr align="right">

<td align="right" colspan="0">

<asp:Button CssClass="btncreate" ID="StepNextButton" runat="server" CommandName="MoveNext"

Text="Create User" ValidationGroup="CreateUserWizard1" />

</td>

</tr>

</table>

</CustomNavigationTemplate>

Again Note I added CssClass="btncreate". You don't need to have that class in your stylesheet. It is just what we will use to find this label in jQuery. 

6: jQuery Code:

<script type="text/javascript"> function clearMsg(id)

{

var lbl = document.getElementById(id);

lbl.innerHTML="";

lbl.innerText="";

};

$(document).ready(function() {

$(".btncreate").click(function() {

var id = $('.errmsg').attr('id');

if (id != null) {

clearMsg(id);

}

});

});

</script>

So what we are doing in jQuery code in Step 6 ??

 Simply we are telling what to do when create Button is clicked, but in jQuery manner. Note we are using "btncreate" i.e. Css Class name to reference the Create Button. Then on click event of that button we are getting 'id' of the ErrorMessage Label and passing it to our function clearMsg. This function (clearMsg) gets the label using the id passed to it and clear its innerHTML and innerText.

Conclusion:

This is another way to clear the ErrorMessage set by server-side in CreateUserWizard. This code looks more complex than the one in part 1.

I have not gone into details of how jQuery works. Sorry for being so lazy to write in more detail. Thanks for your time.