CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
Nilzone-
Nilzone-

Reputation: 2786

jQuery .load() function stops me from calling a script in HTML-file

My login.html file:

<!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" lang="lv">
<head>
<?php require_once 'inc/metahead.php'; ?>
<title>Logg inn</title>
<script type="text/javascript"      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/Javascript" src="functions.js">
</script> 

</head>
<body>
    <div id="content">
        <center>
            <form>
                <label for="epost"></label> <input type="text"   name="epost" id="epost"
                    placeholder="Epost/Bruker" /></br> </br> <label
                    for="passord"></label> <input type="password"   name="passord" id="passord"
                    placeholder="Passord" /></br> </br> <input
                    type="button" onclick="login()" value="Logg inn">
            </form>
            <br /> <a href="forgot_pass.php">Glemt passord?</a>
        </center>
    </div>
</body>
</html>

This piece of code is from my header.php file:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function loginNow(){
    $(document).ready(function() {
         $("#content").load("login.html");
    });
}
</script>

If i go directly in login.html - It calls the function without problems. BUT, if I go through my index-file and click "Logg inn", so the script above run, the script in login.html never gets called.

I have tried to alert something out instead of calling my script - That works. Any help would be greatly appreciated!

Upvotes: 0

Views: 699

Answers (4)

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

The function name is different here

 onclick="login()" // you are calling login()

 function loginNow(){ // but declaring loginNow()

Upvotes: 1

bipen
bipen

Reputation: 36531

what i think is you have two jquery files with different version loaded there which is creating the conflict 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">

in login.html

and other is 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

in header.php

so either you use noConflict().. or remove one of them

Upvotes: 3

pmayer
pmayer

Reputation: 341

Don't use onlick="". Since you are using jQuery, hook an event to your input element:

 $(document).ready(function(){
     $('input[type=button]').click(loginNow);
 });

Eventually give the button an id or a name and use this as the selector in jQuery.

Upvotes: 0

Mysteryos
Mysteryos

Reputation: 5791

Your HTML code: ...

<input type="password"   name="passord" id="passord"
                    placeholder="Passord" /></br> </br> <input
                    type="button" **onclick="login()"** value="Logg inn">

...

Your Javascript Code:

function **loginNow()**{
    $(document).ready(function() {
         $("#content").load("login.html");
    });
}

Check the enclosed parts - Different function names ;)

Upvotes: 0

Related Questions