Interacting with an element via JQuery after being shown via ASP

Question

I have a simple div.

<div id="error" class="notifications" runat="server" visible="false" ClientIDMode=Static></div>

As you notice this div has runat="server" so I can manipulate it from Server, as well as ClientIDMode=Static so that the Server does not change the ID, and visible="false" to make it hidden from the beginning.

After executing some codes in ASP, I am showing the div via:

error.Visible = true;

Now I made a small JQuery function to hide this div in case I click on it.

$("#error").click(function() {
        $(this).fadeOut();
});

This did not work, I also replaced $("#error") with $(".notifications") yet no success.

Note: If I remove visible=false and I click on it, it will disappear, it's working.

UPDATE I forgot to mention that both the button that shows the div when I click on it, and the div, are both inside an UpdatePanel (for Ajax), when I placed them outside of it, everything worked (but with a page refresh).

Have you tried `on()`? How is the div being rendered into the page? — Simon Whitehead, Jun 27 '13 at 08:08
@RohanKumar Firefox's Inspect Element does not show any display property. — Ali Bassam, Jun 27 '13 at 08:10
@SimonWhitehead `$(".notifications").on("click",function () { $(this).fadeOut(); });` did not work. — Ali Bassam, Jun 27 '13 at 08:12
@kostasch. I am, but the contents are not in the master page, and the JavaScript file gets included in a ContentPlaceHolder along side this page. — Ali Bassam, Jun 27 '13 at 08:13
This is not correct `error.setVisible = true;` must be `error.Visible = true;` Also if you use UpdatePanel you need to show here the full initialize of your javascript, you probably not initialize it correct. — Aristos, Jun 27 '13 at 08:23
@Aristos pardon me, java controlled me when I wrote the question, yes it's `.Visible`. Also I used a `ScriptManager` before the `UpdatePanel`. — Ali Bassam, Jun 27 '13 at 08:25
Inspect the generated HTML and paste it here or on pastebin/jsfiddle. — MatthewT, Jun 27 '13 at 08:31

score 1 · Answer 1 · answered Jun 27 '13 at 08:26

1

use this

<div id="error" class="notifications" runat="server" href="javascript:void(0);"  onclick="fademe('errordiv')" visible="false" ClientIDMode=Static></div>

and add the javascript function

function fademe(id){

alert('errordiv is clicked');
var container=document.getElementById('error');
containe.fadeOut();


}

or

function fademe(id){

    alert('errordiv is clicked');
    $('#error').fadeOut();


    }

or

function fademe(id){

    alert('errordiv is clicked');
   error.fadeOut();


    }

answered Jun 27 '13 at 08:26

Subhash Sasidharakurup

368
2
8

Because, in the first time, since the control is not visible, it is not added to the DOM actually. so when it becomes visiblle, it will be added to DOM, but dynamically. jquery will add listeners to those controlls which are present at page load, creation events.so jquery cant catch the event triggered by the dynamically added control. so we need to bind an event. – Subhash Sasidharakurup Jun 27 '13 at 09:06

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

Blind guess :

You are calling $('#error').click(function(){ ... }) from your $(function(){ ... }), before the #error node is actually present in the DOM.

If such is the case, you can use event delegation with the .on function : provided your UpdatePanel is present in the DOM at page load :

$(UpdatePanel).on('click', '#error', function(){ ... });

fiddle

or you can use document :

$(document).on('click', '#error', function(){ ... });

fiddle

Here is a great explanation of event delegation : Direct vs. Delegated - jQuery .on()

edited May 23 '17 at 12:21

Community

1
1

answered Jun 27 '13 at 08:34

LeGEC

46,477
5
57
104

The hiding function is inside `$(document).ready(function () {..` I also tried `.on()` with no luck. – Ali Bassam Jun 27 '13 at 08:40
@AliBassam from your answer to the comment about using `.on()`, you did not use the event delegation feature which `.on()` allows. Does the linked question shed a new light on how to use it ? – LeGEC Jun 27 '13 at 08:46
I tried : `$("#updatepanelID").on("click","#error",function()...` this is the right way? – Ali Bassam Jun 27 '13 at 08:50
@AliBassam what does `$("#updatepanelID")` return? an empty selction or one with elements in? – Rune FS Jun 27 '13 at 10:10
@AliBassam added two jsfiddles to demonstrate the usage. – LeGEC Jun 27 '13 at 12:39

Interacting with an element via JQuery after being shown via ASP

2 Answers2