Layout Files & Javascript

[jcw2m]

In testing I noticed that my scripts apply as expected on both a pc and an android phone on cart pages using regular layout files. These same cart pages ignore my scripts if a layout file from the "Fixed" directory is applied. The only workaround seems to be to change pages such as My Account, Login, Basket and Checkout to not use the layout files in that fixed directory. The only page I haven't tested on is the checkout.

The base master code behind files in both locations call all the same javascript files including the jquery library. I tested turning the mobile view on to see if there were any console errors or display issues and there are none. It seems like there is logic somewhere that tells the cart to ignore javascript added when a layout from the fixed directory is used, but I just can't seem to find it.

Does anyone know what might be causing this or where it might be coming from? Related to security?

Thanks!
Julie

[mazhar]

How are you including your custom scripts on these pages like account, login etc ? Are you trying to reference external JS files in fixed master pages?

[jcw2m]

Hello Mazhar, thank you for answering. I included files needed by also calling them from the base.master in the fixed directory. Still, for whatever reason on pages that used the fixed layout files - the scripts fail to engage as expected. I sent the dev site url via pm.

[mazhar]

When I look at the normal and fixed Base.Master.cs files it seems like we are registering the scripts at different events. The normal master page does this on Page_PreRender while fixed one does it in Page_Init. Can you please change the Page_Init to Page_PreRender in Layout/Fixed/Base.Master.cs file and then check if it makes any difference.

[jcw2m]

I apologize for the delay, workload was heavy today. I blocked off some time to test this first thing in the morning. Thanks!

[jcw2m]

I changed the fixed base.master code behind to protected void Page_PreRender(object sender, EventArgs e) and tested on my android. I added a product, went to the basket page. Unfortunately there was no change. It just doesn't make sense. In reviewing the files it looks like that is the only difference, both are using the same scripts. I'm using the basket page as my test because that's where one of the truly needed scripts fails on phones. basically it takes the gridview and converts it to one static column while the other columns are treated as overflow that can be scrolled horizontally to view. It took a bit of digging to find anything that would work for a gridview that is also in an updater. I sure appreciate your time and help with this.

[mazhar]

If page has update panel then you will have to make your scripts reinitialize against partial post back. The scripts registered as page start up work well with full post back but if page has update panel for partial post backs you have to make your scripts aware of it. Basket page does have a update panel so maybe it has something to do with problem you are facing? following shouod trigger custom scripts against both full and partial post backs.

Code: Select all

// INITIALIZE THE TABLE SCRIPT ON PAGE LOAD
$(document).ready(function () {
	initMyScript();
});

// INITIALIZE THE TABLE SCRIPT ON PARTIAL POSTBACK
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
	initMyScript();
});

function initMyScript() {
        $('#mytable').init();
}

[jcw2m]

Thanks Mazar. On the Basket.aspx I changed the script to:

Code: Select all

  <script type="text/javascript">
  
    // INITIALIZE THE TABLE SCRIPT ON PAGE LOAD
    $(document).ready(function () {
      setupResponsiveTables();
    });

    // INITIALIZE THE TABLE SCRIPT ON PARTIAL POSTBACK
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endUpdatePanelRequest);
    });

    function setupResponsiveTables() {
           $('.responsiveTable1').responsiveTable();
    }
    </script> 

From:

Code: Select all

  <script type="text/javascript">
        $(document).ready(function () {
            setupResponsiveTables();
            
            // Register method to fire at the end of an asp:UpdatePanel response
            $(window).on('load', function () {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endUpdatePanelRequest);
            });
        });
        
        function endUpdatePanelRequest() {
            setupResponsiveTables();
        }

        function setupResponsiveTables() {
			$('.responsiveTable1').responsiveTable();
			
        }
    </script> 

Outcome:

The script continued to work as expected on a pc/laptop. In testing on 2 different androids (tested with one that was never used to visit the site) there was no change. It stopped working. The source of the script is http://www.codeproject.com/Articles/547 ... in-ASP-NET.

After lots of research and testing it was the only one I found that actually had any effect even in a browser. I am not usually focused heavily on direct customization for .net (ask our poor Able angel who I'm sure sometimes just holds her poor head, lol), usually working from a front end perspective for design/layout related work. It seems that there are many options that are effective for responsive design with tables and such in .net, but once a gridview comes into play especially within an update panel, options are very slim.

Is there a different resource/solution that might work better than this one? Or maybe I am implementing incorrectly?

Code: Select all

<asp:GridView ID="BasketGrid" runat="server" AutoGenerateColumns="False" ShowFooter="True" DataKeyNames="BasketItemId" OnRowCommand="BasketGrid_RowCommand" OnDataBound="BasketGrid_DataBound" OnRowDataBound="BasketGrid_RowDataBound" SkinID="ignore" CssClass="responsiveTable1 table" RowStyle-Wrap="false">

Thanks
Julie

[mazhar]

I like Footable and hopefully that's what we will use for responsiveness of Gridviews. The trick I shared above should work with Footable and partial post backs
http://techbrij.com/asp-net-gridview-re ... y-footable

[jcw2m]

I just found and tested an alternative script for a gridview that also works from a desktop/pc. It's a little nicer as you don't have to call the script from the page being worked with. To see if it would work with a phone at all I used it on a category page set to category list (pm'd the url). Works like a charm. Still no response for the basket page though. Source: http://zurb.com/playground/responsive-tables

Is there possible something deeper than the base.master, maybe something buried somewhere for security purposes or specific to a mobile detection that could still be picking up that the site is being accessed from a phone although the mobile tool is turned off in admin?

Thanks
Julie

[jcw2m]

How are you adding the required:

Code: Select all

data-hide="phone,tablet"

to the ItemTemplate for the columns?

Thanks!
Julie

[mazhar]

Upon GridView's DataBound event handler.

Code: Select all

protected void BasketGrid_DataBound(object sender, EventArgs e)
{
BasketGrid.UseAccessibleHeader = true;
BasketGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
TableCellCollection cells = BasketGrid.HeaderRow.Cells;
cells[0].Attributes.Add("data-class", "expand"); 
cells[5].Attributes.Add("data-hide", "phone,tablet");
}

[jcw2m]

Thanks a bunch, finally got it nailed. Thanks huge to both you and our Able Angel! In testing with this it looks like FooTable would need additional coding and such not required for other solutions. The issue with fixed file layouts turned out to be related to meta tags. Ahhh, life's humbling moments lol.