use ext to creat the html,but jquery $(".class") is null

**ponie325** · 13 Nov 2012 2:32 AM

I use ext to creat my html in a panel,then I want to control it with jquery

first I write the code in my <script>,

Code:

Ext.onReady(function(){
varleftNavHtml = '<body><div id="sidebar">';					leftNavHtml += '<div class="trees">'
						leftNavHtml += '<div class="tree">'
leftNavHtml += '<div class="name">'
...

then, I use jquery

Code:

$("#sidebar .trees .name").toggle(function(){...

but the console message is $("#sidebar .trees .name") is null

can anyone help me?

**sword-it** · 13 Nov 2012 3:58 AM

Are you sure you append the markup into body? Are elements there at the time you try to use $ function?

Could you please give more code samples?

Regards.

**willigogs** · 13 Nov 2012 4:15 AM

We would also need to know where you are calling your jQuery code. Is this being called before or after the Ext.onReady function (i.e. has the code been built when jQuery attempts to interrogate it)?

**ponie325** · 13 Nov 2012 9:32 PM

Thank you for the help.

Even I use settimeout to do,it still dosen't work. but in my page,the element is there I can see

In the <head> I put ext3.0 js before jquery 1.8

Code:

Ext.onReady(function(){				
				var leftNavHtml = '<div id="sidebar">'
					leftNavHtml += '<div class="title">'
						leftNavHtml += '<div class="m_bg">'
							leftNavHtml += 'THE TITLE'
						leftNavHtml += '</div>'
					leftNavHtml += '</div>'
					leftNavHtml += '<div class="trees">'
						leftNavHtml += '<div class="tree no-nodes">'
							leftNavHtml += '<ul class="nodes"><li class="node"><a href="#">NODE 1</a></li></ul>'
						leftNavHtml += '</div>'
						leftNavHtml += '<div class="tree">'
							leftNavHtml += '<div class="name">'
								leftNavHtml += 'NODE 1 - 1'
							leftNavHtml += '</div>'
							leftNavHtml += '<ul class="nodes">'
								leftNavHtml += '<li class="node">'
									leftNavHtml += '<a href="#"  class="current">NODE 1 - 2</a>'
								leftNavHtml += '</li>'
								leftNavHtml += '<li class="node">'
									leftNavHtml += '<a href="#" class="">NODE 1 - 3</a>'
								leftNavHtml += '</li>'
							leftNavHtml += '</ul>'
						leftNavHtml += '</div>'
					leftNavHtml += '</div>'
				leftNavHtml += '</div>'
				
				var leftNavPanel = new Ext.Panel({
					region:'center',split:true,
					style:'border-right:0px;border-left:0px;',
					bodyStyle:'border-right:0px;border-left:0px;',
					html:leftNavHtml
				});
				
				leftNavPanel.on("afterrender",function(){
					setTimeout(doChange,1000);
				})


				
				function doChange(){
					$(function(){
						$("#sidebar .trees .name").each(function(){
							$(this).toggle(function(){
									$(this).next(".nodes").slideDown().parent().addClass("tree-expand");;
								},function(){
									$(this).next(".nodes").slideUp().parent().removeClass("tree-expand");;
								}
							)
						})
						$("#sidebar .trees .nodes a").each(function(){
							$(this).click(function(){
								$("#sidebar .trees .nodes a.current").removeClass("current");
								$(this).addClass("current");
							})
						})
					})
				}

**willigogs** · 14 Nov 2012 1:44 AM

Your "on afterrender" event isn't being called.

I adapted your leftNavPanel to have its own listener and it then manages to call the doChange function successfully.

Some very simple alert() or console.log() debugging easily pointed out that the afterrender event wasn't being called as you can see in this example:
http://jsfiddle.net/Whinters/RF4zP/

use ext to creat the html,but jquery $(".class") is null

Thread Tools

Search Thread

Display

use ext to creat the html,but jquery $(".class") is null

use ext to creat the html,but jquery $(".class") is null

see nodes in DOM tree

see nodes in DOM tree

Tags for this Thread