How To refresh only div in page without refreshing whole page ?

Question

0.00/5 (No votes)

See more:

Hi,
I want to insert into database without refreshing page and it's done correctly but my problem is refreshing table that show the data after insertion without refreshing the whole page
I did html table in code behind and bind it to aspx page like this

HTML

<%= html  %>

html is string Bulider that I draw my HTML table on it and fill it by database data
ok, after insertion by ajax here

HTML

$("[id*=btnSave]").bind("click", function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
            $.ajax({
                type: "POST",
                url: "CS.aspx/SaveUser",
                data: '{user: ' + JSON.stringify(user) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //window.location.reload();
                }
            });
            return false;
        });

in saveUser function I call that function that rebuild HTML table in html string builder
but the last row I added doesn't appear in table until I refresh the page manually or I remove comment in this line

HTML

window.location.reload();

and this is my HTML table

C#

html.Append("<table border = '1' id='myTable' class='tablesorter'>");

                        //Building the Header row.
                        html.Append("<thead>");
                        html.Append("<tr>");
                        
                        string name = "";
                        foreach (DataColumn column in dt.Columns)
                        {
                            html.Append("<th>");
                            html.Append(column.ColumnName);
                            html.Append("</th>");
                            
                        }
                        html.Append("<th>");
                        
                        html.Append("Delete");
                        html.Append("</th>");

                        html.Append("<th>");
                        html.Append("Update");
                        html.Append("</th>");

                        html.Append("</tr>");
                        html.Append("</thead>");
                        html.Append("<tbody>");
                        //Building the Data rows.
                        foreach (DataRow row in dt.Rows)
                        {
                            int i = 0;
                            html.Append("<tr>");
                            foreach (DataColumn column in dt.Columns)
                            {
                                html.Append("<td>");
                                html.Append(row[column.ColumnName]);
                                html.Append("</td>");
                                if(i == 0){
                                    name = row[column.ColumnName].ToString();
                                }
                                i++;
                            }

                            html.Append("<td>");
                            html.Append("<input type='submit' value='Delete' class='btnDelete' id='" + name + "' >");
                            html.Append("</td>");

                            html.Append("<td>");
                            html.Append("<input type='submit' value='Update' class='btnPrepareToUpdate' id='update" + name + "'>");
                            html.Append("</td>");

                            html.Append("</tr>");
                        }
                        html.Append("</tbody>");
                        //Table end.
                        html.Append("</table>");

any help to refresh only HTML table ?

Posted 20-Dec-15 20:06pm

Heba Kamel

Updated 20-Dec-15 20:31pm

v3

Add a Solution

Comments

Suvabrata Roy 21-Dec-15 2:27am

please provide your HTML

Heba Kamel 21-Dec-15 2:30am

okay, I'll edit my question to add this in appropriate format

Suvabrata Roy 21-Dec-15 3:40am

I need the full HTML, you provide only one table.

Heba Kamel 21-Dec-15 3:44am

Do you mean aspx page
okay, it only have a form to insert and ajax function that I wrote it in the post
and this is a form
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
User Name:
</td>
<td>
<input type="text" id="txtUsername" value="<%= userName %>"/>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" id="txtPassword" value="<%= password %>"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="btnSave" value="Save"/>
</td>
<td>
<input type="submit" id="btnUpdate" value="Update"/>
</td>
</tr>
</table>

<%= html %>
</form>

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

pankaj_cs@yahoo.com · Answer 1 · 2015-12-20T20:58:00

Solution 1

Put your div in update panel then run your page

Posted 20-Dec-15 20:58pm

pankaj_cs@yahoo.com

Comments

Heba Kamel 21-Dec-15 3:00am

No, I want to do this without asp controls like update panel and in update panel I can't use <%= html %>

Jawad Ahmed Tanoli · Answer 2 · 2015-12-20T21:02:00

Solution 2

JavaScript

$("[id*=btnSave]").bind("click", function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
            $.ajax({
                type: "POST",
                url: "CS.aspx/SaveUser",
                data: '{user: ' + JSON.stringify(user) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //Try This #container your control name
                 $('#container').html(response);
                }
            });
            return false;
        });

Posted 20-Dec-15 21:02pm

Jawad Ahmed Tanoli

Comments

Heba Kamel 21-Dec-15 3:06am

I did it before but the table removed after save .

Jawad Ahmed Tanoli 21-Dec-15 3:09am

is page do post back on button click ?

Heba Kamel 21-Dec-15 3:14am

No, It doesn't back to page_load on button click

Jawad Ahmed Tanoli 21-Dec-15 3:18am

url: "CS.aspx/SaveUser" is this in another page returning html or on same page? because mostly happens due to page reload

Heba Kamel 21-Dec-15 3:22am

I don't understand u well but CS.aspx/SaveUser is the same page but I get html table from another class that contains the function create html string builder

Jawad Ahmed Tanoli 21-Dec-15 3:20am

try to put same function in document.ready to load html again or check with alert weather it is reloading or not?

Heba Kamel 21-Dec-15 3:25am

which function did u mean?
I alert in document.ready and it isn't appear after save

Jawad Ahmed Tanoli 21-Dec-15 3:31am

it means there is no postback try to check your response html is it in correct format or try this line and see it also disappear or not
$('#container').html('<p> Your record successfully saved</p>');

Heba Kamel 21-Dec-15 3:39am

Yes, this is appear ($('#container').html('<p> Your record successfully saved</p>');)
I think now the problem in response but what do u mean with check your response html
where?

Jawad Ahmed Tanoli 21-Dec-15 4:16am

Yes the response which you received on button click this response is not correct format of html you can check
alert(response); while in code where your creating table you have to return response.write(html);

Heba Kamel 21-Dec-15 4:40am

so this is my function
[WebMethod]
[ScriptMethod]
public static StringBuilder SaveUser(User user)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO Users VALUES(@Username, @Password)"))
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@Username", user.Username);
cmd.Parameters.AddWithValue("@Password", user.Password);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
Class1 c = new Class1();
html = c.GetData();
return html;
//return response.write(html);
}
but how return response.write(html); ?

Jawad Ahmed Tanoli 21-Dec-15 5:06am

can i see your project over team viewer?

Heba Kamel 21-Dec-15 6:05am

Yes, but for sorry I am out now
Do you mind when I back tell you ?
I don't know what time is it in your city, I'll go home after 6 hours from now

How To refresh only div in page without refreshing whole page ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How To refresh only div in page without refreshing whole page ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us