appendChild method isn't working - dom

I am trying to write some appendChild() method but I am stuck here. It seems working but not displaying the result. Not sure what I am missing:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="appendChild().aspx.cs" Inherits="DomExample_appendChild__" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="myList">
<li>Books</li>
<li>Pen</li>
<li>Paper</li>
</ul>
<button onclick="myFunction()">Click here...</button>
</div>
</form>
<script>
function myFunction() {
var x = document.createElement("Li");
var y = document.createTextNode("Pad");
x.appendChild(y);
document.getElementById("myList").appendChild(x);
}
</script>
</body>
</html>


I am guessing that the script is running correctly, but the form is also being submitted right after and page refreshes to the initial state. Try this:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="appendChild().aspx.cs" Inherits="DomExample_appendChild__" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="myList">
<li>Books</li>
<li>Pen</li>
<li>Paper</li>
</ul>
<button onclick="myFunction(event);">Click here...</button>
</div>
</form>
<script>
function myFunction(e) {
e.preventDefault();
var x = document.createElement("Li");
var y = document.createTextNode("Pad");
x.appendChild(y);
document.getElementById("myList").appendChild(x);
}
</script>
</body>
</html>
...or you can implicitly define button type as "button" rather than default "submit" type:
<button onclick="myFunction()" type="button">Click here...</button>

Related

iframe src from form input

any ideas how to have say a set url for iframe like mysite.com/ and then this input form would add the input field to the end like mysite.com/txtsrc?
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
so rather than user inputting the full src i want mysite.com/then the form input after that but so user would not have to put mysite.com/
thanks in advance
i have tried but failed anyone able to help?

A question about the document object model (DOM)

When I open chrome developer console and type:
document.firstElementChild.lastElementChild.lastElementChild.lastElementChild.innerHTML = "Steven"
the text "Third" changes to "Steven".
There are two child elements of HTML, the head and the body. So, why doesn't the code 'firstElementChild' target the the head element, since that's the first element?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<input type="checkbox">
<button style=":active color:red;">Click Me</button>
<ul>
<li class="list">
Google
</li>
<li class="list">Second</li>
<li class="list">Third</li>
</ul>
</body>
</html>
[Screenshot of the site][1]-->
[1]: https://i.stack.imgur.com/Lwfmt.jpg

Foundation 6 mediaquery on iphone

My test is very basic like this web page below. I don't understand why on iphone 6 or 5 Foundation seems not working. Do you have any idea ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell">
<div id="info"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="info4"></div>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
</div>
</div>
</div>
<script>
$(document).foundation();
$(document).ready(function(){
$("#info").html($( window ).width());
$("#info2").html(JSON.stringify(Foundation.MediaQuery.queries));
$("#info3").html(Foundation.MediaQuery.current);
$("#info4").html(window.devicePixelRatio);
});
</script>
</body>
</html>
The result is medium any way flex grid or x-y grid.
I use sass for my project but for this test i use directly the full official cdn file. I still get same result.

ajaxctroltoolkik.ModalPopupextender. Stops working after 10 calls to Show()

