CODEWITHSUNDEEP
phpjquerycsshtmldocument
ADM
ADM

Reputation: 1610

Why doesn't this jQuery css() call work?

I need not show a div when in a php if structure. I'm doing: 

 <?php
 $a = $_POST['somefiledcomingFromform'] ; //equals 1
if (isset($_POST['submit'])) {

    if($a==1){


      //  echo"<script>$(document).ready(function() { $('.delete').css(\"display\", \"none\")});</script>";
       echo"<script>$('.delete').css(\"display\", \"none\");</script>";

    }
}

    echo"<div class='delete'>Delete me</div>";
    ?>

But it's not working, the div shows it does not matter what line I use inside de if .. what am I doing wrong?

Thanks a million

Upvotes: 0

Views: 260

Answers (8)

Farray
Farray

Reputation: 8548

For starters, you don't actually use jQuery to change PHP. jQuery is client-side, PHP is server-side, and never the twain shall meet. What actually happens is that you use PHP to create your HTML document, and the browser will create a DOM that jQuery will manipulate.

As for what's wrong with your script, the reason your code does not work is because the statements are echoed in order.

The following does not work:

<script>
    $('.delete').css("display","none");  // div.delete doesn't exist yet
</script>
<div class="delete">Delete me</div>      <!-- Output *after* the jQuery call. -->

The following does work:

<script>
    $( function(){                       //wait until document.ready
        $( '.delete' ).hide();           //hide .delete after ready
    } );
</script>
<div class="delete">Delete me</div>      <!-- Output after <script> but will be hidden after document.ready -->

In addition to this problem, there are several "code smells" that would concern me about your code. Note that none of these are technically wrong, but they tend to indicate other issues.:

  1. You're using jQuery to modify the DOM in a very "plain ol' Javascript" way.
    Instead of changing CSS, use jQuery's .hide() call.
  2. You're alternating between single and double-quotes in your PHP echoes
    You use $( '.delete' ).css( "display", "none"); ... why?
  3. You're not specifying the type of script you're using
    Granted, JavaScript is the most common - but it's still better to explicitly specify the script language.
  4. You're using implied semi-colons
    This can cause unexpected behavior in certain situations and should be avoided.

Upvotes: 0

Boni
Boni

Reputation: 1

Your jQuery call is beign done before the element that will receive the click function is printed on the page.

You can use your own commented line instead the straight call.

echo"<script>$(document).ready(function() { $('.delete').css(\"display\", \"none\")});</script>";

If you want to use your uncommented call, you need to print it after your div tag.

<?php
echo"<div class='delete'>Delete me</div>";

$a=1;
if($a==1){   
echo"<script>$(function(){$('.delete').css(\"display\", \"none\");});</script>";
}
?>

Upvotes: 0

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41965

You can do:

<?php $a=1; if($a==1) : ?>

<script>
  $(document).ready(function() { 
    $('.delete').css("display", "none")
});
</script>
<?php endif; ?>

<div class='delete'>Delete me</div>

But I think it is better to do the folowing:

<?php $a = 1; ?>

<script>
  $(document).ready(function() { 
    $('.delete').css("display", "none")
});
</script>

<div class="<?php echo $a == 1 ? 'delete':'' ?>">Delete me</div>

Upvotes: 1

Shawn Spencer
Shawn Spencer

Reputation: 1460

Why are you using jQuery to try and accomplish that? Just use CSS.

Or, at the very least, use jQuery's "live" to address the HIDE/SHOW of the DIV. The execution order matters, and I don't think the PHP generated script will actually affect the dive you're building and showing after the PHP conditional.

Upvotes: 0

Paul Stanley
Paul Stanley

Reputation: 4098

I think hide is the best. Leave css to your css files?

echo"<script>$('.delete').hide();</script>";

edit: and your javascript too!

Upvotes: 0

MeLight
MeLight

Reputation: 5575

Probably becuase your script runs before the div is loaded. Try this:

<?php
$a=1;
if($a==1){   

  //  echo"<script>$(document).ready(function() { $('.delete').css(\"display\", \"none\")});</script>";
   echo"<script>$(function(){$('.delete').css(\"display\", \"none\");});</script>";

}

echo"<div class='delete'>Delete me</div>";
?>

Upvotes: 0

nachito
nachito

Reputation: 7035

Instead of putting in JavaScript, why don't you do something like this:

<?php

$a = 1;
if ($a == 1) {
    echo '<div class="delete" style="display:none;">Delete me</div>';

} else {
    echo '<div class="delete">Delete me</div>';
}

Upvotes: 2

Vikas Naranje
Vikas Naranje

Reputation: 2412

Try this

   <?php
    $a=1;
    if($a==1){
        echo"<div class='delete' style="display:none;">Delete me</div>";
    }
    else{
        echo"<div class='delete'>Delete me</div>";

    }
    ?>

Upvotes: 1

Related Questions