jQuery Forum

I have been working on a site in VB.NET and JQM - and all has been going OK.

 

Now, I am trying to include a standard Image button using a tag such as:

 

<asp:ImageButton ID="btnYear" runat="server" ImageUrl="~/images/buttons/year_btn.gif" />

 

and in the VB code behind file there is a click event similar to the following:

 

When I click the Image Button and trace the code - all the code in the page events in the code behind file fire (page load, page prerender, etc) - but the click event for the image button never fires.

 

If I replace the Image button with a standard <asp:Button> and do all the same - then the click event in the code behind fires just fine!  Is it not possible to use an ASP ImageButton within a JQM page and hold a click event in the VB Code behind file?

 

 

I have found that a line of code I added to my Page_Load event is preventing the ImageButtons from working properly - so I wanted to give more details and see if anyone had any thoughts:

I have the ImageButton controls contained within a user control. My page is a single ASPX file with multiple <div data-role="page"> elements in it, each with its own ID ("page1", "page2", "page3", etc) - following the standard usage of JQM's multi-page functionality. Each "page" section contains an instance of the user control that contains the Image buttons. This all works well, with one problem - when the user navigates away from the default "page1" to any other "page" and clicks one of the image buttons, the code fires, the page reloads - and lands the user back on the default page - "page1".

This is no good - I needed a way to allow the user to fire the button and reload the page and stay on the "page" element they were viewing - JQM accomplishes these multiple pages using hash tags in the URL - so I found a line of code that I added to the page's load event which read:

1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

2.     Me.Form.Attributes("onsubmit") = "this.action+=top.location.hash;"
   
   

3. End Sub

I was originally using radio buttons on my user control - which JQM was "skinning" so they appeard as buttons - and with this one line in the Page_Load event, a user could click a radio button on any "page" element and the code behind the radio buttons would fire and the page would reload with the user back on the same "page" element they clicked from - not so replacing the radio button with Image Buttons - when I add that line of code to the Page_Load event, the ImageButton controls completely cease to function - when I click the the code in their click even in the code behind does not fire - nor do any of the page level events such as Page_Load or Page_PreRender - clicking them now does absolutely nothing....

 

I am starting to experiment with overlay panels for navigation, and all was going well until I tested my page on my iPhone.

 

I have mimicked the overlay panel shown at :

 

 

The only change I made was in the CSS at the bottom, I switched the

 

right: 0 !important;

left: auto !important;

 

to

 

right: auto !important;

left: 0 !important;

 

so my overlay would show on the left side instead of the right side.  On my desktop, laptop, and Nexus tablet it worked great.  When I view my page on my iphone, the overlay ignores the CSS and comes down in the middle of the page, and does not match its height to the screen height.  Just to test, I visited

 

 

on my iPhone - and when you click the "Open Panel" button there, the panel does display on the right side (as it should), but does *not* adjust its height to full screen height.

 

Since the demo page also does not display properly, my first question is, is there a known issue with Overlay Panels in iPhone/iPad OS?

 

TIA

I have a page that is dynamically creating Collapsible blocks from a dataset.  Depending on the results returned, the page can create 0 to many collapsible blocks.  The Dataset contains 2 Datatables, Table(0) contains the value for the Collapsible Blocks header, and the data to be displayed within the Collapsible block lives in Table(1).

 

The code looks something like this:

 

<% For x = 0 to myDatatable.Tables(0).Rows.Count - 1 %>

    <div data-role="collapsible" data-mini="true" data-theme="a">

          <h3><%=myDatatable.Tables(0).Rows(x)("myValue")%></h3>

          <p>

              CODE HERE fills the contents of the block with the contents of myDatatable.Tables(1) based on its relation to Tables(0)

          </p>

    </div>

 

OK - so that all works fine - and I get the appropriate Collapsible blocks.  The above is all wrapped in another IF that makes sure there is data to display, and if not it doesn't create any collapsible blocks and displays a message that there is no data to display.

 

