Javascript echoing out HTML rather than processing it

Question

I'm trying to customise the output from a WordPress plugin called Showtime. Showtime contains the following Javascript to output what is entered in the schedule. For styling reasons I'm entering into the plugin admin area for a show -

<h3>Drivetime</h3><p>with Davie Boy</p>

The issue I have is this is literally printed out / echoed on the page and the html is not rendered / processed, as though wrapped in pre tags.

I understand the following javascript outputs the show, how could I get it to actually not echo the html but process it. Sorry if I'm not using the correct terminology.

Any help much appreciated

rob

UPDATE

Thanks for the comments - to get me thinking. This javascript is getting the Showname from a PHP script called crud.php. Looking over this I think this may be the offending line in crud.php

$showname   = htmlentities(stripslashes(($_POST['showname'])));

rather than the javascript itself?

jQuery(function($){

function get_current_show() {
//Get the current show data
$.post(crudScriptURL, {"crud-action" : "read", "read-type" : "current"}, function (currentShowJSON) {

    var schedule = $.parseJSON(currentShowJSON);
    var outputHTML = '';

    var currentShow = schedule['current-show'];
    if (currentShow.showName){
        var currentShowName = currentShow.showName;
        var imageURL = currentShow.imageURL;
        var linkURL = currentShow.linkURL;
        var startClock = currentShow.startClock;
        var endClock = currentShow.endClock;

        outputHTML += '<div id="showtime">'+currentShowName+'</div>';

        if (imageURL){
            if (linkURL){
                outputHTML += '<a href="'+linkURL+'"><img class="showtime-image-thumbnail" src="'+imageURL+'" alt="'+currentShow.showName+'" /></a>';
            } else {
                outputHTML += '<img class="showtime-image-thumbnail" src="'+imageURL+'" alt="'+currentShow.showName+'" />';
            }
        }

    } else {

        outputHTML += '<h3 class="current-show">'+currentShow+'<h3>';

    }

    var upcomingShow = schedule['upcoming-show'];
    if (upcomingShow){
        var upcomingShowName = upcomingShow.showName;
        var upcomingShowLink = upcomingShow.linkURL;
        var upcomingStartClock = upcomingShow.startClock;
        var upcomingEndClock = upcomingShow.endClock;

        if (upcomingShowLink){
            outputHTML += '<h3 class="upcoming-show"><strong>Up next:</strong> <a href="'+upcomingShowLink+'">'+upcomingShowName+'</a></h3>';
        } else {
            outputHTML += '<h3 class="upcoming-show"><strong>Up next:</strong> '+upcomingShowName+'</h3>';
        }

        outputHTML += '<span>'+upcomingStartClock + ' - ' + upcomingEndClock + '</span>';

    }

    $('.showtime-now-playing').html(outputHTML);

    //Set a timer to update the widget every 30 seconds
    setTimeout (get_current_show, (30 * 1000));

});

}

get_current_show();


});

Answer 1

If you have a consistent format for these, and don't really need to use symbols as part of the display, you can implement a sort of parser in the jquery function. For example, you could enter <h3>Drivetime</h3><p>with Davie Boy</p>, and in the code do something like:

var currentShowName = $('<div/>').html(currentShow.showName).text();