I am using the Web Application Toolkit for Mobile Web Applications to develop a simple website (which allows to update the users) for Windows 7 Mobile and iPhone using asp.net MVC.
I am using the ibbdemo as simulator to test for iPhone.
I have been facing few issues with this.
Javascript/Jquery is not working (I have tried to set the textbox value in document.ready in a plain page with just a textbox)
Form Collection of radio button returns all the values in comma separated, not only the selected one.
Edit:
I am trying to do the following after the admin logs in to website:
Show links like Active Users and Inactive Users(Main/Index).
Once the Admin clicks the Active Users link, then the list of active users will be shown (User/Active)
On Clicking the Name of the user, the page to update the User details like Name, Sex, Email,... will be shown (User/Detail)
The javascript works till the 1st step, from 2nd step, it doesn't do anything. I have tried adding a dummy textbox in (Main/Index) page and set the value in document.ready, it worked. But when i do the same in (User/Active) or (User/Detail), the javascript/jquery doesn't seem to work. To Test, I have copied the first page content to all of them, but still it works in first page but not in rest. I am puzzled with this issue.
Here is the html that looks in (Main/Index):
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mobile/iPhone/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="toolbar">
<h1 id="pageTitle">
</h1>
<a id="backButton" class="button" href="#"></a>
</div>
<form id="dashboardForm" action="Main/Index" method="get" title="Dashboard" class="panel"
selected="true">
<fieldset>
<div class="row">
<label>
Dummy:</label>
<%= Html.TextBox("dummyText") %>
</div>
<div class="row">
<label>
Users: Add</label>
</div>
<div class="row">
Active Users Inactive Users
</div>
</fieldset>
</form>
<script type="text/javascript" language="javascript">
$(function() {
$("#dummyText").val('test');
});
</script>
</asp:Content>
Is there any work around or did anyone face the same problem and found a solution for this?
Or is there any another toolikit for developing mobile apps using asp.net MVC, please suggest
There is a mode in Safari(the browser from Apple), that lets you emulate Mobile Safari, the browser of the iPhone.
In the menus, find Develop -> User Agent and choose the browser you want to emulate.
Related
I need to embed a marketo form onto a github page, essentially host it there, then iframe it into another piece of software I'm using. The iframing in afterwards is striaght forward as the software does that. But I cant work out how to actually embed it on github.
Go to the Marketo form
Grab the form embed code
Grab the munchkin tracking code too. Not 100% essential but needed if you want web page tracking on the Github page the form will live on.
Drop code in a Div section.
From my code example you could replace 132 (with your actual form ID)
And replace 111-AAA-111 wit your Munchkin ID.
Example
<div data-role="page" id="page_1">
<div data-role="header">
<h1>Test form. Embedded</h1>
</div>
<div data-role="main" class="ui-content">
<script src="//app-abj.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_123"></form>
<script>MktoForms2.loadForm("//app-abj.marketo.com", "111-AAA-111", 123);</script>
</div>
<div data-role="footer">
<h1>Footer: text</h1>
</div>
</div>
Cannot figure out how to reference html elements in javascript when using an asp.net MasterPage.
I have done a good deal of searching, and I have found many examples which say this should be the way to do it. But thus far, when I try to implement any of them, I have been unsuccessful.
To summarize, by what I have found, this should NOT work:
document.getElementByID('txtLabel');
because the actual element at runtime gets renamed by asp.net to something along the lines of 'ctl00_MainContent_txtLabel', all of which I have found to be true.
Most of the solutions that I have found are of the form:
document.getElementByID('<%=txtLabel.ClientID%>');
The trouble is, I have not been able to get this to work either.
If I try the following:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
var x = document.getElementById("<%=frm1.ClientID%>");
console.log(x);
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div id="frm1" class="col-md-4">
I am immediately greeted by a red squiggly from VS which states that
The name 'frm1' does not exist in the current context
So if I try the following:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
var x = document.getElementById("<%=frm1.ClientID%>");
console.log(x);
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
<p>
<asp:Label runat="server" ID="frm1"></asp:Label>
</p>
</div>
The red squiggly now disappears, but at runtime, looking at the JS console in Chrome, the result of the JS call is null.
JQuery is also returning the same confusing results to me. I cannot find a way to reference a control on the page.
I would like to be able to reference the controls on the page through JS, but I cannot figure out how to.
I have a cordova/phonegap project and I want to navigate in the same index.html but give the impression to the user that he opened a new page? (Without ionic framework)
I put the following code in index.html but it does not give that impression:
<div id="page_01">
Press for Next step>
</div>
<div id="page_02">
<p>New page for the user but it is in the same index.html</p>
</div>
If I create a new VS project and copy the following example code into a new page default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top-menu" class="float-right">
<ul class="main">
<li><a id="A1" href="#" runat="server" class="current"><span>Home</span></a> </li>
<li><span>Members</span>
<ul class="sub curved">
<li>MemberPage1</li>
<li>MemberPage2</li>
<li>MemberPage3</li>
</ul>
</li>
<li><span>Blog</span> </li>
<li><span>Contact</span> </li>
<li><span>Admin</span> </li>
<li><span>Scan</span></li>
</ul>
</div>
</div>
</form>
</body>
</html>
When I run I get the following in my browser when I hover over Scan - Javascript:_doPostBack('ctl02','')
Being very new to ASP.NET this has surprised me as I didn't know I was using javascript so I hope this isn't a silly question......
If a user disables javascript in their browser (eg as advised by Tor recently) does it mean the server side event Scan_Click won't run?
If so is there an alternative to run server side scripts on an asp.net site with javascript disabled in the browser?
ASP.NET uses JavaScript for the Postback feature, so it won't run without JavaScript enabled.
If you want to run your application without JavaScript you must move to ASP.NET MVC and use regular POST actions.
But beware that in this other approach you won't have all those fancy controls like Calendar, Menu or even Button, everything is plain HTML.
If a user disables javascript in their browser (eg as advised by Tor recently) does it mean the server side event Scan_Click won't run?
Yep, the runat="server" attribute allows ASP.NET to translates your onserverclick event into some client-side code it can invoke via JS - if JS is disabled this code can't be triggered.
If so is there an alternative to run server side scripts on an asp.net site with javascript disabled in the browser?
You could manually write the HTML output which gives you control over how you invoke the postback, that way you can make sure you don't rely on JS. However, you need to weigh up the likelihood of your site functioning in general without JS enabled let alone just for postbacks.
i'm building a restaurant's website, and have their menus loading as images in modals via TW Bootstrap. the code looks like this:
<div id="menu" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img src="assets/menus/brunch.jpg">
</div>
</div>
<a data-toggle="modal" href="#menu" >BRUNCH</a></p>
this works fine on desktop browsers, but in mobile browsers, the size of the images makes scrolling and zooming kind of awkward. the client wants to scrap the modal in mobile and just load the image in a new page when the user clicks on a menu link.
i've read a bunch of stuff about media queries and javascript browser detection, but i feel like what i'm trying to do is on a wayyy smaller scale. what's the easiest, most pain-free way to do this?
Have your web server detect if the device is a mobile browser or not. If it appears to be a mobile device, redirect to a mobile version of the page that has the image inline instead of in a modal (and, offer a link at the bottom to the full version of the site in case they don't want to see the mobile content).