Simple jQuery Dependent Picklist

Friday, January 18, 2013 by Aslam - The Alexendra

Hi All,
Today I am going to show you how to make dependent picklist on visualforce page with some few lines of code. This is client side dependent list. So it has following benefits:

1) No Action Function or Ajax, means we dont need to call server side script to filter the list of records.
2) Its based on javascript so its fast
3) We can extend the level of dependency



The idea here to use jQuery and one small method to make the dependency. I have got this idea from here.
1) First make your parent select list as below

<select id="accountList" size="1"> <option value="">-Select-</option> <apex:repeat value="{!accounts}" var="acc"> <option value="{!acc.Id}">{!acc.Name}</option> </apex:repeat> </select>
2) Make your child select list. Make sure to give option a class name like this "child_{parent_record_value}".


<select id="contactList" size="1"> <apex:repeat value="{!contacts}" var="con"> <option class="child_{!con.accountid}" value="{!con.Id}">{!con.Name}</option> </apex:repeat> </select>
3) Put the below code in your head section

function prepareList(parent,child,isSubselectOptional){ $("body").append("<select style='display:none' id='"+parent+child+"'></select>"); $('#'+parent+child).html($("#"+child+" option")); $('#'+child).html("<option> — </option>"); $('#'+parent).change(function(){ var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .child_"+parentValue).clone()); if(isSubselectOptional) $('#'+child).prepend("<option> — Select — </option>"); }); }
4) Call the below method on load of the page. Make sure to pass proper parent and child select list ids.
$(function() { prepareList('accountList','contactList', false); });

Thats it. Now you can see on the page the dependency is created automatically.

You can download the code from here

You can see the working demo here
http://labsprojects-developer-edition.ap1.force.com/DependentPicklist


Thanks
Aslam Bari

Simple Context-Menu For Web Page

Tuesday, January 1, 2013 by Aslam - The Alexendra
Hi All,
Here I am going to give a demo for how you can make a context menu on your web page using few lines of code. Many times such web applications needed where user can do many operations on different kind of records. In that scenario making lot of buttons or checkboxes are easily avoided if you go with context menu.


Context-Menu


How to implement Context-Menu:

1) Make your context-menu html code and put that at the end of body.

<ul id="menu" class="custom-menu"> <li><a href="javascript:alert('Clicked Add Notes');" onclick="addnote();">Add Notes</a></li> <li><a href="javascript:alert('Clicked Add Memos');" id="menu_2">Add Memos</a></li> <hr style="clear:both;color:#E6E6E6" /> <li><a href="javascript:alert('Clicked View Order');" id="menu_4">View Order</a></li> <li><a href="javascript:alert('Clicked View Invoice');" id="menu_5">View Invoice</a></li> <li><a href="javascript:alert('Clicked View Employee');" id="menu_3">View Employee</a></li> </ul>

2) Include jQuery main js file, in our case i have used jquery-1.8.3.js

3) Put below code in your head section of html file

<script> $(function() { $(".emp").bind("contextmenu", function(event) { event.preventDefault(); $("#menu").show(); $("#menu").css({top: event.pageY + "px", left: event.pageX + "px"}); }); $(document).bind("click", function(event) { $("#menu").hide(); }); }); </script>


Here #menu is Id of your html menu area, ".emp" is the class name of element on which you want to bind this context-menu on right click.

4) Give some good look to your menu, put below code in your head section style tag

<style> .custom-menu { z-index:1000; position: absolute; background-color:#FFF; border: 1px solid black; padding: 5px; list-style: none; width:150px; display:none; } .custom-menu a{ text-decoration: none; padding:5px; font-size:13px; width:100px; display:block; color:#000; } .custom-menu a:hover{ text-decoration: none; border:1px solid #ccc; background-color:greenyellow; } .custom-menu li{ margin:5px; } </style>


5) Now, design your web page and give class "emp" to the elment where you want this context menu to open.

Here is working demo:
http://labs.aslambari.com/context-menu/contextmenu.html
Click the names of employee on the page, you will see the context-menu

You can download complete code here:
http://aslambari.com/downloads/context-menu.zip

Let me know your thoughts

Thanks
Aslam Bari