I come from MVC background and I have little experience with web forms.
I have established where the problem is, but so far I have been unable to fix this.
I have a form which is meant to execute Javascript function when body of the form loads. Please notice that head tag has a run at server attribute as it needs to use Request.QueryString.
The code is below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function doSomething()
{
// Use web forms to do something
var foo = <%= Request.QueryString["input"] %>;
}
</script>
<title>Foo</title>
</head>
<body onload="doSomething()">
<form id="MainForm" runat="server">
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
...
</td>
</tr>
</table>
</form>
</body>
</html>
I get the following error:
SCRIPT5007: The value of the property doSomething is null or undefined, not a Function object.
My guess is that something executes on a server or other way round. This has worked previously (over a year ago), so potentially something in a web config was overwritten. I have spent the most of day on this and had no luck so far.
Edit: Generated output is below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doSomething()
{
debugger;
var o = crmForm.queryString;
}
</script>
<title></title>
</head>
<body onload="doSomething()">
<form name="MainForm" method="post" action="fooPage.aspx?input=queryString" id="MainForm">
<div>
// hidden fields
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
// inputs
</td>
</tr>
</table>
</form>
</body>
</html>
Instead of using the onload attribute of the body tag, you can also add the following code within the <script> tags:
if(window.addEventListener) window.addEventListener("load", doSomething, true);
else window.onload = doSomething;
Related
I have specific html setup that looks like this
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
Where the javascript function submitform() looks like this
function submitform() {
if (confirm("Do you want to proceed?")){
document.f_form.submit();
}
}
What I want is a general javascript function that works with every form and not only this form with the name="f_form". I really don't want to write a java function for each and every form :P.
This will use jQuery as it's easier to bind an event on multiple element.
$("form").on('submit',function(){
if(confirm("Do you want to proceed?")){
$(this)[0].submit();
}else{
return false;
}
});
Well for starters sort your HTML that is invalid HTML
Your code with valid required HTML, Body, head and DOCTYPE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<table class="table">
<form action="" name="f_form" id="id_f_form" method="POST">
<input type="hidden" name="f1" value="555">
<tr onClick="javascript: submitform();">Block</tr>
</form>
</table>
</body>
</html>
use it at https://validator.w3.org/#validate_by_input
so for valid code it should be
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form name="f_form" id="id_f_form" method="POST">
<table class="table">
<tr onClick="submitform(this);"><td><input type="hidden" name="f1" value="555" />Block</td></tr>
</table>
</form>
</body>
</html>
As for your script with valid HTML you make it really easy using jQuery
function submitform(e){
if (confirm("Do you want to proceed?")){
jQuery(e).parent('form').submit();
}
}
Below is my code, i just want to alert the "hi" and "hello" so that i can put my actual codes there.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.11.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<script>
$(document).ready(function(){
alert("hi");
$('form[name="lgform"]').submit(function(evnt){
evnt.preventDefault();
});
$("#btn_login").click(function(){
alert("hello");
});
});
</script>
<body>
<form name="lgform">
<div>
<table id="table" >
<tr>
<td width="35px"><input id="mob" type="text" name="mob_nu"></td>
<td width="35px"><input id="pswd" type="password" name="pswd_vl"></td>
<td width="100px"><input type="button" name="login_btn" id="btn_login" value="Login"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
button click event is not working, i am using the same jquery library in some other places which is working fine. I have to call ajax in this page i need to call the button click without submitting the page, as i have few more buttons to add. Any piece of code is appreciated and thanks in advance.
when i tried your code i got this error
Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set
and when i tried after replacing alert's with console.log then it is working fine.
Your code is working fine, replace alert's with console.log()
Just a quick question here. How can I call a click event of a button that is wrapped inside another html tag inside a main html page?
Sample code below is copied from a Dynamics CRM page source and the second html tag is inserted as a web resource on a Dynamics CRM form.
UPDATED CODE
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("first ready ...");
//alert($("#btnHangup"));
$("#btnHangup").click();
});
</script>
</head>
<body>
<table>
<tr>
<td class="ms-crm-Field-Data-Print" colspan="2" rowspan="2" style="" visible="false">
<div class="ms-crm-Field-Data-Print" style="" data-height="48" colspan="2" rowspan="2" id="WebResource_Hangup_d">
<span>
<iframe frameborder="0" id="WebResource_Hangup" onload="if(!IsNull(Mscrm.InlineIFrameControlView)) Mscrm.InlineIFrameControlView.loadHandler("WebResource_Hangup")" class="ms-crm-Custom-Read" style="border: 0px; visibility: visible; display: block;" tabindex="0" url="/5Um2/%7B635594134590000132%7D/WebResources/cc_HangupButtonWebResource?orglcid=1033&orgname=15Um2&userlcid=1033&type=10006&typename=cc_&id=" src="/_static/blank.htm" iswebresource="True" scrolling="no">
#document
<html>
<head>
<meta charset="utf-8">
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
</head>
<body style="word-wrap: break-word;">
<title></title>
<script src="../WebResources/ClientGlobalContext.js.aspx" type="text/javascript" script=""></script>
<script type="text/javascript" src="/15Um2/_common/global.ashx?ver=-860134328"></script>
<script type="text/javascript" src="/15Um2/_common/windowinformation/windowinformation.js.aspx?lcid=1033&ver=-860134328"></script>
<script type="text/javascript" src="/15Um2/_common/entityproperties/entitypropertiesutil.js.aspx?tstamp=100732643&ver=-860134328"></script>
<script src="../WebResources/cc__wizard" type="text/javascript"></script>
<link href="../WebResources/cc_Style" rel="stylesheet" type="text/css">
<script src="../WebResources/cc_jquery_163" type="text/javascript"></script>
<table>
<tbody>
<tr>
<td>
<input class="hangup-btn" title="Click to hangup" id="btnHangUp" style="width: 110px;" type="button" value="Hangup">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#btnHangUp").click(function () {
alert("hangup clicked");
});
});
</script>
</body>
</html>
</iframe>
</span>
</div>
</td>
</tr>
</table>
</body>
</html>
Your code in the main page is looking for #btnHangup in that document, but it's not in that document, it's in the document associated with the iframe.
For the rest of this answer I'm going to assume you can't change the contents of the iframe, as seems to be suggested by your comments on the question.
To trigger a click on the element, you'll need to:
Wait for the iframe to load
Retrieve the element from the iframe's document
Trigger the click on that element
So I would do something like this (see comments):
// When our document is ready...
$(document).ready(function() {
// Try to do the click
tryClick();
function tryClick() {
var frame, button, jqFrame;
// Get the frame
frame = $("#WebResource_Hangup")[0];
// If we have it and it has its document...
if (frame && frame.contentDocument && frame.contentWindow) {
// Inject jQuery into it if we haven't
jqFrame = frame.contentWindow.jQuery;
if (!jqFrame) {
$("script[src*=jquery]").clone().appendTo(frame.contentWindow);
} else {
// We have, hook up a ready handler
jqFrame(frame.contentDocument).ready(function() {
// Fire the click
jqFrame("#btnHangup").click();
});
// Done
return;
}
}
// If we get here, we haven't hooked up the ready handler,
// so try again in a moment
setTimeout(tryClick, 10);
}
});
I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td>
<div id="text_this">123</div>
</td>
<td>
<button onclick="click_me();">Edit</button>
</td>
</tr>
</body>
</html>
Your form is getting submitted. Add a return false; to your button onclick event.
<button onclick="click_me(); return false;">Edit</button>
Or, make the button type='button' (This is the better option)
<button onclick="click_me();" type='button'>Edit</button>
The reason is because the button type is submit by default if a type is not specified.
From MDN,
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td><div id="text_this">123</div></td>
<td><button onclick="click_me();return false;">Edit</button></td>
</tr>
</table>
</form>
</body>
</html>
added a return false statement to the onclick event. without it, the form gets submitted and the page reloads
jsfiddle here
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined.
What is the equivalent for window.top.frames['f2'] for chrome.
Give your FrameSet and your Frame an ID:
var $fs = $("#fs");
var f2 = $fs.find("#f2");
f2 is now a jQuery object.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.