Code Formatting Issue

[walker1234Participant]

Why does the following code doesn’t shows up in formatted manner even after applying clicking code option after selecting all code text?

` this.myDocument = function (data_) {
var source = {
localdata: data_,
datafields: [{
name: ‘doc_content’,
type: ‘string’
}, {
name: ‘concept_text’,
type: ‘string’
}, {
name: ‘start’,
type: ‘int’
}, {
name: ‘stop’,
type: ‘int’
}],
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (records) {
var html;
var color = ‘#FF0000′;
//Get data
var records = dataAdapter.records;
var length = records.length;
console.log(“Checking Length: “+length);// Outputs 5
for (var i = 0; i < length; i++) {
console.log(“checking Concepts here: ” +records[i].concept_text);
}
html = “<div style=’margin: 10px;’><pre>” + records[1].doc_content + “</pre></div>”;
for (var i = 0; i < length; i++) {
html = html.replace(new RegExp(records[i].concept_text, ‘ig’), ‘<span style=”color:’ + color + ‘;”>’ + records[i].concept_text + ‘</span>’);
}
console.log(“How many span tags you are noticing here?: ” + html);
$(“#docContentPanel”).html(html);
},
loadError: function (xhr, status, error) { },
beforeLoadComplete: function (records) {
}
});
// perform data binding
dataAdapter.dataBind();
$(“#myPanel”).jqxGrid({
source: dataAdapter,
width: ’122′,
height: ’170′,
columns: [{
text: ‘Concept(s)’,
datafield: ‘concept_text’,
cellsalign: ‘center’,
width: 100
}, {
text: ‘Note Content’,
datafield: ‘doc_content’,
hidden: true
}
]
});
var panel = $(“#docContentPanel”);
var content = panel.html();
panel.jqxPanel({
width: ’750′,
height: ’500′,
scrollBarSize: 20
});
$(“#myPanel”).on(‘cellclick’, function (event) {
var value = event.args.value;
// Use a regular expression to account for the beginning/end of the
// input, arbitrary whitespace (including line feeds) as well as
// adjacent tags
var regExp = new RegExp(‘(^|>|\\s)(‘ + value + ‘)($|<|\\s)’, ‘g’);
var scrollTop;
var highlighted = content.replace(
regExp,
‘$1<span class=”highlighted”>$2</span>$3′
);
console.log (“Check for highlighted in click handler:” +highlighted);
panel.jqxPanel(‘clearcontent’);
panel.jqxPanel(‘append’, highlighted);
// Get the offset of the last highlighted word relative
// to the panel parent
scrollTop = $(‘.highlighted:last’, panel).position().top;
// Use the jqxPanel API to scroll to that word
panel.jqxPanel(‘scrollTo’, 0, scrollTop);
});
};// End of myDocument function

[DimitarParticipant]

Hello walker1234,

Please select all your code and press the code button in the toolbar once. Make sure there are no extra grave accent signs so that the formatting is not broken.

this.myDocument = function(data_) {
    var source = {
        localdata: data_,
        datafields: [{
            name: 'doc_content',
            type: 'string'
        }, {
            name: 'concept_text',
            type: 'string'
        }, {
            name: 'start',
            type: 'int'
        }, {
            name: 'stop',
            type: 'int'
        }],
        datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        loadComplete: function(records) {
            var html;
            var color = '#FF0000';
            //Get data
            var records = dataAdapter.records;
            var length = records.length;
            console.log("Checking Length: " + length); // Outputs 5
            for (var i = 0; i < length; i++) {
                console.log("checking Concepts here: " + records[i].concept_text);
            }
            html = "<div style='margin: 10px;'><pre>" + records[1].doc_content + "</pre></div>";
            for (var i = 0; i < length; i++) {
                html = html.replace(new RegExp(records[i].concept_text, 'ig'), '<span style="color:' + color + ';">' + records[i].concept_text + '</span>');
            }
            console.log("How many span tags you are noticing here?: " + html);
            $("#docContentPanel").html(html);
        },
        loadError: function(xhr, status, error) {},
        beforeLoadComplete: function(records) {}
    });
    // perform data binding
    dataAdapter.dataBind();
    $("#myPanel").jqxGrid({
        source: dataAdapter,
        width: '122',
        height: '170',
        columns: [{
            text: 'Concept(s)',
            datafield: 'concept_text',
            cellsalign: 'center',
            width: 100
        }, {
            text: 'Note Content',
            datafield: 'doc_content',
            hidden: true
        }]
    });
    var panel = $("#docContentPanel");
    var content = panel.html();
    panel.jqxPanel({
        width: '750',
        height: '500',
        scrollBarSize: 20
    });
    $("#myPanel").on('cellclick', function(event) {
        var value = event.args.value;
        // Use a regular expression to account for the beginning/end of the
        // input, arbitrary whitespace (including line feeds) as well as
        // adjacent tags
        var regExp = new RegExp('(^|>|\\s)(' + value + ')($|<|\\s)', 'g');
        var scrollTop;
        var highlighted = content.replace(
            regExp,
            '$1<span class="highlighted">$2</span>$3'
        );
        console.log("Check for highlighted in click handler:" + highlighted);
        panel.jqxPanel('clearcontent');
        panel.jqxPanel('append', highlighted);
        // Get the offset of the last highlighted word relative
        // to the panel parent
        scrollTop = $('.highlighted:last', panel).position().top;
        // Use the jqxPanel API to scroll to that word
        panel.jqxPanel('scrollTo', 0, scrollTop);
    });
}; // End of myDocument function

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts