js function does not exist? - javascript

Using MVC...
<a onclick="confirmDeactivate(#mobileDevice.Id, '#mobileDevice.IsActive');" class="show-pointer"><i class="icon-trash"></i></a>
So Id, and boolean will be passed to confirmDeactivate...
<script type="text/javascript" language="javascript">
function confirmDeactivate(mobileDeviceId, mobileDeviceIsActive) {
var i =1;
}
</script>
It is telling me confirmDeactivate is undefined.
what am i doing wrong?
EDIT
inspect element:

You need to make sure that the script where you have your function is loaded before you try to call it. If it is an external file, Make sure you load that in your HEAD section/ Top of your razor view.
OR you can try an unobutrusive approach
I updated the markup a little bit, Added a css class name and some data attributes.
<a class="show-pointer clicky" data-deviceid="#mobileDevice.Id"
data-active="#mobileDevice.IsActive"><i class="icon-trash"></i></a>
and in your javscript, Bind a click event to your anchor tag and wrap it inside your document ready.
<script>
$(function(){
$("a.clicky").click(function(e){
e.preventDefault();
var _this=$(this);
var deviceId=_this.data("deviceid");
var isActive=_this.data("active");
alert(deviceId+", " +isActive);
//do something with the values now
});
});
</script>

Related

http javaScript set attribute default to all tags

I am pretty new to HTML and just trying to figure things out...
I am trying to set an attribute for the tag, more specifically the target attribute so that all links in web page would open in a different tab...
I have encountered the jQuery functions and tried to implement it with no success...
My script tag goes like this:
<script src="static/jquery-3.1.1.js">
$(document).ready(function() {
$('a').target = "_blank"
$("a").attr("target", "_blank");
});
$('a').target = "_blank"
</script>
when of course the jquery file is at the same directory under static dir as mentioned....
I have also tried the following:
<script>
var elems = document.body.getElementsByTagName("a")[0];
elems.setAttribute("target","_blank");
</script>
when there's only one tag in page...
Please tell me what am I doing wrong....
Thanks:)
The correct approach to set an attribute to all elements of a web page is to loop through all elements and set the attribute like so:
var elems = document.body.getElementsByTagName("a");
for(var i = 0; i < elems.length; i++)
{
elems[i].setAttribute("target","_blank");
}
If using jQuery the function to set attributes is $(selector).attr(attribute_name,value)
Example:
$('a').attr("target","_blank");
You have some syntax error in your script, correct code in
<script src="static/jquery-3.1.1.js"></script>
<script>
$(document).ready(function() {
$("a").attr("target", "_blank");
});
</script>
At first, your code should be like:
$(document).ready(function() {
$("a").attr("target", "_blank");
});
It actually works. You can try it on this page. I don't know what page r u testing on, but I can guess the reason why your code didn't work is that some links are generated after the execution of your code. You can change your code as below to avoid this problem.
$(document).ready(function() {
setInterval(function(){
$("a").attr("target", "_blank");
},200);
});
You can also add some code to imporve the efficiency.
You don't actually have to modify the html, you could just add a click handler to every link like so.
$(document).on('click', 'a', function(e) {
e.preventDefault();
window.open(this.href);
});

Proper way to add onload function to body using jQuery

On one of my previous pages I use
<script src="/js/wireEvent.js"></script>
<body onload="wireEvent();" >
Basically, wireEvent() displays an image on top of the page whenever the mouse goes out of the browser.
However, now I cannot add this function directly to the body of my page, so what is the proper way to add it? Will it be right if I add
<script>
window.onload = wireEvent;
</script>
or I enclose the whole function in
$( document ).ready
and only include the function's file to my html?
The code below executes only after all your images load completely. So you can try this:
$(document).on('load', function(){
wireEvent();
});
You can just do:
$(function(){
//jQuery code here
});

Inserting javascript in to html file

How can I run this script, tried to run it in html file, but it doesn't seem to work..
I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/
<script type="text/javascript">
$('.question, .answer')
.css("display", "none");
$('.section')
.click(function ()
{
var $others = $('.question:visible')
.not(this);
$others.next('.answer')
.hide();
$others.slideToggle(500);
$(this)
.next('.question')
.slideToggle(500);
});
$('.question')
.click(function ()
{
$(this)
.next('.answer')
.slideToggle(500);
});​
</script>
First make sure you're including the jQuery library:
<script src="path/to/jquery.min.js"></script>
Make sure you're not including the jQuery within those tags, so you've got:
<script src="path/to/jquery.min.js"></script>
<script>
/* Your jQuery here */
</script>
And then ensure you're using a $(document).ready(), or $(window).load(), handler:
<script src="path/to/jquery.min.js"></script>
<script>
$(document).ready(
function(){
/* Your jQuery here */
});
</script>
The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.
put this code before the body close tag
Your Code
</body>
I would go this way:
<head>
...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.question, .answer').css("display", "none");
$('.section').click(function ()
{
var $others = $('.question:visible').not(this);
$others.next('.answer').hide();
$others.slideToggle(500);
$(this).next('.question').slideToggle(500);
});
$('.question').click(function ()
{
$(this).next('.answer').slideToggle(500);
});​
});
</script>
...
</head>
First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.

