Question

Using either .ajax or .load, I’m loading content from an .html page into or replace an element. In either case, the content is called and inserted and there is a mysterious new line (not a break element , but like a \n or \r) appended after my content from the .html file.

In chrome’s element inspector it looks like:

<div class="loaded parent">
 // all my loaded content
</div>
"
(ghost line)
"

There are no breaks in the code so I have no idea where this is coming from.

.html:

<div id="ForgotPasswordForm" class="ajax">
 <h2>Reset Your Password test</h2>
 <div class="BlockContent">
 <p> Enter your email below to request a password reset. An email will be send with a reset link. </p>
 <p class="ErrorMessage" style="display:none"></p>
 <form action="/login.php?action=send_password_email" method="post" onsubmit="return check_forgot_password_form()">
 <div>
 <dl style="width: 270px;margin: 0 auto;height: 30px;">
 <dt style="float: left;width: 100px;text-align: right;margin:5px 5px 0 0;"> <span class="Required">*</span> Email Address: </dt>
 <dd style="float:left;font-size:12px;width:150px;">
 <input style="padding:4px;" type="text" class="Textbox" name="email" id="email" />
 </dd>
 </dl>
 <p class="Submit" style="text-align:center">
 <input type="submit" value="Continue" />
 </p>
 </div>
 </form>
 </div>
</div>​

Script:

$('#recover-pass').click(
       function(e){
            e.preventDefault();
            //$('#login-content').load('/content/ResetPassword.html');
            $.ajax({
                  url: '/content/ResetPassword.html',
                  success: function(data) {
                        $('#login-content').replaceWith(data);
                        alert('Load was performed.');
                  }
            });
      });

Answer 1

Most text file formats save the file with a final line break character at EOF. Assuming you’re treating this html file like a server side include, that’s probably causing your symptoms.