javascript / jQuery functions not firing

Question

UPDATED:

Thanks for some good feedback. I did have multiple faults in my code, but

My problem was actually with a string in my code inside my jquery/javascript functions (that I did not post here, because I didn't think of it as faulty)

Faulty string:

var deleteAnswer = prompt("Are you sure you want to delete this project?\nName: "+<?=$project['projName']?>+"\nCompany: "+<?=$project['compName']?>);

Correct string:

var deleteAnswer = prompt("Are you sure you want to delete this project?\nName: <?=$project['projName']?>\nCompany: <?=$project['compName']?>");

I will also switch to only use document.ready, instead of window.load

And I use Firefox, but will start to check for errors in F12 console -> errors

JSHint was also a nice tip, as I can check my code there.

Thanks a lot for your feedback guys! =)

I've been using javascript and jquery on my page now, and it's been working good until now.

For some reason none of my code inside my <script> tag will fire anymore. Maybe I'm missing something important.

I've removed some of the code but I hope this is enough information. I've checked the source code to see if it's pointing to the right js file, and it is.

Also, adding this code right before <title> also works:

<script type="text/javascript">
$(document).ready(function(){ 

$("div").css("border", "3px solid red");

});
</script>

Anyways, here's parts of my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--<script src="jquery-1.10.2.min.js"></script>-->
<script src="jquery/jquery-1.9.1.js"></script>
<script src="jquery/ui/jquery.ui.core.js"></script>
<script src="jquery/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/themes/base/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="style.css">

<title>title goes here</title>

</head>

<body>
<script>
    <!-- ########## WINDOW.load ############### -->
    $(window).load(function(){
        $('#topBarWrapper').hover(function() {
            $('#topBarDropDown').stop();
            $('#topBarDropDown').animate({top:'-30px'});
        }, function() {
            $('#topBarDropDown').stop();
            $('#topBarDropDown').animate({top:'-60px'});
        });

        $('#deleteProjectBtn').click(deleteProject);
        $('#cancelProjectBtn').click(cancelProject);

        $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
    });

    function someFunction(){
        //do something
    }

    function cancelProject(){
        window.location = 'admin.php';
    };

    <!-- ########## DOCUMENT.ready ############### -->
    $(document).ready(function(e) {
        alert("document is ready");
        var myCompSelector = document.getElementById('fcompanySelection');
        myCompSelector.selectedIndex = parseInt(<?=$project['companyID']?>)-1;

        var myCatSelector = document.getElementById('category');
        myCatSelector.selectedIndex = parseInt(<?=$project['categoryID']?>)-1;
    });

</script>

 isnt that the format for comments in HTML? You should use // ########## WINDOW.load ############### — Ron van der Heijden
– Ron van der Heijden, Commented Aug 26, 2013 at 12:31
what do you expect from $(window).load() (fyi)? as usual : any console error (F12)? — TecHunter
– TecHunter, Commented Aug 26, 2013 at 12:31
Should I understand your first document ready handler as an abstract example of the one I see below in you code example or do you have two handler functions? — mvw
– mvw, Commented Aug 26, 2013 at 12:33
@TechHunter Ohhh.. Didn't know of that console error thingy! Very nice. I see errors on missing ).. So I'll just have to find that missing ) =) — Stian Berg Larsen
– Stian Berg Larsen, Commented Aug 26, 2013 at 12:37

TecHunter · Accepted Answer · 2013-08-26 12:54:54Z

1

Try :

<script>

    function someFunction(){
        //do something
    }

    function cancelProject(){
        window.location = 'admin.php';
    };

    /** ########## DOCUMENT.ready ############### **/
    $(document).ready(function(e) {
        alert("document is ready");
        $('#topBarWrapper').hover(function() {
            $('#topBarDropDown').stop();
            $('#topBarDropDown').animate({top:'-30px'});
        }, function() {
            $('#topBarDropDown').stop();
            $('#topBarDropDown').animate({top:'-60px'});
        });

        $('#deleteProjectBtn').click(deleteProject);
        $('#cancelProjectBtn').click(cancelProject);

        $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });


        var myCompSelector = document.getElementById('fcompanySelection');
        myCompSelector.selectedIndex = parseInt(<?=$project['companyID']?>)-1;

        var myCatSelector = document.getElementById('category');
        myCatSelector.selectedIndex = parseInt(<?=$project['categoryID']?>)-1;
    });

</script>

use // for inline comment, /* ... */ for comment blocks /** ... **/ for documentation purpose comment blocks
.load() is an Ajax method to load remote content into an element use $(document).ready(function(){}) or $(function(){})

dunno if it's intentionnal but you also have PHP parts which won't execute client side :

    var myCompSelector = document.getElementById('fcompanySelection');
    myCompSelector.selectedIndex = parseInt(<?=$project['companyID']?>)-1;

    var myCatSelector = document.getElementById('category');
    myCatSelector.selectedIndex = parseInt(<?=$project['categoryID']?>)-1;

remember to always try with the Debugger Console (F12 button on chrome) first then make a stripped jsFiddle with minimalist code to reproduce the error. If you do this most of the time your code will be already debugged while narrowing down the bug.
prefer console.log('text here or even javascript objects') rather than alert()

Here is an exemple with your code (I've commented out the PHP part so it can run) : http://jsfiddle.net/techunter/MRZSh/

edited Aug 26, 2013 at 12:54

answered Aug 26, 2013 at 12:39

TecHunter

6,1712 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stian Berg Larsen Over a year ago

Thanks for your very informative feedback. The php code I use does not need to be run on the server side. I fetch some data at the very beginning of the document that I use in other parts, so it works in my example (as this information is already fetched before the code runs.

TecHunter Over a year ago

@StianBergLarsen php not server side? how can this be :S anyway np :)

Stian Berg Larsen Over a year ago

Sorry, what I meant was that the php code gets data from my database before I use my functions, and that data is then "static" when used in my functions =)

Aashray · Accepted Answer · 2013-08-26 12:37:57Z

1

The problem is with your comment :

This works in only HTML or XML. What you need is:

//########## WINDOW.load ###############

Or

/* ########## WINDOW.load ############### */

answered Aug 26, 2013 at 12:37

Aashray

2,76318 silver badges23 bronze badges

Comments

Ron van der Heijden · Accepted Answer · 2013-08-26 12:46:39Z

1

From comment to answer:

Your format for comments is wrong.

<!-- HTML Comment -->

// Javascript single line

/*
   Javascript
   Multiple lines
*/

More information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Code_comments

Edit

I can see you use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also you say that <script type="text/javascript"> work and <script> doesn't.

So you probably need to add <script type="text/javascript"> in the body instead of <script>

Or change to <!doctype html> which is support by every browser.

edited Aug 26, 2013 at 12:46

answered Aug 26, 2013 at 12:38

Ron van der Heijden

15.1k7 gold badges62 silver badges86 bronze badges

3 Comments

Stian Berg Larsen Over a year ago

Thanks. But that was not the problem in my example. But good information to know! =)

Stian Berg Larsen Over a year ago

Hmm, forgot about the newer html, as I didnt seem to need functions from that. Would it screw up anything for me if I switch to using html5? <!DOCTYPE html>

Ron van der Heijden Over a year ago

No it is backward compatible: developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/…

Collectives™ on Stack Overflow

javascript / jQuery functions not firing

3 Answers 3

3 Comments

Comments

Edit

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Edit

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related