Custom Module delete from database with AJAX

Question

I have been trying to get my head around Joomla's com_ajax component for some time with a view to using it in my custom module. The module displays data from a component. One of the form fields is of type sql and allows multiple items. My custom module uses a foreach loop to display these items. The items are stored in the table cell savedproperties_sales as comma separated values.

My aim is to have a delete button on each item which when pressed would delete that item from the database cell.

Here is my php function in my module helper.php

class ModTusimpleprofileHelper
{
    public function deletePropertysales($propertyid)
    {
        $db = JFactory::getDbo();
        $query = $db->getQuery(true);
        $conditions = array(
            $db->quoteName('savedproperties_sales') . ' = ' . $propertyid
        );
        $query->delete($db->quoteName('#__bdjupix_properties_sales'));
        $query->where($conditions);
        $db->setQuery($query);
        $result = $db->execute();
    }
}

Here is the JS in my module tmpl > default.php

( function($) {
$(document.body).on('click','.deleteproperty',function(){
    $.ajax({
        type: 'GET',
        url: "index.php?option=com_ajax&module=mod_tusimple_profile&Itemid=148&method=deletePropertysales&propertyid="+$(this).data('propertyid'),
        success:function(data){
            alert('Property Deleted');
        },
        error:function(){
            alert('Property Not Deleted');
        }
    });  
});
} )( jQuery );

And finally, this is my php to display the item and delete button, also in tmpl > default.php

<?php $savedproperties_sales = explode( ',', $profile->savedproperties_sales ); ?>
<?php foreach ( $savedproperties_sales as $savedproperty_sales ) : ?>
<?php
$db = JFactory::getDbo();
$query = $db->getQuery( true );
$query->select( array( 'a.id', 'a.propertyid', 'a.displayaddress' ) )->from( $db->quoteName( '#__bdjupix_properties_sales', 'sales' ) )->where( $db->quoteName( 'sales.propertyid' ) . ' = '. $db->quote( $savedproperty_sales ) );
$db->setQuery( $query );
$results = $db->loadObject();
?>
<p><?php echo $results->address; ?></p>
<form>
<button type="submit" class="deleteproperty">Delete This Property</button>
</form>
<?php endforeach; ?>

The items display perfectly fine but as you can probably tell the ajax is all wrong. I have been playing with this for a long time now and getting nowhere so if anyone can help then I would be very grateful.

Answer 1

Security

Before anything else - I want to draw your attention on this:

You are sending to the database unfiltered input from the users with the $propertyId. No matter what other security may exist, you should be following best practices when writing code and never trust user input.

Read here about writing secure code with Joomla and work on improving your code:

• Secure Coding Guidelines
• Secure Coding Guideline: Constructing SQL Queries

---

For the AJAX:

The method you want to call through AJAX needs to be conventionally named, e.g. change:

public function deletePropertysales($propertyid)

to

public function deletePropertysalesAjax($propertyid)

I also personally prefer to construct the call by passing the request data object. It's cleaner that way.

Example:

var propertyid = $(this).data('propertyid');
var request = {
    'option'    : 'com_ajax',
    'module'    : 'tusimple_profile',
    'propertyid': propertyid,
    'method'    : 'deletePropertysales',
};

$.ajax({
    type    : 'POST',
    data    : request,
    success : function(response) {
        console.log(response.data);
    }
});

---

Joomla Ajax in Module references:

• https://docs.joomla.org/Using_Joomla_Ajax_Interface
• Using AJAX in a custom module - how to do it?
• Sending POST data within module - AJAX
• https://github.com/Joomla-Ajax-Interface/Ajax-Session-Module