DNN - Minimize Junk in Skin - html

In DotNetNuke(DNN) am trying to create a page template that will be used to create HTML for emails. Because the HTML is going to be used in emails, it needs to be strictly controlled. The user will create the page in DNN, then copy the HTML for the page and use it in MailChimp. I don't want anything extra in the HTML, it should be as minimized as possible.
The template will have placeholders for header body and footer. The user can put different modules into these areas depending on what they want to do with the email.
To accomplish this I created a Skin. It appears to me to be about as simple as it gets.
Here is the skin file:
<%# Control Language="C#" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<div id="HeaderPane" runat="server"></div>
<div id="ContentPane" runat="server"></div>
<div id="FooterPane" runat="server"></div>
Although the skin looks as simple as it gets, the output is nowhere near the level of simplicity that I require. To test, I have created a new page and selected this skin. Before adding anything to the page, I load it into a web browser. The page of course appears blank, but when I view the HTML I see the following source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en-US">
<head id="Head">
<!--**********************************************************************************-->
<!-- DotNetNuke - http://www.dotnetnuke.com -->
<!-- Copyright (c) 2002-2013 -->
<!-- by DotNetNuke Corporation -->
<!--**********************************************************************************-->
<title>
PAGE TITLE HERE
</title><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="text/javascript" http-equiv="Content-Script-Type" /><meta content="text/css" http-equiv="Content-Style-Type" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta id="MetaKeywords" name="KEYWORDS" content=",DotNetNuke,DNN" /><meta id="MetaCopyright" name="COPYRIGHT" content="Copyright © 2014 XXXX. All rights reserved.<br/>MY ADDRESS HERE" /><meta id="MetaGenerator" name="GENERATOR" content="DotNetNuke " /><meta id="MetaAuthor" name="AUTHOR" content="XXXXXXX" /><meta name="RESOURCE-TYPE" content="DOCUMENT" /><meta name="DISTRIBUTION" content="GLOBAL" /><meta id="MetaRobots" name="ROBOTS" content="INDEX, FOLLOW" /><meta name="REVISIT-AFTER" content="1 DAYS" /><meta name="RATING" content="GENERAL" /><meta http-equiv="PAGE-ENTER" content="RevealTrans(Duration=0,Transition=1)" /><style id="StylePlaceholder" type="text/css"></style><link href="/portals/_default/default.css?cdv=80" type="text/css" rel="stylesheet"/><link href="/portals/0/portal.css?cdv=80" type="text/css" rel="stylesheet"/><script src="/resources/shared/scripts/jquery/jquery.min.js?cdv=80" type="text/javascript"></script><script src="/resources/shared/scripts/jquery/jquery-migrate.min.js?cdv=80" type="text/javascript"></script><script src="/resources/shared/scripts/jquery/jquery-ui.min.js?cdv=80" type="text/javascript"></script>
<link rel='SHORTCUT ICON' href='/Portals/0/favicon.ico' type='image/x-icon' />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'ACCOUNT_NUMBER']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body id="Body">
<form method="post" action="/PATH/TO/CURRENT_FILE/Demo2.aspx" id="Form" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="StylesheetManager_TSSM" id="StylesheetManager_TSSM" value="" />
<input type="hidden" name="ScriptManager_TSM" id="ScriptManager_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="LONG VIEWSTATE ENCODED VALUE IS HERE" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['Form'];
if (!theForm) {
theForm = document.Form;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=ENCODED_STRING&t=635195493660000000" type="text/javascript"></script>
<script src="/Telerik.Web.UI.WebResource.axd?LONG_QS_VARIABLE=XXXXXXXXX" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/js/dnn.js" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="LONG ENCODED VALUE" />
</div><script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager', 'Form', [], [], [], 90, '');
//]]>
</script>
<script src="/js/debug/dnn.modalpopup.js?cdv=80" type="text/javascript"></script><script src="/js/debug/dnn.servicesframework.js?cdv=80" type="text/javascript"></script><script src="/js/debug/dnncore.js?cdv=80" type="text/javascript"></script>
<div id="dnn_HeaderPane" class="DNNEmptyPane"></div>
<div id="dnn_ContentPane" class="DNNEmptyPane"></div>
<div id="dnn_FooterPane" class="DNNEmptyPane"></div>
<input name="ScrollTop" type="hidden" id="ScrollTop" />
<input name="__dnnVariable" type="hidden" id="__dnnVariable" autocomplete="off" value="`{`__scdoff`:`1`,`sf_siteRoot`:`/`,`sf_tabId`:`423`}" />
<script type="text/javascript" src="/Resources/Shared/scripts/initWidgets.js" ></script></form>
</body>
</html>
I am not using forms, I don't need any jQuery or Javascript functionality, all of the styles are going to be inline (or included in a <style> tag and won't be external references). I just want the HTML structure without all of the other stuff surrounding it.
Is this possible in DNN?

