Inconsistent Cross-Browser Behavior (IE7 & Firefox) for Visualforce Page & Buttons

Hi,

I'm working on a Visualforce page with it's own tab and getting inconsistent behavior from IE7 & Firefox (both v2 & 3). I just need a link to another VF page, but I want it to look like a button because its a custom 'new item' button. So I'm using a commandButton, like this (my objects/functions have different names...):

<apex:pageBlock title="Section 1" id="section1">
   <apex:pageBlockButtons >
      <apex:commandButton action="{!newObject}" value="New Object" />
   </apex:pageBlockButtons>
...

I have an Apex standard object controller extension with a function that just returns a page reference like this:

    public PageReference newObject(){
        PageReference pageRef = new PageReference('/apex/ObjectEdit');
        pageRef.setRedirect(true);
        return pageRef;
    }

In Firefox it works perfectly, in IE it just reloads the current page and then jumps down to near the bottom of the page (reloads the page where the 'New Object' button is placed). Also, the commandButton gets rendered at the top and the bottom of the page block, in the pageblockButton sections, however in IE, the button in the bottom section doesn't work at all -- when you click it nothing happens.

Pretty drastic inconsistency -- basically the command button doesn't work at all in IE (works wrong on top and does nothing on bottom).

Any help would be greatly appreciated as I have a lot of IE users.

thanks,
-paul

August 26, 2008
·
Like
0
·
Follow
0

Best Answer chosen by Admin (Salesforce Developers)

ptepper
I think I solved this problem... sort of. I'm not sure why IE7 and Firefox handle this code differently, but there was ultimately a basic problem in the code -- I had a form inside a form, and you should never be able to do that (AFAIK). I didn't realize it at first because the outer form is an apex:form, not inside normal <form> tags, but when I looked at the source again I saw the tags. Inside that outer form I have another straight HTML form that is used to control the jQuery Tablesorter Pager. When I place that inner form after the </apex:form> tag, it works in IE as it is supposed to.

thanks for the trying to help with this one.

-paul

September 2, 2008
·
Like
0
·
Dislike
0

dchasman
Please post the entire page/controller or preferably a complete but simplified example that showcases the problem. We are not aware of any issues like you describe (browser specific or otherwise). Are there any javascript errors present in IE /or Firefox?

On a different topic you really should switch to using the Page collection:

public PageReference newObject(){
        // Replace this: PageReference pageRef = new PageReference('/apex/ObjectEdit');
        PageReference pageRef = Page.ObjectEdit;
        pageRef.setRedirect(true);
        return pageRef;
    }

instead of strings to reference other VF pages. By not using Page.pagename you are going to lose all of the metadata referential integrity checks we perform and also automatic packaging of dependencies is not going to pick these references up when you get support for packaging VF objects in Winter '09.

Message Edited by dchasman on 08-26-2008 04:31 PM

August 26, 2008
·
Like
0
·
Dislike
0

ptepper
There are no JS errors, but I'm using a bunch of jQuery JS code - my page works like an object view page. I'm using the jQuery tablesorter plugin to provide sorting & paging on the data table. I opted for this route as opposed to the Ext.JS DataGrid used on SFDC view pages because it loads & sorts much faster and I have a lot of experience with jQuery, none with Ext.js (yet...). Here's my code -- I've removed URLs for the website I'm hosting the scripts on to avoid unneccessary stress on the server, and I've changed some object names. I'm just posting the Visualforce. The only relevant controller code is 'getObjectList' which returns a List, the result of a SOQL query and newObject, which I pasted above and which returns a page reference.

Maybe the commandButton works using some javascript that my jQuery stuff conflicts with. I can reimplement the data table using Ext.js if you think that might solve it.

