jquery slideToggle do not working with html image?

Question

1.00/5 (1 vote)

See more:

HI
The jquery 'slideToggle' do not working with the html image. But it work for
html button and textbox.what is the reason?

the image control as below

HTML

<input type="image" id="flip" src="~/image/history-button.gif"/>

jquery as below

jquery

$(document).ready(function () {
            $("#flip1").click(function () {
                $("#panel").slideToggle("slow");
                });

});

Thanks..

Posted 21-Feb-13 18:54pm

hasbina

Updated 21-Feb-13 19:07pm

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 22-Feb-13 1:01am

ASP.NET has nothing to do with jQuery, in this respect. There is no "ASP.NET image buttons"; on the client site, this is just some HTML. jQuery know nothing about ASP.NET or any other server-side technology.
—SA

hasbina 22-Feb-13 1:07am

i changed the qstn.

Surendra0x2 22-Feb-13 1:13am

html image?what u saying dude ?ur question is not clear what ur trying to ask.

3 solutions

Solution 2

Put your image tag in anchor tag like

<a href="#" id="aflip">
   <input type="image" id="flip" src="~/image/history-button.gif" /> 
</a>

and write jquery like

$(document).ready(function () {
         $("a#aflip").click(function () {
             $("#panel").slideToggle("slow");
             });

});

this may work

Posted 21-Feb-13 19:13pm

vishal.shimpi

Solution 3

Important thing you should know while using Jquery is PostBack property
When postback occurse JQuery code will get its original values..
So you should prevent postback to see the functionality it..

HTML

<input type="image" id="flip" src="~/image/history-button.gif"/>

JavaScript

$(document).ready(function () {
            $("#flip").click(function (e) {
                $("#panel").slideToggle("slow");
                 e.preventDefault();
                });
 
   });

Where e.preventDefault() will avoid paostback.. So when you are using buttons use e.preventDefault() to prevent postback ( If postback is no necessory )..

Posted 21-Feb-13 22:42pm

vinodkumarnie

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Surendra0x2 · Accepted Answer · 2013-02-21T19:08:00

Solution 1

i think it is just because jquery loses its state after postback because a postback will occur on imagebuttonclick which is server side control.
can't u use ?

HTML

<a class="flip1" href="#" title="Comment"><img src="imageurl"/></a>

JavaScript

$(document).ready(function () {
            $(".flip1").click(function () {
                $("#panel").slideToggle("slow");
                });
 
});

Posted 21-Feb-13 19:08pm

Surendra0x2

Updated 21-Feb-13 19:11pm

v3

Comments

hasbina 22-Feb-13 1:29am

@Surendra0x2

Thank you sir..thank you...

Surendra0x2 22-Feb-13 1:37am

I'm Glad it helped you :)
Happy Coding :)