+ Start a Discussion
Robert MillerRobert Miller 

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>


 
Best Answer chosen by Robert Miller
SarfarajSarfaraj
Hi Robert,

All connection to and from salesforce should be secured. In your current page jQuery plugin is being served over http. Use this,
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />

Instead of,
<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />
Rest seems fine to me.

--Akram
 

All Answers

SarfarajSarfaraj
Hi Robert,

All connection to and from salesforce should be secured. In your current page jQuery plugin is being served over http. Use this,
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />

Instead of,
<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />
Rest seems fine to me.

--Akram
 
This was selected as the best answer
Robert MillerRobert Miller
That did the trick. Thank you Akram.