Dropdownlist To Change Div Content

Yii 2.0 General Discussions
1

I have a dropdownlist when it changes the value, it must change a content from a div. A kind of filter.

What happens is the content of the div changes but it redirects to another link. Since I don’t have knowledge on AJAX I used a tutorial from w3schools (http://www.w3schools.com/php/php_ajax_database.asp)

Here is my view:




...

<script>

function showUser(str) {

  if (str==="") {


document.getElementById("transactions").innerHTML="";

return;

} 

  if (window.XMLHttpRequest) {


// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else { // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

 xmlhttp.onreadystatechange=function() {

  if (xmlhttp.readyState==4 && xmlhttp.status==200) {


  document.getElementById("transactions").innerHTML=xmlhttp.responseText;

  }

 };    

    xmlhttp.open("GET",document.location.href="filter?by="+str,true);

    xmlhttp.send();

}

</script>

<?php $this->head() ?>

</head>


...

<?=Html::dropDownList(

    'test', //name

    'b', //select

    ['' => 'Select Filter...', '1' => 'Exchanging Now', '2' => 'Last Exchanged', '3' => 'Last Offered', '4' => 'Last Discounted', '5' => 'Last Recieved', '6' => 'View All'],

    ['onchange'=> 'showUser(this.value)'])

   ?>

It is always reedirecting to localhost/.../filter?by=x showing the right info.

How can I stop this redirect? In my controller I’m returning a string. Is that a problem?

2

Yii supports Ajax via JQuery.

Its easier than bare JS/XMLHttp

Learn basics of Yii & MVC and see http://www.yiiframework.com/doc-2.0/yii-web-controller.html#renderAjax()-detail

3

Thanks for the reply Stefano. What changes do I have to do the view and controller? Can you help me please? At this moment I have at this way.

The view:




<?=

Html::dropDownList(

        'test', //name

        'b', //select

        ['0' => 'Select Filter...', '1' => 'Exchanging Now', '2' => 'Last Exchanged', '3' => 'Last Offered', '4' => 'Last Discounted', '5' => 'Last Recieved', '6' => 'View All'], //items

        ['onchange' => 'document.location.href="/site/web/dashboard/filter?by="+this.value',])

        //['onchange'=> 'showUser(this.value)'])

       




?>

    <br>

    <div class='panel panel-primary'>

          <div class='panel-heading'>

            <h3 class='panel-title'>Transaction History</h3>

          </div>

          <div class='panel-body' id="transactions">

              <?php echo $filter?>

</div>

    </div>

and my controller:




public function actionFilter($by) {

         $portfolio = self::searchDots();

        $string = "";

        if ($by == 1) {

            $string = self::searchPendingEvent();

            return $this->renderAjax('index',['filter'=>$string,'portfolio' => $portfolio]);

             

        }

}

It stills redirect to another page instead of stay in the same.

-----EDIT-----

After some research I’m using Pjax. So this is my view


<div id="categories">

     <?=

     Html::a(

             'TESTEEE', Url::to(['filter', 'by' => 1]), ['data-pjax' => 'transactions']

     )

     ?>


     <?= Html::beginForm(['filter']) ?>

     <?=

     Html::dropDownList(

             'test', //name

             'b', //select

             ['0' => 'Select Filter...', '1' => 'Exchanging Now', '2' => 'Last Exchanged', '3' => 'Last Offered', '4' => 'Last Discounted', '5' => 'Last Recieved', '6' => 'View All'], //items

             //['onchange' => 'document.location.href="/site/web/dashboard/filter?by="+this.value',])

             //['onchange'=> 'showUser(this.value)'])

             ['onchange' => 'this.form.submit()'], ['data-pjax' => 'transactions']

     )

     ?>

     <?= Html::endForm() ?>




 </div>




 <br>

 <div class='panel panel-primary'>

     <div class='panel-heading'>

         <h3 class='panel-title'>Transaction History</h3>

     </div>

     <div class='panel-body' id="transactions">

         <?php echo $filter ?>

         <?php Pjax::begin(['id' => 'transactions', 'formSelector' => '#categories form',]); ?>

         <?php Pjax::end(); ?>

     </div>

     <!--<div class='panel-body' id="transactions">

     <?php // echo $filter ?>


</div>-->

 </div>

I tried with a link and with the link works but with the dropdownlist don’t… It’s always redirecting to another page.

Controller:


public function actionFilter() {

        

        $by= $_POST['test'];

        $portfolio = self::searchDots();

        $string = "";

        if ($by == 1) {

            //$string = self::searchPendingEvent();

         //return $this->renderAjax('index',['filter'=>$string,'portfolio' => $portfolio]);

          return $string = self::searchPendingEvent();  

        } else if ($by == 2) {

            return $string = self::searchLastExchanged();

        } else if ($by == 3) {

            return $string = self::searchLastOffered();

        } else if ($by == 4) {

            return $string = self::searchLastDiscounted();

        } else if ($by == 5) {

            return $string = self::searchLastRecieved();

        } else {

            return $string = self::searchViewAllEvents();

        }

    }