javascript placed inside an usercontrol loads but does not execute - javascript

inside a user control I have placed:
<script type="text/javascript">
$(function () {
alert("foooo");
};
</script>
This javascript loads into the browser fine, but does not executes. What is the proper way to add javascript code to a user control in ASP.NET MVC.

I have no experience with asp.net but the above is invalid JavaScript (no closing right parenthesis). Have you tried some very simple code like this:
<script type="text/javascript">
alert("foo");
</script>

You're missing a close paren at the end of your function. It should be like this:
});

Be sure that you have JQuery library referenced. Check it like with below code :
<script type="text/javascript">
if(JQuery == "undefined") {
alert("you didn't referenced the JQuery properly!")
}
$(function () {
alert("foooo");
});
</script>

Related

How can I perform a JavaScript function defined into a .js file included in my page from the page?

I am pretty new in JavaScript and I have the following doubt.
Into a JSP page I include a .js file that contains a function definition, in this way:
<script src="<c:url value="resources/js/userAgentInfo.js" />"></script>
Into this userAgentInfo.js file I have define a function, something like this:
function exludeUserAgent() {
...............................................
...............................................
...............................................
if (browserName === "Microsoft Internet Explorer" && majorVersion <= 10) {
alert("EXCLUDE");
return true;
}
return false;
}
Ok, now my problem is: how can I call and perform this exludeUserAgent() function into my page? I have included the file that contain its definition but now I want to perform it when the page is loaded.
Tnx
Write the below code in your JSP page:
<script type="text/javascript">
$(document).ready(function(){
exludeUserAgent()
});
</script>
Just use this single block in your webpage:
<script type="text/javascript"> exludeUserAgent();</script>
if you have jQuery in your page try:
<script type="text/javascript">
$(document).ready(function(){
exludeUserAgent()
});
</script>
if no jQuery is available you can try:
<script type="text/javascript">
window.onload = function(){
exludeUserAgent();
};
</script>
both script blocks just need to be part of your jsp
Typically, I attach an event to the onload event of the window. This will be fired whenever all the resources initially present on the page have loaded (css/html/images/sounds/videos).
To do this, you simply need do the following:
window.addEventListener('load', onDocLoaded, false);
Next, you need a function that will actually handle this event:
function onDocLoaded(evt)
{
/* initialization code goes here */
}
In your case, you'd just need to add a call to the exludeUserAgent function to the body of onDocLoaded.
Wy to wait until the page load?
I think you want to do that immediately when your script file loads.
Just add call to the function on the script file:
exludeUserAgent()
function exludeUserAgent() {
...............................................
...............................................
...............................................
if (browserName === "Microsoft Internet Explorer" && majorVersion <= 10) {
alert("EXCLUDE");
return true;
}
return false;
}
One more note: As you can see you can call the function before you defined it. This is how JavaScript works...

jquery ready event not working in html

I am new to javascript and I have no idea why this code is not working in my html document. I am trying to get an alert after my document is ready. I've checked and it seems syntactically correct to me. the script is at the top of my html document. Any help is appreciated!
It works if it is invoked directly like so:
<script language="javascript" type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
but doesn't work when trying to invoke after document is ready:
<script language="javascript" type="text/javascript">
function test1(){
alert("My First Jquery Test");
}
$(document).ready(function(){
test1();
});
</script>
Bracket / parentheses problem:
Last line should read });
If you pop open your dev tools (F12 most browsers) you will probably see a parse error in the console.
Change
$(document).ready(function(){
test1();
)};
to
$(document).ready(function(){
test1();
});
You need to make sure that jQuery is loaded. Otherwise,
$(document).ready(function(){
test1();
});
will not work. If you add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌
as the first line of your code, jQuery will load from Google's hosted library and your code should work properly.

How to use unobtrusive JavaScript approach to call a function using anchor tag?

There are number of questions on this and I tried them out. However I am having an issue with the following anchor tag which acts as a button. Why isn't the link click event calling the function?
try 1:
Submit
try 2:
Submit
js code:
<script>
$("#btnSubmit").click(function(){
dbdata = <%=jsscripts()%>;
addAll(0, this);
});
</script>
<script type="text/javascript" src="cart_Test.js"> </script>
NOTE:
Please note that this particular js function works well when it's called under the DOM load event listener.
UPDATE:
dbdata is an array and addall() is a function defined in the cart_Test.js file. It seems, following script is not fired after the click function event.
<script type="text/javascript" src="cart_Test.js"> </script>
The order of the js:
<script>
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
function theDomHasLoaded(e) {
//datepicker stuff
}
</script>
<script>
$("#btnSubmit").click(function(){
});
<script type="text/javascript" src="cart_Test.js"> </script>
Well, I am adding an answer since this is how I got it solved. It could be the order of execution.
There was a script snippet for a jQuery UI datepicker. Somehow it was blocking above stated scripts which are supposed to be the first scripts to be run in this page.
After removing the datepicker script (it can be any other script, not necessary a datepicker.) and adjusted the order of execution, the programme flow was back to normal and all scripts were firing as expected.

Sidebar Toggle doesn't work despite of the inline javascript

I'm developing a template. While doing so, i encountered a error. I have placed a button that toggles the sidebar from invisible to visible state.I have used the right codes to initiate the jquery response.But the sidebar doesn't toggle.Help me solve this issue
html
<a id="click-slide">
<span>
\
</span>
</a>
Javascript
<script type="text/javascript">
//<![CDATA[
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
//]]>
</script>
My site
i have used it with and without Cdata.Where did i go wrong
You should put your javascript code into document.ready. The reason behind document.ready is you put your javascript code before the a#click-side element. That means when your javascript executed, in the page there is no element called a#click-side. When we put into document.ready it downloads your javascript and all document gently and then starts executing your javascript code.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
//]]>
</script>
You've not wrapped your code in a document.ready event handler. Change it to this...
jQuery(function($) {
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
It was trying to assign the click event handlers before the page was loaded, so none of the elements actually exist at that time. Wrapping in the ready handler, as above, means it will only run the script when the page has finished loading.
Added your code when document gets ready.
<script type="text/javascript">
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
</script>

I have two seperate functions in a php page. Javascript function is loading correctly, but jQuery doesn't?

inside <head> tag i declare a jQuery function as follows (menu animation function) ;
<script type="text/javascript">
$(function() {
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
and inside <body> tag i use javascript function as follows (slideshow function) ;
<script type="text/javascript" src="scripts/slideshow.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
the problem is only slideshow function excuting while loading not menu animation; if i remove the slideshow function, menu animation script is working!
kindly guide me to sort of the problem
Try to wrap your javascript code in $() in the body tag like this. Since this code inline in the markup it will be executed right away before even all the resources on the page are loaded. May its causing a js error on the page. You and check the console log if you find any js error on the page.
$(function(){
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
After lot of days research I got a fix for the conflict with jquery;
I have replace all $$( with dbl( and $( with sgl( in the javascript file (slideshow.js).
then in the html file i have modified first two lines of my code, as follows;
sgl('slideshow').style.display='none';
sgl('wrapper').style.display='block';
Now both (javascript & jquery) working smoothly. Thank you so much #ShankarSangoli - for your effort.

Categories