Updating Text Live With Jquery

I have been doing a project with jQuery recently and I have hit an issue. The basic idea is to create some JS code so that as you enter content into a text box on a tab, the text i

Solution 1:

Here you go: An updated fiddle with your enhancements provided. :) This assumes you aren't changing your naming conventions on your elements' ids.

// Newly added code.// Automatically update the iphone display when // the user types.
$('#tabContent').on('keyup', 'input[id^="page"], textarea[id^="page"]', function () {
    var _thisId = $(this).attr('id');

    // Parse out the section from the id: (e.g. Title from pageTitle_tab1)// and lowercase it to match the naming conventions in this document.
    _thisId = _thisId.substring(4, _thisId.indexOf('_')).toLowerCase();

    // Only 1 preview element so just modify it's html.// _thisId will be title|subtitle|content
    $('#' + _thisId + 'Preview').html('<h1>' + $(this).val() + '</h1>');
});

// Generic handler for all tabs, except the first "add tab"
$('#tabHeaders').on('click', 'li:not(:first-child)', function () {
    var index = $(this).find('a').attr('href').split('#tab')[1];

    // index is the tab number, grab our iphone divs and// iterate through each one.
    $('div#iphone-frame div[id$="Preview"]').each(function (idx, el) {
        // The next two lines determine which #page[text field]_tab[index]// input to grab our text value from.var whichId = $(this).attr('id').split('Preview')[0];
        whichId = whichId.charAt(0).toUpperCase() + whichId.slice(1);

        // Get the text value and set it to the corresponding iphone display.var textVal = $('#page' + whichId + '_tab' + index).val();
        $(this).html('<h1>' + textVal + '</h1>');
    });
});
// End newly added code

http://jsfiddle.net/u7S5P/31/

This way you wont need the logic to change the "iphone" values when opening the preview as they are updated on the fly while the user types.

Solution 2:

Try this:

$(".modal-body").find("#pageTitle").html('<h1>' + pageTitle + '</h1>');
$(".modal-body").find("#pageSubtitle").html('<h2>' + pageSubtitle + '</h2>');
$(".modal-body").find("#pageContent").html('<p>' + pageContent + '</p>');

DEMO

Solution 3:

If pageTitle (etcetera) is the ID of the element you want to write at:

$("#pageTitle").html('<h1>' + pageTitle + '</h1>');
$("#pageSubtitle").html('<h2>' + pageSubtitle + '</h2>');
$("#pageContent").html('<p>' + pageContent + '</p>');

Btw: This assumes that before this, you capture the wanted value and put it in the variables pageTitle (etcetera).

Solution 4:

You can use the .change() function of jQuery

$('.target').change(function() {
    alert('Handler for .change() called.');
});

For your problem it would be something like this:

$('.modal-body #pageTitle').change(function() {
    $(select the element where the content needs to be updated).html(<h1>+$('.modal-body #pageTitle').text()+</h1>);
});