Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
prettynerdprettynerd 

jQuery cannot get inputTextarea value referencing its id?

hi,

 

please help me identify what's wrong with this code:

 

    <apex:includeScript value="{!$Resource.jquery}"/>

 

    <apex:form onsubmit="shout(event);">

        <apex:inputTextarea id="myTxtArea" value="{!myControllerVariable}"/>

    </apex:form>

 

    <script>

        jQuery.noConflict();


        function shout(event) {
        alert(jQuery("#myTxtArea").val()); ---> this alerts an 'undefined' value!
            if(jQuery("#myTxtArea").val("")) { ---> but would still execute the codes in this condition.. T_T
                jQuery("#errorMsg").text("Please enter a shoutout");
                jQuery("#errorMsg").show();
                event.returnValue = false;
                event.preventDefault();
            }
        }
    </script>

 

jQuery seemed can't reference the <apex:inputTextarea> id in this case.. is this really the case in the salesforce platform?

 

any help would be much appreciated..

Best Answer chosen by Admin (Salesforce Developers) 
SteveBowerSteveBower

Sorry, I just fired off a response without thinking about it for more than the time to see the string wasn't the same.

 

In Apex, the Id's that are created for the generated HTML elements aren't directly passed through, but are accumulated.

 

So, if you're VF code is:

<apex:page id="thePage">

<apex:pageBlock id="theBlock">

<apex:InputField id="theField"   etc.>

 

Then the ID that's generated for the <Input> html tag is something like: id="thePage:theBlock:theField".

 

Take a look at the generated code in the Browser source code screen and you'll see what I mean.  So, instead of using

an exact jquery ID selector for "#theField", you need something like: [id$='theField']   So, you're finding all elements where the ID contains the string you give (which should be unique).

 

Perhaps that's your issue?  Best, Steve.

All Answers

SteveBowerSteveBower

Shouldn't you be looking for "myTxtArea" with the jQuery calls instead of "txtArea"?  Best, Steve.
prettynerdprettynerd

sorry.. twas a typo error.. any idea with the problem???
SteveBowerSteveBower

Sorry, I just fired off a response without thinking about it for more than the time to see the string wasn't the same.

 

In Apex, the Id's that are created for the generated HTML elements aren't directly passed through, but are accumulated.

 

So, if you're VF code is:

<apex:page id="thePage">

<apex:pageBlock id="theBlock">

<apex:InputField id="theField"   etc.>

 

Then the ID that's generated for the <Input> html tag is something like: id="thePage:theBlock:theField".

 

Take a look at the generated code in the Browser source code screen and you'll see what I mean.  So, instead of using

an exact jquery ID selector for "#theField", you need something like: [id$='theField']   So, you're finding all elements where the ID contains the string you give (which should be unique).

 

Perhaps that's your issue?  Best, Steve.

This was selected as the best answer
prettynerdprettynerd

thanks steve, it worked!!! :smileyvery-happy:

 

i apologize for the late reply.. i just got back to this problem today.. thanks for the great help!
LoxMyth BourneLoxMyth Bourne

Sorry, my jQuery is non-existant - does this mean:

 

 

 

        alert(jQuery("#myTxtArea").val()); ---> this alerts an 'undefined' value!
            if(jQuery("#myTxtArea").val("")) { ---> but would still execute the codes in this condition.. T_T
                jQuery("#errorMsg").text("Please enter a shoutout");
                jQuery("#errorMsg").show();
                event.returnValue = false;
                event.preventDefault();
            }

 becomes:

 

 

        alert(jQuery([id$='myTxtArea']).val()); ---> this alerts an 'undefined' value!
            if(jQuery([id$='myTxtArea']).val("")) { ---> but would still execute the codes in this condition.. T_T
                jQuery([id$='myTxtArea']).text("Please enter a shoutout");
                jQuery([id$='myTxtArea']).show();
                event.returnValue = false;
                event.preventDefault();
            }

or

 

 

 

        alert([id$='myTxtArea'].val()); ---> this alerts an 'undefined' value!
            if([id$='myTxtArea'].val("")) { ---> but would still execute the codes in this condition.. T_T
                [id$='myTxtArea'].text("Please enter a shoutout");
                [id$='myTxtArea'].show();
                event.returnValue = false;
                event.preventDefault();
            }

 

 - actually, I'm sure it's neither because when I try to save, i get: "Illegal group reference".

 

 
SteveBowerSteveBower

Your first attempt is best, however jQuery is a javascript function.  The argument to that function is a text string (in double quotes).  You seem to have removed those quotes.   Put them back.  :-)

 

alert(jQuery("[id$='myTxtArea']").val());

etc.
prettynerdprettynerd

howdy!

 

you forgot to include which component you are referring to.. :womanhappy:

 

this is my actual code that worked:

 

                if($.trim($("textarea[id$='txtArea']").val())==""){
                    $("div[id$='errorMsg']").text("Please enter a shoutout");
                    $("div[id$='errorMsg']").show();
                    event.returnValue = false;
                    event.preventDefault();
                }

 

here you can see that before the [id$='txtArea'] the component type is also indicated: $("textarea[id$='txtArea']")

 

peace out! :womanwink:
LoxMyth BourneLoxMyth Bourne

Thank you both for helping. I have Really short snips to present:

 

 

<apex:page controller="JD_JQ_controller" id="topPage">
   <apex:includeScript value="{!$Resource.jquery}"/>
        <script>
        jQuery.noConflict();
        function shout(event) {
        alert("got here");
        alert(   $("textarea[id$='txt1Area']").val()  );
        }
    </script>
<br/>
    <apex:form onsubmit="shout(event);">
        <apex:inputTextarea id="txt1Area" value="{!myControllerVariable}"/>
        <br/>
        <apex:commandButton action="{!noOp}" value="No Op"></apex:commandButton>
    </apex:form>

</apex:page>

 

public class JD_JQ_controller {

        public string myControllerVariable {set;get;}

        public JD_JQ_controller(){

        }

        public void noOp(){
                
        }

}

 

 

I get the first alert, but not the second, showing what I typed into the textArea. Any ideas?

 

Thanks,

LB

 

 
prettynerdprettynerd

hi,

 

comment out //jQuery.noConflict();

 

hope this helps!.. ^_^
LoxMyth BourneLoxMyth Bourne

Perfect! How nice that you took the time to help me. If you celebrate July 4th, I hope it finds you well.
LoxMyth BourneLoxMyth Bourne

Getting to the apex:inputTextarea was simple with the below (thanks, again).

 

 

$("textarea[id$='txt1Area']").val()

 

 

However, what about the other tags? I used an apex:inputField tag, and couldn't come up with a selector to hit it (kept getting "undefined"). What are the steps in a rule of thumb approach to get to it? Firebug it? [I tried that & got pretty confused] - DId you notice the Ron Hess post about jquery wherein he speaks of "simple modal"?

 

Should I be using that? I noticed that some of the Jquery threads have gone dark ... is it an ify proposition?

 

 

 

 

 
prettynerdprettynerd

so did you try $("input[id$='inputId']").val() ???

 

if im not mistaken, simple modal is used if you want customized dialog boxes simplified on your page using this jquery plugin/extension, no???
LoxMyth BourneLoxMyth Bourne

That didn't work. I'm trying what I see in:

 

http://th3silverlining.com/2010/02/17/visualforce-ids-in-jquery-selectors/

 

 

This works! Now I can get stuff done instead of wrestling with lower leveled complexities which systems should (usually) hide from me.