<apex:page standardController="MyObject__c" extensions="MyController" id="thePage" title="Title">
<head>
<link rel="stylesheet" href="http://MYSERVER.COM/jquery/ui/tablesorter/themes/blue/style.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="http://MYSERVER.COM/jquery/ui/tablesorter/jquery.tablesorter.js"></script>
<script src="http://MYSERVER.COM/jquery/ui/tablesorter/jquery.tablesorter.pager.js"></script>
<script src="http://MYSERVER.COM/jquery/dimensions/jquery.dimensions.pack.js"></script>
<script>
var linkedText = function(node)
{
    // extract data from markup and return it
    return node.childNodes[0].innerHTML;
}
$(document).ready(function(){
    //Initialize tablesorter
    $(".tablesorter").tablesorter({
        sortList: [[2,1],[1,0]],
        widgets: ['zebra'],
        headers: { 0: {sorter: false}, 2: {sorter: "shortDate"} },
        widthFixed: true,
        textExtraction: "linkedText"
        }).tablesorterPager({container: $(".pager")});
});
</script>
<style>
table.tablesorter{
    border: 1px solid #BCAD75;
    font-size:100%;
}
table.tablesorter tbody tr.odd td {
    background-color: #F3F3EC;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color:#EEECD1;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    color: #FFFFFF;
    background-color:#BCAD75;
}
a.actionLink {
    color:#333333;
    font-weight:bold;
    vertical-align:top;
    text-decoration: underline;
}
</style>
</head>
<apex:sectionHeader title="Data Table" />
<apex:pageMessages />
<apex:form id="theForm">
<apex:pageBlock title="Existing Objects" id="dataSection">
    <apex:pageBlockButtons >
        <apex:commandButton action="{!newObject}" value="New Object" />
    </apex:pageBlockButtons>
    <apex:dataTable value="{!objectList}" var="e" styleClass="tablesorter" id="myTable">
        <apex:column width="64">
            <apex:facet name="header">Action</apex:facet>
                <a onclick="return confirmDelete();" href="/apex/HandleObject?id={!e.id}" class="actionLink">Del</a>
                 <a href="/apex/ObjectEdit?id={!e.id}" class="actionLink">Edit</a>
        </apex:column>
        <apex:column >
            <apex:facet name="header">Name</apex:facet>
            <a href="/apex/ObjectEdit?id={!e.id}"><apex:outputText value="{!e.Name}" /></a>
        </apex:column>
        <apex:column value="{!e.Date__c}" headerClass="{sorter: 'shortDate'}" width="120px">
            <apex:facet name="header">Date</apex:facet>
        </apex:column>
        <apex:column value="{!e.Type__c}">
            <apex:facet name="header">Type</apex:facet>
        </apex:column>
    </apex:dataTable>

    <div id="pager" class="pager">
        <form>
            <img src="http://MYSERVER.COM/inc/jquery/ui/tablesorter/icons/first.png" class="first"/>
            <img src="http://MYSERVER.COM/inc/jquery/ui/tablesorter/icons/prev.png" class="prev"/>
            <input type="text" class="pagedisplay"/>
            <img src="http://MYSERVER.COM/inc/jquery/ui/tablesorter/icons/next.png" class="next"/>
            <img src="http://MYSERVER.COM/inc/jquery/ui/tablesorter/icons/last.png" class="last"/>
            Display
            <select class="pagesize">
                <option selected="selected" value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
            </select>
            records per page
        </form>
    </div>

</apex:pageBlock>
</apex:form>
</apex:page>

August 26, 2008
·
Like
0
·
Dislike
0

dchasman
I am not able to reproduce any behavior like you describe after spending considerable time recreating this example to my dev environment.

August 27, 2008
·
Like
0
·
Dislike
0

This was selected as the best answer

Simba
I looked at your example where you are using JQuery and Visualforce. I was wondering if you can give me a start with the design approach that I am planning to have for my application.

We have an XML stream of data in a string. And it's huge XML with more than 100 K characters. I was wondering if I can use JQuery to parse this XML stream, put them in different buckets (which would be Visualforce tags, linked to list object). So that once I submit this page, I can access these data from the various list objects (which are linked to the Visualforce page).

Thanks

Regards

November 8, 2008
·
Like
0
·
Dislike
0

ptepper
Simba,

I'm not sure I completely understand your idea, but jQuery can't really affect Visualforce tags - VF is server side and javascript is client side, so I don't think that approach makes sense.

However, you can get and parse XML without too much trouble with Apex in your controller. Take a look at the documentation for the XmlStreamReader Class. You can parse it out with that and make it available to VF.

-paul

Message Edited by ptepper on 11-08-2008 09:46 AM

Message Edited by ptepper on 11-08-2008 09:49 AM

November 8, 2008
·
Like
0
·
Dislike
0

Simba
Thanks for the reply.

We'r currently doing that, using XMLStreamReader to parse th response. However, our responses are really big and complex (lot of complex elements).

So I was wondering if somehow I can parse the data using JQuery / Xpath and have that associated to the Visualforce tags. This is like setting data on the fields that's on the client side (as a Visualforce tags) and then I would have an access to these values since this is the object available on the Apex side.

I was wondering about this approach, primarily so that I can avoid any more complex parsing we might have to do in future.

Thanks again

Warm Regards

November 12, 2008
·
Like
0
·
Dislike
0

ptepper
Again, VisualForce tags are server side not client side. I'm not sure what you mean, but parsing huge XML files client side sounds like it could be slow and might be the wrong approach. Once you're talking about client side, there are no VisualForce tags -- just the HTML they output. If you can build this application on a normal server, than you can generally build it in Visualforce. You may need to start from there, build a prototype on a normal server, maybe look to the jquery community for help there.

best,

-paul

November 13, 2008
·
Like
0
·
Dislike
0

Simba
Thanks for your reply. I get waht you are saying, makes sense. So for now I'll continue using XMLStremReader.

Warm Regards

November 14, 2008
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Inconsistent Cross-Browser Behavior (IE7 & Firefox) for Visualforce Page & Buttons

All Answers

You need to sign in to do that.