3

Anyone have any experience diagnosing jQuery methods in SF?

This seems to me like it should work fine:

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
<script>
    var j$ = jQuery.noConflict();

    function loadText() {
        var self = j$(this),
            src  = this.value,
            box  = j$('input[id$=textBody]');

        console.log(src);

        (src) ? box.val() = src : box.val() = '';
    }

    j$('select[id$=textSelectList]').change(loadText).trigger('change');
</script>

I get no console output from the logging in that method. The HTML/VF all matches up:

<apex:form >
    <apex:selectList id="textSelectList" size="1">
        <apex:selectOptions value="{!textTemplates}" />
    </apex:selectList>
    <apex:inputTextarea value="{!textBody}" id="textBody" />
    <apex:commandButton value="Send" action="{!sendText}"/>
</apex:form>

Any ideas?

errors

Update

Full page here:

<apex:page standardController="Lead" extensions="TextLeadController">
    <head>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
        <script>
            var j$ = jQuery.noConflict();

            function loadText() {
                var self = j$(this),
                    src  = this.value,
                    box  = j$('input[id$=textBody]');

                console.log(src);

                (src) ? box.val() = src : box.val() = '';
            }

            j$('select[id$=textSelectList]').change(loadText).trigger('change');
        </script>
    </head>

    <div class="bPageTitle">
        <div class="ptBody">
            <div class="content">
                <img src="/s.gif" alt="Lead" class="pageTitleIcon" title="Lead" />
                <h1 class="pageType">Lead<span class="titleSeparatingColon"></span></h1>
            </div>
            <div class="content">
                <apex:form >
                    <apex:selectRadio value="{!number}">
                        <apex:selectOptions value="{!phoneNumbers}" />
                    </apex:selectRadio>
                    <apex:selectList id="textSelectList" size="1">
                        <apex:selectOptions value="{!textTemplates}" />
                    </apex:selectList>
                    <br /><br />
                    <apex:inputTextarea value="{!textBody}" id="textBody" style="width: 400px; height: 150px;" />
                    <br /><br />
                    <apex:commandButton value="Send" action="{!sendText}"/>
                </apex:form>
            </div>
        </div>
    </div>
</apex:page>
  • 2
    Are you putting the script before or after the VF markup? If the script is before then it will run before your content has rendered. – ScottW Jan 25 '16 at 0:10
  • Could you add a bit more of your page? I added your code to one of my pages and it loaded fine. – Caspar Harmer Jan 25 '16 at 0:46
  • Question updated. – okay56k Jan 25 '16 at 1:03
2

Solution, for anyone else stuck. Order matters, and, of course, calling a textarea input in the jQuery does no one any favours.

<div class="bPageTitle">
    <div class="ptBody">
        <div class="content">
            <img src="/s.gif" alt="Lead" class="pageTitleIcon" title="Lead" />
            <h1 class="pageType">Lead<span class="titleSeparatingColon"></span></h1>
        </div>
        <div class="content">
            <apex:form>
                <apex:selectList id="textSelectList" size="1">
                    <apex:selectOptions value="{!textTemplates}" />
                </apex:selectList>
                <br /><br />
                <apex:inputTextarea value="{!textBody}" id="textBody" style="width: 400px; height: 150px;" />
                <br /><br />
                <apex:commandButton value="Send" action="{!sendText}"/>
            </apex:form>
        </div>
    </div>
</div>

<script>
    var j$ = jQuery.noConflict();

    function loadText() {
        var self = j$(this),
            src = this.value,
            area = j$('textarea[id$=textBody]');

        console.log(src);
        area.val(src);
    }

    j$('select[id$=textSelectList]').change(loadText).trigger('change');
</script>

1

If you use j$(document).ready(function() { ...}, the jQuery within the closure doesn't execute until after the page loads.

Or, using jQuery shorthand: j$(function() {..}

That is ..

<script>
  var j$ = jQuery.noConflict();
  j$(function() {..}  // your jQuery that needs to execute after page load
  // other functions and jQuery that is not page load dependent
</script>

See the blog post by Developer Evangelist Josh Birk. Also see this VF and jQuery blog post by Josh Birk. In my experience, this avoids the order dependency issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.