Joomla Ajax jQuery

Question

Hello!

I have a problem with my "custom" pagination for component in joomla.

I wanted to do list of user's articles which will shows for an example 3 posts per page. My goal was to make pagination without refreshing webpage. Ajax was the best choice. I'm fighting with it right now and have the most difficult problem so far (I tried to search answer of my problem several hours).

user.php

    <div class="userRightContainer">
            <div class="blogArticlesBlock">
            <div class="userItemTagsBlock"><b>Debaty na forum użytkownika(<?php echo $joomla_rows; ?>)</b></div>

            <?//artykuly joomla
            ?>

        <div id="Joomla_block" class="Joomla_block">
            <? require_once("Db_joomla.php") ?>
        </div>

...
...
...

<script type="text/javascript">

function jm_previous(arg) {
    if(arg < 0)
        changePagination(0);
    else
    changePagination(arg);
}
function jm_next(argument) {
    changePagination(argument);
}

function changePagination(pageId){

                  // $("#Joomla_block").html('');
     jQuery.ajax({
           type: "GET",
           // url: "Db_joomla.php",
           url: window.location.href,
           data: { jm_start: pageId},
           success: function(result){
                  alert(result);
                   $("#Joomla_block").html(result);

           }
      });
}
</script>

Db_joomla.php

defined('_JEXEC') or die;
//
$offset_jm=$_GET["jm_start"];
if(empty($offset_jm)) $offset_jm=0;
//
$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select($db->quoteName(array('id', 'title', 'introtext', 'created_by', 'state')));
$query->from($db->quoteName('#__content'));
$query->where($db->quoteName('created_by') . ' LIKE ' . $db->quote(JRequest::getInt('id')));
$query->where('state', '1');
$query->setLimit($joomla_page,$offset_jm);
$db->setQuery($query);
$joomla=$db->loadObjectList();
$joomla_rows = $db->loadResult();


if($joomla_rows > 0){
 foreach($joomla as $row) { 
 if ($row->created_by != JRequest::getInt('id')) continue;
?>
            <div class="articlesBlock" style="margin: 5px;">
                <!-- Avatar -->
        <img src="<?php echo $this->user->avatar; ?>" alt="<?php echo htmlspecialchars($this->user->name, ENT_QUOTES, 'UTF-8'); ?>" style="width:50px; height:auto;border: 1px solid #ccc; float:left;margin: 5px;" />
                    <div class="blogArticlestTitle" style="padding-left:60px;font-weight:bold;word-wrap:break-word;"><a href="index.php?option=com_content&view=article&id=<?php echo $row->id;?>"><?php echo $row->title ?></a></div>
                    <div class="blogArticlesDescription" style="padding: 5px;padding-top:10px;"><?php if (str_word_count($row->introtext) > 100) echo /* Wstawia komentarz i ogranicza tekst do stu znaków, po czym dodaje kropki.*/ substr(strip_tags($row->introtext), 0, 100) . "..."; else echo strip_tags($row->introtext);?>
                    </div>
                    <div class="CommentViewMore">
                    <a href="index.php?option=com_content&view=article&id=<?php echo $row->id;?>">Przejdź do artykułu ›</a>
                    </div>
                </div>
<?php
/*
    $item_counting++;
    if($item_counting == 5) break;*/
                        }


//echo $pageNav->getListFooter(  ); //Displays a nice footer
        ?>
<ul class="pager">
    <li><a href="javascript:void(0)" id="jm_previous" onclick="jm_previous(<? echo $offset_jm-$joomla_page; ?>)" style="background-color: #000;float:left;"><<</a></li>
    <li><a href="javascript:void(0)" id="jm_next" onclick="jm_next(<? echo $offset_jm+$joomla_page; ?>)" style="background-color: #000;float:right;">>></a></li>
</ul>
    <a class ="view_more_link"href="http://konfederaci.pl/index.php/component/komento/profile/id/<?php echo JRequest::getInt('id');?>" title="Artykuły użytkownika">Zobacz wszystkie artykuły</a> 
    <?php
    } 
        else
{

    echo "Ten użytkownik nie posiada żadnych postów na forum.";
}

Now some pictures:

From alert(result)

From google chrome's console

Ps: If I choose "url : "Db_joomla.php" in this script it won't make anything. still doesn't work (and the same exception).

Answer 1

It's always a better idea to rely on Joomla's Ajax interface rather than implementing yours. It is super simple and very efficient and it works. We have written on how to use it here .

Essentially you will create/modify a simple module that will contain a function (that has the word Ajax at the end of its name) that will be used to process the call.

Then, you will need to add a simple jquery code that will call the module through the com_ajax interface. Note that you will need to make sure to have the module assigned to a menu item because you will need the ID of that menu item for the ajax call.

Answer 2

Simply practics: Your ajax backend part should be contains only PHP code. (Get DB query). Next this PHP should return JSON array with results. You get this JSON for ajax request and push this data for your view. For simply I use my plugin "plg_ajax" (after install see method onAjaxAjax()). Example script post for this plugin with com_ajax:

 type: "POST", async: true, url: "index.php?option=com_ajax&plugin=ajax&format=json", dataType: "json",