Basically I am trying to filter some results by using web services. Here is my HTML code which I added the component dynamically in js file:
htmlStr += "<div id='filterContent'><input type='checkbox' id='cbShowAllBus' onClick='getAllBusStop();' /><span class='getBusRouteSubtitle'>Show All Bus Stops</span><br/><br/>";
htmlStr += "<span class='getBusRouteTitle'>Bus Services No.</span><br/>";
htmlStr += "<select id='busservice_option' onchange='filterBusStop(this.value);getFilteredBusStop();' style='width:100%;'><option value='default'>Select Bus Service</option><optgroup label='Trunk Bus Services'><option value='2_2'>2</option><option value='3_2'>3</option><option value='4_1'>4</option></optgroup></select>";
htmlStr += "</div><br/>";
I have on checkbox and a drop down list. So if checkbox is checked, it will show all the bus stop location without any filter criteria.
What I did is from code behind, I call the web service method which execute the SQL statement. Then I bind the results into a grid view and extract the results from grid view. I will not post the codes for these functions as it works fine.
My problem occured when I try to filter the results. I used the same technique as above. Here is my asp.net code behind to execute the SQL statement and bind the result to grid view:
[System.Web.Services.WebMethod()]
public void filterBusStop(String filter)
{
SgDataService filterBusStop = new SgDataService();
filterBusStopDGV.DataSource = filterBusStop.GetFilterBusStop(filter);
filterBusStopDGV.DataBind();
}
And my web service method which contains the SQL statement:
[WebMethod]
public DataSet GetFilterBusStop(String filter)
{
SqlConnection sqlConnection1 = new SqlConnection(ConfigurationManager.ConnectionStrings["EasyMoveConnStr"].ConnectionString);
string select = "select * from dbo.BusStop where B1 LIKE %" + filter + "%";
sqlConnection1.Open();
SqlDataAdapter da = new SqlDataAdapter(select, sqlConnection1);
DataSet ds = new DataSet();
da.Fill(ds, "FilterBusStop");
sqlConnection1.Close();
return (ds);
}
After populate the data into gridview, I loop thru the gridview and plot each results into a map by using lat long:
function getFilteredBusStop() {
var Grid_Table = document.getElementById('filterBusStopDGV');
for (var i = 1; i < Grid_Table.rows.length; i++) {
var coordXicon = Grid_Table.rows[i].cells[4].textContent;
var coordYicon = Grid_Table.rows[i].cells[5].textContent;
var B1 = Grid_Table.rows[i].cells[6].textContent;
var B2 = Grid_Table.rows[i].cells[7].textContent;
var point = new esri.geometry.Point({ "x": coordXicon, "y": coordYicon, "spatialReference": { "wkid": 3414 } });
if (B2 == 1) {
var symbol = new esri.symbol.PictureMarkerSymbol('img/busIcon.png', 30, 30);
}
else {
var symbol = new esri.symbol.PictureMarkerSymbol('img/busstopicon.png', 30, 30);
}
var PointGraphic = new esri.Graphic(point, symbol);
map.graphics.add(PointGraphic);
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle(Grid_Table.rows[i].cells[1].textContent);
infoTemplate.setContent("<b>Bus Stop Location: </b>" + Grid_Table.rows[i].cells[2].textContent + "<br/>"
+ "<b>Road Name: </b>" + Grid_Table.rows[i].cells[3].textContent + "<br/>"
+ "<b>Buses: </b>" + B1 + "<br/>");
var graphic = PointGraphic;
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
busIcon.push(map.graphics.add(graphic));
}
}
But somehow, I get an error message which is filterBusStop is undefined
. I think the problem occurs when onchange at drop down list, I called the code behind web service method in a wrong way. Any guides?
Thanks in advance. Sorry for the super long thread as I am trying to explain what I am trying to do.