Javascript function not recognized in CRM 2011 HTML Web resource - javascript

Following up from my solved [previous issue][1], I'm having trouble building a simple HTML Web resource containing some basic javascript, page is rendered correctly but script doesn't seem to work properly.
My HTML resource is very basic:
<html>
<head>
<script src="ClientGlobalContext.js.aspx" />
<script type="text/javascript" src="new_jquery_1.7.2.min" />
<script type="text/javascript">
function buttonClick() { alert('Yo !'); }
</script>
</head>
<body>
<input type="button" value="Test" onclick="javascript: buttonClick();" />
</body>
</html>
Although the page shows up fine, clicking the button yields The value of the property is null or undefined not a function object error like the functions wasn't there, but I checked via F12 console that the code is rendered correctly.
I also tried invoking the web resource via the direct url, in the form of
http://mycrmserver/myorg/WebResources/new_myResource
But (as I expected) the behavior of the page was the same.
I checked Google, I surfed a couple of other SO questions and MSDN and all state this is the right way to do it, what's wrong with my code ?
Other (not sure if useful) details:
If the F12 tool is open the error comes up as a SCRIPT5007 javascript runtime error in the console. If it's not, I get the usual script error notify popup if I browse to the webresource direct url, or nothing happens at all if I try to open the resource inside the CRM.
The CRM environment is updated to Rollup 3 (updating it is not an option unfortunately)
I'm using IE 9 (Remember: Dynamics CRM can't be used in non-IE browsers yet)
UPDATE
Shorthand tags confuse the CRM.
Basically this syntax sometimes gets messed up:
<script src="ClientGlobalContext.js.aspx" />
But this works perfectly:
<script src="ClientGlobalContext.js.aspx"></script>

Root cause is a missing script tag, despite the code you posted being correct.
CRM does some messing about with the HTML you post into the script editor window. What is rendered in the browser is this (note that the ClientGlobalContext.js.aspx tag is not closed in the same way as your pasted code):
<HTML><HEAD>
<SCRIPT src="ClientGlobalContext.js.aspx">
<script type="text/javascript" src="new_jquery_1.7.2.min" />
<script type="text/javascript">
function buttonClick() { alert('Yo !'); }
</SCRIPT>
<META charset=utf-8></HEAD>
<META charset=utf-8></HEAD>
<BODY><INPUT onclick=javascript:buttonClick(); value=Test type=button></BODY></HTML>
Resolution:
Add full "close" tags to each opening script tag (rather than using "/>").

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

<script> and JavaScript not working in HTML file for all browsers after XMLHTTPREQUEST

Hello I am new to JavaScript. I have looked through other posts but I cannot resolve my issue.
Earlier I was attempting to play around with the following script found here (How to read text file in JavaScript).
I got it working successfully SEVERAL times:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Read File (via AJAX)</title>
<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('get', 'test.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('main');
el.innerHTML = reader.responseText;
}
}
</script>
</head>
<body>
<div id="container">
<input type="button" value="test.txt" onclick="loadFile()" />
<div id="main">
</div>
</div>
</body>
</html>
While testing this script, all of a sudden it stopped working! I have assured that my content blockers are disabled and javascript is enabled on my web browsers. I am not sure if I locked up my web browsers ability to use javascript while using this XMLHTTPREQUEST or possibly overloaded it. I even tried inserting a reader.abort() function to possibly close the request if it was still open somehow. I tried inserting alert() functions to troubleshoot that did not work. I tried restarting my computer that did not work. I am using a MAC and have tried the latest versions of Firefox, Chrome, and Safari which all do not work with javascript now.
It is so bad that I CAN'T even get this simple javascript example to work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type=“text/javascript”>
document.write(“<h1>This is a test</h1>”);
</script>
</head>
<body>
</body>
</html>
PLEASE HELP! I don't know what I did or how to fix the issue.
Above script works only if you're loading the text file from a server. Make sure the file is located in the same place as your html file on the server and load the page with your server address. Most likely thing you're doing wrong is you're trying to access client's file. It doesn't work because that will be HUGE security breach, only the client can send you a file to read (If that is your intended purpose, then I advise you to use FileReader, example code can be found here).
About your second script, you're using “ instead of ".

Compiling JavaScript and HTML code in Visual Studio IDE through ASP.NET

