Link to home
Start Free TrialLog in
Avatar of Share Point
Share Point

asked on

How to populate Webpart title to dropdown in java script?

Hi,
 We have sharepoint 2013. We have one aspx pages where we added so many list web parts. We would like to create one drop down list by java script where we can populate drop down by Webpart title by searching any keywords. After filled dropdown we will have to hide and show webparts.

 Here is the link i was following but no luck for sharepoint 2013.

https://wyly.wordpress.com/2009/05/22/showhide-multiple-web-parts/
Avatar of Kevin Cross
Kevin Cross
Flag of United States of America image

What is the current code you have?  What errors are you getting the Developer Console for the JavaScript piece?  In other words, what is not working about your current implementation after following the tutorial at the link you sent?
Avatar of Share Point
Share Point

ASKER

Hi,
here is my code where i am populating dropdown with manually choices and hiding the webpart. I was looking to populate webpart titles automatically by searching any keyward.

Can you please help me ?

<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center">
<fieldset>
    
   <select  id="selectWebpart" name="selectWebpart" onchange="HideShow();" >
   </select>
</fieldset>
</div>
</body>
</html>

<script type="text/javascript" src="https://sites/Documents/jquery-3.2.0.min.js"></script>
<script>
// fill the drop down menu choices
var resultData=["webpart1","webpart2","webpart3"]
$(document).ready(function(){

// Hide the webparts on page load
//document.getElementById('WebPartWPQ3').style.display="none"; 
document.getElementById('WebPartWPQ4').style.display="none"; 
document.getElementById('WebPartWPQ5').style.display="none"; 


// Populate Dropdown from resultdata
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectWebpart').append(myselect.html());

});


function HideShow()
{
  
   var Webpart = document.getElementById("selectWebpart").value;

     if(Webpart == "Profiles Where I'm Pgm Manager or Sponsor")
{
  $('#WebPartWPQ3').hide(); 
  $('#WebPartWPQ5').show(); 
  $('#WebPartWPQ4').hide();
}
  if(Webpart == "Profiles I've Created or Modified")
{ 
  $('#WebPartWPQ3').hide(); 
  $('#WebPartWPQ5').hide(); 
  $('#WebPartWPQ4').show();
}
  if(Webpart == "Profiles Where I'm the PM")
{ 
  $('#WebPartWPQ4').hide(); 
  $('#WebPartWPQ5').hide(); 
  $('#WebPartWPQ3').show();
}

}
  </script>

Open in new window


I referred the url because it has some to do same functionality. But i did not work for me.
ASKER CERTIFIED SOLUTION
Avatar of Kevin Cross
Kevin Cross
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Kevin,
 My code is working but i am populating options manually by this line. var resultData=["webpart1","webpart2","webpart3"].
I would like populate dropdown by automatically by using any keyward and find web part tiltle and populate.
Where is this automated data supposed to come from? If you just are searching the page, then jQuery may work but the HTML you showed does not have any web part information until you add it to the select options, so it is unclear where you expect the result data to come from instead.