locked
Trigger for update panel on DIV vissible true/false RRS feed

  • Question

  • User1444011213 posted

    Hi,

    I need an update panel to update ddl after div becomes visible, I have a code as shown below but I can not remember (or find on the net) how to make trigger who will do this.

    HTML
    =================
    <div id="test" runat=server visible=false>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate >
       <div style="padding: 0px; margin: 0px;">
        <asp:Label ID="Label7" runat="server" Text="Document type" Width="150"/>
        <asp:DropDownList ID="ddlDocumentType" runat="server" Width="200" />
        <asp:LinkButton ID="lbAddDucumentType" runat="server" Text="add" />
       </div>
      </ContentTemplate>
     </asp:UpdatePanel>
    </div>
    
    <div id="divAddDocumentType" runat="server" visible="false">
     <div class="col-sm-6">
      <asp:Label ID="Label2" runat="server" Text="New document type" Width="150"/>
      <asp:TextBox ID="tBoxAddNewDocumentType" runat="server" Width="200" />
      <asp:LinkButton ID="lbAddNewDocumentTypeConfirm" runat="server" Text="confirm" />
      <asp:Label ID="lblAddNewDocumentTypeAlreadyExist" runat="server" />
     </div>
    </div>
    
    VB
    =================
    Private Sub subDdlDocumentType()
     If Page.IsPostBack = True Then
      Dim connectionString As String = WebConfigurationManager.ConnectionStrings("xxx").ConnectionString
      Dim selectSQL As String = "SELECT ID_DOCUMENT_TYPE, NAME FROM tblGuestsDocumentType ORDER BY NAME"
      Dim con As New SqlConnection(connectionString)
      Dim cmd As New SqlCommand(selectSQL, con)
    
      Try
       con.Open()
    
       ddlDocumentType.DataSource = cmd.ExecuteReader()
       ddlDocumentType.DataValueField = "ID_DOCUMENT_TYPE"
       ddlDocumentType.DataTextField = "NAME"
       ddlDocumentType.DataBind()
       
      Catch Err As Exception
        lblGreska.Text = "Error reading list of names. subDdlDocumentType: "
        lblGreska.Text &= Err.Message
      Finally
        con.Close()
      End Try
     End If
    End Sub
    Private Sub subClickLbAddNewDucumentType() Handles lbAddDucumentType.Click
     divNewGuest.Visible = False
    
     divAddDocumentType.Visible = True
    End Sub
    Private Sub subClickLbAddNewDucumentTypeCancel() Handles lbAddNewDocumentTypeCancel.Click
     divNewGuest.Visible = True
    
     divAddDocumentType.Visible = False
    End Sub
    Private Sub subClickLbAddNewDocumentTypeConfirm() Handles lbAddNewDocumentTypeConfirm.Click
     If FuncCheckNewDocumentType(strDocumentType:=tBoxAddNewDocumentType.Text) = 1 
     Then
      lblAddNewDocumentTypeAlreadyExist.Visible = True
      Exit Sub
     End If
     Dim connectionString As String = WebConfigurationManager.ConnectionStrings("xxx").ConnectionString
     Dim insertSQL As String = ""
     insertSQL &= " INSERT INTO tblGuestsDocumentType"
     insertSQL &= " (NAME)"
     insertSQL &= " VALUES"
     insertSQL &= " (@NAME)"
     Dim con As New SqlConnection(connectionString)
     Dim cmd As New SqlCommand(insertSQL, con)
    
     cmd.Parameters.AddWithValue("@NAME", tBoxAddNewDocumentType.Text)
    
     Dim added As Integer = 0
    
     Try
      con.Open()
      added = cmd.ExecuteNonQuery()
     Catch err As Exception
      lblGreska.Text &= "Error reading list of names. subClickLbAddNewDocumentTypeConfirm: "
      lblGreska.Text &= err.Message
     Finally
      con.Close()
     End Try
    
     divAddDocumentType.Visible = False
     divNewGuest.Visible = True
    End Sub

    I hope somebody can help,

    Monday, November 4, 2019 12:11 PM

