1

I have a list with the following fields (Title, Area, Zone, Reference, qtt). I created two "select" tags for the area and zone fields. I also created an "input" tag for filter field reference. I am using spservices and CAML to filter items in the page list. How do I change the list of the current page with the result obtained by CAML and SPServices. enter image description here

My code ht

<script type="text/javascript">

    $(document).ready(function () { 
       $("#row").empty();  
       $("#row").append("<div id='areadiv' class='col-md-3'></div>");
        $("#areadiv").append("<b>Área:</b><select title='areabox' id='areaid' class='form-control'><option value='Empty'>Empty</option></select>");
       $("#row").append("<div id='zonadiv' class='col-md-3'></div>");
       $("#zonadiv").append("<b>Zona:</b><select title='zonabox' id='zonaid' class='form-control'><option value='Empty'>Empty</option></select>");       
       $("#row").append("<div id='artigoid' class='col-md-4'></div>");
       $("#artigoid").append("<b>Artigo:</b><input id='textartigo' class='form-control'></input>");
       $('#textartigo').val('');
       $("#row").append("<div id='btndiv' class='col-md-2'></div>");
       $("#btndiv").append("<button type='button' class='btn btn-success'>Pesquisar</button>");

       createarea();
       createzona();
       $("button").click(function(){ 
          var sda_filterquery='';
          var cb1=$('#areaid').val();
          var cb2=$('#zonaid').val()
          var txtval=$('#textartigo').val();
          if(cb1=='Empty' && cb2=='Empty' && txtval=='')
          {
           alert("Não selecionou nenhum valor para pesquisar");
           contador=0
          }
          else {
            var contador=0;
            if (cb1!='Empty')
             contador++;
            if (cb2!='Empty')
             contador++;
            if (txtval!='')
              contador++;  
          }
          if (contador>=2)
          {
              if (cb1!='Empty')
              {
                 if (cb2!='Empty')
                 {
                    sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq></And></Where></Query>"; 
                 }
                 else
                 {
                    sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value> </Contains></And></Where></Query>"; 
                 }
              }
              else{
                 if (cb2!='Empty')
                 {
                      if (cb1!='Empty')
                      {
                        sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq></and></Where></Query>"; 
                       }
                      else
                       {
                        sda_filterquery="<Query><Where><and><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value></Contains></And></Where></Query>"; 
                        }
                 }
                 else
                 {
                   if (cb1!='Empty')
                      {
                       sda_filterquery="<Query><Where><and><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq><Eq><FieldRef Name='Area' /><Value Type='Text'>"+txtval+"</Value></Eq></and></Where></Query>";  
                      }
                      else
                       {
                        sda_filterquery="<Query><Where><And><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value></Contains></And></Where></Query>"; 
                        }
                }
              }

          }
          else
          {
            if (contador==1)
            {
               if (cb1!='Empty')
                 sda_filterquery="<Query><Where><Eq><FieldRef Name='Area' /><Value Type='Choice'>"+cb1+"</Value></Eq></Where></Query>";
               if (cb2!='Empty')    
                 sda_filterquery="<Query><Where><Eq><FieldRef Name='Zona' /><Value Type='Choice'>"+cb2+"</Value></Eq></Where></Query>";
               if(txtval!='')
                 sda_filterquery="<Query><Where><Contains><FieldRef Name='DescArtigo' /><Value Type='Text'>"+txtval+"</Value></Contains></Where></Query>";
            } 

          }

         //-----------------------------
         var sda_viewfields="<ViewFields><FieldRef Name='Title' /><FieldRef Name='Area' /><FieldRef Name='Zona' /><FieldRef Name='Quantidade' /><FieldRef Name='DescArtigo' /></ViewFields>";
                          // operation: "GetListItems", 







            $().SPServices({
              operation: "GetListItems",
             listName: "Localização Material",
             async: false,
             CAMLQuery:sda_filterquery,
             CAMLViewFields:sda_viewfields,               
             completefunc: function (xData,Status) {

                   $(xData.responseXML).SPFilterNode("z:row").each(function() {
                        alert(Status);     
                         if(Status == 'success' )
                         {

                             var liHtml = "<li>" + $(this).attr("ows_Area") + "</li>";
                             $("#tasksUL").append(liHtml);

                         }    
                    }); // each                 

             },
             debug:true
          });




        //--------------------
       })    

    })   


   function createarea()
   {
      $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Area",
              completefunc: function (xData, Status) {
                   if(Status == 'success' )
                   {

                       $(xData.responseXML).SPFilterNode("z:row").each(function() {
                          var text = $(this).attr("ows_Title");
                         $("select[title='areabox']").append($('<option>text</option>').val(text).html(text));             

                       });
                   }
           }
      });
   }
function createzona()
   {
      $().SPServices({
            //operation: "GetListItems",
             operation: "GetListItems",       
            async: false,
            listName: "Zona",
              completefunc: function (xData, Status) {
                   if(Status == 'success' )
                   {

                       $(xData.responseXML).SPFilterNode("z:row").each(function() {
                          var text = $(this).attr("ows_Title");
                         $("select[title='zonabox']").append($('<option>text</option>').val(text).html(text));             

                       });
                   }
           }
      });
   }

</script>
0

There is no direct way of doing this.but you can use some jQuery hacks to update the list items based on your filter condition.

and the hack is:

First, you have to update your list view which you want to display , in the list view make "ID" column's order 1st and save the view.

Now with your jQuery add below code in your button click event,

    apQuery("#contentBox").find('tr.ms-itmhover > :nth-child(2)').each(function(){ 
    var itemsArray = //make array of your items id retrived from SPService ex. ["2","3"];
    var tempId = apQuery(this).text();
         if(itemsArray.indexOf(tempId) == -1)
         {
         apQuery(this).closest('tr').hide();
         }
    }); 

This way you can hide the items from the view and on clear filter button make all rows visible again by following code :

    apQuery("#contentBox").find('tr.ms-itmhover').show();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.