86
rated 0 times
[
88]
[
2]
/ answers: 1 / hits: 7147
/ 10 Years ago, mon, november 3, 2014, 12:00:00
I am working on a bootsrap3 template, which is Ajax based.
My index file has a leftside menu and a conent block middle of the page, every time I click on a subelement of this left menu, an Ajax laod will put the page content in this block(ajax-content).*
Any time I call any page, my URL normally looks something like this /index.php#page-one.php, except when the page contains form submission.
The Problem happens when I add an action attribute (acion=page-one.php) to my form tag.
After the form submission my URL turns to /page-one.php ;
consequently I get a white page containing the page-one.php elements whitout any CSS styling and of course no index-file's elements.
What is the correct and best way to come a cross this issue?
index.php:
<body>
<!--Start Container-->
<div id=main class=container-fluid>
<div class=row>
<div id=sidebar-left class=col-xs-2 col-sm-2>
<ul class=nav main-menu>
<li class=dropdown>
<a id=configuration href=# class=dropdown-toggle>
<i class=fa fa-gears></i>
<span class=hidden-xs>Menu-element</span>
</a>
<ul class=dropdown-menu>
<li><a class=ajax-link href=page-one.php>Menu-Subelement-one</a></li>
<li><a class=ajax-link href=page-wo.php>Menu-Subelement-two</a></li>
</ul>
</li>
</ul> <!-- end of main-menu-->
</div>
<!--Start Content-->
<div id=content class=col-xs-12 col-sm-10>
<div class=preloader>
<img src=img.gif class=loader alt=preloader/>
</div>
<!--inside this div a short description/introduction(simple text inside a <p> tag) about the Menu-element will be shown-->
<div id=content-header></div>
<!--inside this div the page content of the Menu-subelement will be shown-->
<div id=ajax-content></div>
</div>
<!--End Content-->
</div>
</div>
<!--End Container-->
<script src=plugins/jquery/jquery-2.1.0.min.js></script>
<script src=plugins/jquery-ui/jquery-ui.min.js></script>
<script src=plugin/jquery.form.js></script>
<script src=js/script.js></script>
And here is my script.js:
//
// Function for load content from url and put in $('.ajax-content') block
//
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
});
}
//////////////////////////////////////////////////////
document.ready
//////////////////////////////////////////////////////
$(document).ready(function () {
var ajax_url = location.hash.replace(/^#/, '');
if (ajax_url.length < 1) {
ajax_url = 'home.php';
}
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();
}
});
$('#formSubmit').ajaxForm();
});
page-one.php:
<!--some php code here-->
<form class=validateForm id=formSubmit action=page-one.php method=get>
<div class=form-group>
<label>Username</label>
<input type=text class=form-control name=username />
</div>
<div class=form-group>
<div class=col-sm-offset-5 col-sm-8>
<button type=submit class=btn btn-primary btn-label-left>
<span><i class=fa fa-save></i> Save</span>
</button>
</div>
</div>
</form>
Thanks!
More From » php
