[RESOLVED] call JQuery from ASP.net Button Click

[avrail]

hay there,
i am new to JQuery,
so i wounder if there is a way to call JQuery method after button click from server side event,

here is what i really try to do,
the user will click on the login Button, and i will check his login name and his user name on the server side,
then i will call the JQuery function to execute slideToggle for a Div

is there a way to do such a thing

here is my JQuery function

function LoginError() {
$(document).ready(function() {
        $("LoginButton").click(function() {
            $(".DivError").slideToggle("slow");
            return false;
        });
    });
}

bool loginFlag = false;

if(!loginFlag){
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(),
            "startup", "<script type=\"text/javascript\">LoginError();</script>");
}

but there is nothing happened,
i think i am missing something
thanks alot.

[tr333]

You can just run this on the client side:

function LoginError() {
    $(".DivError").slideToggle("slow");
}

and then call it from the server-side using ClientScript.RegisterClientScriptBlock().

You don't want to bind it to the button click event because the button is calling the server-side code to authenticate the user. If you did that, the div would toggle every time. Also, returning "false" from a client script event handler (the button click event) will prevent the asp.net button postback from occurring to run the server-side click event.

You also don't need the document.ready() here because the client-side function won't be called until the page/DOM has already loaded fully (which is what the document.ready waits for).

[avrail]

ok, thanks tr333

i used this now

  protected void Button2_Click(object sender, EventArgs e)
    {        
        bool flag = true;
        if (flag)
        {
           this.ClientScript.RegisterClientScriptBlock(this.Page.GetType(),
           "Error", "$(document).ready(function() {$(\".flip\").click(function() {$(\".panel\").slideToggle(\"slow\");});});", true);

        }
    }

i can see the div for less than 1/3 sec,
this when i remove the return false;
i can see the Div from the second click if the return false; exist
so i don't actually know where is the problem

[tr333]

If you remove the document.ready from the script you are sending from the server-side (remeber that DOM is already loaded when doing this, so document.ready is not required), then you would get:

$('.flip').click(function() {
$('.panel').slideToggle('slow');
});

Do you want to only have the panel toggle visibility when clicking the ".flip", and not immediately after sending this client-script from the server-side?

Don't forget that this click event handler on ".flip" will only be added after the script is sent from the server-side button click event.

[avrail]

hay tr333,
thanks again
the flip css class if the button

<asp:Button ID="Button2" Text="Show Refat and Hide Karim" runat="server" CssClass="flip" 
                                onclick="Button2_Click" />

what i need is when the user click the login button and after the check for the login on the server done
i want show the Div immediately if the user login failed

[tr333]

You can remove CssClass="flip" from the asp:button, since this button is going to call the server-side button click event to handle the login validation. If the login validation fails inside this server-side event, then you just need to pass the script back in a RegisterClientScriptBlock() to show the div.

$('.panel').slideToggle('slow');

You don't need any client-side click event handlers, because the validation is all being done on the server-side.

[avrail]

you are right tr333
your last post solved my problem,
i think i need to read more before i use JQuery
thanks a lot,

[tr333]

The best way to learn is practice

[avrail]

you are right

[gep13]

Out of curiousity tr333, do you have any links for where you picked up jQuery? It has been on my list of things to pick up for a while, but not really got round to it yet

Gary

[avrail]

i begin with w3schools, and i think it is a good beginning for me

[gep13]

That used to be the same for me as well, although I have recently heard some criticism for w3schools, and htmldog:

http://htmldog.com/

Is a better source for HTML and CSS related information, so I am curious as to whether the jQuery information at w3schools is any good?!?

Gary

[tr333]

For jQuery I've just used the jQuery website and Google, browsing through the jQuery API reference to see what it can do. Also useful is jQueryUI and the upcoming jQuery Mobile.

For generic HTML/CSS/JavaScript reference I always use Mozilla Developer Network. Another great reference is Dev.Opera which has some great articles on efficient JavaScript development, among other things.

I started learning jQuery when I needed to do a deep-copy merge of two objects and found that prototype.js (which I was using at the time) could only do shallow-copy merging.

[gep13]

Thanks for the links!

Gary