Question

I have been searching on here on the web everywhere for two DAYS to find this. As of yet I have not found what I need. I am not sure if it is because I am doing something weird with AJAX or what but here is my problem if you can help please do.

I am trying to make a website that only has multiple pages but uses AJAX and JQuery to give the illusion of having one page. The URL does not change like it is supposed to but when I try to create a salesperson or login using the AJAX loaded page it does not work. It looks like it does but it does not actually submit the data input as the code behind is never hit on the separate pages. The following code is my AJAX page.

/// <reference path="jquery-1.8.2-vsdoc.js" />
$(document).ready(function () {
$('#ViewAllUsers').click(function () {
    $.ajax({
        type: 'POST',
        url: "/ViewAllUsers(test).aspx",
        success: function (result) {
            var main = $('#Main');
            main.html($('#Main', result).html());
        }
    });
});
$('#Button1').click(function () {
    $.ajax({
        type: 'POST',
        url: "/Login.aspx",
        success: function (result) {
            var main = $('#Main');
            main.html($('#Main', result).html());
        }
    });
});
$('#AddItem').click(function () {
    $.ajax({
        type: 'POST',
        url: "/admin/AddItem.aspx",
        success: function (result) {
            var main = $('#Main');
            main.html($('#Main', result).html());
        }
    });
});
$('#CreateSalesAccount').click(function () {
    $.ajax({
        type: 'POST',
        url: "/admin/CreateSalesAccount.aspx",
        success: function (result) {
            var main = $('#Main');
            main.html($('#Main', result).html());
        }
    });
});
$('#ViewAllOrderHistory').click(function () {
    $.ajax({
        type: 'POST',
        url: "/admin/ViewOrderHistory.aspx",
        success: function (result) {
            var main = $('#Main');
            main.html($('#Main', result).html());
        }
    });
});
});

This code is the admin page which is the page that uses the AJAX buttons to go to the other pages while staying on the admin page.

<%@ Page Title="" Language="vb" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="AdminPage.aspx.vb" Inherits="PyriteGoldPresentation.AdminPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../Scripts/PyriteGoldAjax.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id = "Main">
    <input type="button" id="ViewAllUsers" value="View All Users" />
    <input type="button" id="AddItem" value = "Add Item" />
    <input type="button" id="CreateSalesAccount" value="Create A Sales Account" />
    <input type="button" id="ViewAllOrderHistory" value="View Order History" />
</div>
</asp:Content>

