ParamQuery grid support forum

General Category => Help for ParamQuery Select => Topic started by: AntoRubens on May 25, 2015, 08:06:44 am

Title: select created dinamic
Post by: AntoRubens on May 25, 2015, 08:06:44 am

I have a system that when the User click an option the system dynamically updates a second list through ajax. The problem is that the second list does not receive the pqselect.

how to solve this problem. select dynamically created.

help me
Rubens

Title: Re: select created dinamic
Post by: paramvir on May 25, 2015, 09:47:02 am

That can be done with refreshData method:

http://paramquery.com/api/select#method-refreshData

Title: Re: select created dinamic
Post by: AntoRubens on May 25, 2015, 11:00:44 am

I try use this method, but dont fixed!

my code:

   $("#funcao03").pqSelect({
      multiplePlaceholder: 'Função',
      search: false,
      maxDisplay: 1 ,
      selectallText: '' ,
      checkbox: true   
   }).on("change", function(evt) {
      $.ajax({
         url: "/infra/clientes/listSubfuncao1.asp
         type: "post",
         data: {opcao:"subfuncao03"},
         dataType: "html",
      }).done(function(data){
         $("#subfunc3").html(data);
      });
   }).pqSelect('close');


When change (funcao03) so invoke the ajax and update second list (id #subfunc3). But it not receive or acept the pqselect, because the scond list not presente in DOM tree.

Title: Re: select created dinamic
Post by: paramvir on May 25, 2015, 11:08:06 am

I assume  $("#subfunc3") is your second select list. It can be initialized within the done callback.

}).done(function(data){
         if ( $("#subfunc3").hasClass('.pq-select'){
               $("#subfunc3").pqSelect('destroy'); //destroy the previous instance if any.
         }
         $("#subfunc3").html(data).pqSelect();
      });

Title: Re: select created dinamic
Post by: AntoRubens on May 25, 2015, 11:39:37 am

Ok man!
There is light at the end of tuntel. It updates the first selection, the other not.

Title: Re: select created dinamic
Post by: AntoRubens on May 25, 2015, 01:13:28 pm

Great man!
The code finished, see below.
Thanks!


   $("#funcao03").pqSelect({
      multiplePlaceholder: 'Função',
      search: false,
      maxDisplay: 1 ,
      selectallText: '' ,
      checkbox: true //adds checkbox to options   
   }).on("change", function(evt) {
      $.ajax({
         url: "/infra/clientes/listSubfuncao1.asp
         type: "post",
         data: {opcao:"subfuncao03"},
         dataType: "html",
      }).done(function(data){
         if ($("#subfuncao03").hasClass('.pq-select')){
            $("#subfuncao03").pqSelect('destroy');
         }
         $("#subfuncao03").html(data).pqSelect({
            multiplePlaceholder: 'Subfunção',
            search: false,
            maxDisplay: 1 ,
            selectallText: '',
            checkbox: true,
             width: 270
         }).pqSelect('close');
         $("#subfuncao03").pqSelect("refreshData");
      });
   }).pqSelect('close');