All replies

  • User2041008840 posted

    You should do it by using jqyery its easy. 
    You need to code it in aspx.cs file when you are visible = true after. 

    Monday, November 4, 2019 12:33 PM
  • User1444011213 posted

    Hi,

    This sound interesting, do you maybe have some link where I can see more details about it?

    Monday, November 4, 2019 12:44 PM
  • User475983607 posted

    The following SO post illustrates how to invoke an Update Panel from JavaScript/jQuery.

    https://stackoverflow.com/questions/3490457/update-an-updatepanel-manually-using-javascript-or-jquery

    Monday, November 4, 2019 2:59 PM
  • User1444011213 posted
    Hi,

    I do not understand "The following SO post illustrates how to invoke an Update Panel from JavaScript/jQuery."

    Is there a link missing?

    Thanks for helping!
    Monday, November 4, 2019 3:34 PM
  • User288213138 posted

    Hi westgatezagreb,

    I need an update panel to update ddl after div becomes visible, I have a code as shown below but I can not remember (or find on the net)

    According to your description, I couldn’t understand your requirement clearly.

    You say that when the div becomes visible="true/false", then update your dropdownlist, but in your code, there are 2 divs, which one do you mean?

    And what do you want to do to change the value of visible?

    And in your code behind, there are 4 methods, I don't see where to call them.

    Please describe your requirements in detail and post your complete code.

    Best regards,

    sam

    Tuesday, November 5, 2019 6:59 AM
  • User1444011213 posted

    Dear samwu,

    I cleared the code and I am posting it below, thanks a lot for your effort ;) 

    .aspx
    ==================
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:Label ID="lblGreska" runat="server" Text="" />
        <div class="container" style="margin: 0 auto; margin-bottom: 10px;" runat="server">
            <div id="divNewGuest" runat="server" visible="true" >
                <div class="col-sm-12" style="background-color: #949494; font-size: 1.5em; font-weight: bold; text-align: center;">
                    NEW GUEST
                </div>
                <div class="col-sm-6">
                    <asp:Label ID="Label7" runat="server" Text="Document type" Width="150"/>
                    <asp:DropDownList ID="ddlDocumentType" runat="server" Width="200" />
                    <asp:LinkButton ID="lbAddDucumentType" runat="server" Text="add" />
                </div>
            </div>
            <div id="divAddDocumentType" runat="server" visible="false">
                <div class="col-sm-12" style="background-color: #949494; font-size: 1.5em; font-weight: bold; text-align: center;">
                    NEW DOCUMENT TYPE
                </div>
                <div class="col-sm-6">
                    <asp:Label ID="Label2" runat="server" Text="New document type" Width="150"/>
                    <asp:TextBox ID="tBoxAddNewDocumentType" runat="server" Width="200" />
                    <asp:LinkButton ID="lbAddNewDocumentTypeConfirm" runat="server" Text="confirm" />
                    <asp:LinkButton ID="lbAddNewDocumentTypeCancel" runat="server" Text="cancel" ForeColor="#FAA41A"/>
                </div>
            </div>
        </div>
    </asp:Content>
    
    .vb
    ==================
    
    Imports System.Data.SqlClient
    Imports System.Web.Configuration
    
    Partial Class _test
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            subDdlDocumentType()
        End Sub
        Private Sub subClickLbAddNewDucumentType() Handles lbAddDucumentType.Click
            divNewGuest.Visible = False
            divAddDocumentType.Visible = True
        End Sub
        Private Sub subClickLbAddNewDucumentTypeCancel() Handles lbAddNewDocumentTypeCancel.Click
            divNewGuest.Visible = True
            divAddDocumentType.Visible = False
        End Sub
        Private Sub subDdlDocumentType()
            If Page.IsPostBack = True Then
                Dim connectionString As String = WebConfigurationManager.ConnectionStrings("xxx").ConnectionString
                Dim selectSQL As String = "SELECT ID_DOCUMENT_TYPE, NAME FROM tblGuestsDocumentType ORDER BY NAME"
                Dim con As New SqlConnection(connectionString)
                Dim cmd As New SqlCommand(selectSQL, con)
    
                Try
                    con.Open()
    
                    ddlDocumentType.DataSource = cmd.ExecuteReader()
                    ddlDocumentType.DataValueField = "ID_DOCUMENT_TYPE"
                    ddlDocumentType.DataTextField = "NAME"
                    ddlDocumentType.DataBind()
                Catch Err As Exception
                    lblGreska.Text = "Error reading list of names. subDdlDocumentType: "
                    lblGreska.Text &= Err.Message
                Finally
                    con.Close()
                End Try
            End If
        End Sub
        Private Sub subClickLbAddNewDocumentTypeConfirm() Handles lbAddNewDocumentTypeConfirm.Click
            Dim connectionString As String = WebConfigurationManager.ConnectionStrings("xxx").ConnectionString
            Dim insertSQL As String = ""
            insertSQL &= " INSERT INTO tblGuestsDocumentType"
            insertSQL &= " (NAME)"
            insertSQL &= " VALUES"
            insertSQL &= " (@NAME)"
            Dim con As New SqlConnection(connectionString)
            Dim cmd As New SqlCommand(insertSQL, con)
    
            cmd.Parameters.AddWithValue("@NAME", tBoxAddNewDocumentType.Text)
    
            Dim added As Integer = 0
    
            Try
                con.Open()
                added = cmd.ExecuteNonQuery()
            Catch err As Exception
                lblGreska.Text &= "Error reading list of names. subClickLbAddNewDocumentTypeConfirm: "
                lblGreska.Text &= err.Message
            Finally
                con.Close()
            End Try
    
            divAddDocumentType.Visible = False
            divNewGuest.Visible = True
        End Sub
    End Class

    Wednesday, November 6, 2019 5:16 AM
  • User288213138 posted

    Hi Hi westgatezagreb,

    <asp:Label ID="lblGreska" runat="server" Text="" />
        <div class="container" style="margin: 0 auto; margin-bottom: 10px;" runat="server">
            <div id="divNewGuest" runat="server" visible="true" >
                <div class="col-sm-12" style="background-color: #949494; font-size: 1.5em; font-weight: bold; text-align: center;">
                    NEW GUEST
                </div>
                <div class="col-sm-6">
                    <asp:Label ID="Label7" runat="server" Text="Document type" Width="150"/>
                    <asp:DropDownList ID="ddlDocumentType" runat="server" Width="200" />
                    <asp:LinkButton ID="lbAddDucumentType" runat="server" Text="add" />
                </div>
            </div>
            <div id="divAddDocumentType" runat="server" visible="false">
                <div class="col-sm-12" style="background-color: #949494; font-size: 1.5em; font-weight: bold; text-align: center;">
                    NEW DOCUMENT TYPE
                </div>
                <div class="col-sm-6">
                    <asp:Label ID="Label2" runat="server" Text="New document type" Width="150"/>
                    <asp:TextBox ID="tBoxAddNewDocumentType" runat="server" Width="200" />
                    <asp:LinkButton ID="lbAddNewDocumentTypeConfirm" runat="server" Text="confirm" />
                    <asp:LinkButton ID="lbAddNewDocumentTypeCancel" runat="server" Text="cancel" ForeColor="#FAA41A"/>
                </div>
            </div>
        </div>

    First, you said that you want Trigger for update panel on DIV vissible true/false, but in your code, I didn't find updatepanel.

    Then, in your code behind, you just called the subDdlDocumentType() method.

    Finally, your if (IsPostBack == true) should not be used in the protected void Page_Load(object sender, EventArgs e) method?

    please post more details information about your requirement and explain your code.

    Best regards,

    Sam

    Wednesday, November 6, 2019 10:37 AM
  • User1444011213 posted

    Dear samwu,

    As an answer as follows:

    First, you said that you want Trigger for update panel on DIV vissible true/false, but in your code, I didn't find updatepanel.
    I removed completely update panel from this code sample since it was reporting an error, and it seems I am coding something wrong in it.
    The whole <div id="divNewGuest" runat="server" visible="true" > should be one update panel.

    Then, in your code behind, you just called the subDdlDocumentType() method.
    In this case I called this method to get ddl content when page is loaded.

    Finally, your if (IsPostBack == true) should not be used in the protected void Page_Load(object sender, EventArgs e) method?
    I made a mistake there, I tried to use this in the event of update panel postback = true, but I did not manage to do it properly, this if is noot needed in this sample code.

    please post more details information about your requirement and explain your code.
    I would like one same page using 2 different divs to be able to add an item in ddl when it is missing in a database without a need to reload a page.
    In practice, for example in ddl there are document types: Worker permit, Driving Licence and I need to add a new type of document (example i need to add Passport).
    Since on this page beside Document type there is over 20 other drop down list or text boxes (like name, surname, country of birth...) it is impractical to reload page on every ddl I need to add item to (there 8 different dropdown lists on this form including town, province, referring agency...).

    I hope this explains a little, thanks for your effort.

    Wednesday, November 6, 2019 11:46 AM
  • User288213138 posted

    Hi westgatezagreb,

    According to your description, I made demo for you. You can use updatepanel to prevent page refreshes.

    In the TextChanged event, you should rebind the data to the dropdownlist.

    <asp:Label ID="lblGreska" runat="server" Text="" />
    
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="divNewGuest" runat="server" visible="true">
                        <asp:Label ID="Label7" runat="server" Text="Document type" Width="150" />
                        <asp:DropDownList ID="ddlDocumentType" runat="server" Width="200" />
    
                        <asp:LinkButton ID="lbAddDucumentType" runat="server" Text="add" OnClick="lbAddDucumentType_Click" />
                    </div>
                    <div id="divAddDocumentType" runat="server" visible="false">
                        <asp:Label ID="Label2" runat="server" Text="New document type" Width="150" />
                        <asp:TextBox ID="tBoxAddNewDocumentType" runat="server" Width="200" AutoPostBack="true" OnTextChanged="tBoxAddNewDocumentType_TextChanged" />
                        <asp:LinkButton ID="lbAddNewDocumentTypeConfirm" runat="server" Text="confirm" />
                        <asp:LinkButton ID="lbAddNewDocumentTypeCancel" runat="server" Text="cancel" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
    
    
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not IsPostBack Then
                subDdlDocumentType()
            End If
        End Sub
    
        Private Sub subDdlDocumentType()
            Dim connectionString As String = WebConfigurationManager.ConnectionStrings("constr").ConnectionString
            Dim selectSQL As String = "SELECT ID_DOCUMENT_TYPE, NAME FROM tblGuestsDocumentType ORDER BY NAME"
            Dim con As SqlConnection = New SqlConnection(connectionString)
            Dim cmd As SqlCommand = New SqlCommand(selectSQL, con)
    
            Try
                con.Open()
                ddlDocumentType.DataSource = cmd.ExecuteReader()
                ddlDocumentType.DataValueField = "ID_DOCUMENT_TYPE"
                ddlDocumentType.DataTextField = "NAME"
                ddlDocumentType.DataBind()
            Catch Err As Exception
                lblGreska.Text = "Error reading list of names. subDdlDocumentType: "
                lblGreska.Text += Err.Message
            Finally
                con.Close()
            End Try
        End Sub
    
        Protected Sub lbAddDucumentType_Click(ByVal sender As Object, ByVal e As EventArgs)
            divNewGuest.Visible = False
            divAddDocumentType.Visible = True
        End Sub
    
        Protected Sub tBoxAddNewDocumentType_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim connectionString As String = WebConfigurationManager.ConnectionStrings("constr").ConnectionString
            Dim insertSQL As String = ""
            insertSQL += " INSERT INTO tblGuestsDocumentType"
            insertSQL += " (NAME)"
            insertSQL += " VALUES"
            insertSQL += " (@NAME)"
            Dim con As SqlConnection = New SqlConnection(connectionString)
            Dim cmd As SqlCommand = New SqlCommand(insertSQL, con)
            cmd.Parameters.AddWithValue("@NAME", tBoxAddNewDocumentType.Text)
            Dim added As Integer = 0
    
            Try
                con.Open()
                added = cmd.ExecuteNonQuery()
            Catch err As Exception
                lblGreska.Text += "Error reading list of names. subClickLbAddNewDocumentTypeConfirm: "
                lblGreska.Text += err.Message
            Finally
                con.Close()
            End Try
    
            divNewGuest.Visible = True
            divAddDocumentType.Visible = False
            subDdlDocumentType()
        End Sub

    The result:

    Best regards,

    Sam

    Thursday, November 7, 2019 3:15 AM
  • User1444011213 posted

    Hi,

    Thanks for anwsering

    Monday, November 25, 2019 7:23 PM