As DNN is a WebForms based application, some things like the ViewState and the WebResource.axd links, etc. are going to be next to impossible to get rid of.
For other items, review what modules are being loaded on the page. Ensure that you don't have modules that are marked to "include on every page".

Related

html automatic input detect and redirect

i want to enter names after the display with loading gif comes prompt me to enter my age.
i want after entering my age i get redirected to url. any url like stackoverflow.com
i have updated my question to above. but still same problem
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<p>
<input type="text" name="myname" />
</p
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>
<div id="spinner">
<img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
</div>
<input type="text" name="age" />
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('form').submit(function() {
$('#spinner').show(); //activate spinner on submit
$.ajax({
type: 'POST',
url: 'https://localhost',
dataType: 'json',
success: function(json) {
// $('#spinner').hide(); //not necessary because of redirect
window.location.href = "http://www.wdr.de";
},
error: function(){
$('#spinner').hide();
}
return false;
});
</script>
</body>
</html>
you can do something like this:
I have updated your code. Sure, you have to set style for your spinner.
Here is also a fiddle: https://jsfiddle.net/mattopen/pkb4xs7w/41/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>title</title>
</head>
<body>
<form method="post">
<p>
<input type="text" name="myname" />
</p>
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>
<div id="spinner">
<img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
</div>
<input type="text" name="age" />
</div>
<script>
$('form').submit(function() {
$('#spinner').show(); //activate spinner
$.ajax({
type: 'POST',
url: '/your_url/submit_username',
dataType: 'json',
success: function (json) {
alert('redirect');
// $('#spinner').hide(); //not necessary because of redirect
window.location.href = "https://jsfiddle.net/";
},
error: function () {
alert('something went wrong');
$('#spinner').hide();
window.location.href = "https://jsfiddle.net/";
}
});
})
</script>
</body>
</html>
edit:
it was not clear to me if op will use ajax call and submit data to server or only want`s to check a date input and then redirect to url.
If op will make use of ajax, then '/your_url/submit_username' has to be a valid url within your application.
This approach is without the use of an ajax call.
$('input[name="submit"]').click(function(event) {
event.preventDefault();
$('#spinner').show(); //activate spinner
// here goes your code for check input
// function check(){....; return 'ok'};
// now redirect if check was ok like if(check === 'ok')
window.location.href = "https://jsfiddle.net/";
})

HTA to get data from webpage to hta textbox

Using Hta i want data from web page to hta text Box. Below is the code which i am trying to create but i have no clue how to call data from web page to hta text box.
<html>
<head>
<title>My HTML Application</title>
<script language="vbscript">
urls=("https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=")
Sub RunLoop()
window.navigate urls
End Sub
</script>
</head>
<body>
<input type="button" value="Click" onclick="RunLoop">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
</body>
</html>
The data which i require from webpage.
The output which i require in hta.
Using window.ActiveXObject("Microsoft.XMLHTTP"), we get the whole webpage and assign it to an invisible/hidden div (for simplicity). Note that this may result to unwanted styling because of the webpage's own global styling. A better way to do it is to open the webpage on a separate IE.
HTAs default engine is IE7 so we needed to insert meta http-equiv="x-ua-compatible" content="ie=9" in order to support the getElementsByClassName functionality because the data that we want to get from 99acres.com was referenced by class.
Copy the code below to notepad and save it as xxx.hta:
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9">
<title>My HTML Application</title>
<script language="javascript">
var url= "https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=";
var xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
function httpGet(theUrl){
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function RunLoop() {
var data = httpGet(url);
document.getElementById("tempdiv").innerHTML = data;
document.getElementsByName("Possession")[0].value = document.getElementsByClassName("factVal1")[0].innerHTML;
document.getElementsByName("Configurations")[0].value = document.getElementsByClassName("factVal1")[1].innerHTML;
document.getElementsByName("New Booking Base Price")[0].value = document.getElementsByClassName("factValsecond")[0].innerHTML;
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="javascript:RunLoop();">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
<div id="tempdiv" style="display:none;visibility:hidden;height:0px">
</div>
</body>
</html>

How can I access a data submitted in a form which is saved as another file with nodejs without using any framework

I am new to Node.JS and I am trying to display the submitted data in a form which is stored as an html file using Node.JS. How can I do that?
I don't want to use any framework as I want to make my base stronger.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample Form with Node.JS and MongoDB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="sample.js"></script>
</head>
<body>
<form method="POST" action="incoming" enctype="multipart/form-data">
<fieldset>
<legend>Sample Form</legend>
<p><input type="text" name="name" placeholder="Enter your Name"></p>
<p><input type="email" name="email" placeholder="Enter your Email"></p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</body>
</html>
And here is my sample.js
var http=require('http');
var qs=require('querystring');
var fs=require('fs')
var port=8000;
http.createServer(function(req,res){
if(req.method==="GET"){
fs.readFile('index.html',function(err,data){
res.writeHead(200,{'Content-Type':'text/html'});
res.write(data);
res.end();
});
}
else if(req.method==='POST'){
if(req.url==='/incoming'){
var reqbody='';
req.on('data',function(data){
reqbody+=data;
});
req.on('end',function (){
var formdata=qs.parse(reqbody);
res.writeHead(200,{'Content-Type':'text/html'});
res.write('<fieldset><legend>Form Inputs</legend>');
res.write('Name: '+formdata.name);
res.write('Email: '+formdata.email);
res.end('</fieldset></body></html>');
});
}
}
}).listen(port);
Your help would be appreciated. Thank You in advance.
UPDATE
Removing the enctype somehow worked and now it's working just fine. Thanks
Just remove the enctype from index.html, I don't know why it worked but when I was fiddling with my code to make it work removing the enctype did the trick

submit form HTML using ajax and get json response

I am not able to insert data through ajax, I want to insert it and get JSON response too.Actually at the end i want to create an API of this total code.
<?php
error_reporting(1);
mysql_connect("localhost","root","");
mysql_select_db("behindtherock");
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form >
<label>Country</label><br />
<input type="text" id="country" />
<br />
<label>First name</label><br />
<input type="text" id="first_name" />
<br />
<label>Last Name</label><br />
<input type="text" id="last_name" />
<br />
<input type="submit" id="save" value="post" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#save").click(function(){
var country=$("#country").val();
var first_name=$("#first_name").val();
var last_name=$("#last_name").val();
var address_line_1=$("#address_line_1").val();
var address_line_2=$("#address_line_2").val();
var city=$("#city").val();
var state=$("#state").val();
var zip=$("#zip").val();
var user_phone=$("#user_phone").val();
var user_email=$("#user_email").val();
var u_stream=$("#u_stream").val();
var referring_member=$("#referring_member").val();
var promotion_code=$("#promotion_code").val();
$.ajax({
url:"add.php",
type:"post",
async:false,
data:{
"done":1,
"country":country,
"first_name":first_name,
"last_name":last_name,
"address_line_1":address_line_1,
"address_line_2":address_line_2,
"city":city,
"state":state,
"zip":zip,
"user_phone":user_phone,
"user_email":user_email,
"u_stream":u_stream,
"referring_member":referring_member,
"promotion_code":promotion_code,
};
success:function(data){
}
});
});
});
</script>
</body>
</html>
<?php
error_reporting(1);
include("db.php");
if(isser($_POST['done'])){
$country=mysql_escape_string($_POST['country']);
$first_name=mysql_escape_string($_POST['first_name']);
$last_name=mysql_escape_string($_POST['last_name']);
$address_line_1=mysql_escape_string($_POST['address_line_1']);
$address_line_2=(int)$_POST['address_line_2'];
$city=mysql_escape_string($_POST['city']);
$state=mysql_escape_string($_POST['state']);
$zip=mysql_escape_string($_POST['zip']);
$user_phone=mysql_escape_string($_POST['user_phone']);
$user_email=mysql_escape_string($_POST['user_email']);
$u_stream=mysql_escape_string($_POST['u_stream']);
$referring_member=mysql_escape_string($_POST['referring_member']);
$promotion_code=mysql_escape_string($_POST['promotion_code']);
mysql_query("INSERT INTO user_details(country,first_name,last_name,address_line_1,address_line_2,city,state,zip,user_phone,user_email,u_stream,referring_member,promotion_code)
VALUES ('('', '$country','$first_name','$last_name','$address_line_1','$address_line_2','$city','$state','$zip','$user_phone','$user_email','$u_stream','$referring_member','$promotion_code')')");
exit();
}
?>
I am not able to insert data through ajax, I want to insert it and get JSON response too.Actually at the end i want to create an API of this total code.

how to prevent ipad from scrolling when user input any data

Is there any way to stop this scrolling when user inputs data on ipad,i tried different things but does not work.
Is there any way to stop this scrolling.
here is my code
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
$(document).ready(function() {
$(document).bind('touchmove', false);
});
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" name="name" id="inputtext" onFocus="window.scrollTo(0, 0); value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Your question is almost answered here. You only have to combine your logic with:
$(document).bind('touchmove', false); // or true, depends you want to disable / enable