Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Santi Ram RaiSanti Ram Rai 

Button on Visualforce page

Hi everybody,

I want button on Visualforce page, which navigate to other visualforce page. Please, can some body has idea, how can i create it?

 
@Karanraj@Karanraj
Use the following code to navigate to your visualforce page

1. To open your visualforce page in new tab 
<apex:commandButton onclick="window.open('/apex/test3');" value="Save" id="theButton" />
2. Open your visualforce page in same tab 
<apex:commandButton action="/apex/test3" value="Save" id="theButton" />

Replace the test3 with your custom visualforce page name


 
Santi Ram RaiSanti Ram Rai
But, i want to display the page inside iframe.
srlawr uksrlawr uk
that would probably have been useful to mention..

So, what are you after? I'll try to type it up for you:

You want to put a button on a custom visualforce page, that when clicked, loads a DIFFERENT page inside an iFrame on the SAME page?

What you are probably going to end up wanting to do is stick an "Id=" on the iFrame and then using the first link from S.Karanraj's answer above, but in the onclick - instead of window.open - you want to use the javascript to redirect the location of the iFrame.
 
Santi Ram RaiSanti Ram Rai
Do you have any related coed for this? Actually, i am new in Vusialforce.
srlawr uksrlawr uk
Something like this?
  
<script type="text/javascript">
function changeIFrame() {
    document.getElementById('targetiframe').src = 'http://www.google.com';
}
</script>

<iFrame id="targetiframe" />

<apex:commandButton onclick="changeIFrame();" value="Save" />

obviously you will want more attributes (such as height and width) on the iframe. but at a glance I think that is legit.

The only bit of visualforce is the button.. there is an <apex:iframe /> tag, which you might want to look into:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_iframe.htm

but anything you can achieve visualforce you can also achieve with straight up html/css/javascript
 
Santi Ram RaiSanti Ram Rai
I have this error:

User-added image
srlawr uksrlawr uk
ok. Well, to specifically answer your question here... when you get an error message in the developer console from visualforce that makes no sense... try making the change in the browser, because the Developer console has a bug when it tries to render error messages with angle brackets in... here is what it's trying to say:

User-added image

(and so, for the record, you need commandbuttons to be inside an apex:form tag - so wrap your apex:pageBlock in a pair of those)
Santi Ram RaiSanti Ram Rai
Hi Srlawr,

This is my code: 
<apex:page sidebar="false">
    <apex:form>
        <apex:pageBlock>
        <script type="text/javascript">
        function changeIFrame() {
            document.getElementById("targetiframe").src = "/apex/click";
        }
        </script>
    </apex:pageBlock>
        <apex:commandButton onclick="changeIFrame();" value="Project" />
    </apex:form>
     <iframe id="targetiframe" width="100%" height="90%"/>
</apex:page>

But when i clicked on Project button, i don`t load the visualforce page. Why?
User-added image
srlawr uksrlawr uk
Probably because the page is reloading on completion of the commandbutton... make it do this:
  
<apex:commandButton onclick="changeIFrame(); return false;" value="Project" />

this is really simple debugging though man, come on - try some things yourself ;)
Santi Ram RaiSanti Ram Rai
Now, result is like this. It is displaying code instead of page. Why?
User-added image
srlawr uksrlawr uk
that will be because of the target you are pointing the iFrame to... ;) 
Santi Ram RaiSanti Ram Rai
oooo, It means. I am looking for wrong type:
Atually, i want to display the some page inside the visualforce page. I have found the this code on internet, but it is not working. Can you please help me to find out. When the Google button is clicked the google page should display and when the yahoo button is clicked the yahoo page should display.

Page: 
<apex:page controller="loadPage" sidebar="false" id="pg" >
<apex:form >
<apex:actionFunction action="{!openPage}" name="OpenPage" reRender="pb,theIframe">
    <apex:param assignTo="{!Page}" value="" name="param1"/>
</apex:actionFunction>
    <apex:pageBlock id="pb">
        <apex:pageBlockButtons >
            <apex:commandButton value="Google" onclick="OpenPage('google'); return false;"/>
            <apex:commandButton value="Yahoo" onclick="OpenPage('yahoo'); return false;"/>
        </apex:pageBlockButtons>
        <apex:iframe id="theIframe" src="{!OpenPageURL}" scrolling="true"/>
    </apex:pageBlock>
</apex:form>
</apex:page>

Apex Class: 
public class loadPage {
    public String Page {get; set;}
    public String OpenPageURL {get; set;}
    public void loadPage()
    {
        Page = '' ;
        OpenPageURL = '' ;
    }
    public PageReference openPage()
    {
        if(Page == 'google')
        {
            OpenPageURL = '<a target="_blank" href="http://www.google.com/';
        }
        if(Page == 'yahoo')
        {
            OpenPageURL = '<a target="_blank" href="http://www.yahoo.com/' ;
        }
        return null;
    }
}


 
Santi Ram RaiSanti Ram Rai
I don`t understand, whta are you saying.
srlawr uksrlawr uk
Well. This is a completely different approach, including a whole custom controller extension? I can't visually debug that I'm afraid, no! So you'll have to tell me what is "not working" about it. I mean, it looks alright to me... using an action function with a parameter, going all the way back to an openPage method in the controller and then reRendering the frame..

maybe there is a good reason for doing that (such as you found with the frame not rendering the page right).

I'd probably determine which route you wish to go down and pursue it. I think both will work. The controller will require test coverage too, remember.
 
Santi Ram RaiSanti Ram Rai
This is the result, when click on Google button:
User-added image

Please, can you help me to fix this. May be you can try in your org, what that the problem is.
srlawr uksrlawr uk
That looks to me like you are putting a bad URL into your iFrame.

Press F12 to launch your browser debugging tool and when you click the button, scroll through the DOM definition to see what you are putting into the src.

I would bet it's something like:

https://eu5.salesforce.com/www.google.com

or some weird mashup where you arn't setting a straight up URL from the start, rather than putting a relative one on the end of where your Salesforce currently resides.


 
Santi Ram RaiSanti Ram Rai
Here i don`t see here, such what you have said.
User-added image
srlawr uksrlawr uk
Do you know how to use the developer tool in the browser? If not we're probably on an uphill struggle here.. it shouldn't take too much to learn it though... you are trying to find the iFrame element in the "Elements" bit of that window - scroll through it until you find your google and yahoo buttons and then you should see your iFrame... it will have a src tag.

click your button and then find the iFrame again (the elements panel will blink/change when you do) - and find the src again - it will have the new URL you have assigned to your iFrame.


Are you using the Apex controller approach now, or the original Javascript one we started work on?
Santi Ram RaiSanti Ram Rai
Yes i am using Apex controller approach. 
public class loadPage {
    public String Page {get; set;}
    public String OpenPageURL {get; set;}
    public void loadPage()
    {
        Page = '' ;
        OpenPageURL = '' ;
    }
    public PageReference openPage()
    {
        if(Page == 'google')
        {
            OpenPageURL = '<a target="_blank" href="http://www.google.com/';
        }
        if(Page == 'yahoo')
        {
            OpenPageURL = '<a target="_blank" href="http://www.yahoo.com/' ;
        }
        return null;
    }
}

This is the screen shoot.
User-added image