JavaScript/Jquery file not loading

Question

My Jquery works fine in-line however when I try and make it external it doesn't seem to work. I have both scripts stored in the: include('./includes/header.html'); And I also have them stored at the root of the folder.

If any one could help would be great.

I have two links held within the header.html

 <!DOCTYPE html>
  <head>
   <title> <?php $page_title ?> </title>

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

<script src="formValidation.js"></script>
<script src="jquery-1.10.2.js"></script>



</head>
<body>
<div id="wrapper">

    <div id="header">
        <h1>Films.com</h1>

    </div>

    <div id="content">

        <div id="nav">

            <ul>
                <li><a href="login.php">Login</a></li>
                <li><a href="index.php">Home</a></li>
                <li><a href="register.php">Register</a></li>
                <li><a href="film.php">Film</a></li>
                <li><a href="add_film.php">Add a Film</a></li>


            </ul>

        </div>

When going to add_film.php the Jquery that would normally slide down my form, now it doesn't slide down.

  <?php

     include('./includes/header.html');




echo "<h1>Add A film</h1>";

 if(isset($_POST['submitted'])){

$errors = array(); // Initialize erroy array.

// Check for title.
if (empty($_POST['movie_title'])){
    $errors[] = "You forgot to enter a title.";
} else {
    $mn = (trim($_POST['movie_title']));
}
// Check for leading actor
if (empty($_POST['leading_actor'])){
    $errors[] = "You forgot to enter the leading actor.";
} else {
    $la = (trim($_POST['leading_actor']));
}
// Check for a rating
if (empty($_POST['rating'])){
    $errors[] = "Please select a rating.";
} else {
    $rating = ($_POST['rating']);
}
// Check for a review
if (empty($_POST['review'])){
    $errors[] = "Please write a review";
} else {
    $review = (trim($_POST['review']));
} 


if (empty($errors)) { // If no errors were found.

    require_once('./includes/Mysql_connect.php');

    // Make the insert query.
    $query = "INSERT INTO films (movie_title, actor, rating)
    Values ('$mn', '$la', '$rating' )";

    $result = mysql_query($query);

    $id = mysql_insert_id();

    $query = "INSERT INTO reviewed (review, movie_id)
    values ('$review', '$id')";

    $result = mysql_query($query);



    //Report errors.
} else {
    foreach ($errors as $msg){
        echo " - $msg <br/> ";
    }
 }

}

?>

<html>


<form action="add_film.php" method="post" id="add_film">

    <fieldset>

    <label for="title">Movie Title</label>
    <input type="text" name="movie_title" id="movie_title" />

    <br/>
    <br/>

    <label for="actor">Leading Actor</label>
    <input type="text" name="leading_actor" id="leading_name" />

    <br/>
    <br/>      


    <label for="rating">Rating</label>
    <select id="rating" name="rating"/>
        <option selected="selected" value=0 disabled="disabled">Select a                     Rating</option>
        <option value="Terrible">Terrible</option>
        <option value="Fair">Fair</option>
        <option value="Ok">Ok</option>
        <option value="Good">Good</option>
        <option value="Excellent">Excellent</option>
    </select>

    <br/>
    <br/>


    <label for="review">Your Review</label>
    <br/>
    <textarea name="review" id="review" rows="15" cols="60"></textarea>

    <br/>
    <br/>

    <input type="submit" name="submit" id="submit" value="submit" />
    <input type="hidden" name="submitted" value="TRUE" />

    </fieldset>
 </form>







    <br/>
 </html>







 <?php

 include('./includes/footer.html');

  ?>

Here is my Jquery.

 $(document).ready(function(){


    $('#add_film').slideDown(800);

    // Focus on first form field.
    $("input:text:visible:first").focus();


    $('#add_film').submit(function (e) {

    var error = false;

    // No value for movie_title
    if ($('#movie_title').val() == "") {
        alert("No Film");
        error = true;
    }

    // No Value for actor
    if ($('#leading_name').val() == "") {
        alert("No actor");
        error = true;
    }

    // No value for rating
    if ($('#rating').val() == null) {
        alert("No Rating");
        error = true;
    }

    //No value for review
    if ($('#review').val() == "") {
        alert("No review");
        error = true;
    }



    if (error) {
        e.preventDefault();
      }
   });
});

Answer 1

Change the order you load them:

<script src="jquery-1.10.2.js"></script>
<script src="formValidation.js"></script>

Answer 2

the order in which you load the scripts is important. since your script uses jquery, so jquery needs to be loaded before your script. so change the order of loading. first load jquery, then your script.

this is also the reason, why your script works inline.

JavaScript/Jquery file not loading

Question

2 answers

solution1
3 2013-09-25 19:14:47

solution2
0 2013-09-25 19:51:32

JavaScript/Jquery file not loading

Question

2 answers

solution1 3 2013-09-25 19:14:47

solution2 0 2013-09-25 19:51:32

solution1
3 2013-09-25 19:14:47

solution2
0 2013-09-25 19:51:32