0

i have a php code that show an alert box to click OK or CANCEL, if i click on OK it will href to a link that execute a php function to delete that image

<?php 
//echo $pictures['binId'];

if(count($other_images))
{
  foreach($other_images as $nimg)
  {
    $get_images=$this->Common_model->newgetRows('StorageFile',array('binId'=>$nimg['id'],'name'=>'large'));
    $nimage_urls=Image_path .$get_images[0]['binId']."/".$get_images[0]['hash'].".".$get_images[0]['extension'];
    if(count($get_images)){
?>
      <div class="col-xs-4">
        <a class="postimgsd"
            onclick="return confirm('Are you sure, want to delete this image?');" 
            href="<?php echo base_url('Home/deletePostimage/'.$get_images[0]['binId'].'/'.$value['id'].'') ?>">
          <span class="close">X</span>
          <img src="<?php echo $nimage_urls; ?>" >
        </a>
      </div>
<?php
    } 
  }
}
?>

image1 image2

deletePostimage is a function in php file that delete the selected image

How can i delete the image without reloading the page ?

3
  • You have to use AJAX. Which will call PHP without reloading page. Commented Dec 4, 2019 at 23:53
  • @Marty1452 ok, but how ? Commented Dec 5, 2019 at 0:14
  • Research jquery $.ajax or $.post. The jquery library makes it easier to make ajax calls. There are tutorials that can help you get started Commented Dec 5, 2019 at 0:30

1 Answer 1

1

You need to use AJAX as previous comments have said. I have written the code you need with comments. You will also need a seperate php script to remove the images which i have also included (delete_image.php).

Instead of using an onclick event inline, I have made the event listener using jquery. It will apply to all links that have the class 'postimgsd'.

Here is the code:

<?php 
//echo $pictures['binId'];

if(count($other_images))
{
  foreach($other_images as $nimg)
  {
    $get_images=$this->Common_model->newgetRows('StorageFile',array('binId'=>$nimg['id'],'name'=>'large'));
    $nimage_urls=Image_path .$get_images[0]['binId']."/".$get_images[0]['hash'].".".$get_images[0]['extension'];
    if(count($get_images)){
?>
      <div class="col-xs-4">
        <a class="postimgsd"

            href="<?php echo base_url('Home/deletePostimage/'.$get_images[0]['binId'].'/'.$value['id'].'') ?>">
          <span class="close">X</span>
          <img src="<?php echo $nimage_urls; ?>" >
        </a>
      </div>
<?php
    } 
  }
}
?>
     <div id="response_container">
        <!-- AJAX Response will appear here-->
    </div>
<!-- include jQuery, you can remove this line if you have already included it-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        function delete_image(image_name) {
                var url = 'http://localhost/delete_image.php'; //URL to delete_image PHP Script
                var response_container_id = 'response_container';// ID of div Where the response message will be shown

                $.ajax({
                    url: url,
                    type: 'POST', //POST or GET
                    async: true,
                    data_type: 'html',
                    data: {
                        'image_name': image_name //Data for the request
                    },
                    success: function (response) {
                        $('#' + response_container_id).html(response); //put the resonse in the resposne container, you can delete this line if you don't want to show a reponse or you can add additonal logic
                    },
                    error: function (jqXHR, exception) {

                        var msg = '';
                        if (jqXHR.status === 0) {
                            msg = 'Not connected. Verify Network.';
                        } else if (jqXHR.status == 404) {
                            msg = 'Requested page not found. [404]';
                        } else if (jqXHR.status == 500) {
                            msg = 'Internal Server Error [500].';
                        } else if (exception === 'parsererror') {
                            msg = 'Requested JSON parse failed.';
                        } else if (exception === 'timeout') {
                            msg = 'Time out error.';
                        } else if (exception === 'abort') {
                            msg = 'Ajax request aborted.';
                        } else {
                            msg = 'Uncaught Error.' + jqXHR.responseText;
                        }
                        $('#' + response_container_id).html(msg);
                        console.log(msg);

                    }
                });
            }

            //when the document finishes loading
            $(document).ready(function () {
                var link_class = 'postimgsd';

                // onclick event for every link that has class of the link_class (postimgsd)
                $('a.' + link_class).on('click', function (e) {
                    //get the image name from the image tag thats inside the link
                    var image_name = $(this).children('img').attr('src');                   
                    if (confirm('Are you sure, want to delete this image?')) {
                        delete_image(image_name);
                    }
                });
            });
            //Reading:
            /*
            jQuery

            .children()
                https://api.jquery.com/children/

            .ready()
                https://api.jquery.com/ready/

            .ajax()
                https://api.jquery.com/jquery.ajax/
            */
    </script>

In the delete_image.php file you need something like this:

<?php
if(isset($_POST['image_name'])){
    //delete image code
    deletePostimage();
    echo "image removed";
}else{
    echo "no image file name";
}

function deletePostimage(){
    //your delete function code
}
 ?>

Let me know if you have any questions.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.