/ Published in: Other
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
//MOD of example in http://www.tgerm.com/2010/02/visualforce-salesforce-jquery-ajax-how.html by d3developer (d3developer.com) <apex:page showHeader="true" standardStylesheets="true" > src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/JavaScript" /> src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/JavaScript" /> <apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/cupertino/jquery-ui.css"/> <script type="text/JavaScript"> function search() { $("#status").html( "Making a Jquery Ajax Request to '{!$Page.largeLookup}'"); // Make the Ajax Request $.getJSON("{!$Page.largeLookup}", { "core.apexpages.devmode.url" :'1', "term" :$('#query').val() }, function(data) { $("#response").html(JSON.stringify(data)); }); $("#status").html("Ajax Request Completed !"); } $(function() { $("#autoc").autocomplete({ source: function(request, response) { $.getJSON("{!$Page.largeLookup}", { // "core.apexpages.devmode.url" :'1', term: request.term }, response); }, select: function(event, ui) { $('#response').html(ui.item.id); }, minLength: 2 }); }); </script> <apex:sectionHeader title="Ajax Client Demo" /> <apex:pageblock > <apex:pageBlockSection title="Query Console"> Query String Autocomplete <input type="text" id="autoc" /> </apex:pageBlocksection> <apex:pageBlockSection title="Ajax Console"> <pre id="status" style="font-size: 16px" /> <div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" /> </apex:pageBlocksection> </apex:pageblock> </apex:page>