Topic Closed
juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

Seems that in admin mode events bound with jQuery fire double.

<script type="text/javascript">
 $(document).ready( function() {
  $("h1").click( function() { alert("Click!"); } );
 });
</script>

When I click on a h1 element I get two alerts in a row. Seems to be a bug.

Here is a small Test Plugin: EventTest.zip
Where does the double binding come from? Looks like the domready function gets initialized twice.

 

Edited: 8 years ago#4383

fly06
263 Posts
19.1K Downloads
1 Themes
8 Plugins

The click event is just bubbling up the DOM tree fom clicked h1 element.

To stop this standard behavior you can modify your js as follows:
 
$(document).ready( function(e) {
  $("h1").click( function() { alert("Click!"); } );
  e.stopPropagation();
 });
 
http://api.jquery.com/event.stopPropagation/
8 years ago#4386

Josh S.
2K Posts
289K Downloads
16 Themes
18 Plugins

We shouldn't have to use stopPropogation() here though. It looks like the double firing has something to do with how gpEasy handles admin content. Adding the jQuery to the head of the page doesn't have the same problems.

global $page;

$page->jQueryCode .= '$("h1").click( function() { alert("Click!"); } );'."\n";

Any jQuery added to the $page->jQueryCode is wrapped run with the document onReady event.

8 years ago#4389

juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

fly06 - thanks for the hint. Actually this is the first time I have such a problem. Will come in handy sometimes.

Josh -  $page->jQueryCode ... sounds great. I'll use this.

I'm still burying my oldschool one-event-per-function-javascript thinking. But it's a zombie ;-)

8 years ago#4394

fly06
263 Posts
19.1K Downloads
1 Themes
8 Plugins

It looks like the double firing has something to do with how gpEasy handles admin content.

You may be right.

It looks like the html in the Event_Test() method is ouputted twice.

Probably an output buffering related issue?

Edited: 8 years ago#4395

juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

I can see no double HTML. What I see is that the entire script tag is removed from the DOM at runtime (and probably executed otherwise - can't find it in generated source but I'm not much of a jQuery debugger).

I could imagine that it is executed bevore it's extracted and then - wherever this might be - it's executed again.
This is clearly beyond my JS knowledge and I'm running out of terminology now...

 

Anyway, $page->jQueryCode does the job except that I cannot define variables with global scope this way. But I already found a way around this.

Edited: 8 years ago#4398

fly06
263 Posts
19.1K Downloads
1 Themes
8 Plugins

Anyway, $page->jQueryCode does the job except that I cannot define variables with global scope this way.

You can try to use $page->head_script instead.

See the GetHead_InlineJS() method of the gpOutput class in the gpOutput.php file.

8 years ago#4399

juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

*sigh* seems I have to get me this one* ... When will it be out again? ;-)
*use u: really p:easy4

Edited: 8 years ago#4401

Josh S.
2K Posts
289K Downloads
16 Themes
18 Plugins

*sigh* seems I have to get me this one* ... When will it be out again? ;-)

Not sure, the image you linked to appears to be in a password protected area.

8 years ago#4402

juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

It's just a joke but one not to be crawled by image bots.  user: really   pass: easy4

8 years ago#4403

fly06
263 Posts
19.1K Downloads
1 Themes
8 Plugins

*sigh* seems I have to get me this one* ... When will it be out again? ;-)

Very good news. 
This will definitely speed up my learning curve.
And I am so impatient to read the chapter on "How to prevent your javascript from being fired twice".
Btw, does the $page->head_script work? (I didn't test it -- personal best practice principal).
;-)
Edited: 8 years ago#4404

juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

Yes, $page->head_script .= works perfectly. Thanks a lot!

And I am so impatient to read the chapter on "How to prevent your javascript from being fired twice".

Yes, and not to mention the "How to simply invoke a CKeditor instance in admin area" section. Eagerly awaitng this ;-)

 

Edited: 8 years ago#4409

fly06
263 Posts
19.1K Downloads
1 Themes
8 Plugins
Well, the html is not ouputted twice as I first thought.
It is first ouputted in the #content block of the site template which raises the first js call.
Then the code in the admin.js moves the html from the #content block to the #contentadmin block which raises the second js call.
Of course, this is no longer an issue since we know how to add js to the head in a safe way.
Edited: 8 years ago#4440

juergen
1.5K Posts
55.8K Downloads
16 Plugins
design, web development & visual effects

Jep, thats a logical explanation for why the JS fires twice.
I have also seen the admin code rendered in the content area. Happens when I produce JS errors that prevent admin.js execution.

Of course, this is no longer an issue since we know how to add js to the head in a safe way.

Definitely. Has also some positive side effects: For example - I have to think before I code ;-)

Mystery solved. Case closed. Thx for investigating!

8 years ago#4441

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register