dynamic page loading in div content and form submission

Hi I have the following code, where everylink opens in the ajax content div

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
	});
}

Open in new window


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);
		}
	});
});

Open in new window


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>

Open in new window


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
LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MurfurFull Stack DeveloperCommented:
In the first instance, I get NOT FOUND  for the target AJAX url.
Can you post the contents of the file "ajax/_dashboard.cfm"
sajayj2009Commented:
$('#ajax-content').load(data);
Gurpreet Singh RandhawaCEOAuthor Commented:
create the file _dashboard.cfm - put the form code inside it which i shared
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

MurfurFull Stack DeveloperCommented:
If I understand you correctly, you want to load to form form AJAX on DOM load?
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>

Open in new window

Julian HansenCommented:
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?
Gurpreet Singh RandhawaCEOAuthor Commented:
even if i specify something in action suppose i mentioned as:


<form name="form1" id="form1" action="#ajax/_dashboard.cfm">

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
Julian HansenCommented:
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;
  });
});

Open in new window

Gurpreet Singh RandhawaCEOAuthor Commented:
NOPES, IT DID NOT WORKED THAT WAY
Julian HansenCommented:
NOPES, IT DID NOT WORKED THAT WAY
That 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.
Julian HansenCommented:
Here is a sample that uses the posted code verbatim with simple addition to dump the response to the screen.
        <form class="form" id="form1" action="reflect.php">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="fullname" />
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" name="email" />
          </div>
          <div class="text-right">
            <input type="submit" class="btn btn-default" value="Send" />
          </div>
        </form>
      <h2>Response from server</h2>
      <div id="response"></div>

Open in new window

JQuery
<script>
$(function() {
  $('#form1').submit(function() {
      $.ajax({
          url: $(this).attr('action'),
          type: 'post',
          data: $(this).serialize(),
          success: function(resp) {
      $('#response').html(resp);
              // do something with the response here
          },
          error: function(jq, status, err) {
              // handle failed connect here
          }
      })
      return false;
  });
});
</script>

Open in new window

Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.