CODEWITHSUNDEEP
phpjavascriptjqueryajax
Mobaz
Mobaz

Reputation: 595

removing a div without a page refresh

I'm loading data from a database via php with the following code:

<div>

<?php 
    echo "The subjects that you can tutor are:<br>";
    for ($i=0;$i<count($tutor_subj);$i++){
        $query_tutors = "SELECT level, subject 
                           FROM level, subject 
                         WHERE level.id = '$tutor_lvl[$i]' 
                         AND subject.id = '$tutor_subj[$i]'";

        $result_t = mysqli_query($db_conx, $query_tutors);
        while($m = mysqli_fetch_array($result_t)){
           echo "<div class='torem'>".$m['level'] ." ". $m['subject']." ".$tutor_top[$i].
                   "<div style='float:right; padding-right:5px;'>
                      <a href='#'>
                          <img src='images/remove_btn.png' onclick='removeSubj(".$log_id.",".$tutor_lvl[$i].",".$tutor_subj[$i].",\"".$tutor_top[$i]."\")'>
                      </a>
                    </div>
                  </div></br>";
        }
    }

with the removeSubj function I want to remove this entry from the page but without a page refresh. At the moment the ajax call removes the entry from the database, but I need to do a page reload to see the change on the page - is there any way I can just have the entry fade away without a page refresh?

Here is the removeSubj function - can anyone suggest how I can achieve this?

function removeSubj(id, level, subject, topic){

   var con = confirm("Are you sure you would like to remove this subject?");
    if(con == true){
        $.ajax({
           type: 'POST',
           url: 'php_parsers/removeSubjects.php',
           data: {
              "id": id, 
              "level": level, 
              "subject": subject,
              "topic": topic
             },
           success:function(data, response, xhr){

             if (response == "success"){
                 /*    window.location.reload(); */
             }
           },
           error:function(){
              // failed request; give feedback to user
              $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
           }
       });
    }else {
       donothing();
    }
}

Upvotes: 0

Views: 1956

Answers (2)

immulatin
immulatin

Reputation: 2118

You need to have a unique identifier on the div you want to hide. Adding the id to the div should work:

while ($m = mysqli_fetch_array($result_t)) {
    echo "<div class='torem' id='{$m['my_unique_id']}'>" . $m['level'] . " " . $m['subject'] . " " . $tutor_top[$i] .
        "<div style='float:right; padding-right:5px;'>
            <a href='#'>
                <img src='images/remove_btn.png' onclick='removeSubj(" . $log_id . "," . $tutor_lvl[$i] . "," . $tutor_subj[$i] . ",\"" . $tutor_top[$i] . "\")'>
    </a>
</div>
</div></br>";

Then you can hide or remove the div on success:

success: function (data, response, xhr) {
    if (response == "success") {
        $('#my_unique_id').hide();
        $('#my_unique_id').remove();
    }
}

Upvotes: 0

Marc B
Marc B

Reputation: 360702

Basically you just need:

success: function (data) {
   $('#ajax-panel').html(data);
}

take the returned data and insert it into your div as html. if your server-side script isn't returning the data to be displayed, then just have jquery do it for you:

success: function() {
  $('#ajax-panel').text('Success!');
}

Upvotes: 3

Related Questions