CODEWITHSUNDEEP
phpjquery
user780483
user780483

Reputation: 3063

javascript not working after php include

I am trying to apply javascript twice to a simple html textarea. I have onfocus and autogrow (which is actually jquery). It seems i can only get one or the other to work but never both at once.

My script has an: 

<?php
include 'header.php';
?>

This seems to be the problem. In both the header.php and the index.php (where the header is included) I have loaded jquery.js. when I remove this file from the header, autogrow works but not my onfocus event (which clears the default text). Is there a way to include another file without the two effecting each other. I cant provide the code because it too long.

This is my onfocus code:

<script type='text/javascript'>
    function addEvents(id) {
var field = document.getElementById(id);
field.onfocus = function () {
    if (this.value == "Answer this problem...") {
        this.value = "";
    } 
};
field.onblur = function () {
    if (this.value == "") {
        this.value = "Answer this problem...";
    } 
};

} addEvents("answerbox");

Upvotes: 0

Views: 10524

Answers (4)

Chris
Chris

Reputation: 4774

It's got nothing to do with PHP include files. And jQuery is smart enough to work itself out if you include it multiple times.

It's the autogrow plugin code which is dodgy.

Edit the query.autogrowtextarea.js file. Change line this.onfocus = grow; to jQuery(this).focus(grow);.

And then your Javascript code, I've changed it to use the jQuery library (mainly because it's alot less code to make it compatible across older browsers like IE6+).

function addEvents(id) {
    var field = jQuery('#' + id);
    field.focus(function () {
        if (this.value == "Answer this problem...") {
            this.value = "";
        }
    });

    field.blur(function () {
        if (this.value == "") {
            this.value = "Answer this problem...";
        }
    });
}
addEvents("answerbox");
</script>

Both should work at the same time now.

Upvotes: 1

Rafay
Rafay

Reputation: 31033

this thread might answer your question

Check if jQuery is included in Header (Joomla)

Upvotes: 1

Jagadeesan
Jagadeesan

Reputation: 1097

Have your script in a seperate file and include in each page using php include_once function.

create a file jquery.php and add the following.

<script type='text/javascript' src='jquery.js'></script> <script type="text/javascript" src="autogrow.js"></script>

and in header.php

include_once('jquery.php');

and in index.php

include_once('header.php');
include_once('jquery.php');

Upvotes: 1

Shrinath
Shrinath

Reputation: 8118

Rule number 1 : Load jquery only once!. You are loading it twice to the same page. So remove it from one file which loads later.

I assume the first thing you do in your index.php is include header.php, so remove jquery loading from index.php.

Upvotes: 2

Related Questions