jQuery's replaceWith() CSS alignment not same as exact same straight code

Question

This is a really weird issue I'm having and I'm not really sure what code to paste here because there's quite a lot so I'm really looking for theoretical solutions I guess.

Basically, I'm using jQuery's replaceWith() to add stuff to a box after a user logs in. It adds the exact same code as would be spat out by the php page (having checked a user has logged in). This was done so when they log in, jQuery adds their content but it should be exactly the same if they refresh or move to another page on the site.

This mostly works, except for a few form elements appearing to be out of alignment after jQuery replaces the content. After refreshing the page, they are aligned the way they should be.

Any ideas what might be happening? I've gone through Chrome's dev tools looking at the CSS margins on these elements and their surrounding elements and the margins/padding etc. are exactly the same but display weird until refreshed!!

This is driving me nuts - has anyone seen this behavior before?

Cheers,

Scott

Screenshots might help -

Here's an example of the code:

<?php
    echo '<div id="accountpanel">
            <div id="selectclientbox">
              <form id="formSelectClient" action="" onsubmit="return false;">
                  <select id="selectClient">
                      <option>Client 1</option>
                      <option>Client 2</option>
                      <option>Client 3</option>
                      <option>Client 4</option>
                  </select>
                  <select id="selectAttribute">
                      <option>Change ID</option>
                      <option>Change Userame</option>
                      <option>Change Password</option>
                      <option>Change Name</option>
                      <option>Change Email Address</option>
                  </select>
                  <input id="changeDetail" class="coolbox" type="text" size="38" maxlength="128" />
                  <input id="updatebtn" type="button" value="update" onclick="updatedetail()" />
              </form>
              <form id="formUpdateClient" action="" onsubmit="return false;">

                  <section>
                      <label for="changeCurrency">Currency</label><input id="changeCurrency" class="text" type="text" maxlength="1" />

                      <input id="updatebtn2" type="button" value="update" onclick="updatecost()" />
                  </section>
              </form>
          </div>
    </div>';
?>

<div id="accountpanel2">
</div>
<script type="text/javascript">
            $('#accountpanel2').replaceWith('<div id="accountpanel2">' + 
                '<div id="selectclientbox">' +
              '<form id="formSelectClient" action="" onsubmit="return false;">' +
                  '<select name="">' +
                      '<option>Client 1</option>' +
                      '<option>Client 2</option>' +
                      '<option>Client 3</option>' +
                      '<option>Client 4</option>' +
                  '</select>' +
                  '<select name="">' +
                      '<option>Change ID</option>' +
                      '<option>Change Userame</option>' +
                      '<option>Change Password</option>' +
                      '<option>Change Name</option>' +
                      '<option>Change Email Address</option>' +
                  '</select>' +
                  '<input id="changeDetail" class="coolbox" type="text" size="38" maxlength="128" />' +
                  '<input id="updatebtn" type="button" value="update" onclick="updatedetail()" />' +
              '</form>' +
              '<form id="formUpdateClient" action="" onsubmit="return false;">' +

                  '<section>' +
                      '<label for="changeCurrency">Currency</label><input id="changeCurrency" class="text" type="text" maxlength="1" />' +
                      '<input id="updatebtn2" type="button" value="update" onclick="updatecost()" />' +
                  '</section>' +
              '</form>' +
          '</div>');
</script>

Answer 1

Ok, looking at your example code I see a big difference between the HTML you are using to render the page and the code being "injected".

In the JavaScript string you have constructs that look like this (this is just an example, probably not the exact line that is causing the problem):

'<select name="">' +
  '<option>Change ID</option>' +
  '<option>Change Userame</option>' +
  '<option>Change Password</option>' +
  '<option>Change Name</option>' +
  '<option>Change Email Address</option>' +
'</select>' +

And in the HTML it looks like this:

   <select name="">
     <option>Change ID</option>
     <option>Change Userame</option>
     <option>Change Password</option>
     <option>Change Name</option>
     <option>Change Email Address</option>
  </select>

The result to the parser is two very different thing because the non JavaScript has a significant amount of whitespace and a carrage return + line feed between each element.

This is the reverse of what I described -- it seems you need the white space to get it to look right.

There are two ways to solve this that come to mind right away. 1) Store your HTML templates in a script tag. I like this because it makes them easy to edit and you don't have deal with lots of quotes and plus signs on every line. or 2) Add at least one space to the end of each line before the end quote and plus.

---

Yes, I've seen this many years ago, tracked it down to a space between a tag end and a tag start. Should not matter, but did.

I had something like this

..</tag1> <tag2>...

And changed it to

..</tag1><tag2>...

It solved the problem.

I seem to remember this was more common with IE and list elements -- but I could be remembering wrong.