I have been through 3 simple tutorials on how to get started with JavaScript using VS 2010 and they all unanimously describe the basic steps of creating a project through File, New, Project, ASP.NET Empty Web Application and then adding a JavaScript file through Add, New Item and finally adding an HTML page to the project.
The contents of my two files are as follows, as described in all basic tutorials, like a HelloWorld program:
JScrip1.js
function add(a, b)
{
return a + b;
}
HTMLPage1.htm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My page title!</title>
<script type="text/javascript" src="JScript1.js" />
</head>
<body>
<script type="text/javascript" >
alert("Sum of 3 and 4 = " + add(3, 4));
</script>
</body>
</html>
In all the tutorials, upon doing a right-click on the HTML component and choosing View in Browser, it compiles and shows an alert window with the result (7) but mine only shows the tab with the title, and a pop-up message saying that ASP.NET Development Server is running on port 56044
The page that opens has the following URL: http://localhost:56044/HTMLPage1.htm
What am I missing? Why is my html page completely blank?
RESOLVED by changing my HTML script to the following, thanks to Jared
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>My page title!</title>
<script type="text/javascript" src="JScript1.js"></script>
</head>
<body>
<script type="text/javascript" >
alert("Sum of 3 and 4 = " + add(3, 4));
</script>
</body>
</html>
The final answer was that <script type="text/javascript" src="JScript1.js" /> needed changed to <script type="text/javascript" src="JScript1.js"></script>. Script tags are not self closing. Apparently browsers don't complain and just silently ignore the tag. :P
Is your browser blocking popups? If so, you can change the alert() command to console.log() command. That should be safer. (Press F12 to open the browsers developer tools and look for a console tab to see the console.log() output)
FYI: The console log will also show javascript errors and such. Like if it can't load the JScrip1.js file.

Reference Errors thrown in included file... unless calling file includes slow code

A funny thing happened to me while I was cleaning up some old JavaScript code this week. When I took out some slow code, the page started throwing Reference Errors on code in a file that was included via an Ajax call.
Below is (greatly simplified) example of the issue. The first file will work without error when requested directly. But when called via Ajax, the document-ready event has already occurred, so the code within executes immediately. Chrome throws an error such as: "VM1414:2 Uncaught ReferenceError: they_log is not defined"
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script>
$(document).ready(function() {
they_log("Be alerted");
});
</script>
<!-- Two separate script tags prevent hoisting -->
<script>
function they_log($string) {
console.log($string);
}
</script>
</body>
</html>
However, if the comment "alert" line below is uncommented, the Reference Errors are not thrown in Chrome or Firefox (although they still occur in Safari - unless you let the modal dialog hang open for several seconds).
<!doctype html>
<html lang="en">
<head>
<title>Prototype of reference error issue</title>
</head>
<body>
<div id="place" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script>
$.get( "http://localhost/path/to/first/file.html", function( data ) {
$("#place").html(data);
});
//alert("I get rid of the reference error");
</script>
</body>
</html>
My question is, how does the alert message (or similar slow code in the including file) prevent the reference errors from occuring?
I'm particularly interested if whatever is happening to let the code execute without error can be counted on to work consistently (in Chrome and Firefox, at least) or if there is something like a race condition going on where it may fail intermittently.
What I observe is your alert run before document ready, and it prevents document ready until the alert dialog is closed. Fiddle: https://jsfiddle.net/24pg3yzk/
While the alert dialog is displayed, the Ajax request and its done handler $("#place").html(data); may have finished. So yes, it's race condition.
Is it standard or consistent behavior? I don't know. I think it makes sense since alert "Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed" (source), but nothing to affirm it from the jQuery doc.

Is it possible to disassemble html?

For testing purpose I create simple html with one button. When you click on button it show you alert. I try to to change button text value with olly, ida, and cheatengine to some other value but it doesn't work. Why?
Is it possible to change value of variable of html, is it possible to disassemble program like iexplorer?
Simple html on what i worked look like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>
If you're using Internet Explorer 9, hit F12 to enable the developer tools. This will show you the structure of your HTML, which you can then change. These will also allow you (via the Script tab) to set breakpoints and debug your JavaScript. From here you can change variable values.
For older versions of IE, similar functionality (though not including JavaScript debugging) is available in the Developer Toolbar.
If you're using FireFox, try FireBug.
If you're using Google Chrome, hit F12 to display the developer tools.
Your terminology isn't correct by the way: HTML does not get compiled (or assembled), so the idea of disassembling it isn't valid. The word you're probably looking for is debug.
If you're using Internet Explorer, don't hit F12 to enable the developer tools. This will only show you the structure of your HTML badly, which you can then change with difficulty.
Instead, make sure you're using FireFox, and then install the extension FireBug which will enable you to view and edit HTML/CSS and Javascript live in the browser (and much more).
Is this what you mean you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function olly()
{
alert("Olly");
}
function cheatengine()
{
alert("cheatengine");
}
</script>
</head>
<body>
<input type="button" onclick="olly()" value="olly" />
<input type="button" onclick="cheatengine()" value="cheatengine" />
</body>
</html>

Categories

Resources