0 Replies - 778 Views - Last Post: 30 October 2016 - 07:59 AM Rate Topic: -----

#1 brunoearth   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 30-October 16

loading webpage without post back using asp.net and ajax not working?

Posted 30 October 2016 - 07:59 AM

To summarize what I'm trying to do, I've created two forms in my website that when the user clicked the next or prev button, it should supposedly transition from one form to the other without post back. But the problem is when I click next, it doesn't do anything. I have already targeted the respective id's and url in my ajax code but its still not working. As of now, I'm using ajax for those non-post backs and my website is built in asp.net. Hope you guys can help me with this one.

Here is the code below for ajax (loader.js):

$(document).ready(function () {
$.ajaxSetup({
    cache: false,
    dataType: "aspx",
    error: function (xhr, status, error) {
        alert('An error occured:' + error);
    },
    timeout: 30000,
    type: "GET",
    beforeSend: function () {
        console.log('In Ajax complete function');
    }
});
$("#btnNext").click(function (e) {
    e.preventDefault();
    $.ajax({
        url: "Pages/CreateNewItems2.aspx",
        success: function (data) {
            $("#ContentPlaceHolder1").aspx("").append(data);
        }
    });
});
});


Here is the masterpage for my website:

<%@ Master Language="C#" AutoEventWireup="true"    CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

  <!DOCTYPE html>

   <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

   <script src="../Javascript/jquery-1.11.2.min.js"></script>
   <script src="../Javascript/loader.js"></script>

   <link rel="stylesheet" href="~/Styles/jquery.bxslider.css"/>
   <link rel="stylesheet" href="~/Styles/StyleSheet.css"/>
   <link rel="stylesheet" href="~/Styles/font-awesome.min.css"/>
   <link rel="shortcut icon" type="image/png" href="~/Images/rockSign.png"/>

    <style type="text/css">
    .auto-style2 {
        height: 298px;
    }
   </style>

   </head>
   <body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <header id="main_header">
            <div id="callout">
                <h2>☎ 111222333</h2>
                <p>Michigan State Kawasaki Iceland</p>
            </div>
            <h1>MUSIC STORE</h1>
        </header>

        <div class="clearfix"></div>

        <nav id="nav_menu">
            <ul id="nav">
                <li><a href="~/Pages/Home.aspx" runat="server">HOME</a></li>
                <li><a href="#">INSTRUMENTS</a>
                    <ul class="sub-menu">
                        <li><a href="~/Pages/GuitarBrands.aspx" runat="server">ELECTRIC GUITARS</a></li>
                        <li><a href="#">BASS GUITARS</a></li>
                        <li><a href="#">DRUMS</a></li>
                    </ul>
                </li>
                <li><a href="#">AMPLIFIERS</a></li>
                <li><a href="#">ACCESSORIES</a></li>
                <li><a href="#">FEATURED ARTISTS</a></li>
                <li><a href="#"><img src="../Images/cog.png" /></a>
                    <ul class="cog_submenu">
                        <li><a href="~/Pages/NewBrands.aspx" runat="server">CREATE NEW BRAND</a></li>
                        <li><a href="#">USE EXISTING BRAND</a></li>
                        <li><a href="~/Pages/OverviewData.aspx" runat="server">DATA OVERVIEW</a></li>
                    </ul>
               </li>
       </ul>
        </nav>



        <div id="content_area">




            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>



        </div>
        <div class="clearfix"></div>

        <footer>
            <p>&copy;All Rights Reserved</p>
        </footer>
    </div>
</form>
 </body>
 </html>


And here is the code for the 1st form which has the next button:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageCMS.master" AutoEventWireup="true" CodeFile="NewBrands.aspx.cs" Inherits="Pages_NewBrands" %>

 <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h3>Create New Brand(Step 1 of 2):</h3>
<table cellspacing="15" class="brandsTable">
    <tr>
        <td style="width: 160px; height: 37px;">

            <strong>Brand Type:</strong></td>

        <td style="height: 37px">

            <asp:TextBox ID="brandType" runat="server" BackColor="#FFFF66" BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px"></asp:TextBox>

        </td>
    </tr>

    <tr>
        <td style="width: 160px; height: 37px;">

            <strong>Brand Name:</strong></td>

        <td style="height: 37px">

            <asp:TextBox ID="brandName" runat="server" BackColor="#FFFF66" BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px"></asp:TextBox>

        </td>
    </tr>

    <tr>
        <td style="width: 160px">

            <strong>Brand Image:</strong></td>

        <td>

            <asp:DropDownList ID="brandImage" runat="server" Width="300px">
            </asp:DropDownList>
            <br />
            <asp:FileUpload ID="brandFileUpload" runat="server" />
            <asp:Button ID="brandUploadImage" runat="server" Text="Upload Image" onclick="brandUploadImage_Click" />
        </td>
    </tr>




</table>

<asp:Label ID="lblResult" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnNext" runat="server" Text="Next" />
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />


 </asp:Content>


And for the 2nd form, I will not include the code here since it is not necessary. The name for the 2nd form is CreateNewItems2.aspx which is located in my Pages folder.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1