Hide and ShowDatatable jQuery

See more:

C#

ASP.NET

Javascript

jQuery

Hi every one,
I have a problem in datatable jQuery.
I need to show the table empty then when user select from dropdownlist and click on the button the table will show the data, this work correctly.
Then when user press on chart button then the table will hide and the chart will be shown. The problem is that I need to press the button twice then it works correctly but it show the chart for few seconds then empty table is shown again.
What should i do??!!

My code to show and hide div like bellow

document.getElementById('tabless').style.display = 'none';// hide table
document.getElementById('viz').style.display = 'block';// show chart

I try also to use

$('#tabless').hide();

but still have the same problem



///----------------------------------


How could i check server side asp button control and sure that is not postback to the server using return false on its client click.
My code bellow

<button id="upload-new-data" type="button" >Table!</button>
<button id="draw_chart" type="button"  onclick="drawCharts2()"> E-P chart</button>
<asp:button id="myServerButton3" runat="server" onclick="myServerButton3_Click" style="display:none;" xmlns:asp="#unknown" />
<asp:button id="myServerButton4" runat="server" onclick="myServerButton4_Click" style="display:none;" xmlns:asp="#unknown" />

<!-- div contains table -->
      <div class="container" id="tabless">
      <div id="demo">
          
        </div>
        </div>

<!-- div contains chart -->
       <div id="viz" style="display:none; width :800px;  height:500px; margin-removed100px; border-bottom-width:1px; border-style:solid;"> </div> 

the button code that update the table is

$('#upload-new-data').on('click', function () {
    table.fnClearTable();
    refresh();
    var NewlyCreatedData = <%= this.javaSerial.Serialize(this.DataSet) %>;
    table.fnAddData(NewlyCreatedData);
    document.getElementById('tabless').style.display = 'block';
    document.getElementById('viz').style.display = 'none';


});

document.getElementById('tabless').style.display = 'block';
document.getElementById('viz').style.display = 'none';

the code behind

protected void myServerButton3_Click(object sender, EventArgs e)
{

    SqlConnection con = new SqlConnection();
    SqlCommand com = new SqlCommand();
    con.ConnectionString = ConfigurationManager.ConnectionStrings["GRASP_v22ConnectionString"].ConnectionString;
    SqlDataReader r;

    pheno = DropDownList3.SelectedValue;
    PMID = DropDownList2.SelectedValue;

    con.Open();



    using (com = new SqlCommand("SELECT  count ([chr(hg19)]) FROM [GRASP_v22].[dbo].[GRASPv2]  where CHARINDEX(@pheno , [Phenotype] ) > 0 and PMID like @PMID", con))
    {

        com.Parameters.AddWithValue("@pheno", pheno);
        com.Parameters.AddWithValue("@PMID", PMID);
        com.CommandTimeout = 0;
        r = com.ExecuteReader();

    }




    int i = 1;
    while (r.Read())
    {

        countPheno = Convert.ToInt32(r[0].ToString());

        i++;
    }

    con.Close();

    //-----------------------------------------------------



    con.Open();
    con.InfoMessage += new SqlInfoMessageEventHandler(con_InfoMessage);


    //select top 10000 [SNPid(in paper)],PMID,Phenotype,Pvalue,[chr(hg19)],[pos(hg19)],[Journal] from [GRASP_v22].[dbo].[GRASP2fullDataset]
    //where CHARINDEX(@phenoo , [Phenotype] ) > 0 and PMID like @PMID
    using (com = new SqlCommand("SELECT  [chr(hg19)] ,[Pos38] ,[dbSNPMAF] ,[Pvalue],Prank,Evalue,Erank, [E-P] FROM [GRASP_v22].[dbo].[GRASPv2] where CHARINDEX(@pheno , [Phenotype] ) > 0 and PMID like @PMID order by Erank ASC ", con))
    {

        com.Parameters.AddWithValue("@pheno", pheno);
        com.Parameters.AddWithValue("@PMID", PMID);
        com.CommandTimeout = 0;
        r = com.ExecuteReader();

    }

    DataSet = new String[countPheno][];


    i = 1;
    while (r.Read())
    {
        DataSet[i - 1] = new String[8];
        DataSet[i - 1][0] = r[0].ToString();
        DataSet[i - 1][1] = r[1].ToString();
        DataSet[i - 1][2] = r[2].ToString();
        DataSet[i - 1][3] = r[3].ToString();
        DataSet[i - 1][4] = r[4].ToString();
        DataSet[i - 1][5] = r[5].ToString();
        DataSet[i - 1][6] = r[6].ToString();
        DataSet[i - 1][7] = r[7].ToString();




        i++;
    }

    con.Close();
}

