web page freezes after ajax post
Hi experts,
I came across this weird issue that page is not responding. I am using bootstrap table js and css files along with the default boostrap css and js.
I am trying to display result into bootrap table via ajax request. For some reason after I submit the request, I can see the result in the table but I wasn't able to make my switch work (switch is based upon bootstrap switch js and css library) and I cannot click on my menu bar either (not responding with dropdown list).
Here is my code:
***************
HTML:
***************
******************
Javascript
*****************
If I re-type in the product that I want to search into the search box again then the entire page works again. It is more like it works for every other inputs.
I came across this weird issue that page is not responding. I am using bootstrap table js and css files along with the default boostrap css and js.
I am trying to display result into bootrap table via ajax request. For some reason after I submit the request, I can see the result in the table but I wasn't able to make my switch work (switch is based upon bootstrap switch js and css library) and I cannot click on my menu bar either (not responding with dropdown list).
Here is my code:
***************
HTML:
***************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>PowerInnex Admin</title>
<!--Load the AJAX API-->
<!--
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart', 'bar', 'geochart', 'timeline']});
</script> -->
<!-- Bootstrap -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-switch.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<?php if(isset($_SESSION["admin_css"])) echo '<link href="css/'.$_SESSION["admin_css"].'.css" rel="stylesheet">'; ?>
</head>
<body>
<?php
require_once 'admin_header.php';
require_once 'admin_navbar.php';
if($_SESSION['admin_view'] == 'admin_dashboard')
{
require_once 'admin_sidebar.php';
}
require_once 'admin_content.php';
require_once 'admin_footer.php';
?>
<!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- jQuery (for Bootstrap plugin modules) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap-table.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-switch.min.js"></script>
<script>
/*
* this function is for INNEX INC <a> link only as directed back to admin_dashboard page
*/
/*
function direct(){
$.ajax({
type: "POST",
url: 'admin_index.php',
data: {controller: "admin_dashboard", template: "0"}
});
}*/
</script>
<?php
if(isset($_SESSION["admin_js"]))
{
echo '<script src="js/'.$_SESSION['admin_js'].'.js"></script>';
echo '<script src="js/admin/admin_navbar.js"></script>';
echo '<script src="js/admin/admin_logout.js"></script>';
}else{
echo '<script src="js/admin/admin_login.js"></script>';
}
?>
</body>
</html>******************
Javascript
*****************
$("#sku_form").submit(function(event){
event.preventDefault();
var skuLoc = $("#selectedSKULOC").val();
var input_type = $('#input_type').prop('checked');
if(input_type)
{
input_type = 'PRODUCT';
}else{
input_type = 'LOCATION';
}
var control = $("#skuLocController").val();
console.log(skuLoc);
console.log(input_type);
console.log(control);
var skuLocData = {skuloc: skuLoc, select: input_type, controller: control};
$.ajax({
type: "POST",
url: 'admin_index.php',
data: skuLocData
}).done(function(data, status){
$('body').html(data);
}).fail(function(jqXHR, stat, error) {
alert(stat + ": " + error);
});
});If I re-type in the product that I want to search into the search box again then the entire page works again. It is more like it works for every other inputs.
leakim971
could you provide a link to see your page to test it ?
ASKER
Hi Leak!
Sorry for the previous post. Let me re-phrase it better.
After testing out the webpage, This is my finding.
When I called the ajax post with this method by storing the return result into a data vairable and pass it over to <body> tag with this code: $('body').html(data);
I can see the html result page that has this:
document.open();
document.write(data);
document.close();
then the result for <head> tag section will not be in the body then I will not have any issues.
My question is that how can I omit the <head> tag been input into the <body> by modifying the code $('body).html(data)?
1. is it possible that I can grab just the <body> tag from the variable data? If so how can it be done?
2. If not possible what will be the alternative solution? Thanks.
Sorry for the previous post. Let me re-phrase it better.
After testing out the webpage, This is my finding.
When I called the ajax post with this method by storing the return result into a data vairable and pass it over to <body> tag with this code: $('body').html(data);
I can see the html result page that has this:
<html>
<header>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>PowerInnex Admin</title>
<!--Load the AJAX API-->
<!--
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart', 'bar', 'geochart', 'timeline']});
</script> -->
<!-- Bootstrap -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-switch.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<?php if(isset($_SESSION["admin_css"])) echo '<link href="css/'.$_SESSION["admin_css"].'.css" rel="stylesheet">'; ?>
</header>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>PowerInnex Admin</title>
<!--Load the AJAX API-->
<!--
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart', 'bar', 'geochart', 'timeline']});
</script> -->
<!-- Bootstrap -->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-switch.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<?php if(isset($_SESSION["admin_css"])) echo '<link href="css/'.$_SESSION["admin_css"].'.css" rel="stylesheet">'; ?>
........
</body>
</html>document.open();
document.write(data);
document.close();
then the result for <head> tag section will not be in the body then I will not have any issues.
My question is that how can I omit the <head> tag been input into the <body> by modifying the code $('body).html(data)?
1. is it possible that I can grab just the <body> tag from the variable data? If so how can it be done?
2. If not possible what will be the alternative solution? Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Leak!
The reason that I want to reload the entire page is due to that fact that I entire page has to be refreshed because the divs for header section, footer section, navbar section, and of course the content section can be changed any time. At any moment, the administrator/user can change the content in any of those sections. Say I have 8 options in the menu bar but admin can either increase or decrease the options of the user. So when user click a button or request for a data, the entire page can be refreshed and new options will be loaded properly instead of having user to log off then back in.
My initial design was based upon setting up a <div> for the returning result. This will not refresh the header, navbar, footer or even the body content cuz the <div> was only a part of the body content. This is why I used ajax from the very beginning cuz it works well when returning the data.
Do u have a better suggestion to solve the above requirements? My idea was to change a little code as possible with just grabb'n the <body> tag from the return data because I have the admin_index which is the entire page template (my 1st question has the admin_index template) and the <body> tag has all the section (header, content, navbar, footer) . Once I can just reload the <body> (while excluding the <head> into the <body>) then my result will be correct. Not sure if this concept is the proper way to do it. Reason I do it this way is based off the document.write() which I actually rewrite the entire page and it works. (If I use $('body').html(data) then the return result does not work cuz I will get the exactly same .css file from the <head> into the <body> and that cause issues with the page.
Let me know. Thanks ^^
The reason that I want to reload the entire page is due to that fact that I entire page has to be refreshed because the divs for header section, footer section, navbar section, and of course the content section can be changed any time. At any moment, the administrator/user can change the content in any of those sections. Say I have 8 options in the menu bar but admin can either increase or decrease the options of the user. So when user click a button or request for a data, the entire page can be refreshed and new options will be loaded properly instead of having user to log off then back in.
My initial design was based upon setting up a <div> for the returning result. This will not refresh the header, navbar, footer or even the body content cuz the <div> was only a part of the body content. This is why I used ajax from the very beginning cuz it works well when returning the data.
Do u have a better suggestion to solve the above requirements? My idea was to change a little code as possible with just grabb'n the <body> tag from the return data because I have the admin_index which is the entire page template (my 1st question has the admin_index template) and the <body> tag has all the section (header, content, navbar, footer) . Once I can just reload the <body> (while excluding the <head> into the <body>) then my result will be correct. Not sure if this concept is the proper way to do it. Reason I do it this way is based off the document.write() which I actually rewrite the entire page and it works. (If I use $('body').html(data) then the return result does not work cuz I will get the exactly same .css file from the <head> into the <body> and that cause issues with the page.
Let me know. Thanks ^^
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
right on Leak! Single-page_application is what I need cuz I am trying to create a web app similar to desktop app.
ASKER
Thanks Leaks! you are right on the spot!