Click here to Skip to main content
15,939,853 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
XML
I have 3 buttons on click of the button using java script the div will appear each div have different button to save some data in asp.net
page but it refresh whole page i would like to refresh particular div only and save data to my db

Button Code
    <asp:Button ID="btnConse" runat="server" CssClass="Button" AlternateText="1" Text="Consequence"
        OnClientClick="ToggleDiv('Consequence');return false;" />
    <asp:Button ID="btnTask" runat="server" CssClass="Button" AlternateText="1" Text="Task"
        OnClientClick="ToggleDiv('Task');return false;" />
    <asp:Button ID="Button4" runat="server" CssClass="Button" AlternateText="1" Text="Incident"
        OnClientClick="ToggleDiv('Incident');return false;" />

Java script
<script type="text/javascript">
        function ToggleDiv(Flag) {
                if (Flag == "Consequence") {
                    document.getElementById('divConsequence').style.display = 'block';
                    document.getElementById('divTask').style.display = 'none';
                    document.getElementById('divIncident').style.display = 'none';
                }
                else {
                    if (Flag == "Task") {
                        document.getElementById('divConsequence').style.display = 'none';
                        document.getElementById('divTask').style.display = 'block';
                        document.getElementById('divIncident').style.display = 'none';
                    }
                    else {
                        if (Flag == "Incident") {
                            document.getElementById('divConsequence').style.display = 'none';
                            document.getElementById('divTask').style.display = 'none';
                            document.getElementById('divIncident').style.display = 'block';
                        }
                    }
                }
            }
    </script>

Div
    <div id="divConsequence" style="display: none;">
        <div class="TabTextHoriCenter">
            <asp:Label ID="Label28" runat="server" Text="div Consequence"></asp:Label>
            <asp:Button ID="btnSaveCon" runat="server" CssClass="Button" AlternateText="1" Text="Consequence" OnClick="btnSaveCon_Click"  />
        </div>
    </div>
    <div id="divTask" style="display: none;">
        <div class="TabTextHoriCenter">
            <asp:Label ID="Label33" runat="server" Text="div Task"></asp:Label>
            <asp:Button ID="btnSaveTask" runat="server" CssClass="Button" AlternateText="1" Text="Task" OnClick="btnSaveTask_Click"  />
        </div>
    </div>
    <div id="divIncident" style="display: none;">
        <div class="TabTextHoriCenter">
            <asp:Label ID="Label34" runat="server" Text="div incident"></asp:Label>
            <asp:Button ID="btnSaveInc" runat="server" CssClass="Button" AlternateText="1" Text="Incident" OnClick="btnSaveInc_Click"  />
        </div>
    </div>
in this div there are button which performs server operation

How can I refresh only this div not whole page
Posted
Comments
Zafar Sultan 15-Oct-13 3:59am    
Have you tried using updatepanel?
[no name] 15-Oct-13 4:05am    
Put this section inside an update panel.

When you use asp.net server side button it will post back your page to the server. For that reason the whole page is refreshed. But you want to update/refresh particular div when a asp.net button is clicked. If you want so you just use ajax for update/refresh your div. In ajax method you just go server for data and in client side you render your client side control with that data. You can use jquery for ajax operation. The following i am showing sample code. You can more googling to findout more realistic code.

The server side code sample will be like

C#
public partial class Index : Page
{
[WebMethod]
public static GetData(){
  return "hello world";
} 
}


in client side jquery javascript code looks like

JavaScript
  $.ajax({
            url: "/GetData",
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        label: item.split('-')[0],
                        val: item.split('-')[1]
                    }
                }))
            },
            error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            },
        });
    },
    minLength: 0,
    focus: function () {
        // prevent value inserted on focus
        return false;
    },
});
 
Share this answer
 
Comments
sunny1787 15-Oct-13 5:15am    
webform
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">

<div style="margin: 0 0 1% 1%; width: 98%; height: inherit !important">
<div id="divEnclosures" style="display: none;">
<div class="TabTextHoriCenter">
<asp:Label ID="Label21" runat="server" Text="<%$ Resources:Resource,AttachFiles %>">
</div>
<table cellpadding="4" width="100%" cellspacing="4" border="0" class="tbl">
<tr>
<td style="padding-bottom: 15px; padding-left: 30px;">
<asp:Label ID="Label22" runat="server" Text="<%$ Resources:Resource,AttachFiles %>"><span
class="LabelTextStyle">:</span>
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">

<div style="float: left;">
<asp:FileUpload ID="fuFile" runat="server" class="TextBoxStyle_upload" />
</div>
<div style="float: left;">
<asp:Button ID="lnkBtnAddFiles" runat="server" CssClass="Button" AlternateText="1"
Text="<%$ Resources:Resource,
Add %>" OnClick="btnAddFiles_Click" CausesValidation="true" ValidationGroup="Add1" />
</div>
<br />
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="<%$ Resources:Resource, Selectfile %>"
ControlToValidate="fuFile" Display="Dynamic" CssClass="validationText" ValidationGroup="Add1">
<br />
<div style="float: left;">
<asp:DataList ID="dlIncidents" OnDeleteCommand="dlIncidents_DeleteCommand1" Width="100%"
runat="server" RepeatColumn="1">

<div style="line-height: 25px;">
<div style="width: 27px; float: left; line-height: 15px; vertical-align: top;">
</div>
hey did u use update panel.. ? ajax functionality ? search and use it.. easy and simple to use
 
Share this answer
 
Comments
sunny1787 15-Oct-13 5:13am    
webform
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
<contenttemplate>
<div style="margin: 0 0 1% 1%; width: 98%; height: inherit !important">
<div id="divEnclosures" style="display: none;">
<div class="TabTextHoriCenter">
<asp:Label ID="Label21" runat="server" Text="<%$ Resources:Resource,AttachFiles %>">
</div>
<table cellpadding="4" width="100%" cellspacing="4" border="0" class="tbl">
<tr>
<td style="padding-bottom: 15px; padding-left: 30px;">
<asp:Label ID="Label22" runat="server" Text="<%$ Resources:Resource,AttachFiles %>"><span
class="LabelTextStyle">:</span>
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
<contenttemplate>
<div style="float: left;">
<asp:FileUpload ID="fuFile" runat="server" class="TextBoxStyle_upload" />
</div>
<div style="float: left;">
<asp:Button ID="lnkBtnAddFiles" runat="server" CssClass="Button" AlternateText="1"
Text="<%$ Resources:Resource,
Add %>" OnClick="btnAddFiles_Click" CausesValidation="true" ValidationGroup="Add1" />
</div>
<br />
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="<%$ Resources:Resource, Selectfile %>"
ControlToValidate="fuFile" Display="Dynamic" CssClass="validationText" ValidationGroup="Add1">
<br />
<div style="float: left;">
<asp:DataList ID="dlIncidents" OnDeleteCommand="dlIncidents_DeleteCommand1" Width="100%"
runat="server" RepeatColumn="1">
<itemtemplate>
<div style="line-height: 25px;">
<div style="width: 27px; float: left; line-height: 15px; vertical-align: top;">
</div>
Hi Techie,

There are many ways we can achieve the desired result.

Two good ways to accomplish are :

1) Use the Ajax method of Jquery.

2) Use the Update Panel.
 
Share this answer
 
v2
Comments
sunny1787 15-Oct-13 6:56am    
let me explain using any one of this I tried many a times

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

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900