jQuery question

member4953 · July 6th, 2010, 04:25 PM

Imar,

At the end of Chapter 11 you encourage "experiment and experiment". I am.

When you discussed JavaScript in a previous chapter there was a lot of discussion about identifying items on a page within a master page because of the way the name is changed. Thus we would use something like document.getElementById('<%=TextBox1.ClientID %>') to get the name of the desired control.

How do we do the same in jQuery if want to write a click event handler for a specific button? At the moment I am getting an error stating that there is no object.

Thanks.

Imar · July 7th, 2010, 03:03 AM

Hi there,

You have a couple of options:

1. Use <%=TextBox1.ClientID %> which should work fine in a jQuery statement as well as by the time the jQuery hits the browser, <%=TextBox1.ClientID %> has been changed to the control's client id.

2. Use a static ID by setting ClientIDMode. May not be practical in all circumstances, but is really easy when available.

3. Assign a class to your control using CssClass and then find controls with jQuery using the .ClassName selector.

Hope this helps,

Imar

member4953 · July 7th, 2010, 10:00 AM

Imar,

I am trying to wrap my head around the purpose of jQuery. I have heard that it is intended to formulate a JavaScript library that will work on most, if not all, browsers, unlike raw JavaScript. Is that right?

If so, what is it that jQuery is doing that makes this so? How much of jQuery is peculiar to jQuery and how much of jQuery is repackaged JavaScript?

Your examples in the book are good. Where my problem comes is in extending those examples to new issues ("experiment, experiment"). I am wrapped about an axle that I think has jQuery at one end and JavaScript at the other.

Does that make sense? If not, my problem may be in barking up the wrong tree.

Thanks.

member4953 · July 7th, 2010, 10:54 AM

To be more specific I am trying to get this code to work:

Code:

$(document).ready(function ()
{
function validateCampaignData()
{
var campaignNameTextBox = document.getElementById('<%=TextBox_campaignName.ClientID %>');
var campaignOwnerTextBox = document.getElementById('<%=TextBox_campaignOwner.ClientID %>');
var campaignDescriptionTextBox = document.getElementById('<%=TextBox_campaignDescription.ClientID %>');
var test01 = (campaignNameTextBox.value != '');
var test02 = (campaignOwnerTextBox.value != '');
var test03 = (campaignDescriptionTextBox.value != '');
if (test01 && test02 && test03)
{
returntrue;
}
else
{
alert("Please fill-in campaign name, owner and description.");
returnfalse;
}
}
});

This is intended to be associated with a button:

Code:

<asp:ButtonID="Button_startNewCampaign"runat="server"Text="Start New Campaign" OnClick="Button_startNewCampaign_Click" OnClientClick="return(validateCampaignData())"/>

When I eliminate this:

Code:

 
$(document).ready(function ()
{

});

It works as basic JavaScript code. When I have it as shown and I click the button I get an error ("Microsoft JScript runtime error: Object expected").

My page is similar to the page you construct in Chapter 11.

Thanks for any insight you can provide.

Imar · July 7th, 2010, 11:18 AM

Quote:

I have heard that it is intended to formulate a JavaScript library that will work on most, if not all, browsers, unlike raw JavaScript. Is that right?

Not entirely. JavaScript *is* cross as all modern browsers support it. However, the way they support it is inconsistent. E.g. behavior differs between browsers, and some have a wider feature set than others. jQuery overcomes this by providing a layer on top of JavaScript that works the same, regardless of the browser used. Interally, it makes up for the quirks and differences between browsers by having different behavior depending on the supported features and their implementation.

With regard to your example: you're mixing two things up. Either don't use the jQuery docuent ready, but simply use OnClientClick and your validateCampaignData function, or use jQuery's document ready, drop the function header for validateCampaignData and inside the doocument ready block dynamically bind the click handler to the controls and provide it the code you want to excute. For more info about the latter: http://api.jquery.com/bind/

For future posts, can you please a) use the Remove Text Formatting button on the editor's toolbar to clear color coding and work around a bug in this forum that deletes spaces and b) post the resulting HTML in the browser? The former makes it easier to see what you're trying to do, and the latter shows how your code ends up.

Cheers,

Imar