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.
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>
I am developing using jQuery mobile and it has a multipage template as below.
I feel that writing html content inside the same html is bloated.
As such, i would like to separate the content in different html and include standalone html page. It should be mobile browser proven. What is the best practice on this and how it could be done?
Note: I do not expect server side scripting (eg: PHP) to solve this problem. It should be done solely on client side without any templating engine. Something like angularJS ng-include.
Sample of what i expect
<div data-role="page" id="foo1">
<html-include src="foo1.html"></html-include>
</div>
Mobile html multipage
<div data-role="page" id="foo1">
<!-- Content 1 here -->
</div>
<div data-role="page" id="foo2">
<!-- Content 2 here -->
</div>
<div data-role="page" id="foo3">
<!-- Content 3 here -->
</div>
<div data-role="page" id="foo1" data-url="foo1.html">
</div>
And use javascript like so:
$('[data-url]').each(function (k,elem){
$(elem).load(elem.data('url'));
});
This will find all elements that have data-url as attribute, and load that page in AJAX, takes the html received and put in it the corresponding html element.
I am trying to achieve the same effect as this website.
You will notice that the url changes and the content changes when you scroll, however when I inspect the requests being made in the console I cannot see a new AJAX request being made to get the new html content. I cannot figure out how this content is being loaded.
It appears the "page change" is just a javascript scrolling effect, and the javascript also changes the URL. If you notice, go to the about section and refresh that url, and the page isn't found.
Any guidance on how this can be achieved would be greatly appreciated. I have read through the javascript source code on the page, but as it is minified I am still struggling to understand how it all works. Perhaps I should be using html5's history state.
My current project is set up like this:
The index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Home page</h3>
<div class="bgImage"></div>
</div>
<footer>
Footer
</footer>
</body>
the tress/index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Trees</h3>
<div class="bgImage trees"></div>
</div>
</div>
<footer>
Footer
</footer>
</body>
urban/index.html is the same as tress/index.html apart from the div within the div with id scene.
Based on how the project is set up I am wondering how I can update the content page with the different html files.
Take a look at the History API, specifically at the function:
window.history.pushState({ your_data:"whatever"}, "title", newUrl);
https://developer.mozilla.org/en-US/docs/Web/API/History_API
There are excellent third party libraries that can help you easily build a cross-browser solution, although modern browsers follow the standard decently.
The rest of your problem is just dynamically adding content, that may come from an ajax request or not.
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 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.