Databases
StackOverflow2013
Postsdbo
POjQuery unable to find same div if i remove and add it back?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery unable to find same div if i remove and add it back?
    text
    copied!<p>I'm attempting to load different content into a div, the refresh code I have is quite similar to this: <a href="http://jsfiddle.net/TbJQ3/6/" rel="nofollow">http://jsfiddle.net/TbJQ3/6/</a> but is more complex, it takes padding and magin etc into account.</p> <p>The difference is that in my actual code, I used <strong>.load()</strong> to feed the content into my div rather than empty() and append().</p> <p>When my page first loaded, I call my <strong>resizeContainer()</strong> function to render my layout dynamically set the size of my DIVs, everything looks good. I looked at firebug and this is what I got (all the sizes are there, set by my function):</p> <pre><code>&lt;div id="divWrapper" class="fullscreen"&gt; &lt;div id="divTop" class="Top " style="height: 0px;"&gt; &lt;/div&gt; &lt;div id="divContainer" class="Container round" style="width: 1024px; height: 560px;"&gt; &lt;div id="divContent" class="Content round" onclick="javascript: jQfn.testclick();" style="width: 701px; height: 542px;"&gt; Content &lt;/div&gt; &lt;div id="divQuery" class="Query round" onclick="javascript: jQfn.testclick();" style="width: 292.2px; height: 558px;"&gt; Query &lt;/div&gt; &lt;div id="divStatus" class="Status " onclick="javascript: jQfn.testclick();" style="width: 701px; float: left;"&gt; Status &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I made a test function to basically swap the content just to test the concept out...</p> <pre><code>jQfn.testclick = function(){ if (jQ.busy == true) { console.log('Using busy.jsp'); jQ('#divContainer').load('busy.jsp'); jQ.busy = false; } else { console.log('Using login.jsp'); jQ('#divContainer').load('login.jsp'); jQ.busy = true; } jQ(window).trigger('resize'); } </code></pre> <p>However, if i click it twice just to swap it back to the original content, my <strong>resizeContainer</strong> function won't render anything at all.</p> <p>I've been hammering this problem for the past 5+ hours now, I tried to use:</p> <ul> <li>empty, append</li> <li>detach</li> <li>calling the resize function in many different ways</li> <li>calling my custom resizeContainer function in many different ways</li> <li>combination of all of the above and some more</li> </ul> <p>I noticed that after i loaded my content, jQuery was <strong>unable</strong> to find the divs that got reinserted anymore... which would explain why my <strong>resizeContainer</strong> function couldn't set the width and height properly... But why? I could see it on the div on the screen as well as in the firebug...</p> <p>This is what I see after i swap the content, obviously the styles is not present, as my custom <strong>resizeContainer</strong> function couldn't find the div.</p> <pre><code>&lt;div id="divWrapper" class="fullscreen"&gt; &lt;div id="divTop" class="Top " style="height: 0px;"&gt; &lt;/div&gt; &lt;div id="divContainer" class="Container round" style="width: 1024px; height: 560px;"&gt; &lt;div id="divContent" class="Content round" onclick="javascript: jQfn.testclick();"&gt; Content &lt;/div&gt; &lt;div id="divQuery" class="Query round" onclick="javascript: jQfn.testclick();"&gt; Query &lt;/div&gt; &lt;div id="divStatus" class="Status " onclick="javascript: jQfn.testclick();" style="width: 701px; float: left;"&gt; Status &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The reason why I know jQuery couldn't find my divs, is because I used the following code, and it logged some empty element:</p> <pre><code>var content = jQuery('#divContent'); console.log(content); </code></pre> <p>What could be wrong? I even tried to manually detach those DIVs before loading in the new content.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload