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.
What I have tried:
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>©All Rights Reserved</p>
</footer>
</div>
</form>
</body>
</html>
And here is the code for the 1st form which has the next button:
Submit an article or tip