Can anyone explain why it comes? it makes source code lengthy and it will affect to site SEO also. Site is using Sitecore CMS
Is this fault of .NET framework or Sitecore CMS?
Is PHP and other technology better to produce clean, semantic and W3C valid code?
These extra info in header (what is the use of these)
<head>
<meta name="CODE_LANGUAGE" content="C#" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
</head>
So much unneeded xhtml, JavaScript code just after body, why such a long code just after body?
<body>
<form name="MainForm" method="post" action="/en/site-services/alert.aspx" id="MainForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMTk1MTQ1MDUPZBYGZg8VARdBbGVydCAgQm9va2VyIEdyb3VwIFBMQ2QCBg8VAQVhbGVydGQCBxBkZBYCAgEPZBYCAgEPZBYCZg9kFgJmDw8WAh4FQ2xhc3MFDWdsb2JhbFdyYXBwZXIWAh4FY2xhc3MFDWdsb2JhbFdyYXBwZXIWAmYPZBYGZg9kFgJmD2QWAmYPDxYCHwAFD0hlYWRlckNvbnRhaW5lchYCHwEFD0hlYWRlckNvbnRhaW5lchYCZg9kFgICAg8PFgQeCENzc0NsYXNzBQZTZWFyY2geBF8hU0ICAmQWAmYPDxYCHwAFG1NlYXJjaEdlbmVyYWxFcnJvckNvbnRhaW5lchYCHwEFG1NlYXJjaEdlbmVyYWxFcnJvckNvbnRhaW5lcmQCAQ9kFgJmD2QWAmYPDxYCHwAFE1R3b0NvbHVtbnNDb250YWluZXIWAh8BBRNUd29Db2x1bW5zQ29udGFpbmVyFgRmDw8WAh8ABRpUd29Db2x1bW5zTGVmdENvbENvbnRhaW5lchYCHwEFGlR3b0NvbHVtbnNMZWZ0Q29sQ29udGFpbmVyZAIBDw8WAh8ABRtUd29Db2x1bW5zUmlnaHRDb2xDb250YWluZXIWAh8BBRtUd29Db2x1bW5zUmlnaHRDb2xDb250YWluZXIWAmYPZBYCAgMPZBYEZg9kFhBmDw8WBB8ABSlhbGVydHNJbnZhbGlkRW1haWxBZGRyZXNzTWVzc2FnZUNvbnRhaW5lch4JX19WaXNpYmxlaBYCHwEFKWFsZXJ0c0ludmFsaWRFbWFpbEFkZHJlc3NNZXNzYWdlQ29udGFpbmVyZAIBDw8WBB8ABRhhbGVydHNMb2dpbkZhaWxDb250YWluZXIfBGgWAh8BBRhhbGVydHNMb2dpbkZhaWxDb250YWluZXJkAgIPDxYEHwAFG2FsZXJ0c0xvZ2luU3VjY2Vzc0NvbnRhaW5lch8EaBYCHwEFG2FsZXJ0c0xvZ2luU3VjY2Vzc0NvbnRhaW5lchYGZg8PFgIfAAUhYWxlcnRzTG9naW5TdWNjZXNzQmVmb3JlQ29udGFpbmVyFgIfAQUhYWxlcnRzTG9naW5TdWNjZXNzQmVmb3JlQ29udGFpbmVyZAIBDw8WAh8ABR9hbGVydHNMb2dpblN1Y2Nlc3NFZGl0Q29udGFpbmVyFgIfAQUfYWxlcnRzTG9naW5TdWNjZXNzRWRpdENvbnRhaW5lcmQCAg8PFgIfAAUgYWxlcnRzTG9naW5TdWNjZXNzQWZ0ZXJDb250YWluZXIWAh8BBSBhbGVydHNMb2dpblN1Y2Nlc3NBZnRlckNvbnRhaW5lcmQCAw8PFgQfAAUkYWxlcnRzU3VjY2Vzc2Z1bGx5Q29tcGxldGVkQ29udGFpbmVyHwRoFgIfAQUkYWxlcnRzU3VjY2Vzc2Z1bGx5Q29tcGxldGVkQ29udGFpbmVyZAIEDw8WBB8ABSBhbGVydHNBbHJlYWR5RXhpc3RzVXNlckNvbnRhaW5lch8EaBYCHwEFIGFsZXJ0c0FscmVhZHlFeGlzdHNVc2VyQ29udGFpbmVyZAIFDw8WBB8ABSFhbGVydHNVbnN1YnNjcmliZU1lc3NhZ2VDb250YWluZXIfBGgWAh8BBSFhbGVydHNVbnN1YnNjcmliZU1lc3NhZ2VDb250YWluZXJkAgYPZBYEAgEPZBYCZg9kFgJmDw8WBB8ABRphbGVydHNVbnN1YnNjcmliZUNvbnRhaW5lch8EaBYCHwEFGmFsZXJ0c1Vuc3Vic2NyaWJlQ29udGFpbmVyFgRmDw8WAh8ABSBhbGVydHNVbnN1YnNjcmliZUhlYWRlckNvbnRhaW5lchYCHwEFIGFsZXJ0c1Vuc3Vic2NyaWJlSGVhZGVyQ29udGFpbmVyZAIBDw8WAh8ABR1hbGVydHNVbnN1YnNjcmliZUJ0bkNvbnRhaW5lchYCHwEFHWFsZXJ0c1Vuc3Vic2NyaWJlQnRuQ29udGFpbmVyZAIVD2QWAgIBD2QWAmYPEGRkFgFmZAIHDw8WAh8ABR5hbGVydHNBbGVydERpc2NsYWltZXJDb250YWluZXIWAh8BBR5hbGVydHNBbGVydERpc2NsYWltZXJDb250YWluZXJkAgEPDxYCHgRUZXh0BZoEPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KZnVuY3Rpb24gU2VsZWN0QWxsKHN0cmFydFdpdGgsIHRvdGFsLCBTZWxlY3RlQWxsQ2hrKQ0Kew0KICAgICBmb3IodmFyIGkgPTE7aTw9dG90YWw7aSsrKQ0KICAgICB7DQogICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChzdHJhcnRXaXRoICsgaSkuY2hlY2tlZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFNlbGVjdGVBbGxDaGspLmNoZWNrZWQ7DQogICAgIH0NCn0NCg0KZnVuY3Rpb24gU2VsZWN0T25lKHN0cmFydFdpdGgsIHRvdGFsLCBTZWxlY3RlQWxsQ2hrKQ0Kew0KICAgICB2YXIgaTsNCiAgICAgZm9yKGkgPTE7aTw9dG90YWw7aSsrKQ0KICAgICB7DQogICAgICAgICBpZighZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoc3RyYXJ0V2l0aCArIGkpLmNoZWNrZWQpDQogICAgICAgICAgICAgYnJlYWs7DQogICAgIH0NCiAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoU2VsZWN0ZUFsbENoaykuY2hlY2tlZCA9ICgodG90YWwrMSkgPT0gaSk7DQp9DQo8L3NjcmlwdD4NCmRkAgIPZBYCZg9kFgJmDw8WAh8ABQ9Gb290ZXJDb250YWluZXIWAh8BBQ9Gb290ZXJDb250YWluZXIWAmYPZBYCZg9kFgJmD2QWAmYPDxYCHwAFDldyYXBwZXJXcmFwcGVyFgIfAQUOV3JhcHBlcldyYXBwZXJkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYOBTFib2R5XzEkZ2xvYmFsXzAkaGVhZGVyaGVhZGVyXzIkU2VhcmNoU3VibWl0QnV0dG9uBTVib2R5XzEkZ2xvYmFsXzEkdHdvY29sdW1uc3JpZ2h0XzMkYWxlcnRzQ2F0ZWdvcnlDaGtfMQU1Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c0NhdGVnb3J5Q2hrXzIFPGJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNSTlNTZWxlY3RBbGxDaGVja2JveAU4Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c1JOU0NhdGVnb3J5Q2hrXzEFOGJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNSTlNDYXRlZ29yeUNoa18yBThib2R5XzEkZ2xvYmFsXzEkdHdvY29sdW1uc3JpZ2h0XzMkYWxlcnRzUk5TQ2F0ZWdvcnlDaGtfMwU4Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c1JOU0NhdGVnb3J5Q2hrXzQFOGJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNSTlNDYXRlZ29yeUNoa181BThib2R5XzEkZ2xvYmFsXzEkdHdvY29sdW1uc3JpZ2h0XzMkYWxlcnRzUk5TQ2F0ZWdvcnlDaGtfNgU4Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c0xhbmd1YWdlc0xpc3RCb3gFP2JvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNUZXJtc0NvbmRpdGlvbnNZZXNSYWRpbwU+Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c1Rlcm1zQ29uZGl0aW9uc05vUmFkaW8FPmJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNUZXJtc0NvbmRpdGlvbnNOb1JhZGlvulpIpatDBOMCMBv4U0RYSLazybs=" />
</div>
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWFALT6IybBwK12ZCYCgL2hrCVDQKx6Oq/BQKvrM3CAgLk78yLBgLl78yLBgKN4Yb+AQL27ZH1DQL27dXjAwL27em+DAL27a2tAgL27cGICwL27YV3AszllaIKArua5/UCAo3Dqa0OAsr3g8gDAuW5heMGApqBqc4CprBsaYlxC8dTfOwmP1U0NzwPiic=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['MainForm'];
if (!theForm) {
theForm = document.MainForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
My code starts from here:
<div id="globalWrapper">
<p>my all coded html comes here</p>
--
---
---
---
---
</div>
This is end of body with extra WebResource.axd file
<script src="/WebResource.axd?d=4AEhmjo4PfjXcTYk5tSDFQ2&t=633912595699095000" type="text/javascript"></script>
</form>
</body>
</html>
I invest so much time to make my XHTML clean but I can't control this unwanted code. Is there a way to get clean code?
use ASP.NET MVC if you don't want to deal with ViewState, theForm and other WebForms related issues.
The hidden fields that are visible from the markup you pasted form the core of ASP.NET WebFormns. It is quite long to describe here what is it all about, the topic is kinda big. The short answer is that you need all this if you want to properly use ASP.NET WebForms. You can take a look at this article you really want to understand what is the ViewState and what purposes it serves.
As for the axd link that you see, this is specially designated ASP.NET handler that servers for shipping javascript files to your page. It is automatically added to your rendered markup if there is ScriptManager in your aspx page.
Related
So I'm just dabbling in this and most likely doing it wrong. But it's a proof of concept so I can get the powers that be to get someone to do it right.
I am using a php script for login and for posting variables from forms.
The problem: I am echocing out an html code that includes the css, html, and jquery scripts all in one file. Which is fine for the css and html portion, but the jquery stuff doesn't work.
Is there a way to place the jquery portion in my php script to make it function, or does it need to be split out and referenced/loaded in the html. (I believe that is the correct way, but I don't know how or where to start.)
code: (after binding to ldap and authenticating, this block is triggered)
// verify binding
if ($ldap_bind) {
echo "
<head>
<link - stylesheet \link>
</head>
<form class=\"form-horizontal\" action\"form.php\" method=\"POST\" enctype=\"multipart/form-data\">
<fieldset>
<body>
html code....lots of div boxes
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
<script>
$(document).ready(function(){
Various Jquery functions that hide/unhide div boxes
});
</script>
</body>
</fieldset>
</form>
";
} else {
echo "<p class='text-error'>Unable to log you in:</p>";
First, your HTML structure is quite mixed up. Have a look at how I "reorganized" it below and feel free to read tutorials like this one about it.
Second, you can use the PHP tags (<?php and ?>) to avoid the multi-line echo and all the quote escaping mess. What is outside these tags won't be processed by PHP and sent as-is to the browser. So you can write "usual" HTML there.
Third, having your scripts outside HTML like <form> is a good practice. And the library calls commonly are placed in the <head>... But it's also common to have it near the end of the document, just above </html>, instead of the <head>. For sure, not oddly everywhere in the markup.
// verify binding
if ($ldap_bind) {
?>
<head>
<title>My page title</title>
<link rel="stylesheet" href="...">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="form.php" method="POST" enctype="multipart/form-data">
<fieldset>
html code....lots of div boxes
</fieldset>
</form>
<script>
$(document).ready(function(){
//Various jQuery functions that hide/unhide div boxes
});
</script>
</body>
<?php
} else {
?>
<p class='text-error'>Unable to log you in:</p>
I have found an issue with my site and I have isolated it to Jquery Mobile components. I am simply clicking a href link that calls another PHP page. On the second page I have set up a form and a Jquery form validation that checks to see if the SKU button has been selected and if so it should return an alert and cancel the form submission. The problem is that when I link to the second page from the first page the form validation code is not working.
If I refresh the page it works just fine. I isolated out the link to Jquery Mobile and the page works just fine. There is something that is being passed by Jquery Mobile that is keeping the page from loading in its entirety. Or, more likely there is some carry-over from the first page that disables the validation code on the second page.
I can add that if I get rid of the links to Jquery Mobile entirely on the second page (no styling at all) and I link to the second page from the first page, The Jquery Mobile formatting still carries to the second page. I have investigated this extensively and I can't find any previous mention of this problem. I have set up test pages to sort this out.
Page 1:
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>Customer Maintenance</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script>
</head>
<body>
Test 1 page
<p>Home Page</p><hr>
<footer>Created by: attentionjay</footer>
</body>
</html>
<a href="test2.php" >Test Inventory</a>
Page 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>Customer Maintenance</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(function () {
$('#custalert').bind('submit', function (e) {
if($("input:first").val() == "") {
alert("You must enter a Customer Alert");
return false;
}
});
});
$(function () {
$('#queryinv').bind('submit', function (e) {
if($('#sku_checkbox').is(':checked') == true) {
alert("You must enter a SKU");
return false;
}
});
});
</script>
</head>
<body>
<div data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="queryinv" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="radio" data-theme="a" name="input" id="sku_checkbox" />
<label for="sku_checkbox">SKU</label>
<input type="radio" data-theme="a" name="input" id="entire_checkbox" />
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b">Submit</button>
</form>
</div>
</div>
<br>
<p>Home Page</p><hr>
<footer>Created by: attentionjay</footer>
</body>
</html>
Any help I could get would be great. This is a mystery to me.
EDIT: 7-1-2013
I thought that it would be worth updating what I found while solving this problem. Disabling the AJAX data works, but only for links. I had difficulty getting it to work on a form submission. I ended up disabling AJAX globally with the following script:
<script>$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});</script>
This script must be placed before the Jquery Mobile script on the page. This will disable the AJAX functionality for the entire page. AJAX is great and it should be used when possible. I had already set up the layout of my site before I discovered my problem. A site could more easily be retrofitted to make use of the Jquery Mobile functionality.
Try adding data-ajax="false" to your <a> tag whenever you are linking to a seperate php or html page.
jQuery mobile is designed for developers to put multiple pages int he same html or php file. So it uses ajax to link between those 'pages' which are really just divs. The issue with this is that, by default, jQuery mobile uses ajax for every link unless you state otherwise. This can create some cooky problems and it took me a while to understand when I first started with jQuery mobile. I think there's a pretty good doc about this topic in the JQM documentation.
adding
rel = "external"
works for me
I am just starting web programming with javascript and php.
I am trying to build a webpage that would accept text pasted in a form on upper half of page and on the press of a button show the processed text ( could be any type of text processing lets say removing all occurances of letter m from the text ).
i can you guide me to a link on the net to understand what kind of coding would be required in such a webpage ?
what kind of basics of php / javascript should be understood before trying out this page ?
thanks
You can use javascript like this
HTML code
<input type="text" id="name" />
<input type="buttom" onclick="do_process();" value="Process" />
JavaScript Code
<script type="text/javascript">
function do_process() {
var data = document.getElementById("name").value;
var processed_data = here put processing function whatever you want;
document.getElementById("name").value = processed_data;
}
</script>
You can do with jQuery (see here). Read all about jQuery here
HTML
<input type='textarea'>
<hr />
<div id="transfer">Click for copy</div>
<hr />
<div id="thecopy"></div>
JavaScript
$('#transfer').click(function(){
$('#thecopy').text($('input').val());
});
I have a question and maybe there is a better method of doing it beside php but i am throwing the idea out there... let me know your expert advice.
I will have a pre designed certificate i will create in PHP and design in HTML.
User will be directed to a page to enter the name to print on the certificate.
the end result will be sized to 8 1/2" by 11" ready to print.
Image which shows what I am requesting: Example of Design
What is the best way to approach this? or is there something thats pre made and can be customized for my request?
Here's an example in Javascript.
HTML:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
Enter Name:
<input id="who" type="text" />
<input id="submit" type="button" class="btn" value="Submit" />
<div id="certificate" style="text-align:center;display:none;">
<h1>Certificate of Merit</h1>
<h3>Presented To:</h3>
<h4 id="name"></h4>
<hr />
<h2>Congratz</h2>
</div>
Javascript:
$('#submit').click(function() {
$('#name').html($('#who').val());
$('#certificate').fadeIn();
});
JSFiddle: http://jsfiddle.net/6SWVV/1/
I was wondering if anyone knew the best way to dynamically create an upload form?
Here's what I'm trying to achieve: The code shown below allows one upload, I want to have a button that when pressed, should add another form for file upload. So, if I want to upload - let's say 7 files, I want to press the button 7 times to create those upload forms, each on it's own row.
Is there anyway I can do it?
Thanks for your assistance:
<html>
<head>
<title> Multiple File Uploads </title>
</head>
<body>
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
Usually you do something like this, Client-side:
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
$('#extraUpload').click(function(){
$('.uploadfile:last').clone().appendTo('#uploadContainer');
});
</script>
That is using jQuery. Then on the server side you can easy loop over the $_FILES['uploadfiles'] array:
foreach($_FILES['uploadfiles'] as $file){
//do stuff with $file
}
take a look here for a simple example
http://mohamedshaiful.googlepages.com/add_remove_form.htm
Josh
jQuery has a nice plugin I've used called MultiFile. You may want to check that out.
http://www.fyneworks.com/jquery/multiple-file-upload/
Here's a really really simple one, works in FireFox, Chrome and IE7.
I'd really advise you to check out a javascript framework such as jQuery, it'll make your life easier.
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
var hook = document.getElementById(hookID);
var el = document.createElement('input');
el.className = 'uploadfile';
el.setAttribute('type','file');
el.setAttribute('name','uploadfiles[]');
hook.appendChild(el);
return false;
}
You could try this jQuery plugin called uploadify
You could try YUI uploader
Just make sure that you handle the file correctly on the server as Flash sometimes posts the data to the server in different ways. So if you have some way of checking what is in the Request values then you should be good.
There is no way to do this with plain HTML currently. I think it is starting to be addressed in the latest versions of browsers and the forthcoming HTML5 spec.
Most current cross browser solutions will require a JS library (and I think Flash). The alternative is selecting each file individually with it's own input element. For obvious reasons browsers implement very strict security around the scripting and display of file upload elements that can make them hard to work with.