0

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.

  • Am I right to assume that the "undefined" error message is a browser level error or message box that you are seeing? The problem is because your onchange function call is to a Javascript function called "filterBusStop" that does not exist. Have you implemented any JS functions called "getAllBusStop" and "filterBusStop" ? –  Jun 29 '14 at 06:00
  • Yeah I am pretty sure. I did modified it to use ajax call but there's some slight issue with that. Are you okay if I put it here? –  Jun 29 '14 at 06:03

1 Answers1

0

i don't know about putting two calls in the onchange event so i'll leave that for now.

does the scriptmanager have EnablePageMethods="true"? if so, try making the method static. you might have to do both.

wazz
  • 4,953
  • 5
  • 20
  • 34
  • But when I try to make the method static, the filterBusStopDGV throw me an error message which is An object reference is required for non-static field, method or property. Also, where do I put the script manager? Just at the top of my html code as those HTML components are generated dynamically in JavaScript file. –  Jun 29 '14 at 05:26
  • scriptmanager should be the first thing inside the form. http://stackoverflow.com/questions/13473808/the-scriptmanager-must-appear-before-any-controls-that-need-it – wazz Jun 29 '14 at 05:49
  • But if I included scriptManager, do I need to change anything at the web config? Because whenever I added it, the whole apps just stop working –  Jun 29 '14 at 05:58
  • are you using a web form (.aspx)? – wazz Jun 29 '14 at 06:05
  • Yeah I am using webform.aspx. But I removed the form tag all those and did it like normal html. I only kept the first line in aspx which is <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Map_Our_Lives.index" %> –  Jun 29 '14 at 06:13
  • i think that could be a problem without the form tag. even though you can use javascript with asp.net ajax, a postback is still needed to hit the server (page-behind) code. maybe someone else can confirm. gotta go. – wazz Jun 29 '14 at 06:47