[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 220
  • Last Modified:

using javascript and update panels

Below is my code so far... i have experience issues where i need to use an update panel so i can use the button to update the database as well as use the ajax.

Without the update panel the page refreshes and means the ajax is point less.

But with the updatepanel it stops the javascript from working.

how can i get round this??

<%@ 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").live("click", function () {
            alert("ok1");
               var comment = $("#textbox").val();
            var dataString = '&textbox=' + comment;
           if (comment == '') {
                alert('Please Give Valid Details');
            }
            else {
                alert("ok2");
                $("#flash").show();
                alert("ok3");
                $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
                alert("ok4")
                $.ajax({
                    type: "POST",
                    url: "Default2.aspx",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        alert("ok5");
                        $("ol#update").append(html);
                        $("ol#update li:last").fadeIn("slow");
                        $("#flash").hide();
                    }
                });
            } return true; 
        });
    });


    // THIS IS THE JAVASCRIPT FOR THE TEXTBOX THAT EXPANDS ON CLICK!

    $(document).ready(function () {
        alert("ok6")                             
$("#button-box").hide();
$("#textbox").focus(function() {
    alert("ok7") 
$("#textbox").animate({"height": "75px","width": "635px"}, "slow" );
$("#button-box").fadeIn("slow");
$(this).val('');
alert("ok8") 
return false;
});
$("#close").click(function() {
    alert("ok9") 
$("#textbox").animate({"height": "25px","width": "635px"}, "slow" );
$("#button-box").fadeOut("slow");
alert("ok10") 
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>
 <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>
</div>
    </form>
</body>
</html>

Open in new window

0
runnerjp2005
Asked:
runnerjp2005
  • 3
  • 2
1 Solution
 
CodeCruiserCommented:
I think you should use a JQuery AJAX call to save the record to DB without going into code behind

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
0
 
runnerjp2005Author Commented:
ok so rather then use the vb.net on the page call anouther page via javascript ot then run the coe their>

basicly like i allready do when calling the page?
0
 
CodeCruiserCommented:
You can either use a separate page or you can call a Web method within the same page but with JQuery AJAX instead of updatepanel control.
0
 
runnerjp2005Author Commented:
does this mean anything on that page i add later will need to run via ajax and i wouldnt be able to add an update panel anywhere else ?
0
 
CodeCruiserCommented:
Probably. Or you may have to only keep this button out of update panel as it is doing stuff on both client side and server side.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now