StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjquery html not replacing the current html in IE
text
Body
copied!<p>This is my situation. I'm working on a news website where the homepage contains the latest 100 news articles. The customer wants the visitors to be able to place comments ond the news through a dialogbox. That is a link after the title of the article. Also when the visitor is not logged in they can do that trough the dialogbox and when the visitor has no account, he can register for that to.</p> <p>The dialogbox i used is from jquery ui. The layout is as follows:</p> <pre><code>|---------------------------------------| | Login | Registration | | | | | username: | username: | | - Inputfield | - Inputfield | | password: | password | | - Inputfield | - Inputfield | | remember me | password confirm | | login button | - Inputfield | | | email: | | | - Inputfield | | | register button | |---------------------------------------| | | | Here will be all the comments for the | | news article from newest to oldest | |---------------------------------------| </code></pre> <p>The thing i've done here is just creating 3 divs.</p> <ol> <li>create a wrapper div arround the login form and the register form.</li> <li>create a div arround the login form</li> <li>create a div arround the register form</li> </ol> <p>the html looks like this: (the content is dutch and i left the comments out of it.)</p> <pre><code><div class="reactionForm" > <div id="normalReaction" class="normalReaction activeForm'.(check_login() ? '' : ' login').'"> <form action="" name="plaatsreactie" onsubmit="return validateReaction( '.$_POST['id'].');" method="post"> <div id="reactionForm"> <div class="qr_login"> <h3>Log hieronder in.</h3> <form action="" method="post" id="reactie_login" > Gebruikersnaam:<br /> <input id="r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br /> Wachtwoord:<br /> <input id="r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br /> <input id="r_onthouden" type="checkbox" name="onthouden" value="1" class="customCheckbox" id="onthoudenCheck" /> <label for="onthoudenCheck">Onthouden</label><br /> <span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a> <input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" /> </form> </div> <div class="qr_register"> <h3>Nog geen account? <br />Maak hieronder een account aan.</h3> <form action="" method="post" id="reactie_register" > Gebruikersnaam:<br /> <input id="r_r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br /> Wachtwoord:<br /> <input id="r_r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br /> Bevestig wachtwoord:<br /> <input id="r_r_password2" type="password" name="wachtwoord2" class="r_loginInput" value="" /><br /> Email adres:<br /> <input id="r_r_email" type="text" name="emailadres" class="r_loginInput" value="" /><br /> <input id="r_r_voorwaarden" type="checkbox" name="voorwaarden" class="register_checkbox"/> Ik accepteer de <a href="/algemene-voorwaarden/" target="_blank">algemene voorwaarden</a> <input type="image" name="submit" id="r_register" src="/images/registreren.png" class="loginSubmit" /> </form> </div> </div> </form> </div> </code></pre> <p></p> <p>then when i press on the login button there will be this code:</p> <pre><code>$("#r_login").live("click",function() { var unameval = $('#r_username').val(); var pwordval = $('#r_password').val(); var onthoude = $('#r_onthouden').val(); $.post( "/ajax/login.php", { gebruikersnaam: unameval, wachtwoord: pwordval, onthouden: onthoude }, function(data){ $('#reactionForm').html(data); }); check_login(); return false; }); </code></pre> <p>and for the register is the same code with some extra vars:</p> <pre><code>$("#r_register").live("click",function() { var unameval = $('#r_r_username').val(); var pwordval = $('#r_r_password').val(); var pword2val = $('#r_r_password2').val(); var email = $('#r_r_email').val(); var chkbox = $('#r_r_voorwaarden:checked'); if(chkbox.length > 0){ var voorwaarden = 'on'; }else{ var voorwaarden = 'off'; } $.post( "/ajax/register.php", { gebruikersnaam: unameval, wachtwoord: pwordval, wachtwoord2: pword2val, emailadres: email, voorwaarden: voorwaarden }, function(data){ $('#reactionForm').html(''); $('#reactionForm').html(data); } ); return false; }); </code></pre> <p>the code I gave above about the html layout of the dialog box is what will be returned when the login or registration data is wrong and there will only be some spans added for some red warnings.</p> <p>But instead of replacing the current content with the new one (with the spans) it replaces online half of it.</p> <p>The layout then looks like this.</p> <pre><code>|---------------------------------------| | login button | | | | | | Registration | | username: | | - Inputfield | | password | | - Inputfield | | password confirm | | - Inputfield | | email: | | - Inputfield | | register button | |---------------------------------------| | | | Here will be all the comments for the | | news article from newest to oldest | |---------------------------------------| </code></pre> <p>The login form is almost gone and only the button is still there and the registration form is below it.</p> <p>I don't know if the explenation was enough for you guys to give me an answer for the problem but I just can't get this fixed.</p> <p>Regards</p> <p><strong>EDIT-> problem solved</strong> The problem was a span in the HTML that wasnt closed.</p> <pre><code><label for="onthoudenCheck">Onthouden</label><br /> <span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a> <input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" /> </code></pre> <p>Look at the span with the class r_login_option, it is never closed.</p> <p>Anyways thnks for the answers that have been given.</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