Custom search and pagination using database item list in Concrete5 0

I faced this issue when I'm developing custom search page. I used my single page for search page. I'm searching values from my database. In concrete5 they used Request method in form to get form values to controller. But I used Post method in my form.

I followed article of Remo to create a database item list model file. Really very nice tutorial for beginners. But I could not find the search option in that article.

I tried by my self and all works fine. But I got issue in pagination. When I move to the next page, the previous, the page was reloading. So, the search values are gone in my form. So, with empty search variables, I showed error (Invalid argument supplied for foreach).

When I looked into StickySearchRequest, they used server REQUEST method for that function. But, I used server POST So, it will not going to work for me.

So, I found solution by my self.

In my controller's view function I placed my filter query and set the value from controller to view. This will only will execute if the session variable is set

 
public function view() {
    Loader::model('ListforDetails');
    $List = new ListforDetails();
    if (isset($_SESSION['var1'])) {
        $data['var1'] = $_SESSION['var1'];
        $data['var2'] = $_SESSION['var2'];
        $data['var3'] = $_SESSION['var3'];
 
        $List - > filter('field1', $data['var1'], '=');
        $List - > filter('field2', $data['var2'], '=');
        $List - > filter('field3', $data['var3'], '=');
    }
    $List - > setItemsPerPage(10);
    $this - > set('forSummary', $List);
    $currentPage = Page::getCurrentPage();
    $this - > set('LeaveList', $LeaveList - > getPage());
    $this - > set('LeavePagination', $LeaveList - > displayPagingV2(Loader::helper('navigation') - > getLinkToCollection($currentPage), true));
}

In my search function I get the search values from single page form and I manually add those values in session. Then simply call view function.

 
public function search()
{
      $data['var1']=$this->post('val1');
      $data['var2']=$this->post('val2');
      $data['var3']=$this->post('val3');
      foreach ($data as $key=>$sessData)
      {
      $_SESSION[$key]=$sessData;
      }
      echo $this->view();
}

I placed "back" button in my form. If the user click on the back button, I unset the session array values like,

 
public function back()
   {
      unset($_SESSION['var1']);
      unset($_SESSION['var2']);
      unset($_SESSION['var3']);
      echo $this->redirect('prev_url');
   }

Finally I it's working fine...

Here is my Concrete5 Forum Post

Read More

How to change the order of div (DOM element) using jquery 6

Thank you for asking me this question, Vicky. I'm going to explain the way I solved your issue here...

Question :

i want from this fiddle is if the user clicks button 3 then button 1 then button 5 ..... the divs should display in this order DIV 3 > DIV 1 > DIV 5 , But its displaying as DIV 1>DIV 3>DIV5

Answer :

To achieve this task we need detach() method of jQuery. I have already posted about this detach() method in one of previous my another article. You can find it here.

When i tried to solve this issue i searched in web, most of them tried to solve it using javascript array and created those div's dynamically from javascript during click event of buttons.

But, we can solve it in a much simple way using jQuery's detach() method.

The fiddle which is given in the question section is totally hard coded.

   $("#but1").click(function () {  
     $("#f1").show();  
   });  
   $("#but2").click(function () {  
     $("#f2").show();  
   });  
   $("#but3").click(function () {  
     $("#f3").show();  
   });  
   $("#but4").click(function () {  
     $("#f4").show();  
   });  
   $("#but5").click(function () {  
     $("#f5").show();  
   });  

Previously those div's are hidden using css display : none property.

So, I assigned btn css class for those buttons in html part and then I changed that code like the one given below.

   $('.btn').click(function () {  
     var clicked = $(this).attr('id');  
     var clicked_id = clicked.substr(clicked.length - 1);  
     $('#f' + clicked_id).detach().appendTo('#filterpanel').show();  
   });  

You can now see, how I used jQuery's detach() method to detach the element from the DOM tree and append it to #filterpanel div. By this method, the detached DOM element will insert it as a last child of #filterpanel div.

Here you can fine the resultant fiddle DEMO.

Read More

How to use detach() method (.detach() vs .remove()) 1

We can easily achieve this task using jquery detach() method.

.detach()

.detach() method more over equal to .remove() method in jquery. The only difference is,

• .detach() method returns DOM element node & remove DOM element from DOM tree.
• .remove() method completely remove DOM element from DOM tree.

Using that returned DOM elements node, we can reinsert DOM element in a DOM tree.

definition from jquery api

"The .detach() method is the same as .remove(),except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time."

 If we want to insert removed element, we should use .detach() method. otherwise we can simply use .remove() method.

$('selector').detach();

The above line will just remove the DOM element from our DOM tree. We should get the return value in variable for future insertion.

var detached =  $('selector').detach();

Variable detached contains the DOM node of removed DOM element.

If we want reinsert removed element, We can use like this,

$('selector').append(detached);

We can use .insertBefore(), .insertAfter(), .prepend() to replace append() method.



Here you can find the DEMO

Related Post How to change order of div (DOM element) (Recommended)

Read More

How to show scroll bar in left side using css 2

By default scroll bar appears in right side of the div. We can set it in left side also. We can do it from overflow property of css style itself.

to make scroll bar, we should use css property

overflow : scroll;

by default scroll bar uses direction propery as ltr. ltr is stands for left to right.  

overflow : scroll;
direction : ltr;

If you want to set scroll bar in left side, we need to set it to rtl. rtl is stands for right to left.

overflow : scroll;
direction : rtl;

Here you can find the DEMO. 

Read More