I found a great jQuery Code on this page and used it on my site. It works great. A form and a live Preview with the jQuery. But now when i want to update the db and open the form again it will correctly put the text in the formfields, but the preview only starts after i click in and out of the field. How can i force my function to start the preview directly after the mysqli query?
$(document).ready(function() {
var commentNode = $('#lp-comment'),
contactNode = $('#lp-contact'),
contact = $('#contact'),
website = $('#website');
//comment...easy
$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() {
//comment
commentNode.text($('#comment').val());
commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
contactNode.text(contact.val() + ' says:');
});
});
$(document).ready(function() {
var commentNode = $('#lp-comment'),
contactNode = $('#lp-contact'),
contact = $('#contact'),
website = $('#website');
//comment...easy
$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() {
//comment
commentNode.text($('#comment').val());
commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
contactNode.text(contact.val() + ' says:');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="live-preview-form" class="lp-block field">
<input name="contact" class="input" placeholder="Kontaktperson" type="text" id="contact" value ="<?php echo $contact ?>" required />
</div>
<div id="live-preview-display" class="lp-block">
<div id="lp-contact"></div>
<div id="lp-comment"></div>
</div>
You will need to refresh the preview when the page is reloaded, or any other time the data is updated. You might consider creating a function to update the preview so that it can be called on $(document).ready
and in onblur
and onkeyup
:
$(document).ready(function() {
updatePreview();
$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',updatePreview);
});
function updatePreview(){
var commentNode = $('#lp-comment'),
contactNode = $('#lp-contact'),
contact = $('#contact');
commentNode.text($('#comment').val());
commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
contactNode.text(contact.val() + ' says:');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="live-preview-form" class="lp-block field">
<input name="contact" class="input" placeholder="Kontaktperson" type="text" id="contact" value ="<?php echo $contact ?>" required />
</div>
<div id="live-preview-display" class="lp-block">
<div id="lp-contact"></div>
<div id="lp-comment"></div>
</div>