JQuery fails when part of PHP include but not if injected by PHP

Question

All right folks I have a problem with some jQuery error handling code I have written. The issue is, if I write the jQuery code so that PHP injects it into the page using echo statements the code works just fine. However if I just enter the jQuery code after the end of the php statements and let it be included as if it were just normal html it fails to work. I suspect that there is some sort of issue with the elements not being available in the DOM when the jQuery actually makes it back to the browser but I'm not sure how this could be the case.

As for the code here are the examples.

This is how the code is written if it is included after the ending ?> tag of the php in the include file.

<script>

    $("#adminuserlist select[name=userlist]").change(function(){ 
            if($("#adminuserlist select[name=userlist]").val() == \'\'){
                $("#noadminuser").css("visibility", "visible"); 
                $("#noadminuser").dialog({ 
                    modal:true, 
                    show: { 
                        effect: "fade", 
                        duration: 300 
                    }, 
                    hide: { 
                        effect: "fade", 
                        duration: 300 
                    } 
                }); 
            } 
            else{ 
                $("#adminuserlist").submit(); 
            }
        }
    );

</script>

This is how the code looks when I inject it with PHP. It works if I do it this way, but it is, in my mind a bit of an organizational nightmare.

<?php echo '<script>';

    echo '$("#adminuserlist select[name=userlist]").change(function(){ if($("#adminuserlist select[name=userlist]").val() == \'\'){ $("#noadminuser").css("visibility", "visible"); $("#noadminuser").dialog({ modal:true, show: { effect: "fade", duration: 300 }, hide: { effect: "fade", duration: 300 } }); } else{ $("#adminuserlist").submit(); }});';

echo '</script>'; ?>

When I examine the result source in the browser from both of these configurations they seem identical beyond the spacing. If this is some sort of issue with the elements not existing in the DOM when the jQuery is loaded I would love to hear a way to fix it. I have tried the delegate binding method using on. I have tried encapsulating the code in a $(document).ready statement, and a number of other methods but it seems to ignore all of my efforts when I do not inject the jQuery code using PHP.

What baffles me the most is I have a similar page that uses a and the .click method instead of a with the .change method that works perfectly when the jQuery code is included as straight HTML after the PHP code. I'm stumped so any input would be great.

Thanks in advance.

See my answer, but also the if statement looks a bit strange, it should be if ($("#adminuserlist select[name=userlist]").val() == '')) { ... } You have some extra backslashes. — leftclickben
– leftclickben, Commented May 24, 2013 at 4:26

leftclickben · Accepted Answer · 2013-05-24 04:24:16Z

2

Whenever you are initialising the page, you should do so in a document.ready block:

<script>
$(document).ready(function() {
    // Your initialisation code here, including setting up event handlers
});
</script>

This ensures that the document is "ready" i.e. there is no more of the HTML to download and all elements are present in the DOM, before executing the initialisation code.

answered May 24, 2013 at 4:24

leftclickben

4,62426 silver badges25 bronze badges

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

3 Comments

leftclickben Over a year ago

Yes this is my preferred syntax but the long version is clearer for education purposes :-)

user2416063 Over a year ago

As stated in the original question I had already attempted to use such a structure it made no difference. The problem was some lingering escape characters when I switched over from PHP injection.

leftclickben Over a year ago

Yeah I saw that too and commented on the question, but I thought it was more likely a copy-paste error when posting the question. Either way, you should still be using a document.ready block to initialise your event handlers etc.

Sudhanshu Yadav · Accepted Answer · 2013-05-24 04:35:17Z

0

Your code seems fine. It must work. The problem may be on your if condition on escaped single quote. That slash is not needed here. As when you are injecting it through php, that escape is converted to normal one, and there its needed too.

Just try making your condition to

if($("#adminuserlist select[name=userlist]").val() == ''){

Also wrap your code within document ready. Although its not needed when you are including it on last of page. But for safer side to make sure all content is loaded, wrap on it.

answered May 24, 2013 at 4:35

Sudhanshu Yadav

2,33319 silver badges18 bronze badges

1 Comment

user2416063 Over a year ago

It is always the tiny thing that you don't see that kills you. Thank you so much for giving me a second pair of eyes. This fixed it handily. Can't believe I did that. Curse you copy and paste!

Collectives™ on Stack Overflow

JQuery fails when part of PHP include but not if injected by PHP

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related