Call Javascript Function from .ascx file

Question

I have one javascript function named 'change2()' which is define in .ascx page's script tag.
I want to call that function from onclick event of img tag (Note : img tag is also on the same page).
It is compulsory to use img tag only for image.
I tried all the below ways, but unfortunately It doesn't work for me.

Test.ascx

    <script language="javascript" type="text/javascript">
        function change2() {
            alert("Hi");
        } 
    </script>




  <table>
        <tr>
          <td class="list">
               Most liked
          </td>
          <td>
              <img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclick="change2();" alt="Slider" />
           </td>
          </tr>
     </table>

Second Way :

<table>
            <tr>
              <td class="list">
                   Most liked
              </td>
              <td>
                  <a href="#" onclick="change2();"><img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server"  alt="Slider" /></a>
               </td>
              </tr>
         </table>

Please give me your suggestions to call javascript function from same page.

@ParthTrivedi no, it shouldn't. see forums.asp.net/t/1249580.aspx?onclick+versus+onclientclick — Timothy Groote
– Timothy Groote, Commented Jan 18, 2016 at 10:41

JotaBe · Accepted Answer · 2016-01-18 10:46:04Z

1

As I can see, the img id is imgLkU, so, instead of including the call in the img tag itself, you can subscribe the event "from the outside", i.e. do it like using $.on, (or $.click) like this:

$.on('click','#imgLkU', function() { change2(); });
// or equivalent  $.on('click','#imgLkU', change2);

or

$.('#imgLkU').click(function() { change2(); });
// or equivalent $.('#imgLkU').click(change2);

Do it right after defining change2 in the same script tag.

I'd also recommend you doing the change2 definition and the event subscription inside an inmediately invoked function expression to avoid polluting the global javascript namespace.

(function() { 
   // define and subscribe here
 })();

answered Jan 18, 2016 at 10:46

JotaBe

39.3k9 gold badges102 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Trusha Savsani Over a year ago

Thanks for your suggestion. But It is still not working.

JotaBe Over a year ago

have you debugged it in the browser's console? Please, begud it in the browser, check that $('#imgLkU') is not empty. Then click it with a breakpoint in change2. Pay attentiton to errors in the console

Trusha Savsani Over a year ago

Thanks bro.. It works fine for me. Also there was one mistake by me i.e. I wrote Document.ready two times by mistake and placed this code in second document.ready part. I combined both part and it works.

Timothy Groote · Accepted Answer · 2016-01-18 10:43:58Z

1

Because your elements all have runat="server", their onclick property is reserved for a backend-code actionlistener which will be executed at postback.

the onClientClick property is reserved to allow you to still attach javascript "listeners" to what is considered the client-side onclick.

keep in mind that returning false from an onClientClick handler will prevent postback from happening if an onclick listener is also hooked up. (onClientclick is executed before initiating the postback)

try this :

<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclientclick="change2();" alt="Slider" />

answered Jan 18, 2016 at 10:43

Timothy Groote

8,69229 silver badges53 bronze badges

Comments

Younes Regaieg · Accepted Answer · 2016-01-18 11:17:16Z

0

The following function can be directly called from document.ready function like

$(function () {
    $('#imgLkU').click(function () {
        //do what ever you want
    })
});

edited Jan 18, 2016 at 11:17

Younes Regaieg

4,1562 gold badges23 silver badges38 bronze badges

answered Jan 18, 2016 at 10:50

Ravindra Bathe

1

Comments

Balah · Accepted Answer · 2016-01-18 12:08:39Z

0

First, take out the runat="server" on your image since you are already using server tags to set the url. If you still want to use runat="server", you can either:

1: change your img into an <asp:Image> tag and use ImageSource instead of src and OnClientClick instead of onclick.

2: set the src attribute in the code behind.

After that, any click method - from your question to all the answers - should work.

If that still does not show the alert, then start taking out code until it does and work your way from there...

answered Jan 18, 2016 at 12:08

Balah

2,5402 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Call Javascript Function from .ascx file

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related