Call JS function with attributes from another file

I have a JS file with a simple function, matching width\heights of divs.
How can I call this function using attributes from HTML file.
In other words, I want to write a function matchHeight(div1,div2) in an outside file but call it from wherever i want using the divs I want.
The function exists, I just don't know how to call it the way I want.
Sorry if I didn't explain myself clearly.
Thanks.
If you write your MatchHeights(d1,d2){ ... } function in a JS file and link the file in your HTML page like you normally would link any JS file, then you can call the function in any part of your page, as long as you call the function after the linked file has been loaded by the browser.
Infact, you could even call it in other JS files, as long as the original containing file is loaded before the other ones by the browser.
To get the function to run the moment the page loads, call the function in the onload event of the body tag:
<script type="text/javascript">
var div1 = (some code to get the element)
var div2 = (some code to get the element)
</script>
...
...
<body onload="matchHeight(div1,div2)">
You must link the .js file in your .html file like this:
<head>
<script src="yourJSFile.js" type="text/javascript"></script>
</head>
<body onLoad="yourFunction();">
</body>
A really common pattern in jQuery that you can apply is passing in the CSS selector. It's easiest if you can just pass in the div's IDs, but other solutions will work also.
First off take any arguments out of your init string. It's way to complicated. Try this instead:
<body onload="init()">
function init() {
matchHeight("id1", "id2");
}
Once you have that you get the actual div in those functions like this:
function matchHeight(id1, id2) {
var div1 = document.getElementById(id1)
var div2 = document.getElementById(id2)
// .. other stuff
}
If you're using jQuery I'd recommend simplifying this even more, by taking the init() function off of the body tag completely, replacing it with jquery(document).load(function() { and using normal CSS selectors instead....matchHeight("#id1", "#id2") and var $div1 = $(id1);, but either way will work :)

Separating JQuery Scripts with Selectors in External file does not work?

I have a JQuery Selector and an event associates with it.I want to keep it in external file and just copy and directly save it. The thing which I see is that the external JavaScript that has the selector does not work. Can someone explain Why?
NOTE: I am able to use the same function within my HTML file but when externalize it. It just doesn't work .
The script that I have is as follows:-
$('#pervious').click(function() {
var presentSlide = $('.visible').attr('id');
var tempArr = presentSlide.split("-");
var persentSlideNo = tempArr[1];
var perviousSlideNo = Number(persentSlideNo) - 1; if (perviousSlideNo > -1)
{
var perviousSlide = "Slide-" + perviousSlideNo;
$('#' + presentSlide).fadeOut('slow',function(){
$(this).removeClass('visible').addClass('hidden');
});
$('#' + perviousSlide).fadeIn('slow',function(){
$(this).removeClass('hidden').addClass('visible');
});
}
});
How are you including this script?
Note that it needs to go below the definition of your id=pervious element, or it needs to go after it (e.g. document.ready), otherwise the element won't exist, and there won't be anything to bind to.
UPDATE
To restate, it needs to execute AFTER the pervious element gets created. Putting it in an external document is likely causing it to execute BEFORE the pervious HTML element is created, and therefore it doesn't work. You can put it in an external file, sure, just make certain that the element gets loaded, e.g.
$(document).ready(function() {
$.getScript('http://yoursite.com/extrascript.js');
});
After you have determined you are actually linking to it by doing an alert, wrap your code like so:
$(function(){
// place your code inside here for ready event
});
What you are doing is running your selector before the document is ready. The selector runs before the dom is there and there is no results in the selector so you don't attach anything.
You have to include scripts with the form of: (including the closure tag as such)
<script src="myexternal.js" type="text/javascript"></script>
Not any of these:
<script src="myexternal.js" type="text/javascript" />
<script src="myexternal.js" />
<script src="myexternal.js" ></script>
form or it will not always get rendered properly and thus not execute.
and of course, since you are using jQuery, you should put YOUR code AFTER the jQuery library link AND include your code in a document ready as others have demonstrated.

Categories