Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
LithiumsLithiums 

JQUERY Issue

I was trying the jquery pop up from developer force

http://developer.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page

and i  dont see the dialog box, I thought I would implement this in my org if it works. I have added the jquery library and there is no pop up blocker.

 

Has anyoen tried this and if it worked please let me know, as i am planning to implement

 

 

<apex:page showheader="false" standardController="Account" recordsetVar="accounts" showHeader="true" >
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.6.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}"  />
<script>
   $j = jQuery.noConflict();
   $j(document).ready(function() {
    $j("#phone").dialog({ autoOpen: false, modal: true, position: 'center'  });
   });
   
   function showDialog(name, phone){
      $j("#phoneNumber").html(phone);
      $j("#phone").dialog("open");
      $j('#phone').dialog("option" , "title" , name);
      $j('#phone').dialog('option', 'position', 'center');
      return false;
   }
</script>
<style>
    .accountLink { color: blue; cursor: pointer; cursor: hand; }
</style>
</head>    
 
<body>

  <apex:dataList value="{!accounts}" var="account" id="theList">
        <a href="" class="accountLink" onclick="return showDialog('{!account.name}','{!account.Phone}')"><apex:outputText value="{!account.name}"/></a>
  </apex:dataList>
 
  <div id="phone" >
      <div style="float:left">Phone:</div>
      <div id="phoneNumber"></div>
  </div>
 
</body>
</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
Shiv ShankarShiv Shankar
Just check once either your jQuery is loaded successfully or not. through following method.
if($j){
alert('loaded');
}
if($j.ui){
alert('laded');
}

you can check it through console also.

All Answers

Shiv ShankarShiv Shankar
Just check once either your jQuery is loaded successfully or not. through following method.
if($j){
alert('loaded');
}
if($j.ui){
alert('laded');
}

you can check it through console also.
This was selected as the best answer
Rahul SharmaRahul Sharma
Check whether you are getting any javascript issues in console or firebug.
LithiumsLithiums

Thanks guys, looks like jquery was not loading.

 

I replaced it with CDN from google and it worked fine.
LithiumsLithiums

hi, I was trying jquery dialog box in visual force page and was seeing some issue when the dialog box is displayed.

 

  1. When the dialog box is displayed i see the close button ('x' mark) not in sync with the image
  2. I see a border for the email link, when I havent specified one.
  3. When i click on email link in the dialog box, it uhides the 'test' div but the page is reloading and its taking me away.It should unhide and leave me on the same dialog box.

please look at it and let me know if i am doing anything wrong

 

<apex:page showheader="false" standardController="Account" recordsetVar="accounts" showHeader="true">
<apex:form >
<head>
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" />
<apex:stylesheet value="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css"/>
<apex:stylesheet value="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css"/>

<style>
.accountLink { color: blue; cursor: pointer; cursor: hand;text-decoration:underline;font-style:italic; }
</style>

<script type="text/javascript">
$(document).ready(function() {
$('#dialog').hide();
$('#test').hide();
$('#dialog').dialog({
title: "Choose Activity ",
autoOpen: false,
resizable: false,


});
});

function showDialog(){
$("#dialog").dialog('open')

}

function showalert(){
$('#test').show();
}
</script>


</head>

<body>

<a href="" class="accountLink" onclick="showDialog()">Activity</a>
<div id="dialog" >
<apex:outputPanel >
This is the content that will be displayed in the dialog box.
<apex:outputLink value="" onclick="showalert()">Email</apex:outputLink>
</apex:outputPanel>
<div id="test">
Test
</div>
</div>
</body>
</apex:form>
</apex:page>