Sign Up ›
  • Robert Miller
  • NEWBIE
  • 10 Points
  • Member since 2015
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies
SOLVED
2 replies

jQuery - dynamically display input text

I am attempting to build a VF page that mimics the HTML below. The HTML works as desired, but something breaks in the translation to apex. Thoughts?

HTML 
<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

j$ = jQuery.noConflict();
j$(document).ready(function() {
  j$('[id*=name]').bind('keydown keyup keypress', function() {
    j$('[id*=display]').html(this.value);
  });
});

</script>
</head>
<body>

<input type='text' id='name'>
Your name is <span id='display'/>

</body>
</html>

VF 
<apex:page>

<head>

<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />

<script>

j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('[id*=name]').bind('keydown keyup keypress', function() {
    j$('[id*=display]').html(this.value);
    });
});
        
</script>

</head>    
  
<body>

<apex:form >
<apex:inputText id="name"/>
</apex:form>

Your name is <apex:outputPanel id="display" />
  
</body>
</apex:page>


 
SOLVED
2 replies

jQuery - dynamically display input text

I am attempting to build a VF page that mimics the HTML below. The HTML works as desired, but something breaks in the translation to apex. Thoughts?

HTML 
<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

j$ = jQuery.noConflict();
j$(document).ready(function() {
  j$('[id*=name]').bind('keydown keyup keypress', function() {
    j$('[id*=display]').html(this.value);
  });
});

</script>
</head>
<body>

<input type='text' id='name'>
Your name is <span id='display'/>

</body>
</html>

VF 
<apex:page>

<head>

<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />

<script>

j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('[id*=name]').bind('keydown keyup keypress', function() {
    j$('[id*=display]').html(this.value);
    });
});
        
</script>

</head>    
  
<body>

<apex:form >
<apex:inputText id="name"/>
</apex:form>

Your name is <apex:outputPanel id="display" />
  
</body>
</apex:page>