- Expanded view
- List view
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:
- 13-Nov-2012 01:55 PM
- Forum: jQuery Mobile
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?EDITI 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:
- Private Sub btnYear_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles btnYear.Click
- Session("TimeFrame") = "YEAR"
- do other code
- End Sub
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:
- Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.Form.Attributes("onsubmit") = "this.action+=top.location.hash;"
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 theright: 0 !important;left: auto !important;toright: 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 visitedon 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!
- 30-Oct-2012 01:11 PM
- Forum: jQuery Mobile
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.jsI 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!
- 09-Aug-2012 12:41 PM
- Forum: jQuery Mobile
- Next »