CODEWITHSUNDEEP
phpjquerymysqlhtml
Morten Hagh
Morten Hagh

Reputation: 2113

post in jquery do not update element

EDIT WITH NEW JAVASCRIPT

I am trying to make a "I like this" kinda function but I have a small problem.

I am using this small javascript

function coolIt(designid) {
   $.post('cool.php', {designid:designid}, function(data) {
      //alert(data);
      $('#cool_'+designid).text(data);
   });
}

And this HTML where the "Like" button is

<span class="like"><a href="javascript:void(0)" onclick="coolIt(\''. $row["id"] .'\');"></a><span id="cool_'.$row["id"].'">('. $row["cools"] .')</span></span>

The cool.php runs through this:

 function UpdateCool($design_id) {
    $fields_up = array("cools" => 'cools + 1');
    $fields_down = array("cools" => 'cools - 1');

    $sql = SQLHandling::updateSQL('tdic_designs', 'id = '. $design_id .'', $fields_up);            

    SQLHandling::SQLquery($sql);
}

and that works perfectly. It updates the cools field with one increasing value.

When I run alert(data) on the javascript it returns nothing and the #cool_1 span element disappears.

Any idea what I might do wrong?

HTML OUTPUT:

<script type="text/javascript">
function coolIt(designid) {
    $.post('cool.php', {designid:designid}, function(data) {
       alert(data);
       $('#cool_'+designid).text(data);
    });
}
</script>

</head>
<body>

<div id="allContainer">
    <div id="topArea">
        <div id="topNaviArea">
            <ul id="navi">
                <li class="home"><a href="/testen/">Home</a></li>
                <li class="categories"><a href="categories.php" title="Browse categories">Categories</a></li>
                <li class="about"><a href="about.php">About</a></li>
                <li class="faq"><a href="faq.php">FAQ</a></li>
                <li class="submit"><a href="submit.php" title="Submit a website">Submit</a></li>
                <li class="contact"><a href="contact.php" title="Submit a website">Contact</a></li>
            </ul>
        </div>
    </div>
    <div id="contentBox">
    <div id="login"><a href="#">Login</a> // <a href="#">Register</a></div>             <div id="mainContent">
                    <h1>// <a href="/testen/">Home</a> // <a href="categories.php">Categories</a> // HTML / CSS</h1>            

                 <div id="catMenu">

                    <ul>
                        <li><a href="categories.php?cat_id=5" title="View all designs in 3D">3D</a></li><li><a href="categories.php?cat_id=3" title="View all designs in Graphic">Graphic</a></li><li><a href="categories.php?cat_id=1" title="View all designs in HTML / CSS">HTML / CSS</a></li><li><a href="categories.php?cat_id=4" title="View all designs in Paintings">Paintings</a></li><li><a href="categories.php?cat_id=2" title="View all designs in Photography">Photography</a></li><li><a href="categories.php?cat_id=6" title="View all designs in Portals">Portals</a></li><li><a href="categories.php?cat_id=7" title="View all designs in Webshops">Webshops</a></li>
                    </ul>
                    <h2>1 designs<br />in this category</h2>
                </div>

                <div id="rightContentBox">                          
                    <ul id="displays">
                        <li class="displayWindow"><div class="dpwImage"><figure><a href="#"><img src="/testen/designs/thatdesigniscool.jpg" width="280" height="175" alt="That Design Is Cool" target="_blank"></a></figure></div><div class="dpwBox"><div class="dpwLeft"><span class="title"><a href="designinfo.php?designid=1">That Design Is Cool</a></span><span class="comments"><a href="designinfo.php?designid=1">Comments (1)</a></span></div><div class="dpwRight"><span class="like"><a href="javascript:void(0)" onclick="coolIt('1');"></a><span id="cool_1">(29)</span></span></div></div> </li>
                    </ul>
                </div>

        </div>
</div>
</div>

Upvotes: 0

Views: 138

Answers (2)

Morten Hagh
Morten Hagh

Reputation: 2113

I got it solved by editing cool.php to the following:

<?php
session_start();

ini_set("display_errors", 1);

define("INCLUDE_DIR", "includes/classes");

/* Autoload classes when used */
function __autoload($class_name) { include(INCLUDE_DIR.'/class.'. strtolower($class_name) . '.php'); } 

SQLHandling::SQLconnect();

if($_POST["designid"] != '') {
    $alreadyExist = mysql_num_rows(mysql_query('SELECT id FROM tdic_voted WHERE designid="'.(int)$_POST['designid'].'" AND ip="'.$_SERVER['REMOTE_ADDR'].'"'));

    if($alreadyExist == 0) {

     mysql_query(' UPDATE tdic_designs SET cools = cools+1 WHERE id="'.(int)$_POST['designid'].'"');
     $num = mysql_fetch_row(mysql_query(' SELECT cools FROM tdic_designs WHERE id="'.(int)$_POST['designid'].'" LIMIT 1'));
     echo $num[0];
     mysql_query(' INSERT INTO tdic_voted (designid, ip) VALUES ("'.(int)$_POST['designid'].'","'.$_SERVER['REMOTE_ADDR'].'")');

     } else{
        echo 'You already think this is a cool design!';
    }   
}
?>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167210

I guess you are replacing the whole contents of div with just the server response. Why don't you append?

$('.likeIt').livequery("click",function(e){
    var designid =  $(this).attr('id').replace('design_id-','');
    $.post('cool.php?design_id='+designid, {}, function(response){
        $('#cool_'+designid).html($('#cool_'+designid).html() + response); // See if this works!
    });
});

See if this helps! :)

Upvotes: 1

Related Questions