CODEWITHSUNDEEP
phpjqueryinclude
user2416063
user2416063

Reputation: 33

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

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.

Upvotes: 1

Views: 87

Answers (2)

Sudhanshu Yadav
Sudhanshu Yadav

Reputation: 2333

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.

Upvotes: 0

leftclickben
leftclickben

Reputation: 4614

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.

Upvotes: 2

Related Questions