How to display Ajaxified List & Detail side by side

[sunnyjey]

Is there any way using the custom List Template to display the list on left and Ajaxified Details view on the right side ?

On clicking on the List URL, the detail Page should open in same page in Ajaxified fashion without reload of entire page, like Wiki.

 

[troester]

What about ajaxfied list links. Details will open in a popup, you can define dimension and offset.

 

[sunnyjey]

Thank you for reply.

Yes. I'm aware of it. But, I am looking for non-pop same-page display option (popup are usually blocked by many browsers due to security reason). I guess, we should be able to do it using POST method in list_X.js.

 

[troester]

A Fabrik ajaxfied link popup is a div injected via JS, so I think pretty the same what you want to do with list_X.js.

I never have seen a browser blocking them (and my browsers are set to block external popups and redirects).

 

[sunnyjey]

Fabrik ajaxfied link popup is a div injected via JS

Can you please give me example of how Fabrik injects div via JS

Thank you in advance

 

[lousyfool]

It’s basically a modal, and modals are not affected by browser popup blockers.

 

[sunnyjey]

I am more keen in having non-pop-up / non-model, same page display.

 

[lousyfool]

Yes, and as @troester said

... I think pretty the same what you want to do with list_X.js ...

So, simply put, instead of having a Fabrik ajaxified link injecting the content into a modal, you could have it doing so elsewhere with your own code.

 

[juuser]

I would do it with jQuery/Ajax/PHP.

1) Create custom list template with two divs side by side. On the left there would be the list rendering code and on the right add details view with Fabrik content plugin.
2) In list_xx.js add click event to catch a click on the list's row.
3) Get the id of the clicked row.
4) Within the same click event add user ajax which sends rowid to function in user_ajax.php
5) In user_ajax. php get the values of all your needed elements with a query and send these back to user ajax function.
6) And then in the ajax done or success function update all the values in details view with jQuery.

Might seem complicated, but if you know what you're doing, it will probably not take ages to get it done.

And of course there might be other ways to achieve similar results.

 

[sunnyjey]

Thank you. This is what I needed.

In case, if anyone is interested to do this as a paid job, please PM me with the quote.

 

[lousyfool]

In case, if anyone is interested to do this as a paid job, please PM me with the quote.

Have you asked @juuser? Obviously, he knows what he's talking about, and as per his signature he is...

Providing services related to Joomla and Fabrik development. PM for details!

 

[sunnyjey]

1) Create custom list template with two divs side by side. On the left there would be the list rendering code and on the right add details view with Fabrik content plugin.
2) In list_xx.js add click event to catch a click on the list's row.
3) Get the id of the clicked row.
4) Within the same click event add user ajax which sends rowid to function in user_ajax.php
5) In user_ajax. php get the values of all your needed elements with a query and send these back to user ajax function.
6) And then in the ajax done or success function update all the values in details view with jQuery.

As per your guidance, I am able to get id of clicked row and send rowid to user_ajax.php.

But, I am not able to understand the 5) & 6) steps. How do I update rowid (X) in detail content plugin placed in custom List template ?

{fabrik view=details id=18 rowid=X}

Can you please give me an example of Ajax done function update (6th step).

Thank you in advance.

 

[juuser]

Step 5) You can get and send back the values of other needed elements in user_ajax.php like:

$mydb = JFactory::getDBO();
$app = JFactory::getApplication();
$input = $app->input;
$row_id = $input->get('row_id', '');

$mydb->setQuery("SELECT element1, element2, ... FROM tablename WHERE id = ".$mydb->Quote($row_id));
$myrow = $mydb->loadRow();
 
$element1 = $myrow['0'];
$element2 = $myrow['1'];
...

//add to array
$myarray[] = array (
      "element1" => $element1,
      "element2" => $element2,
      ...
);
//json encode and send back
echo json_encode($myarray);

And then in your ajax function get and update the detail view values like:

jQuery.ajax({
     url: 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=YourUserAjaxFunctionName&row_id='+myrowid,
     type: "GET",
     success: function(myresponse) {
             var obj = jQuery.parseJSON(myresponse);
             element1 = obj[0].element1;
             element2 = obj[0].element2;
 
             jQuery("#tablename___element1_ro").text(element1);
             jQuery("#tablename___element2_ro").text(element2);
    }
});

 

[sunnyjey]

Somehow I managed to pass 5th and 6th steps, maybe at same time when you posted your solution. Once again, big Thank you to you.

I am posting my codes. It might help others:

User_ Ajax.php:

$app = JFactory::getApplication();
$input = $app->input;
$row_id = $input->get('row_id', '')

          $db = JFactory::getDbo();
           $query = $db
               ->getQuery(true)
               ->select(array('element1','element2'))
               ->from($db->quoteName('tablename'))
               ->where($db->quoteName('id') . " = " . $db->quote($row_id));
           $db->setQuery($query);
           $result = $db->loadObject();
           echo json_encode($result);

list_X.js:

jQuery.ajax({
     url: 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=YourUserAjaxFunctionName&row_id='+row_id,
     type: "GET",
     success: function(myresponse) {
         var obj = jQuery.parseJSON(myresponse);
         jQuery('#tablename___element1_ro').html(obj.element1);
         jQuery('#tablename___element2_ro').html(obj.element2);
    }
});

 

[tusa]

@sunnyjey how did you add click event?

I'm struggyling with the same issue.

 

[sunnyjey]

@tusa
I need more details about your set up. Please share your codes and steps you have done so far.