The problem comes in when the page gets posted back to itself.  The page contains "post-back" buttons that reload the page passing different parameters to the procedure that fills myDatatable.  When this happens, the Collapsible blocks are recreated - and there may now be more or fewer than there were before.

 

My challenge is this - if a Collapsible Block existed before postback - and if it had been expanded - then when the page is redisplayed I want it to still be expanded.

 

The value that is being displayed in the <h3> from Table(0) is a state name - so depending on which button on the page is pressed there could be Collapsible Blocks for different states.  But if I currently have a Block displaying data for Alabama for example, and I click a button to pull new data, and the newly reloaded page also contains data for Alabama and has a Collapsible Block for Alabama, then I want it to be expanded on load.

 

Since the Blocks are all dynamically created, and since the number of blocks can chage, I am having a hard time sorting out how to give them dynamically created IDs and then use these with the "collapse" and "expand" events to store which ones are expanded so if they still exist after a postback, they stay expanded.

 

Does this make sense at all?  Anyone have any insight on this?

 

TIA!

I am working with a multi page layout, and am using swipe to navigate back and forth.  Currently my page has 3 "pages", defined with 3 <div> sections with data-role="page" and each is named with id="page1", id="page2", id="page3"

 

Within each "page", I have a primary block of content included in a <div> tag with the appropriate ID set to "body1", "body2" and "body3".  I have swipe events set on these to navigate from page to page as follows:

 

                  $.mobile.changePage("#page2", { transition: "slide" });

            });

 

            $("#body2").swipeleft(function () {

                  $.mobile.changePage("#page3", { transition: "slide" });

            });

 

                  $.mobile.changePage("#page1", { transition: "slide", reverse: true });

            });

 

            $("#body3").swiperight(function () {

This all seems to be working fine.  When I swipeleft on body1, I am taken to page2 - when I swipeleft on body2 I am taken to page3 - when I swiperight on body3 I am taken to page2 - and when I swiperight on body2 I am taken to page1

 

The problem comes in looking at the URL displayed in my browser address bar.  When first going to the sight, I am on "page1" by default, which is not displayed in the url - it is simply:

 

 

This isn't the true URL obviously, but you get the picture - the file containing all the content is "mypage.aspx" living in the "mysitedirectory"

 

When I swipe left on body1 to navigate to "page2" the URL now shows as

http://www.mydomain.com/mysitedirectory/mypage.aspx#page2 and when I swipe left on body2 to navigate to "page3" it shows as

 

So far so good - even when doing a swiperight on "body3" to get back to page2 all is good, and the URL once again shows

 

The problem comes in whenever I swiperight on "body2" to get back to "page1", the default page that I started on.  Every time I navigate back to page1 swiping right from body2 on page2, the URL displays:

 

 

I am not really sure where this is coming from...or how to stop it.  It should either show as

http://www.mydomain.com/mysitedirectory/mypage.aspx#page1 or just show as

http://www.mydomain.com/mysitedirectory/mypage.aspx as it did upon first entering the sight.  Apending the directory and file name onto the end behind the "#" just doesn't look right at all.

 

Any thoughts on this??

I see that the JQM Docs site has enabled a resposive layout complete with a responsive side menu that converts to an accordian at smaller screen sizes via 2 files named jqm-docs.css and jqm-docs.js

 

I guess it is possible to access these 2 files via the docs site source code - but are these 2 files distributed or documented anywhere as a responsive option for JQM?

Has anyone had success incorporating the JQuery Mobile functionality into a responsive layout framework such as Foundation or Bootstrap?

 

I recently started working with Foundation (specifically the top-bar branch of their code as it offers a nice top navigation bar I wanted) and wanted to include jQM for its swipe and transitional functionality, among other things.  Probelm is, the jQM scripts and CSS files conflict with the Foundation script and CSS files and cause a lot if things, such as the top nav bar, to stop functioning properly. 

 

I'd love to be able to use a responsive framework like Foundation or Bootstrap, and still incorporate the functionality offered by jQM - has anyone had any success with this?

 

TIA!