Just trying to show and alert when i click on a link - javascript

i'm trying this code:
<script type="text/javascript">
$('#ooo').click( function() {
alert("jadner");
});
<script>
prueba
I expected it shows the alert when i click on "prueba", but it doesn't show anything..
Regards
Javi

You need to bind the event only after the DOM finishes loading. Wrap your code inside $(document).load() event like this:
<script type="text/javascript">
$(document).ready(function() {
$('#ooo').click(function() {
alert("jadner");
});
});
</script>

1 - Make sure jQuery has been included.
2 - Make sure your click handler is in a $(document).ready(function() {...}); block.
See:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

You have to either reverse the order of the tags, i.e. put the script after the link:
prueba
<script type="text/javascript">...</script>
or wrap the code in a $(document).ready() callback:
$(document).ready(function(){
$('#ooo').click( function() {
alert("jadner");
});
});
The problem: When your JS is executed, it tries to find the element with ID ooo which does not exist yet. Parsing is always from top to bottom. So the script gets executed before the link element is created.

Add return false; below the alert. and like Nanne says, make sure you've got jQuery loaded properly
should be </script> not <script>

use document.ready()
<script type="text/javascript">
$(document).ready(function(){
$('#ooo').click( function() {
alert("jadner");
});
});
</script>
prueba

Try the following code.
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script language="javascript">
$(function()
{
$('#ooo').click( function()
{
alert("jadner");
});
});
</script>
prueba

Related

Uncaught TypeError: undefined is not a function $

I'm using a asp.net site.
I'm including this script in the header.
<script type="text/javascript">
$('#settings, #agency_text').on('click', function () {
$('#logout').fadeToggle('fast');
});
</script>
then I get this error:
Uncaught TypeError: undefined is not a function
The error means that the jQuery library wasn't loaded (correctly).
First you need to load in the jQuery library to be able to perform jQuery functions.
Add this line above your script in html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
For more info check out this page here: http://www.w3schools.com/jquery/jquery_get_started.asp
add $(document).ready(function(){ });
<script type="text/javascript">
$(document).ready(function(){
$('#settings, #agency_text').on('click', function () {
$('#logout').fadeToggle('fast');
});
});
</script>
I also change my code like this
<script type="text/javascript">
$(document).ready(function(){
$('#settings, #agency').click(function () {
$('#logout').slideToggle('fast');
});
});
</script>
It works with "jquery-1.4.1.min.js" :)

jQuery declare function and call

<script>
function showAlert(){
alert('Bazinga')
}
$(document).ready(function(){
showAlert();
});
</script>
In my example I first of all declaring function and else calling this function when documents is loaded. But alert is now show.
Make sure you have included jQuery library , The script should be after the jQuery library.
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
function showAlert(){
alert('Bazinga');
}
$(document).ready(function(){
showAlert();
});
</script>
Fiddle
I think you forgot the ";" on alert, try adding ";". If that does not do the trick you could try move up ur document ready.

Append and call dynamic javascript function with jQuery

Can you create a dynamic javascript function and immediately call it?
I already found that you can't use the callback from append.
proposed, non working, code:
<script type="text/javascript">
var count=1;
$(document).ready(function(){
$(".main").append('
<script type="text/javascript">function init'+count+'(){alert("'+count+'");}<'+'/script>
');
window['init'+count]();
});
</script>
<div class="main"></div>
Edit:
Narrowed it down to a synchronization problem. Placing alert("") between append and window makes it work, but that is not really a useful fix because the count might go up to a 100 when I place this code in a loop.
Guess I'll have to keep looking.
That should work, but you aren't quoting correctly. There shouldn't be any unescaped double quotes within append(" and "). Try:
$(".main").append("
<script type=\"text/javascript\">function init'+count+'(){alert(\"'+count+'\");}<'+'/script>"
);
use an external script and $.getScript(), it allows you to specify a callback and makes your code a bit neater
$.getScript("http://scriptURL.com/script.js", function(){ itit(); });
Theres no point of inlining the code.. you could just run it in the same place you're appending the tags or use jQuery.globalEval();
Yes, you can! This is the way javascript was invented! It is extremely powerful:
<script type="text/javascript">
var count=1;
var init = [];
$(document).ready(function(){
(function (count) {
init[count] = function () {
alert(count);
}
})(count);
init[count]();
});
</script>
<div class="main"></div>
or, if you just want to construct and call the function without storing it ...
<script type="text/javascript">
var count=1;
$(document).ready(function(){
(function () {
alert(count);
})();
});
</script>
<div class="main"></div>

jQuery tooltip is not working

I want a tooltip to show when I rollover on particular links. It's not working. The commented out alert is working, so event is not the issue. This is my javascript code:
$(window).load( function() {
$("a").each(function() {
if(this.text==" View image") {
$(this).mouseover(function() {
// alert("blabla");
$(this).tooltip();
});
}
});
});
on my html file the includes are:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" language="javascript" src="mainscript.js"></script>
I'd appreciate some help.
UPDATE: removing mouseover doesn't help
Remove the mouseover function. The plugin doesn't require you to add a custom mouseover function. It's done from the plugin for you.
if(this.text==" View image") {
$(this).tooltip();
}
Hope this helps ^^
Change the main jQuery function to $(document).ready(function(){});
This will probably work now~
Try this:
$("a").each(function() {
if(this.innerHTML == " View image") {
$(this).tooltip();
}
}
Also, there's a space before the View in "View image". I'm not sure if that's intentional or not.
I used jQuery tipsy on my recent projects. Quite easy to understand and integrate.

Call an anchor tag via javascript

I am using thick box 3.1 to load a pop up. It working well by using in the following way:
TEST
If we click on the TEST now then the popup is working well and good.
Now my prob is: I need to call this popup in form load using JavaScript.
I do something like below:
<script type="text/javascript">
window.location.href = "filename.php"
</script>
it's just redirecting to that particular file. But not showing in the pop up.
What is the possible way?
thanks in advance
Try this:
Test
<script type="text/javascript">
$(function(){ // On DOM ready
$('#openOnLoad').click();
});
</script>
You can do this without changing your markup, like this:
$(function() {
$('a[href=filename.php]').click();
});
TEST
<script type="text/javascript">
$("#UniqueIdForThisLink").click();
</script>

Categories