• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 165
  • Last Modified:

ajax and Protected Sub Submit_Click not working together

Hello i am using ajax to load data entered into a textbox but i also need to use a button onclick function to enter it into the database....  but the ajax works but the button onlick does not...

Its as if the button onlcik does not get exicuted due to the ajax.

Below is the code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="members_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../Styles/Site.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" >
    $(function () {
        $(".submit").click(function () {
               var comment = $("#textbox").val();
            var dataString = '&textbox=' + comment;
            if (comment == '') {
                alert('Please Give Valid Details');
            }
            else {
                $("#flash").show();
                $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
                $.ajax({
                    type: "POST",
                    url: "Default2.aspx",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("ol#update").append(html);
                        $("ol#update li:last").fadeIn("slow");
                        $("#flash").hide();
                    }
                });
            } return false;
        });
    });


    // THIS IS THE JAVASCRIPT FOR THE TEXTBOX THAT EXPANDS ON CLICK!
				   
$(document).ready(function() {                                 
$("#button-box").hide();
$("#textbox").focus(function()
{
$("#textbox").animate({"height": "75px","width": "635px"}, "slow" );
$("#button-box").fadeIn("slow");
$(this).val('');
return false;
});
$("#close").click(function()
{
$("#textbox").animate({"height": "25px","width": "635px"}, "slow" );
$("#button-box").fadeOut("slow");
return false;
});
});

// This will count char within the textbox
$(document).ready(function () {
    $("#textbox").keyup(function () {
        var box = $(this).val();
        var count = 140 - box.length;
        if (count > 0) {
            $('#count').html(count);
            $(".submit").attr("disabled", false);
            $('#count').css("color", "black");
        }
        else {
            $('#count').html(+count);
            $('#count').css("color", "red");
            $(".submit").attr("disabled", true);
        }
    });
});    

</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 

<div >
    <br />
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
 <div id="profilenewsfeed"><div id="shoutinput" >

                       <asp:TextBox name="textbox" id="textbox" TextMode="MultiLine" runat="server"></asp:TextBox>
								<div id="button-box">
                                    <asp:Button Text="Submit" class="submit" type="submit" id="Submit" value="Submit" runat="server" />
                                    <asp:Button Text="Close" class="button" type="submit" id="close" value="Cancel" runat="server" />
           <div align="left" id="character-count">
<div id="count">140</div> 
</div></div>
  <div id="flash"></div> 
<ol id="update" class="timeline">
</ol>
     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</div>
</div>


</ContentTemplate>
  </asp:UpdatePanel>

</div>
    </form>
</body>
</html>

Open in new window


Partial Class members_Default
    Inherits System.Web.UI.Page

  
    Protected Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit.Click
        Label1.Text = "hello"
    End Sub

End Class

Open in new window


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="test_Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <li class="box">
 <div class="shoutbox">
                                <div class="shoutbox-image"> <asp:Image ID="Image4" runat="server" ImageUrl="~/images/50profiles.jpg" /></div>
                                <div class="shoutbox-other">fuehu rufhuie hreuhv euihreuh trueiurehur ehureht urehuthruthruihtuirhtuirhtuirhtur hurhuriehg iruhruiehgfruei rueghruehurrg grrgrgreg</div> 
                                <div class="shoutbox-reply">Like   Reply   <font colour="#5b5b5b" size="1pt">19min ago </FONT></div>
                               
                                </div>
</li>
    </div>
    </form>
</body>
</html>

Open in new window


0
runnerjp2005
Asked:
runnerjp2005
  • 5
  • 4
1 Solution
 
CodeCruiserCommented:
Add a "AutoPostBack=True" to button
0
 
runnerjp2005Author Commented:
it does not have that option
0
 
CodeCruiserCommented:
Did you set a breakpoint in the code behind sub to see if its being called or not?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
runnerjp2005Author Commented:
no never and i dont understand why as code seems great to do it ... but will the ajax stop this?
0
 
CodeCruiserCommented:
No. Try setting a breakpoint on the handler and see if its beeing hit. What AJAX will do is that it will stop the page from doing a full post back and you wont see browser go white and then reload the page.
0
 
runnerjp2005Author Commented:
yes it does not seem to even go to the handler... So wat will my option be now?
0
 
CodeCruiserCommented:
Change line 31 in your initial code from

} return false;

to

} return true;
0
 
runnerjp2005Author Commented:
this then stops the javascript working but then steps through the buttonclick fine.

here is the website so you can see it in action http://runningprofiles.com/test/

0
 
CodeCruiserCommented:
If you return false, the server side code wont execute. So either move all code to server side or client side.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now