Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a dynamically created calendar(html table) on a aspx web form. Each date has a unique id. When trying to find the unique id jQuery returns zero matches.

This is what I am trying

HTML
<td class="lt-cal-weekday">
 <div class="lt-cal-weekwrap">
  <div class="lt-cal-day" id="day_1-3-2019">1</div>
  <div class="lt-cal-tasklist" id="d_1-3-2019">task go here</div>
 </div>
</td>


JQuery Code
var day = 'div#d_' + d + '-' + m + '-' + y;
var task = $(day);
$(task).append(content);


The above JQuery code cannot find the element

But if I do this it can find it
var task = $("div#d_1-3-2019");
$(task).append(content);


I cant understand why previous jQuery code isn't working. I know jQuery cant find dynamically created DOM elements but then why is the second code working.

When I dynamically create the day id variable it doesn't find it. But when it is hard typed in it can find it. No clue as to why this behavior

Please Help

What I have tried:

Many thing tried javascript getElementByID method but no use it just cant find the element unless it is hard typed into the code.
Posted
Comments
Chris Copeland 10-Mar-22 4:32am    
If the hard-coded version works, but the variable version doesn't, then there must be something wrong with the value of the day variable. It could be something as simple as the year not being properly formatted, or any one of the d, m or y variables not being correctly assigned.

Have you tried debugging the code in the browser? You can set a breakpoint on the line and inspect the value of the day variable, otherwise you can also use console.log(day); to print out the value to the console.
Christopher Fernandes 10-Mar-22 16:29pm    
You were correct the month variable had the wrong value. Also now I have used jQuery append() method to create rows & columns of the dynamic calendar.
Richard Deeming 10-Mar-22 4:35am    
Given the markup, the following code works fine for me, and shows that it finds one element:
const y = 2019, m = 3, d = 1;
const selector = 'div#d_' + d + '-' + m + '-' + y;
alert($(selector).length);

You need to debug your code to see what values your variables have, and compare the generated day selector to the actual ID of your element.

Also make sure that the element exists in the DOM when your code executes.
Christopher Fernandes 10-Mar-22 16:29pm    
You were correct the month variable had the wrong value. Also now I have used jQuery append() method to create rows & columns of the dynamic calendar.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900