And Finnaly here is the create salesman page and the code behind it.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="CreateSalesAccount.aspx.vb" Inherits="PyriteGoldPresentation.CreateSalesAccount"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../Scripts/PyriteGoldAjax.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="Main">
    <div style="width: 400px; margin-left:auto; margin-right:auto;">
        <div class="row">
            <h2>
                Create Sales Account
            </h2>
        </div>
        <div class="row">
            <span class="column1">
                <asp:Label ID="FirstNameLabel" runat="server" Text="First Name"/>
            </span>
            <span class="column2">
                <asp:TextBox ID="FirstNameTextField" runat="server" Width="137px"/>
            </span>
            <span class="column3">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*Required Field"
                 ControlToValidate="FirstNameTextField"/>
            </span>
        </div>
        <div class="row">
            <span class="column1">
                <asp:Label ID="LastNameLabel" runat="server" Text="Last Name"/>
            </span>
            <span class="column2">
                <asp:TextBox ID="LastNameTextBox" runat="server" Width="137px"/>
            </span>
            <span class="column3">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*Required Field" ControlToValidate="LastNameTextBox"/>
            </span>
        </div>
        <div class="row">
            <span class="column1">
                <asp:Label ID="EmailLabel" runat="server" Text="E-Mail Address"/>
            </span>
            <span class="column2">
                <asp:TextBox ID="EmailTextBox" runat="server" Width="134px"/>
            </span>
            <span class="column3">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*Required Field" ControlToValidate="EmailTextBox"/>
            </span>
        </div>
        <div class="row">
            <span class="column1">
                <asp:Label ID="VerifyEmailLabel" runat="server" Text="Verify E-Mail"/>
            </span>
            <span class="column2">
                <asp:TextBox ID="VerifyEmailTextBox" runat="server" Width="136px"/>
            </span>
            <span class="column3">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*Required Field" ControlToValidate="VerifyEmailTextBox"/>
            </span>
        </div>
        <div class="row">
            <span class="column1">
                <asp:Label ID="PasswordLabel" runat="server" Text="Password"/>
            </span>
            <span class="column2">
                <asp:TextBox ID="PasswordTextBox" runat="server" Width="138px" 
                TextMode="Password"/>
            </span>
            <span class="column3">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="*Required Field" ControlToValidate="PasswordTextBox"/>
            </span>
        </div>
        <div class="row">
            <span class="column1">
                <asp:Label ID="VerifyPasswordLabel" runat="server" Text="Verify Password"/>
            </span>
            <span class="column2">
                <asp:TextBox ID="VerifyPasswordTextBox" runat="server" Width="138px" 
                TextMode="Password"/>
            </span>
            <span class="column3">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="*Required Field" ControlToValidate="VerifyPasswordTextBox"/>
            </span>
        </div>
        <div class="row" style="color:Red;">
            <asp:CompareValidator ID="EmailValidator" runat="server" ErrorMessage="**E-mail Feilds Must Match" ControlToCompare="EmailTextBox" ControlToValidate="VerifyEmailTextBox"/><br />
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
            ErrorMessage="**E-mail Addresses must follow the pattern [e-mail]" ControlToValidate="EmailTextBox" 
            ValidationExpression="\w+([-+.']\w+[-]*)*@\w+([-.]*\w+)*\.\w+([-.]\w+)*"/><br />
            <asp:CompareValidator ID="PasswordValidator" runat="server" ErrorMessage="**Password Fields Must Match" ControlToCompare="PasswordTextBox" ControlToValidate="VerifyPasswordTextBox"/>
        </div>
        <div>
            <asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" />
        </div>
    </div>
</div>
</asp:Content>

Code Behind

Imports PyriteGoldBLL
Imports PyriteGoldModel

Public Class CreateSalesAccount
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Session("permissionValue") <> 3 Then
        Response.Redirect("~/Home.aspx")
    End If
End Sub

Protected Sub SubmitButton_Click(sender As Object, e As EventArgs) Handles SubmitButton.Click
    Dim userLogic As New UserLogic()
    Dim user As New User()
    With user
        .FirstName = FirstNameTextField.Text
        .LastName = LastNameTextBox.Text
        .Email = EmailTextBox.Text
        .Password = PasswordTextBox.Text
        .Activated = True
        .Permission = 2
    End With
    userLogic.CreateUser(user)
End Sub

End Class

Answer 1

I’m not 100% following what you’re trying to achieve.. though making a stab at this anyway 🙂

You’re trying to call an actual page in your AJAX, rather than trying to call a webmethod – which is what you need to do.. you can’t call what you’re trying to call in the way you’re trying to call it…

I would suggest you create a web service which has all the methods you need, such as login, addItem etc. These methods will need to take in the properties you need, I.E Login may need a username and password.

If you rather not create a web service then you will have to put all these methods into the same page that the ajax is on.

So for example: for your ajax login
The URL is to your web service, followed by ‘/’ followed by the method name.

$('#Button1').click(function () {
$.ajax({
    type: 'POST',
    url: "/MyWebservice.asmx/Login",
    data: "{'username':'" + YourUserNameVar + "', 'password':'" + YourPasswordVar +"'}",
    success: function (result) {
        var main = $('#Main');
        main.html($('#Main', result).html());
    }
});

});

The method to receive this call would look something like:

     <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Function Login(ByVal username As String, ByVal password as string) As Object

       '' Do your login here and return whatever it is you need to return
       '' i have used 'Object' for this function by way of example

    End Function

This answer could of course be fleshed out with far more info, though this is more intended to get you started and on the right path.

UPDATE:

You need to learn a little about consuming web methods/web services with AJAX. Have a look at this simple tutorial. shows all the steps you need to get started 🙂