the code for chart button

function drawCharts2(){
    document.getElementById('myServerButton4').click();
    document.getElementById('tabless').style.display = 'none';
    document.getElementById('viz').style.display = 'block';
    drawCharts3();
}

function drawCharts3(){
    var jsSize = "<%=numRow%>";
    var jsSNPid = <%= this.javaSerial.Serialize(this.SNPid) %> ;
    var jsEminP = <%= this.javaSerial.Serialize(this.EminP) %>;

        var data = new Array();
        for (var i = 0; i < jsSize; i++) {
            data.push({ "SNPid": jsSNPid[i], "E-P": jsEminP[i] });
        }
        //-----------------
        //  alert(JSON.stringify(data));

        var visualization = d3plus.viz()
          .container("#viz")
          .data(data)
          .type("bar")
          .id("SNPid")
          .x("SNPid")
          .y("E-P")
            .color({
                "range": [ "blue" , "white" , "yellow" ],
                "value": "E-P"
            })
           .ui([{
               "label": "Visualization Type",
               "method": "type",
               "value": ["scatter","bar"]
           }])
          .draw()


    }

the code behind

protected void myServerButton4_Click(object sender, EventArgs e)
        {
            pheno = DropDownList3.SelectedValue;
            PMID = DropDownList2.SelectedValue;
            string rowcount = "";
            System.Diagnostics.Debug.WriteLine("hhhhhh" + pheno + PMID + Environment.NewLine);

            SqlConnection con = new SqlConnection();
            SqlCommand com = new SqlCommand();
            con.ConnectionString = ConfigurationManager.ConnectionStrings["GRASP_v22ConnectionString"].ConnectionString;
            con.Open();
            con.InfoMessage += new SqlInfoMessageEventHandler(con_InfoMessage);
            SqlDataReader r;

            using (com = new SqlCommand("SELECT count ([SNPidinpaper])  FROM [GRASP_v22].[dbo].[GRASPv2] where  CHARINDEX(@pheno , [Phenotype] ) > 0 AND PMID like @PMID and Pos38 <> 'Deleted in new'  and Pos38 <> '' and dbSNPMAF <> '' and dbSNPMAF <> ';' and Evalue <> 'noData' ", con))
            {
                com.Parameters.AddWithValue("@pheno", pheno);
                com.Parameters.AddWithValue("@PMID", PMID);
                com.CommandTimeout = 0;
                r = com.ExecuteReader();
            }

            while (r.Read())
            {
                rowcount = r[0].ToString();
            }

            con.Close();




            con.Open();
            con.InfoMessage += new SqlInfoMessageEventHandler(con_InfoMessage);




            using (com = new SqlCommand("SELECT  [SNPidinpaper]  ,[E-P]  FROM [GRASP_v22].[dbo].[GRASPv2] where  CHARINDEX(@pheno , [Phenotype] ) > 0 AND PMID like @PMID and Pos38 <> 'Deleted in new'  and Pos38 <> '' and dbSNPMAF <> '' and dbSNPMAF <> ';' and Evalue <> 'noData' order by [E-P] ASC", con))
            {
                com.Parameters.AddWithValue("@pheno", pheno);
                com.Parameters.AddWithValue("@PMID", PMID);
                com.CommandTimeout = 0;
                r = com.ExecuteReader();
            }


            numRow = Convert.ToInt32(rowcount) + 1;
            SNPid = new String[numRow];
            EminP = new int[numRow];

            int i = 1;
            List<string> lines = new List<string>();
            while (r.Read())
            {

                SNPid[i] = r[0].ToString();

                EminP[i] = Convert.ToInt32(r[1].ToString());
                i++;
            }
            con.Close();



        }
</string></string>