Apex Code Development You need to sign in to do that
Don't have an account?
Lithiums Jquery iSSUE
hi, I was trying jquery dialog box in visual force page and was seeing some issue when the dialog box is displayed.
- I see a border for the email link, when I havent specified one.
- When i click on email link in the dialog box, it unhides 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>
Hey,
Yeah sorry,
This should work if you replace the line
With:
Cheers
All Answers
Hey, OutputLink is just used for redirection purpose(redirecting user to some other page).
So, I would suggest you to use Command Link with rerender attribute.
I have the modified code for you, Test and let me know the outcome:
<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:commandLink value="" onclick="showalert()" rerender="theTestPanel">Email</apex:commandLink> </apex:outputPanel> <apex:outputPanel id="theTestPanel"> <div id="test"> Test </div> </apex:outputPanel> </div> </body> </apex:form> </apex:page>Thanks for the reply,
Sorry I did not put the entire code, I am redirecting the user to a different vf page. Please look and advice.
Rahul, Did you get a chance to look at the code again. Please take a look at your convenience and advice.Atlease a pointer in the right direction would help me out.
Hey,
Can you not just return false in the jquery method? (See Below)
<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')return false; } function showalert(){ $('#test').show();
return false; } </script>
As for the border, try this:
<apex:outputLink value="" onclick="showalert()" styleClass="blankLink">Email</apex:outputLink> <style type="text/css"> .blankLink { border:none !important; } </style>Let me know if that works.
Cheers
Thanks for looking in to this, but it doesnt work. Is there something else which you can advice
Hey,
Yeah sorry,
This should work if you replace the line
With:
Cheers
Just for clarification, I have tested and this works so here is the entire code again so its a bit easier.
<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(); return false; } </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:commandLink value="" onclick="return showalert()" >Email</apex:commandLink> </apex:outputPanel> <apex:outputPanel id="theTestPanel"> <div id="test"> Test </div> </apex:outputPanel> </div> </body> </apex:form> </apex:page>Cheers,
Adam
Whats the problem you are facing?
Read the question?
Thanks a lot Adam, it worked.Its not getting refreshed anymore.
Now the only issue I have is the border around the email link.
No worries.
Yeah ive just had a look, you need to change your showDialog function to the following:
function showDialog(){ $("#dialog").dialog('open') $('.ui-dialog a').blur(); }The jQuery UI library automatically focuses on the link, the script above cancels that out.
Awesome, thanks a lot Adam.
It worked and I learnt something today, thanks again.