Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gibran Shah 41 posts 182 karma points
    1 week ago
    Gibran Shah
    0

    Error when passing rich text editor string to Javascript function

    Hello,

    I'm trying to solve a tricky problem that's got me stuck.

    I've got a rich text editor in my content page that's got a lot of data (it's used to list out a job description with things like qualifications, responsibilities, requirements, etc... lot of paragraphs and bullet points). In my template, I want to pass this data to a Javascript function:

    <a href="#" onclick="moreInfoClicked('@content.positionTitle',
                   '@content.postingDate',
                   '@content.jobCode',
                   '@content.reportTo',
                   '@content.salary',
                   '@content.details.ToString().Replace("\n", "")')">
                        More Info
                </a>
    
    ...
    
    function moreInfoClicked(title, postingDate, jobCode, reportTo, salary, details) {
    ...
    }
    

    None of the arguments seem to have a problem except for details, which is the job description details.

    I get the error:

    Uncaught SyntaxError: missing ) after argument list
    

    When I click on source, I see this:

    moreInfoClicked('Executive Assistant',
                   '',
                   '01974',
                   'President & CEO',
                   'Contract',
                   '<p><strong><span>Requirements:</span>...</span></li></ul>')
    

    So it seems to be passing the full rich text formatted string to the function (rendered as HTML) but somehow it's not processing the closing single quote and therefore not recognizing the closing bracket.

    As you can see, I partially solved this problem by getting rid of the newlines that exist in the HTML (this is why I call Replace("\n", ""). That worked for some cases but not all.

    I also wondered if having the double quotes around \n and the empty string after it in Replace("\n", "") was causing an issue since it's already embedded in double quotes starting at onclick="moreInfoClicked(...". I tried adding escape quotes so that it became:

    Replace(\"\n\", \"\")
    

    But that didn't work.

    Then I tried storing the job details string in a variable before the call to the function and passing the variable to the function, like this:

    var details = @content.details.ToString().Replace("\n", "");
    <a href="#" onclick="moreInfoClicked('@content.positionTitle',
                   '@content.postingDate',
                   '@content.jobCode',
                   '@content.reportTo',
                   '@content.salary',
                   '@details')">
                        More Info
                </a>
    

    But this didn't solve the problem either.

    I'm not sure what to do. Is there a trick to passing complex rich text formatted strings rendered as HTML to a Javascript function such that it recognizes where it begins and where it ends?

  • Nathan Woulfe 370 posts 1385 karma points MVP 2x c-trib
    1 week ago
    Nathan Woulfe
    0

    Could you change the approach and passing in @content.id only, then in the javascript retrieve the other details? Would avoid rendering out the additional parameters for every listing on the page, and would make the moreInfoClicked function simpler as it would be receiving a single parameter.

  • Gibran Shah 41 posts 182 karma points
    1 week ago
    Gibran Shah
    0

    I could probably do that, but I'm not sure how to get the content properties from the ID in Javascript. I can do it in the template like this:

        @foreach (var posting in Model.Content.Children()) {
            var content = Umbraco.Content(posting.Id);
            ...
        }
    

    But Umbraco.Content(id) doesn't work in Javascript.

    Does Umbraco provide a Javascript library for getting content?

  • Gibran Shah 41 posts 182 karma points
    6 days ago
    Gibran Shah
    0

    I finally solved this problem by storing the details in a hidden input and then grabbing that input's value in the javascript function.

    For some reason, the Replace("\n", "") wasn't actually replacing the newline characters. Don't know why. It replaced every other character I tried, just not newlines.

Please Sign in or register to post replies

Write your reply to:

Draft