3 Replies - 1509 Views - Last Post: 08 November 2012 - 09:46 AM

#1 nmg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 19-April 12

button onclick not triggered

Posted 08 November 2012 - 12:57 AM

button onclick not triggered when clicking on a button created in asp.net (changed the div.innerhtml with a html string).

I have a div (loginP within loginDiv) for loging in. after the user logs in, the innerHtml of loginP changes via Asp.net. I also use jquery to let the user of the site move the loginDiv (that contains the loginP) up and down, maybe that matters.

here is the normal html part of the code:
<div id="loginDiv" runat="server">
        <div id="loginP" runat="server">
            username:<br />
            <asp:TextBox runat="server" ID="user" Rows="1" class="textboxL" /><br />
            password:<br />
            <asp:TextBox TextMode="Password" runat="server" ID="pass" Rows="1" class="textboxL" /><br />
            <div id="bottomDiv">
                <asp:Button ID="RegiButton" runat="server" UseSubmitbehavior="false" CssClass="buttonC"
                    Text="Register" onclick="RegisterBtnClick" />
                <asp:Button ID="LogButton" runat="server" UseSubmitbehavior="true" CssClass="buttonC"
                    Text="Login" onclick="LoginBtnClick" /><br />
                <asp:CheckBox runat="server" ID="rememberME" />
                <p id="rememberMe">
                    <font size="1" face="verdana">remember me</font>
                </p>
                <asp:Label Width="180px" Height="40px" Visible="true" runat="server" Text="" ID="errorLabel" />
            </div>
        </div>
    </div>

here is the jquery part
    var ldiv = $("#loginDiv");
ldiv.offset({ top: 10 });


var drag = { y: 0, state: false };
var delta = { y: 0 };


$("#user").mousedown(function () {
    drag.state = false;
    $("#user").focus()
});
$("#pass").mousedown(function () {
    drag.state = false;
    $("#pass").focus()
});
//$("#LogOutBtn").mousedown(function () {
//    drag.state = false;
//    return false;
//});
$(document).ready(function () {
    $("#LogOutBtn").click(function () {
        $.ajax({
            type: "POST",
            url: "sMaster.Master/LogoutBtnClick",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        });
    });
});



ldiv.mousedown(function (e) {
    if (!drag.state == true) {
        drag.y = e.pageY;
        drag.state = true;
    }
    return false;
});

$(document).mousemove(function (e) {
    if (drag.state == true) {
        delta.y = e.pageY - drag.y;
        var cur_offset = $("#loginDiv").offset();

        if (ldiv.cssNumber("top") + $("#loginP").cssNumber("padding-top") + delta.y > -40 && ldiv.cssNumber("top") + $("#loginP").cssNumber("padding-top") + $("#loginP").cssNumber("height") + delta.y + 60 < $(window).height()) {
            if ($(window).width() >= 1305) {
                $("#loginDiv").offset({ top: (cur_offset.top + delta.y) });
                drag.y = e.pageY;
            }
        }

    }
});

$(document).mouseup(function () {
    drag.state = false;
});


$("#user").mousedown(function () {
    drag.state = false;
    $("#user").focus()
});
$("#pass").mousedown(function () {
    drag.state = false;
    $("#pass").focus()
});

and there is also this part of the jQuery code that moves the loginDiv when the window is too small:
    $(document).ready(function () {
    var dLeft = $("#greenPart").width();
    dLeft += ($(window).width() - $("#greenPart").width()) / 2;
    dLeft += 10;
    $("#loginDiv").css("marginLeft", dLeft);

    var he = $(window).height() * 2;
    $("#loginDiv").css({ "height": he + "px" });
    he = -($(window).height());
    $("#loginDiv").css({ "top": he + "px" });
    he = $(window).height();
    $("#loginP").css({ "padding-top": he + "px" });

    if ($(window).width() < 1305) {
        $("#loginDiv").offset({ top: 10 });
        $("#loginDiv").css({ "height": 120 + "px" });
        $("#loginP").css({ "padding-top": 0 + "px" });
        var dLeft = $("#greenPart").width();
        dLeft += ($(window).width() - $("#greenPart").width()) / 2;
        dLeft -= (20 + $("#loginP").width());
        $("#loginDiv").css("marginLeft", dLeft - 100);

        $("#lines").height("20px");
        $("#lines").width("100px");
        $("#bottomDiv").css("marginLeft", 165);
        $("#bottomDiv").css("marginTop", -90);
        $("#bottomDiv").css("width", 70);
        $("#hello").css("font-weight", "bold");
        $("#hello").css("color", "White");
    }

    return false;
});

