UserControl javascript: get control by id

Nick,

As you will see, I put an extra alert in the code, on the very first line.

This meant that I could see that at the very least, the function was getting called. From there, given that there is another alert directly after the offending line, it narrowed down what was happening. Then, on looking at the line, I thought about what could be causing the problem.

Then I tried this:

Code:

---

alert($(obj));

---

I tried this (my jQuery isn't that hot, and I wondered if motil was trying to work magic) and when that didn't return anything, I knew that this was the culprit.

From there, it was a short step to do this:

Code:

---

alert($(sender));

---

And when that returned an HtmlElement, I altered the code as above.

I hope that little explanation helps.

Gary

Sorry, I dunno why I wrote that, it's correct in my code:

asp Code:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ButtonUserControl.ascx.vb" Inherits="F1TimeTrials.ButtonUserControl" %>
 
<script type="text/javascript">
    function buttonClicked(sender) {
        var label = $(sender).parent().parent().find('span:eq(0)');
        alert('jup');
        label[0].innerHTML += '|';
        return false;
    }
</script>
 
<asp:Table runat="server">
    <asp:TableRow runat="server">
        <asp:TableCell runat="server"><asp:Button runat="server" ID="button" Text="Click!" OnClientClick="return buttonClicked(this);" /></asp:TableCell>
        <asp:TableCell runat="server"><asp:Label runat="server" ID="label" Text="" /></asp:TableCell>
    </asp:TableRow>
</asp:Table>

Still nothing. No alerts, no post-backs, no | characters.

I tried debugging with Firebug but unless I'm doing it wrong even that isn't working. I just go to the sripts tab, find the piece of javascript, put a breakpoint beside it, but it doesn't hit when I click the buttons.

It does hit suddenly when I refresh the page. Then I also get the option like Run, Step Into, Step Over, etc, but whatever I do (step into, over, out) it just seems to skip the entire code in the function. The breakpoint is on the function declaration ("function buttonClicked(sender)").

EDIT
And when I put an alert on the very first line of the function it does show, so the function is getting called OK.

EDIT2
When I try this javascript, only 'hit' is shown:

javascript Code:

<script type="text/javascript">
    function buttonClicked(sender) {
        alert('hit');
        alert($(sender));
 
        var label = $(sender).parent().parent().find('span:eq(0)');
        alert('jup');
        label[0].innerHTML += '|';
        return false;
    }
</script>

EDIT3
When I alert just 'sender' it shows me something like object HTMLElement so it's not null.

Ok, put an alert before the "var label" line, does that get hit?

I literall took your code from post #27, pasted into a new user control, added the user control to a page, and away it went.

Gary

yep you doing something wrong, i copied the exact code you posted and its working without changing single character ...

in firebug script tab, did you made sure thet it's enabled ?
when you selecting the script tab there is little down arrow, press it and make sure it's enabled ..

again, i copied the exact code you posted and it's working on my system.

Nick, again, in order to avoid something simple that is being missed in translation, can you upload a sample application that isn't working and we can take a look?

Gary

I guess the jQuery thing isn't working, because it seems that 'sender' is not null while $(sender) is... Or at least, it doens't show an alert if I use $(sender).

Project is attached.

Ok, this is an issue with this line:

Code:

---

<script src="~/Scripts/jquery-1.4.1.js" type="text/javascript" />

---

Use this:

Code:

---

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

---

Instead, and it will work.

Gary

yep jQuery is was not enabled.

because of this "~":

Code:

---

  <script src="~/Scripts/jquery-1.4.1.js" type="text/javascript" />

---

change it to this:

Code:

---

      <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

---

you can use the "~" sign only when using ASP.NET controls that has runat="server" attribute

otherwise just use the slash "/" has the web directory

you win this time gap :)
it took me time to explain in details :)

Ha ha.

Yeah, I probably should have provided details.

Nick, if you drag the .js file from the Solution Explorer into the ASPX/ASCX window, the correct path will be created for you.

Gary

again, do not drag js files or define function / js inside your user control, because once you load multiple instances of that usercontrol you also double your js functions / js code, instead create global js file and add reference to the master page (or to the default.aspx file if you're not using master page)

Ah, very good point.

If you intend on having multiple user controls on the page, then defining the JS include at the highest level makes sense.

The only time I would go ahead this is if you have a very large JS file, that is only used in the user control, and you only intend on using the user control one at a time, that I would say put it in there.

Gary

Gary

Thanks, it finally seems to work ok. I'll go try it out on the slider controls.

Hm, the sliders stopped working completely. It's probably an unrelated issue but I've got no time to figure it out now so I'll get back to this probably tomorrow.

ok just remember that the jquery I posted probably won't work right a way with the slider control you got there, adjustments should be made.

just post here the html markup of a single control and i'll post the correct jq syntax.

Quote:

---

Originally Posted by motil

ok just remember that the jquery I posted probably won't work right a way with the slider control you got there, adjustments should be made.

just post here the html markup of a single control and i'll post the correct jq syntax.

---

Yeah I figured as much, as the slider is visually quite 'enhanced', contains lots of images and stuff like tickmarks that are probably 'labels' too. But even a separate WebSlider (completely without any of this javascript or even any labels beside it) has stopped working, so I probably broke something else somewhere...

ok, we here if you need any farther help.