Ajax Request In Osclass

How to perform an ajax request in Osclass?

You can make an ajax call to post some information in the database without page refresh or to get some information from the database. 

Osclass has built-in hook for ajax call that allows you to create an ajax file in your plugin that will contain the code for extracting the information from the database and insert the information.

The first example is with location request that is already in osclass. You can make this request to get the list of cities based on region id and you will get a response in JSON format. 

<button class="click-here">Click For City</button>
<div class="result-list"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.click-here').click(function () {
            var result = '';
            var regionId = '782153';//change with region id
            var url = '<?php echo osc_admin_base_url(true)."?page=ajax&action=cities&regionId="; ?>' + regionId;
            $.ajax({
                type: "POST",
                url: url,
                dataType: 'json',
                success: function (data) {
                    var length = data.length;
                    if (length > 0) {
                        for (key in data) {
                            result += data[key].s_name + '<br />';
                        }
                    } else {
                        result += 'No results';
                    }
                    $('.result-list').html(result);
                }
            });
        });
    });
</script>

The above example will display a list with all the cities from a specific region from osclass, base on region id, make sure that you add a valid region id in the above code.

To perform an ajax request in an osclass plugin we will make the same steps, but the request link will be different.

Create an ajax.php file in your plugin folder and add this code in the file.

$request = Params::getParam('request');

switch ($request) {
    case('my_request'):
        $id = Params::getParam('id');
        $json = array(
            'id' => $id,
            'message' => __('Your request id') 
        );
        echo json_encode($json);
        break;
    default:
        echo json_encode(array('error' => __('no action defined')));
        break;
}
        

Now the jquery code to access that file and retrieve the information. Take note that our plugin name is test, the plugin needs to be active on the site and the file ajax.php need to be in the root folder of that plugin.

Ad this code in your page, most likely this will be in a theme or in a special file created in the plugin. For this test, we will add the code in main.php from bender theme.

<button class="click-plugin">Get from plugin</button>
<div class="data"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.click-plugin').click(function () {
            var result = '';
            var id = '2';
            var url = '<?php echo osc_ajax_plugin_url('test/ajax.php') . '&request=my_request&id='; ?>' + id;
            $.ajax({
                type: "POST",
                url: url,
                dataType: 'json',
                success: function (data) {
                    var length = data.message.length;
                    if (length > 0) {
                        result += data.message + ':' + data.id;
                    } else {
                        result += 'No results';
                    }
                    $('.data').html(result);
                }
            });
        });
    });
</script>
Subscribe
X

Subscribe!

Subscribe to get the latest listings, updates and special offers delivered directly in your inbox.