Jquery function doesn't works for a dynamically created div element

Question

4.00/5 (1 vote)

See more:

I am trying to show some information to user, using a dynamically created Html "div" Element.

I am even adding jquery function to display that particular element with some cool effects like fadeIn or animate functions,(that too in c#.)

And there are 2 scenarios here,

1. If i add the dynamic div, at the start of the page.controls.Collection, Jquery
function will work,But ViewState of already existing static controls in my aspx page will be lost,(maybe the viewstate order of the controls gets modified when i add the div element at the very beginning of the collection)

2. So in order to retain viewstate of existing controls, i need to add the dynamic controls at the end of the collection, but here in this case, the jquery function will not work!

So, i need to retain both viewstate, n jquery function when i display that dynamic control.Can anyone guide how can i fix this or any alternate solutions also be helpful.

Below is the code..

C#

 public static void create_a_floating_div_to_show_comp_details(Page page,Type type,Label totComponents_LBL,Label Components_No_Lbl)
    {
        //creating a new div element with custom style...
        HtmlGenericControl ht = new HtmlGenericControl("div");
        ht.ID = "genny";

//assigning all required style props for div element...
        ht.Style.Value ="position:fixed;top:230px;left:-150px;height:auto;width:150px;";

// jquery function to show some animation effects..
        string jqueryFunction_Show = "$('#genny').animate({left:'0px'},500);";

 //the below is calling the jquery function...
ScriptManager.RegisterStartupScript(page, type, "mykey", "<script type='text/javascript'>" + jqueryFunction_Show + "</script>", false);

//finally adding the controls to the page...
        page.Controls.AddAt(0, ht);//Scenario 1. here jquery function works but viewstate is //gone. 
//OR
        page.Controls.Add(ht);//Scenario 2. here, viewstate is retained but jquery function //doesn't works..
 }

Posted 10-Dec-13 20:26pm

Prathap S V

Updated 10-Dec-13 20:51pm

v2

Add a Solution

2 solutions

Solution 2

I think you have it at the wrong sequence. You have to add the div first before it can be use.

C#

public static void create_a_floating_div_to_show_comp_details(Page page,Type type,Label totComponents_LBL,Label Components_No_Lbl)
    {
        HtmlGenericControl ht = new HtmlGenericControl("div");
        ht.ID = "genny";
        ht.Style.Value ="position:fixed;top:230px;left:-150px;height:auto;width:150px;";
        page.Controls.AddAt(0, ht);        
        page.Controls.Add(ht);

        string jqueryFunction_Show = "$('#genny').animate({left:'0px'},500);";

ScriptManager.RegisterStartupScript(page, type, "mykey", "<script type='text/javascript'>" + jqueryFunction_Show + "</script>", false);
     
 }

Posted 12-Dec-13 15:37pm

creepz03

Comments

Prathap S V 13-Dec-13 5:04am

i tried it too, but no difference, but the above solution from @Brian solved my problem.

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)

Brian A Stephens · Accepted Answer · 2013-12-12T05:08:00

I think your problem is that the jQuery script is running before the DOM has fully loaded. jQuery has a very convenient way to avoid this, with the document.ready call:

$( document ).ready(function() {
  $('#genny').animate({left:'0px'},500);
});

OR the shortcut:

$(function() {
  $('#genny').animate({left:'0px'},500);
});

So just change the variable assignment like this and you should be good:

C#

string jqueryFunction_Show = "$(function() { $('#genny').animate({left:'0px'},500); });";