dynamic page loading in div content and form submission
Hi I have the following code, where everylink opens in the ajax content div
now the above function is called on load of the dom
i have a form in one of the pages like this
when i submit it, it does nothing, i had code written for this, but i don't know where it does go, on sever side i did checked and form scope is empty, how do i fix it, i am lost now
function LoadAjaxContent(url){
$('.preloader').show();
$.ajax({
mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file
url: url,
type: 'GET',
success: function(data) {
$('#ajax-content').html(data);
$('.preloader').hide();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
},
dataType: "html",
async: false
});
}now the above function is called on load of the dom
$(document).ready(function () {
$('body').on('click', '.show-sidebar', function (e) {
e.preventDefault();
$('div#main').toggleClass('sidebar-show');
setTimeout(MessagesMenuWidth, 250);
});
var ajax_url = location.hash.replace(/^#/, '');
if (ajax_url.length < 1) {
ajax_url = 'ajax/_dashboard.cfm';
}
LoadAjaxContent(ajax_url);
$('.main-menu').on('click', 'a', function (e) {
var parents = $(this).parents('li');
var li = $(this).closest('li.dropdown');
var another_items = $('.main-menu li').not(parents);
another_items.find('a').removeClass('active');
another_items.find('a').removeClass('active-parent');
if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
$(this).addClass('active-parent');
var current = $(this).next();
if (current.is(':visible')) {
li.find("ul.dropdown-menu").slideUp('fast');
li.find("ul.dropdown-menu a").removeClass('active')
}
else {
another_items.find("ul.dropdown-menu").slideUp('fast');
current.slideDown('fast');
}
}
else {
if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
var pre = $(this).closest('ul.dropdown-menu');
pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
}
}
if ($(this).hasClass('active') == false) {
$(this).parents("ul.dropdown-menu").find('a').removeClass('active');
$(this).addClass('active')
}
if ($(this).hasClass('ajax-link')) {
e.preventDefault();
if ($(this).hasClass('add-full')) {
$('#content').addClass('full-content');
}
else {
$('#content').removeClass('full-content');
}
var url = $(this).attr('href');
window.location.hash = url;
LoadAjaxContent(url);
}
if ($(this).attr('href') == '#') {
e.preventDefault();
}
});
var height = window.innerHeight - 49;
$('#main').css('min-height', height)
.on('click', '.expand-link', function (e) {
var body = $('body');
e.preventDefault();
var box = $(this).closest('div.box');
var button = $(this).find('i');
button.toggleClass('fa-expand').toggleClass('fa-compress');
box.toggleClass('expanded');
body.toggleClass('body-expanded');
var timeout = 0;
if (body.hasClass('body-expanded')) {
timeout = 100;
}
setTimeout(function () {
box.toggleClass('expanded-padding');
}, timeout);
setTimeout(function () {
box.resize();
box.find('[id^=map-]').resize();
}, timeout + 50);
})
.on('click', '.collapse-link', function (e) {
e.preventDefault();
var box = $(this).closest('div.box');
var button = $(this).find('i');
var content = box.find('div.box-content');
content.slideToggle('fast');
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
setTimeout(function () {
box.resize();
box.find('[id^=map-]').resize();
}, 50);
})
.on('click', '.close-link', function (e) {
e.preventDefault();
var content = $(this).closest('div.box');
content.remove();
});
$('#locked-screen').on('click', function (e) {
e.preventDefault();
$('body').addClass('body-screensaver');
$('#screensaver').addClass("show");
ScreenSaver();
});
$('body').on('click', 'a.close-link', function(e){
e.preventDefault();
CloseModalBox();
});
$('#top-panel').on('click','a', function(e){
if ($(this).hasClass('ajax-link')) {
e.preventDefault();
if ($(this).hasClass('add-full')) {
$('#content').addClass('full-content');
}
else {
$('#content').removeClass('full-content');
}
var url = $(this).attr('href');
window.location.hash = url;
LoadAjaxContent(url);
}
});
});i have a form in one of the pages like this
<form name="form1" id="form1">
<div class="well">
<div class="row show-grid-forms">
<div class="col-sm-5">
<label class="masterLabel">Start Date</label><br>
<select name="start_month" id="start_month" class="form-control width200">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11" selected="selected">November</option>
<option value="12">December</option>
</select>
<select name="start_day" id="start_day" class="form-control width50">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="start_year" id="start_year" class="form-control width100">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
</select>
</div>
<div class="col-sm-5">
<label class="masterLabel">Start Date</label><br>
<select name="end_month" id="end_month" class="form-control width200">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11" selected="selected">November</option>
<option value="12">December</option>
</select>
<select name="end_day" id="end_day" class="form-control width50">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19" selected="selected">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="end_year" id="end_year" class="form-control width100">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
</select>
</div>
<div class="col-sm-2">
<input name="sbmtbtn" type="submit" class="btn btn-primary margintop20" value="Update Report">
</div>
</div>
</div>
</form>when i submit it, it does nothing, i had code written for this, but i don't know where it does go, on sever side i did checked and form scope is empty, how do i fix it, i am lost now
$('#ajax-content').load(da
ASKER
create the file _dashboard.cfm - put the form code inside it which i shared
If I understand you correctly, you want to load to form form AJAX on DOM load?
See code below and working demo here
See code below and working demo here
<!DOCTYPE html>
<html>
<head>
<title>Q-28860480</title>
<link rel="stylesheet" href="/assets/bootstrap-3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row content" data-role="content">
<div class="col-md-8 col-md-offset-1" id="ajax-content">
</div>
</div>
</div>
<footer data-role="footer">
</footer>
<script src="/assets/js/jquery/jquery-1.11.1.min.js"></script>
<script src="/assets/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script>
// $(function() {
$(document).ready(function () {
function LoadAjaxContent(url){
$('.preloader').show();
$.ajax({
mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file
url: url,
type: 'GET',
success: function(data) {
$('#ajax-content').html(data);
$('.preloader').hide();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
},
dataType: "html",
async: false
});
}
$('body').on('click', '.show-sidebar', function (e) {
e.preventDefault();
$('div#main').toggleClass('sidebar-show');
setTimeout(MessagesMenuWidth, 250);
});
var ajax_url = location.hash.replace(/^#/, '');
if (ajax_url.length < 1) {
ajax_url = 'ajax.cfm';
}
LoadAjaxContent(ajax_url);
$('.main-menu').on('click', 'a', function (e) {
var parents = $(this).parents('li');
var li = $(this).closest('li.dropdown');
var another_items = $('.main-menu li').not(parents);
another_items.find('a').removeClass('active');
another_items.find('a').removeClass('active-parent');
if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
$(this).addClass('active-parent');
var current = $(this).next();
if (current.is(':visible')) {
li.find("ul.dropdown-menu").slideUp('fast');
li.find("ul.dropdown-menu a").removeClass('active')
}
else {
another_items.find("ul.dropdown-menu").slideUp('fast');
current.slideDown('fast');
}
}
else {
if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
var pre = $(this).closest('ul.dropdown-menu');
pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
}
}
if ($(this).hasClass('active') == false) {
$(this).parents("ul.dropdown-menu").find('a').removeClass('active');
$(this).addClass('active')
}
if ($(this).hasClass('ajax-link')) {
e.preventDefault();
if ($(this).hasClass('add-full')) {
$('#content').addClass('full-content');
}
else {
$('#content').removeClass('full-content');
}
var url = $(this).attr('href');
window.location.hash = url;
LoadAjaxContent(url);
}
if ($(this).attr('href') == '#') {
e.preventDefault();
}
});
var height = window.innerHeight - 49;
$('#main').css('min-height', height)
.on('click', '.expand-link', function (e) {
var body = $('body');
e.preventDefault();
var box = $(this).closest('div.box');
var button = $(this).find('i');
button.toggleClass('fa-expand').toggleClass('fa-compress');
box.toggleClass('expanded');
body.toggleClass('body-expanded');
var timeout = 0;
if (body.hasClass('body-expanded')) {
timeout = 100;
}
setTimeout(function () {
box.toggleClass('expanded-padding');
}, timeout);
setTimeout(function () {
box.resize();
box.find('[id^=map-]').resize();
}, timeout + 50);
})
.on('click', '.collapse-link', function (e) {
e.preventDefault();
var box = $(this).closest('div.box');
var button = $(this).find('i');
var content = box.find('div.box-content');
content.slideToggle('fast');
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
setTimeout(function () {
box.resize();
box.find('[id^=map-]').resize();
}, 50);
})
.on('click', '.close-link', function (e) {
e.preventDefault();
var content = $(this).closest('div.box');
content.remove();
});
$('#locked-screen').on('click', function (e) {
e.preventDefault();
$('body').addClass('body-screensaver');
$('#screensaver').addClass("show");
ScreenSaver();
});
$('body').on('click', 'a.close-link', function(e){
e.preventDefault();
CloseModalBox();
});
$('#top-panel').on('click','a', function(e){
if ($(this).hasClass('ajax-link')) {
e.preventDefault();
if ($(this).hasClass('add-full')) {
$('#content').addClass('full-content');
}
else {
$('#content').removeClass('full-content');
}
var url = $(this).attr('href');
window.location.hash = url;
LoadAjaxContent(url);
}
});
});
</script>
</body>
</html>
I understand what you are trying to do but here is what you are missing (or have not shown us)
The form does not have an action so it will be submitted to the page that it is loaded in - is that correct?
If you are wanting to submit your form via AJAX then you would need to have an event handler for the form.submit or submit button click - I can't see either of those.
Just to confirm the problem - you can see the form but when you submit it nothing happens?
The form does not have an action so it will be submitted to the page that it is loaded in - is that correct?
If you are wanting to submit your form via AJAX then you would need to have an event handler for the form.submit or submit button click - I can't see either of those.
Just to confirm the problem - you can see the form but when you submit it nothing happens?
ASKER
even if i specify something in action suppose i mentioned as:
<form name="form1" id="form1" action="#ajax/_dashboard.c
it does nothing, it just reloads the page and shows me no form structure, i am confused if i need to send the form data how do i send with ajax
<form name="form1" id="form1" action="#ajax/_dashboard.c
it does nothing, it just reloads the page and shows me no form structure, i am confused if i need to send the form data how do i send with ajax
This is the basic jQuery template for submitting a Form via AJAX.
$(function() {
...
$('#form1').submit(function() {
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
success: function(resp) {
// do something with the response here
},
error: function(jq, status, err) {
// handle failed connect here
}
})
return false;
});
});ASKER
NOPES, IT DID NOT WORKED THAT WAY
NOPES, IT DID NOT WORKED THAT WAYThat is not a helpful post - the code pasted is a template - as we don't have your full listing you would need to adapt it to your specific requirement but that code is correct and it outlines the way to submit a form via AJAX.
You will need to give us more information about how it did not work for you errors etc as well as a context - how did you implement it.
Unfortunately without any information to go on we cannot take this forward until you provide more detailed information.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Can you post the contents of the file "ajax/_dashboard.cfm"