I have problems with the ModalPopupExtender.
I set the targetcontrolid to a hidden field and calls the show method from code behind. Every thing works fine until the 10th time i call the show method. Then it suddenly stops working. The "dialog" is no where to be seen. The controls on the page no longer gets disabled. The code behind get called when i click the button that is calling the show method but calls to the show method has no effect.
I use Visual Studio 2010
Here is my aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MessageBoxTest.aspx.cs" Inherits="SeceOfC2.TEST.MessageBoxTest" %>
<%# Register tagName="MessageBox" tagPrefix="uc" src="~/Dialogs/MessageBox.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="TestButton" Text="Test" OnClick="TestButton_OnClick" />
<asp:HiddenField runat="server" ID="_Hint"/> <%--Brukt til å vite hvorfor denne dialogen ble kalt.--%>
<asp:HiddenField runat="server" ID="_Parameters"/> <%--Her lagres parameterdata som en Json string.--%>
<asp:Button runat="server" ID="_dummy"/>
<asp:Panel runat="server" ID="MessageBoxPanel">
<asp:Panel runat="server" ID="MessageBoxBorderPanel" BorderColor="LightGray">
<div class="dialogheader">
<div style="text-align: center; float: left">
<asp:Label runat="server" ID="lbHeader"></asp:Label>
</div>
<div style="float:right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Icons/Small/navigate_cross.png" />
</div>
<div style="clear:both"></div>
</div>
<div class="dialogbody" style="min-height: 50px">
<asp:Label runat="server" ID="lbBody"></asp:Label>
</div>
<div class="dialogbody" style="text-align: center">
<asp:Button runat="server" ID="OKButton" Text="OK" OnClick="OnOkClicked"/>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="MessageBoxPopupExtender" TargetControlID="_dummy" PopupControlID="MessageBoxPanel" RepositionMode="RepositionOnWindowResizeAndScroll" PopupDragHandleControlID="MessageBoxBorderPanel" DropShadow="True" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The masterpage containing the script manager:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SeceOfC2.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script language="JavaScript1.2" src="/scripts/jquery-1.4.1.js" type="text/javascript" defer="defer"></script>
<script type="text/javascript">
window.onresize = function(event) {
var height = $(window).height();
var width = $(window).width();
$.ajax({
url: "/HttpHandlers/getwindowsize.ashx",
type: "POST",
data: {
Height: height,
Width: width,
selectedValue: selectedValue
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
// do stuff
}
});
}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
SenseOfC Drill execution prototype
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Content/Users/DrillView.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Content/Administrators/TreatmentView.aspx"
Text="Admin" Value="Admin"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
and here is my code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using SeceOfC2.Dialogs;
using SeceOfC2.Tools;
namespace SeceOfC2.TEST
{
public partial class MessageBoxTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void TestButton_OnClick(object sender, EventArgs e)
{
Show("TEST", "TEST");
}
public void Show(string caption, string message, string hint = "", MessageBox.Buttons buttons = MessageBox.Buttons.Ok)
{
_Hint.Value = hint;
_Parameters.Value = JsonHelper.Serialize("");
lbHeader.Text = caption;
lbBody.Text = message;
MessageBoxPopupExtender.Show();
}
protected void OnOkClicked(object sender, EventArgs e)
{
}
}
}
If i set the TargetControlID to a visible control. The ModalPopupExtender still works, but no code behid is called, obviously, preventing me from puting any data in to the fields in the dialog.
Update:
I have testet in a standard aspx page (no masterpage):
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MessageBoxTestNoMaster.aspx.cs" Inherits="SeceOfC2.TEST.MessageBoxTestNoMaster" %>
<%# Register tagName="MessageBox" tagPrefix="uc" src="~/Dialogs/MessageBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="TEST" Text="Test" OnClick="TEST_OnClick"/>
<uc:MessageBox runat="server" ID="MessageBox" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
The dialog has been moved to a usercontrol:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MessageBox.ascx.cs" Inherits="SeceOfC2.Dialogs.MessageBox" %>
<asp:HiddenField runat="server" ID="_Hint"/> <%--Brukt til å vite hvorfor denne dialogen ble kalt.--%>
<asp:HiddenField runat="server" ID="_Parameters"/> <%--Her lagres parameterdata som en Json string.--%>
<asp:HiddenField runat="server" ID="dummy"/>
<asp:Panel runat="server" ID="MessageBoxPanel">
<%--<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="MessageBoxBorderPanel" Opacity="0.1" Radius="10"/>--%>
<asp:Panel runat="server" ID="MessageBoxBorderPanel" BorderColor="LightGray">
<div class="dialogheader">
<div style="text-align: center; float: left">
<asp:Label runat="server" ID="lbHeader"></asp:Label>
</div>
<div style="float:right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Icons/Small/navigate_cross.png" OnClick="OnCloseClicked" />
</div>
<div style="clear:both"></div>
</div>
<div class="dialogbody" style="min-height: 50px">
<asp:Label runat="server" ID="lbBody"></asp:Label>
</div>
<div class="dialogbody" style="text-align: center">
<asp:Button runat="server" ID="OKButton" Text="OK" OnClick="OnOkClicked"/>
<asp:Button runat="server" ID="CancelButton" Text="Avbryt" OnClick="OnCancelClicked"/>
<asp:Button runat="server" ID="YesButton" Text="Ja" OnClick="OnYesClicked"/>
<asp:Button runat="server" ID="NoButton" Text="Nei" OnClick="OnNoClicked"/>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="MessageBoxPopupExtender" TargetControlID="dummy" PopupControlID="MessageBoxPanel" RepositionMode="RepositionOnWindowResizeAndScroll" PopupDragHandleControlID="MessageBoxBorderPanel" DropShadow="True" />
At this point there is no reference to the css classes used so the dialog looks a bit naked, but it works!! I can show and hide the dialog as many times as I want.
Update 2:
Link to the css-file is no problem. Now the dialog looks as it should.
Upate 3:
Tried to move the reference to scriptmanager from masterpage to page. Same result. Does not work.
Update 4:
Removed the refrecence to css file. The message box now works.
Update 5:
I'm not quit there yet but a bit longer than just a few minutes ago.
The problem seems to be connected to the standard asp. web application you get out of the box from Visual Studio 2010 and the CSS file you get located in the Styles catalog. I will try to fiddle a bit with it and maybe I can figure out what is chrasning with the ModalPopupExtender.
After deactivating some more of the classes in the css files
The message box is suddenly placed behind the other stuff in the form and its no longer modal. I can click on any part of the form I want and events geting fired.
Update 6:
I have reproduced the error without masterpage and only a singel styling element:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MessageBoxTestNoMaster.aspx.cs" Inherits="SeceOfC2.TEST.MessageBoxTestNoMaster" %>
<%# Register tagName="MessageBox" tagPrefix="uc" src="~/Dialogs/MessageBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.page
{
width: 960px;
background-color: #fff;
margin: 20px 0px;
border: 1px solid #496077;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="page">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="TEST" Text="Test" OnClick="TEST_OnClick"/>
<uc:MessageBox runat="server" ID="MessageBox" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
This is what it looks like without master page and only one style element
The dialog is visible but hiding behind the div with class "page". Hapens after 10 calls to show method. The modal functionality is no longer active and I can click both the ok button in the dialog and the button in the form that is calling the show method.

I was having this same problem with the AjaxControlToolkit 15.4.1 ModalPopupExtender, and what solved it for me was (1) making sure all buttons were in a PostBackTrigger tag, i.e.:
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnDownload" />
</Triggers>
</asp:UpdatePanel>
... and then also (2) removing the "CancelButtonID" property if it existed and using an actual button click or command event to hide the extender.
I wish I could say why this worked, but I don't know enough about the control toolkit to say... hope that helps!

Unable to get the ripple effects in lumX?

I have installed all components and am trying out the various components mentioned in the CSS section of docs (http://ui.lumapps.com/css/buttons)
but the button get the shadow on hover, but do not ripple when clicked.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lumx Trial</title>
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
</head>
<body>
<div class="mb">
<button class="btn btn--xs btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--s btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--m btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--l btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--xl btn--blue btn--raised" lx-ripple>Button</button>
</div>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
</body>
</html>

Sorry, My bad. I hadn't added the angular module!