javascript not working after php include

Question

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");

You have to post more code for us to be able to help. Loading jQuery twice will fail because it tries to redefine the same functions. — Devraj
– Devraj, Commented Jun 16, 2011 at 11:12
my scripts too have <?php ****** ?>, this doesnt show us the full problem definition, please clarify a bit more... — Sujit Agarwal
– Sujit Agarwal, Commented Jun 16, 2011 at 11:13
@devraj trust me you dont wanna sort through the code. thanks for the advice however the header.php and index.php each need to use jquery seperatly. how can i only load it once? — user780483
– user780483, Commented Jun 16, 2011 at 11:14

Shrinath · Accepted Answer · 2011-06-16 11:18:33Z

2

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.

answered Jun 16, 2011 at 11:18

Shrinath

8,13813 gold badges51 silver badges86 bronze badges

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

1 Comment

user780483 Over a year ago

i moved both jquery.js and autogrow.js to header.php and removed them all from index.php. i got autogrow to work however now, the onfocus clear text wont work

Jagadeesan · Accepted Answer · 2011-06-16 11:19:52Z

1

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');

edited Jun 16, 2011 at 11:19

answered Jun 16, 2011 at 11:14

Jagadeesan

1,0973 gold badges9 silver badges24 bronze badges

4 Comments

user780483 Over a year ago

@jagadeesan yes i have used include_once and scripted jquery.js. Should I try possibly renaming the jquery file?

user780483 Over a year ago

I actually used the code below to load autogrow and jquery (i used this method to load jquery in both files)

user780483 Over a year ago

user780483 Over a year ago

thanks. i got the jquery stuff to work, but for some reason now my javascript onfocus doenst work when i click the box. i dont konw why the two events are related

Community · Accepted Answer · 2017-05-23 12:12:05Z

1

this thread might answer your question

Check if jQuery is included in Header (Joomla)

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Jun 16, 2011 at 11:19

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

Chris · Accepted Answer · 2011-06-17 00:56:22Z

1

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.

edited Jun 17, 2011 at 0:56

answered Jun 16, 2011 at 12:06

Chris

4,7844 gold badges32 silver badges43 bronze badges

3 Comments

user780483 Over a year ago

what about onblur and I apologize for being an amateur but what should go in yourHandlerHere?

user780483 Over a year ago

user780483 Over a year ago

i have posted the code in my original question for easier viewing

Collectives™ on Stack Overflow

javascript not working after php include

4 Answers 4

1 Comment

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related