{"id":3355,"date":"2013-06-29T02:49:02","date_gmt":"2013-06-28T21:19:02","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3355"},"modified":"2013-06-29T02:49:02","modified_gmt":"2013-06-28T21:19:02","slug":"jquery-based-raffle-in-salesforce","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/jquery-based-raffle-in-salesforce\/","title":{"rendered":"JQuery Based Raffle in Salesforce"},"content":{"rendered":"

Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this – JQuery based Raffle in Salesforce<\/strong>.<\/p>\n

I have created a List View Button, where I select few contacts and using JQuery, One Contact is selected Randomly. Assuming that you already know how to create List View Button, I will share my Visualforce and Controller Extension code with you.<\/p>\n

Also, Please note that to run this demo, you need to have JQuery file in your static resource with name “JQueryAndCss”.
\n<\/p>\n

\"JQuery<\/a>
JQuery Based Raffle in Salesforce<\/figcaption><\/figure>\n

Visualforce – PlayRaffle<\/strong><\/span><\/p>\n

\n<apex:page standardController="sfdc_contact__c" recordSetVar="contacts" extensions="PlayRaffle">\n<script type="text\/javascript" src="{!URLFOR($Resource.JQueryAndCss, 'jquery_1.7.1.min.js')}"> <\/script>\n\n<style type="text\/css">\n\n        ol.raffleComponent {\n            list-style-type: none ;\n            float: left ;\n            font-size: 20px ;\n            margin: 0px 0px 0px 0px ;\n            padding: 0px 0px 0px 0px ;\n            }\n\n        ol.raffleComponent li, .winnerDiv {\n            background-color: #FAFAFA ;\n            border: 2px solid #454545 ;\n            float: left ;\n            line-height: 60px ;\n            margin: 0px 10px 10px 0px ;\n            overflow: hidden ;\n            padding: 0px 10px 0px 10px ;\n            text-align: center ;\n            }\n\n        ol.raffleComponent li.on , .winnerDiv{\n            background-color: gold ;\n            }\n\n        .winnerDiv{\n            display : none;\n            font-size: 30px ;\n            }\n\n    <\/style>\n\n    <button type="submit" OnClick="RunRaffle()">Run Raffle<\/button>\n    <br \/>\n\n    <ol class="raffleComponent">\n         <apex:repeat value="{!contactNames }" var="conName">\n            <li><div> {!conName} <\/div><\/li>\n         <\/apex:repeat>\n    <\/ol>\n\n        <br clear="all" \/>\n    <br \/>\n\n    <div class="winnerDiv" ><\/div>\n    <br clear="all" \/>\n\n<script type="text\/javascript">\n\n        \/\/ Initializes and runs the raffle.\n        function RunRaffle(  ){\n            var jRaffle = $( ".raffleComponent" );\n\n            \/\/ Clear the raffle list.\n            \/\/jRaffle.empty();\n            $(".winnerDiv").hide();\n\n            \/\/ Find the "on" element.\n            var jCurrentLI = jRaffle.find( "li:first" ).addClass( "on" );\n\n            \/\/ Get base pause time.\n            var intPause = 40;\n\n            \/\/ Get the time to wait before chaning the pause time.\n            var intDelay = (4500 + (Math.random() * 2000));\n\n            \/\/ Define the ticker.\n            var Ticker = function(){\n\n                var jNextLI = jCurrentLI.next( "li" );\n\n                \/\/ Check to see if there is a next LI.\n                if (!jNextLI.length){\n\n                    \/\/ Since there is no LI left in the list, our next LI will be the\n                    \/\/ first one in the list.\n                    jNextLI = jRaffle.find( "li:first" );\n\n                }\n\n                \/\/ Turn off the current list.\n                jCurrentLI.removeClass( "on" );\n\n                \/\/ Turn on next list.\n                jNextLI.addClass( "on" );\n\n                \/\/ Store the new LI in the current LI (for next iteration).\n                jCurrentLI = jNextLI;\n\n                \/\/ Check to see if we should start changing the pause duration.\n                if (intDelay > 0){\n\n                    \/\/ Substract from the delay.\n                    intDelay -= intPause;\n\n                } else {\n\n                    \/\/ Change the pause.\n                    intPause *= (1 + (Math.random() * .1));\n\n                }\n\n                \/\/ Check to see how long the pause it. Once it gets over a certain wait\n                \/\/ time, we are done playing and picking the winner.\n                if (intPause >= 400){\n\n                    \/\/ We found a winner!\n                    var resulDiv = $(".winnerDiv");\n                    resulDiv.html("Winner is - "+ jCurrentLI.text() + ' !!!');\n                    resulDiv.addClass("on");\n                    resulDiv.show();\n\n                } else {\n\n                    \/\/ Not done yet, call again shortly.\n                    setTimeout( Ticker, intPause );\n\n                }\n            }\n\n            \/\/ Start ticker.\n            Ticker();\n        }\n    <\/script>\n\n<\/apex:page>\n<\/pre>\n
Controller Extension : PlayRaffle<\/strong><\/span><\/p>\n
\npublic class PlayRaffle {\n\n    public List<String> contactNames {get;set;}\n\n    public PlayRaffle(ApexPages.StandardSetController controller) {\n\n        contactNames = new List<String>();\n        List<SFDC_Contact__c> sfdcContacts = (List<SFDC_Contact__c>)controller.getSelected();\n        Set<Id> conIds = new Set<Id>();\n         for(SFDC_Contact__c s : sfdcContacts )\n        {\n            conIds.add(s.Id);\n        }\n\n        sfdcContacts = [Select Name, Last_Name__c FROM SFDC_Contact__c Where Id IN : conIds];\n\n        for(SFDC_Contact__c s : sfdcContacts )\n        {\n            contactNames.add(s.Name+' '+s.Last_Name__c);\n        }\n\n    }\n\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this – JQuery based Raffle in Salesforce. I have created […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9,19],"tags":[134,165,331,336],"class_list":["post-3355","post","type-post","status-publish","format-standard","hentry","category-salesforce","category-webtech","tag-jquery","tag-raffle","tag-salesforce","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":3355,"position":0},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":3355,"position":1},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2817,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gantt-chart-in-salesforce-using-jquery-and-json\/","url_meta":{"origin":3355,"position":2},"title":"Gantt Chart in Salesforce using JQuery and JSON","author":"Jitendra","date":"April 18, 2012","format":false,"excerpt":"Tutorial and Example of creating the Gantt Chart in Salesforce using JQuery and JSON","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Gantt Chart in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3134,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-helptext-like-custom-tooltip-using-jquery\/","url_meta":{"origin":3355,"position":3},"title":"Salesforce Helptext like Custom Tooltip using JQuery","author":"Jitendra","date":"February 4, 2013","format":false,"excerpt":"Welcome back Readers. This is my first blog entry for year 2013, i know its too late. However i can ensure that i have lots of unique post which will come this year. I am starting this year with very light post , mimic the help-text style of Salesforce. Download\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Salesforce like Helptext - Tooltip using JQuery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/02\/Salesforce-like-Tooltip-using-JQuery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2843,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/streaming-api-using-jquery-salesforce\/","url_meta":{"origin":3355,"position":4},"title":"Streaming API Using JQuery – Salesforce","author":"Jitendra","date":"May 6, 2012","format":false,"excerpt":"Tutorial of Streaming API in Salesforce with Source code and Demo Video - Implementation of Bayeux protocol and CometD using JQuery and JSON","rel":"","context":"In "Tech Tips"","block_context":{"text":"Tech Tips","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/tips\/"},"img":{"alt_text":"Salesforce Streaming API - Create Push topic","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2649,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-dom-elementid-of-the-visualforce-components\/","url_meta":{"origin":3355,"position":5},"title":"Get DOM ElementID of the Visualforce components","author":"Jitendra","date":"January 19, 2012","format":false,"excerpt":"How to get the DOM ElementID of the Visualforce components in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=3355"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3355\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}