Problem with Jquery and PHP break function

Question

I'm posting simple version of php and Jquery code of the page that I need to create. As you can see, this example contains PHP break functions, and the name of this page is test.php.

The problem is, when I try to open the first part of this page (case 1) Jquery load function successfully is started and successfully load case 2 in the same DIV the second Jquery code for alert message. But if FireFox and Chrome that alert message it would not show up. Why?

Thx.

The code of the compleate page is:

<?php
include_once '../include/config.inc.php';
include_once '../include/options.inc.php';
include_once '../include/security.inc.php';
include_once '../include/functions.inc.php';
include_once '../templates/config.php';
?>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("#one").live("click", function(){
$("#xuy").load("test.php?x=2");
});
});
</script>
<script type="text/javascript"> 
$(document).ready(function() {
$('#test').click(function() {
     alert("test for alert message");
   });
 });
</script>

<style>
#xuy{ width:770px; height:230px; border:1px solid #999; background-color:#33FF00;}
#one{ border:1px solid #F00; width:555px; background-color:#FFFF00;}
#two{ border:1px solid #000; width:355px; background-color:#CCCCCC;}
#three{ border:1px solid #ccc; width:255px; background-color: #00FFFF;}
</style>
<?
if (!isset($x)) $x = '';
switch ($x)
{
default:
case 1:
?>
<div id="xuy"><div id="one">DIV one</div></div>
<?
break;
case 2:
?>


<div id="two">DIV two</div><br>
<div id="test">click for Jquery alert</div>


<?
}
?>

Please show the finished HTML code that doesn't work. Telling from the unparsed original code what might be wrong in the end result is difficult. — Pekka
– Pekka, Commented Feb 8, 2010 at 0:21

Michael Cornel · Accepted Answer · 2010-02-08 00:32:39Z

1

I think the problem is not with the break, but the following:

When you first open the page, the $(document).ready handler is fired. In this handler you try to bind to the event $('#test').click, but #test does not exist yet!

Then you load the second page by calling:

$("#xuy").load("test.php?x=2");

This starts an AJAX call and inserts the result into the DIV called "xuy". You insert $(document).ready again into the HTML, but the handler is not called, because the document is already "ready". So your event handler to $('#test').click ist not attached!

You would have to do this inside a tag in the loaded file, such as:

<div id="two">DIV two</div><br>
<div id="test">click for Jquery alert</div>
<script>
   $('#test').click(function() {
     alert("test for alert message");
     });
   });
</script>

answered Feb 8, 2010 at 0:32

Michael Cornel

4,0041 gold badge28 silver badges36 bronze badges

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

Comments

Benjamin Wohlwend · Accepted Answer · 2010-02-08 00:32:57Z

1

I think you have to use jQuery's live event handler.

$('#test').live('click', function() {
    alert("test for alert message");
});

click only binds to elements that are in the DOM when the page finished loading. You add div#test to the DOM at a later point, so you need to either use live or only bind the click event after loading the second div

answered Feb 8, 2010 at 0:32

Benjamin Wohlwend

32k13 gold badges93 silver badges102 bronze badges

Comments

matpie · Accepted Answer · 2010-02-08 00:34:47Z

1

default: in a switch statement must always come last. Move it to the end of your switch statement.

default: is a catch-all case and the parser will always execute that case if nothing leading up to it matches.

switch documentation

answered Feb 8, 2010 at 0:34

matpie

17.6k10 gold badges63 silver badges84 bronze badges

3 Comments

Sergio Over a year ago

Thanks a lot. The problem was with those two things: 1. I have to call handler inside a tag in the loaded file (as Tarnschaf wrote) 2. I have to use jQuery's live event handler (as piquadrat wrote) Now everything is working great. Thanks again everyone. God bless you all :)

Mark Schultheiss Over a year ago

so, you should accept this answer...click the check next to it

matpie Over a year ago

@Mark, thanks for the push accept. I think he's already moved on though :-/

Jimmy · Accepted Answer · 2010-02-08 00:33:16Z

0

It's difficult to tell what's happening without seeing the generated source, but I think I see a few problems:

Your second switch case is missing a break statement.
You are binding a click event to $('#test'), which doesn't exist on the initial page load. Consider using live() instead.
It looks like the content you're loading into the "xuy" div is this entire page, complete with its JavaScript code. That means you are reintroducing duplicate code into the page, which could be confusing things.

answered Feb 8, 2010 at 0:33

Jimmy

37.5k13 gold badges85 silver badges100 bronze badges

Comments

Sergio · Accepted Answer · 2010-02-10 12:59:01Z

0

This is the complete code that is working fine and without errors.
Thanks again everyone!

<?php

include_once '../include/config.inc.php'; include_once '../include/options.inc.php'; include_once '../include/security.inc.php'; include_once '../include/functions.inc.php'; include_once '../templates/config.php'; ?>

$(document).ready(function(){ $("#one").live("click", function(){ $("#xuy").load("t.php?x=2"); }); }); DIV one

DIV two

click for Jquery alert $('#test').live('click', function() { alert("test for alert message"); });

edited Feb 10, 2010 at 12:59

answered Feb 9, 2010 at 12:12

Sergio

1,2397 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Problem with Jquery and PHP break function

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related