$(window).resize(function () {
    var dLeft = $("#greenPart").width();
    dLeft += ($(window).width() - $("#greenPart").width()) / 2;
    dLeft += 10;
    $("#loginDiv").css("marginLeft", dLeft);

    var he = $(window).height() * 2;
    $("#loginDiv").css({ "height": he + "px" });
    he = -($(window).height());
    $("#loginDiv").css({ "top": he + "px" });
    he = $(window).height();
    $("#loginP").css({ "padding-top": he + "px" });

    $("#bottomDiv").css("marginLeft", 0);
    $("#bottomDiv").css("marginTop", 0);
    $("#bottomDiv").css("width", 170);
    $("#hello").css("font-weight", "normal");
    $("#hello").css("color", "Black");
    $("#loginP").css("padding-left", 0);

    if ($(window).width() < 1305) {
        $("#loginDiv").offset({ top: 10 });
        $("#loginDiv").css({ "height": 120 + "px" });
        $("#loginP").css({ "padding-top": 0 + "px" });
        var dLeft = $("#greenPart").width();
        dLeft += ($(window).width() - $("#greenPart").width()) / 2;
        dLeft -= (20 + $("#loginP").width());
        $("#loginDiv").css("marginLeft", dLeft - 100);

        $("#lines").height("20px");
        $("#lines").width("100px");
        $("#bottomDiv").css("marginLeft", 165);
        $("#bottomDiv").css("marginTop", -90);
        $("#bottomDiv").css("width", 70);
        $("#loginDiv").css("paddingLeft", 0);

        if ($("#hello").length != 0) {
            $("#hello").css("font-weight", "bold");
            $("#hello").css("color", "White");
            $("#loginP").css("padding-left", 120);
        }
    }
    return false;
});

and the Asp.net part, the changeLoginDiv() changes the div and creates the problem:
 protected void LoginBtnClick(object sender, EventArgs e)
    {
        string username = user.Text;
        string password = pass.Text;

        if (username != "" && username != null)
        {
            if (password != "" && password != null)
            {
                if (db.IsExist("SELECT * FROM users WHERE username='" + username + "'"))
                {
                    if (db.IsExist("SELECT * FROM users WHERE [password]='" + password + "'"))
                    {
                        errorLabel.Text = "Loged in successfully.";

                        if (rememberME.Checked == true)
                        {
                            Response.Cookies["userInfo"]["username"] = username;
                            Response.Cookies["userInfo"]["lastVisit"] = DateTime.Now.ToString();
                            Response.Cookies["userInfo"].Expires = DateTime.Now.AddDays(365);
                        }
                        else
                        {
                            Session["username"] = username;
                        }

                        changeLoginDiv();
                    }
                    else errorLabel.Text = "Wrong password.";
                }
                else errorLabel.Text = "The username doesn't exist. \n\n\nIf you don't have a user, please register.";
            }
            else errorLabel.Text = "Please enter a password";
        }
        else errorLabel.Text = "Please enter a user name";
    }

    protected void LogoutBtnClick(object sender, EventArgs e)
    {
        Session["username"] = "";
        Response.Cookies["userifnfo"]["username"] = "";

        Response.Redirect(Request.RawUrl);
    }
    protected void MyProfileBtnClick(object sender, EventArgs e)
    {

    }


    public void changeLoginDiv()
    {
        string sessionST = (string)Session["username"];
        string cookiesST = (string)Request.Cookies["userifnfo"]["username"];
        if ((sessionST != null && sessionST != ""))
        {
            //loginP changes;

            string newHTML = "<span id='hello' height='22px'> Hello " + sessionST + "<br />";
            newHTML += "<img id='lines' src='images/lines.png' /></span>";
            newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
            newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";
            //newHTML += "<asp:Button ID='LogOutBtn' Height='22px' Width='50px' runat='server' UseSubmitbehavior='false' CssClass='buttonC' Text='Logout' onclick='LogoutBtnClick' /></span>";


            loginP.InnerHtml = newHTML;
            loginP.Attributes.Add("style", "text-align: center;");
        }
        if ((cookiesST != null && cookiesST != ""))
        {
            //loginP changes;

            string newHTML = "<span height='22px'> Hello " + cookiesST + "<br />";
            newHTML += "<img id='lines' src='images/lines.png' /></span>";
            newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
            newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";

            loginP.InnerHtml = newHTML;
            loginP.Attributes.Add("style", "text-align: center;");
        }
    }

thanks =]

Is This A Good Question/Topic? 0
  • +

Replies To: button onclick not triggered

#2 nmg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 19-April 12

Re: button onclick not triggered

Posted 08 November 2012 - 08:21 AM

no reply..?
Was This Post Helpful? 0
  • +
  • -

#3 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6107
  • View blog
  • Posts: 23,657
  • Joined: 23-August 08

Re: button onclick not triggered

Posted 08 November 2012 - 09:19 AM

$("#LogOutBtn")


<asp:Button ID="LogButton" runat="server" UseSubmitbehavior="true" CssClass="buttonC" Text="Login" onclick="LoginBtnClick" />


Maybe?
Was This Post Helpful? 0
  • +
  • -

#4 nmg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 19-April 12

Re: button onclick not triggered

Posted 08 November 2012 - 09:46 AM

View PostJackOfAllTrades, on 08 November 2012 - 09:19 AM, said:

$("#LogOutBtn")


<asp:Button ID="LogButton" runat="server" UseSubmitbehavior="true" CssClass="buttonC" Text="Login" onclick="LoginBtnClick" />


Maybe?

well i've tried changing
//newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
                //newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";




to:

               newHTML += "<span><asp:Button ID='ProfileBtn' Height='22px' Width='50px' runat='server' UseSubmitbehavior='false' CssClass='buttonC' Text='My Profile' onclick='MyProfileBtnClick'></asp:button>";
                newHTML += "<asp:Button ID='LogOutBtn' Height='22px' Width='50px' runat='server' UseSubmitbehavior='false' CssClass='buttonC' Text='Logout' onclick='LogoutBtnClick'></asp:button></span>";

( in the asp.net part in changeLoginDiv() )

but, well, the buttons just disappear =\
no idea why.
I checked in the google chrome view code, and it says both the buttons are (1px X 16px), although in the code it says that the width and height are 50,22 like i wrote in the string.
any help..?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1