Valid jQuery on Development fails on Production

Question

I am writing a fairly basic script using jQuery. However, the script behaves differently depending on whether I am running it on my local Web server (localhost) or on a production server.

On development, the following code returns the HTML I'm expecting:

$('#objID').siblings('.mAddress').html();

On production, the same statement returns undefined.

The document structures are the same on both machines. The only difference I can find is when I use Firebug to step through the script. On the development machine, putting a watch on $('#objID').siblings('.mAddress') results in [ span#object ] while on production the same watch results in [ [ span#object ] ]
(Notice the double sets of square brackets).

Any ideas?

Added:

I've verified that the two libraries are identical.

I've done some more experimenting using Firebug. Another part of the script grabs a set of elements using the statement:

$('.ParentColumn2').each(function(i) { ... })

Within the body of that function, if I set a watch on this, on development the value of this is what I expect: div.ParentColumn2 , but on production the value of this returns what looks like an array: [ div.ParentColumn2, div.ParentColumn2, div.ParentColumn2, .....]

The HTML is basically a table (I've stripped out irrelevant HTML, and the rows repeat):

<table>  
 <tr>  
  <td>  
    <div class="ItemTemplate">  
      <div class="ParentColumn2">  
        <div><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address" class="lbl_Address mAddress">111 W Wacker Dr, </span><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_City" class="lbl_Address mCity">Chicago</span>&nbsp;<span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_PostalCode" class="lbl_Address mPostalCode">60601</span>&nbsp;<a href="javascript:MapMe(this);" id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_hypMap" class="hypMap">Map</a>&nbsp;&nbsp;<span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Area" class="mArea">Loop</span><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lt" class="mLt">41.8868010285473</span><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lg" class="mLg">-87.6312860701286</span>  
        </div>  
      </div>  
    </div>  
  </td>  
 </tr>  
 <tr>  
  <td>  
    <div class="ItemTemplate">  
      <div class="ParentColumn2">  
        <div><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl03_lbl_Address" class="lbl_Address mAddress">...</span> ...  
        </div>  
      </div>  
    </div>  
  </td>  
 </tr>  
</table>

The HTML is as identical between the two machines as can be possible given that it's all generated by .Net (don't get me started).

Answer 1

I don't regularly use jQuery but my first suspicion is that your libraries are out of sync.

Answer 2

Given that you have different behaviour, it's reasonable to assume that something is different between the two pages, so my suggestion is to reduce both pages to the minimum that keeps the current behaviour and then see what is different.

Answer 3

i don't use .siblings() ... (or haven't needed to) ...

according to jquery docs .... running .siblings() on the div (below) would wouldn't return anything, but on one of the p's $('p:first') would return the other

<div><p></p><p></p></div>

try using

$('#objID').find('.mAddress').html();

or

$('#objID').children('.mAddress').html();

or

$('#objID .mAddress').html();

seems odd that it would work of dev but not on production ... but try that.

-bruce

Answer 4

I'd say a couple areas to look are at the caching, in your development environment everything probably gets reloaded with every request, try putting a "?asdfasfrandom" at the end of your javascript include tag to make sure it all gets updated.

If it's not that, are your javascript files getting combined when you serve them? In Rails, for example, the default behavior is to throw them all into one file, that can mess with things.

If it's not that, then it could be that the javascript files on the server are getting loaded in a different order, or executing in a different order than locally because of the download time. Try making sure the dom is ready before executing your code.

Basically it seems like it's probably not a problem with your code (assuming you're using the same browser and have the same HTML), but a problem with the order things are occurring in.

Answer 5

Put same data in dev as in prod, then dump view source for both and make do a diff.

Why use siblings property and not just:

$('#objID .mAddress').html();

Also I would think that both siblings and the above returns an array of items and not just one item alone, so I'd probably go with something like this instead:

$($('#objID .mAddress').get(0)).html();

To only return the html for the first item.

Answer 6

Is your code within a $(document).ready(function() { ... }); ?

If not, this could lead to different behavior. On your local development machine perhaps everything gets loaded so quickly that the DOM tree is complete by the type your Javascript is called, but on the production server perhaps things are not yet complete.

Doesn't explain the extra nested brackets showing up in FireBug though.