How to make a pop window when pressed button using Jquery - javascript

I have already raised this question with and I have found the answers as well here.
How to make an button to make a confirmation box to do a task in Jquery and HTML
I could see the answers are correct as in the output. But whenever I used this same code to my existing code I could not see the popup window and my test php script is not running. Can someone show what interfered here in my original code?
My Code...
<?php
// Initialize the session
session_start();
date_default_timezone_set("Asia/Colombo");//set you countary name from below timezone list
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite#4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed#6"></script>
</head>
<body style=" background-color: #F0F8FF">
<div class="wrapper">
<div class="sidebar">
<h2>Dashboard</h2>
</div>
<div class="main_content">
<div id="loading" >
<img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
</div>
<?php
include "adminHeader.php";
?>
<div class="mytabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Summary</li>
<li>SSW KPI Monitoring</li>
<li>SBC KPI Monitoring</li>
<li>CTB KPI Monitoring</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</div>
<div class="mytabs">
<div class="tab-content">
<div class="tab-pane active" id="summarytab">Write something for home tab</div>
<div class="tab-pane" id="SSWtab">
<div class="card">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<button type='button' id ="btnnew">submit</button>
<p></p>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="SBCtab">C# is also a programming language</div>
<div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(window).load(function() {
$('#loading').hide();
});
$("#btnnew").confirm({
title: "Delete confirmation",
text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
console.log('AJAX request in progress...');
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
$("p").text(data);
},
complete: function() {
$('#loading').hide();
}
});
},
cancel: function(button) {
console.log("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
</script>


replace $(document).load(function() {});
with
$(function() {}); or $(document).on('load', function() {})
Because .load() is Deprecated, See the Bug #11733
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite#4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed#6"></script>
</head>
<body style=" background-color: #F0F8FF">
<div class="wrapper">
<div class="sidebar">
<h2>Dashboard</h2>
</div>
<div class="main_content">
<div id="loading">
<img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
</div>
<?php
include "adminHeader.php";
?>
<div class="mytabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Summary</li>
<li>SSW KPI Monitoring</li>
<li>SBC KPI Monitoring</li>
<li>CTB KPI Monitoring</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</div>
<div class="mytabs">
<div class="tab-content">
<div class="tab-pane active" id="summarytab">Write something for home tab</div>
<div class="tab-pane" id="SSWtab">
<div class="card">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<button type='button' id="btnnew">submit</button>
<p></p>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="SBCtab">C# is also a programming language</div>
<div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function() {
$('#loading').hide();
})
$("#btnnew").confirm({
title: "Delete confirmation",
text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
console.log('AJAX request in progress...');
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
$("p").text(data);
},
complete: function() {
$('#loading').hide();
}
});
},
cancel: function(button) {
console.log("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
</script>

Related

<script type="text/javascript"> failed to load Resourse for internal script

Is the script tag with no src attribute is wrong?
I have written this script tag
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
I am getting this error on console Failed to load resource: the server responded with a status of 404 (Not Found). I am unable to understand what is the problem. I have included the jquery core library on header of page. Also there are some other javascripts codes that are included bfore this code but they did not throws any error. I have also attached a screenshot of the console.
Update 1
I tried after removing the type attribute. nothing happens :( .
I have included the jquery library version 1.9.1 in header.
Update 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Bharat">
<title>::Eduesy:: </title>
<meta property="og:title" content="Bharat">
<meta property="og:description" content="Bharat">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/web.css?1.0" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/app.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/tooltip.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/custom.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/jquery-1.9.1.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/raven.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/vendor.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/libs.all.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/app.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tooltip.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tpr.web.min.js"></script>
<script src="http://eduesy.fsas.co.in/js/student/chartist.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".header").addClass('header-fix');
}else{
jQuery(".header").removeClass('header-fix');
}
});
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".row-blue").addClass('header-fix');
}else{
jQuery(".row-blue").removeClass('header-fix');
}
});
});
</script>
</head>
<body>
<div class="header">
<header>
<div class="cf">
<div class="pTopHeader_dropdown pTopHeader_userDropdown non-selectable fr js-user-dropdown">
<a class="pTopHeader_dropdown_trigger pTopHeader_userDropdown_trigger js-trigger">
<span class="profilename">Welcome Chandu</span> <img class="pTopHeader_userDropdown_thumb " alt="" src="http://eduesy.fsas.co.in/uploadedFiles/student/IMG_20150412_182136 (2) - Copy.jpg"/>
</a>
<ul class="pTopHeader_dropdown_menu pTopHeader_dropdown_menu-right pTopHeader_userDropdown_menu js-dropdown">
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Profile
</li>
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Switch Course
</li>
<li>
<span class="fa fa-power-off pTopHeader_dropdown_menu_icon"></span>Logout
</li>
</ul>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide">
<a role="button" tabindex="0" class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Contact Us</a>
<div class="pTopHeader_contactUpWrapper_tooltip">
<div class="contactTooltip">
<div class="cf">
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-feedback"></div>
<div class="contactTooltip_title">Share Feedback</div>
<div class="contactTooltip_subtitle">Share your feedback for us. We are continuously working to improve your experience.</div>
<div class="contactTooltip_callUsNo">abc#xyz.com</div>
</div>
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-callus"></div>
<div class="contactTooltip_title">Call us</div>
<div class="contactTooltip_subtitle">We are happy to hear from you. We are available from 9am to 6pm on all days.</div>
<div class="contactTooltip_callUsNo">+91 - 1800 123 456</div>
</div>
</div>
<div class="contactTooltip_footer">
<span class="contactTooltip_footer_mapIcon fa fa-map-marker" aria-hidden="true"></span>
<div class="contactTooltip_footer_content">
<div class="contactTooltip_footer_title">Eduesy Online Education </div>
<div class="contactTooltip_footer_text">Mumbai - 400076, India</div>
</div>
</div>
</div>
</div>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide notification">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white"><i class="fa fa-bell" aria-hidden="true"></i><span>0</span></a>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide btn-buy">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Buy</a>
</div>
</div>
</header>
<div class="logo">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="mainSidebar_logoBlock_logo -ajaxify" title="EduEsy" style="width: 176px !important">
<div class="mainSidebar_logoBlock_logo_img" style="background-image: url(http://eduesy.fsas.co.in/images/logo.png)"></div>
</a>
</div>
<div class="mobileMenu">
<div class="mobileMenu_fallbackHeader"></div>
<div class="mobileMenu_hamburger js-hamburger-menu">
<div class="mobileMenu_hamburger_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="row-blue">
<div class="pull-left">
Admission Taken Date: 29/05/2017
</div>
<div class="pull-right">
Student ID: EDUESY116 <span>|</span> Package Valid till: 25/12/2017
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.class_slider').click(function(){
jQuery('[name=product_id]').val(jQuery(this).data('product_id'));
jQuery('[name=product_type]').val(jQuery(this).data('product_type'));
jQuery(this).parents('form').submit();
});
});
</script>
<div class="popupbox" id="popuprel_course">
<div id="intabdiv">
<div id="test_tool_modals_wrapper">
<div class="md mdTestPause js-test-pause-modal is-visible" style="overflow-y: auto;">
<div class="close">X</div>
<form action="" method="post">
<div class="obrdV2_container js-modules-container pb-10 ">
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module profiletype" data-module="profiletype">
<div class="p-20 clickable js-toggle-module">
<div class="obrdV2_module_image obrdV2_module_image-klass fl"></div>
<div class="obrdV2_module_heading js-module-heading">
<div class="title">Choose one of the following</div>
<div class="selectedValue js-selected-value"></div>
</div>
<div class="arrowDown js-arrow-down class" style="display: none;"></div>
<div class="clr"></div>
</div>
<div class="obrdV2_module_body js-module-body visible ">
<div class="col-md-6 col-sm-12">
<div class="item academic"><label><input type="radio" name="profileType" value="academic" id="academic" style="display: none;"> Academic</label></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="item professional"><label><input type="radio" name="profileType" value="professional" id="professional" style="display: none;">Professional Courses</label></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module address hide" data-module="address"></div>
<div class="clr"></div>
<div class="submit-row hide">
<div class="obrdV2_module js-module-class js-module submit" data-module="submit">
<div class="obrdV2_module_body js-module-body visible">
<input type="submit" name="switchCourseSubmit" class="btn btn-default" value="Save and Continue">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<script>
$(document).ready(function() {
$('.switch_class').click(function() {
var popupid = $(this).attr('rel');
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
jQuery('body').on('click', '.popupbox .close', function() {
jQuery(this).parents('.popupbox').fadeOut();
jQuery('#fade').fadeOut();
return false;
});
jQuery('.profiletype .js-module-body .item').on('click', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="profileType"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'profiletype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level2').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.classtype', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="classtype"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'boardtype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level3').remove();
jQuery('.address').before(html);
}
});
}
});
jQuery('.obrdV2_container').on('click', '.boardListing', function(evt){
if (evt.target.tagName == 'INPUT'){
var board = jQuery('[name="boardID"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'classList', classList: board},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level4').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.obrdV2_klass', function(evt){
if (evt.target.tagName == 'INPUT'){
jQuery(this).siblings( '.selected').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.address').removeClass('hide');
jQuery('.submit-row').removeClass('hide');
}
});
jQuery('.obrdV2_container .address').on('change', function(evt){
jQuery('.submit-row').removeClass('hide');
});
(function($){
$(window).on("load",function(){
var modal_ht = jQuery('#popuprel_course .popupbox').actual('height');
jQuery("#popuprel_course #intabdiv").height(modal_ht);
jQuery("#popuprel_course #intabdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick",
scrollbarPosition:"outside",
updateOnBrowserResize: true,
updateOnContentResize: true
});
});
})(jQuery);
});
</script>
<style type="text/css">
.popupbox .close {
position: absolute;
right: 10px;
top: 8px;
font-size: 20px;
font-weight: bold;
background: #fff;
color: #000;
z-index: 9999999999999999;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
opacity: 1;
visibility: visible;
box-sizing: border-box;
}
</style>
<div class="pageContentContainer">
<div id="page_content_wrapper" class="js-page-content-wrapper">
<div class="pHeader js-page-content">
<div class="cf">
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide paging">
<a href="http://eduesy.fsas.co.in/student" >Dashboard</a> » <a href="index.php" >Lecture</a>
» <a href="javascript:void(0);" >HTML JavaScript</a>
</div></div>
<div class="pHeader_content pt-25 pb-20 phn-pb-5 clearfix">
<div class="container">
<h1 class="h1 color-white normal">
Lectures
</h1>
</div>
</div>
<div class="pHeader_tabsWrapper js-page-tabs-wrapper">
<div class="container">
<nav role="navigation">
<ul class="pHeader_tabs">
<li class=""><a data-tab="challenges_home" href="index.php?subject=51" class="-ajaxify -strk" >HTML Basic</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=52" class="-ajaxify -strk" >HTML Styles</a></li> <li class="active"><a data-tab="challenges_home" href="index.php?subject=53" class="-ajaxify -strk" >HTML JavaScript</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=54" class="-ajaxify -strk" >HTML And XHTML</a></li>
</ul>
</nav>
</div>
</div>
<div class="pHeader_tabsSpacing"></div>
</div>
<div class="container js-page-content">
<div class="coachmarks_icon coachmarks_icon_selectSubject hide js-coachmarks"></div>
</div>
<div class="container pv-30 cf">
<div class="pCol pCol-wide alpha js-pageLearn">
<aside class="pCol pCol-narrow omega phn-mt-40">
<div class="heading heading-bordered h3 bold">Chapters</div>
<div class="cf mt-30 mb-50">
<a href="topic.php?topic=26"><div class="chapterTile tile tile-shadowed select_subject cf js-chapter-tile mb-20 tab-mb-20 phn-mb-15" data-subject_id="19">
<div class="chapterTile_arrowContainer">
<h2 class="chapterTile_title ">HTML File Paths</h2>
<span class="tile_arrow fa fa-angle-right"></span>
</div></div></a>
</div>
</aside>
</div>
<div class="sidebar-common">
<h2>Our mission is to provide a world class education to anyone, anywhere.</h2>
<h3>You will receive inside.</h3>
<ul>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-video.png" /></label>Video Lecture</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-test-series.png" /></label>Test Series</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-study-material.png" /></label>Study Material</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-doubt-section.png" /></label>Doubt Section</li>
</ul>
</div>
<div class="clr"></div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
</div>
<div class="container">
<footer class="footer mv-20">
<ul>
<li>© Eduesy</li>
<span class="footer_dot">•</span>
<li>About</li>
<span class="footer_dot">•</span>
<li>Upgrade</li>
<span class="footer_dot">•</span>
<li>Contact</li>
<span class="footer_dot">•</span>
<li>Terms</li>
<span class="footer_dot">•</span>
<li>Bytes</li>
<span class="footer_dot">•</span>
<li>Blog</li>
</ul>
<div class="clr"></div>
</footer>
</div>
</div>
<div class="mainSidebar js-main-sidebar">
<div class="mainSidebar_switcherBlock js-class-switcher">
<a class="mainSidebar_switcherBlock_switch js-selected-class"> HTML</a>
<div class="mainSidebar_switcherBlock_dropdown js-dropdown">
<form method="post" action="http://eduesy.fsas.co.in/student/lectures/index.php">
<label class="mainSidebar_switcherBlock_option class_slider js-switchOption selected" data-class-title="HTML " data-product_id="47" data-product_type="Course" selected>HTML<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label><label class="mainSidebar_switcherBlock_option class_slider js-switchOption " data-class-title="Advance PHP " data-product_id="61" data-product_type="Course" >Advance PHP<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label>
<input type="hidden" name="product_id" value="course" />
<input type="hidden" name="product_type" value="47" />
<input type="hidden" name="change_product_type" value="1" />
</form>
</div>
</div>
<nav role="navigation" class="mainSidebar_contentBlock mainSidebar_contentBlock-withSwitcher js-main-sidebar-content-block">
<div class="mainSidebar_sHeading">Study Modules</div>
<ul class="mainSidebar_sNav js-mainSidebar-study">
<li data-tab="learn" class="active open">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="-ajaxify q_tip_w" original-title="Lectures">
<div class="iconWrapper">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Lectures</div>
</a>
</li>
<li data-tab="practice" class="">
<a href="http://eduesy.fsas.co.in/student/practice/index.php" class="-ajaxify q_tip_w" original-title="Practice">
<div class="iconWrapper">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Practice</div>
</a>
</li>
<li data-tab="tests" class="">
<a href="http://eduesy.fsas.co.in/student/tests/index.php" class="js-lhs-ts-link q_tip_w -ajaxify -strk">
<div class="iconWrapper">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Tests</div>
</a>
</li>
<li data-tab="tests" class=""><div class="iconWrapper"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div><span class="arrow fa fa-angle-right"></span><div class="label">Exam</div></li>
<li data-tab="doubts" class="">
<a href="http://eduesy.fsas.co.in/student/doubt/index.php"
class="-strk -ajaxify q_tip_w js-startDoc">
<div class="iconWrapper">
<i class="fa fa-weixin" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Doubts</div>
</a>
</li>
<li data-tab="challenges" class="">
<a href="http://eduesy.fsas.co.in/student/challenges/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Challenges</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">My Profile</div>
<ul class="mainSidebar_sNav js-mainSidebar-compare">
<li data-tab="dashboard" class="">
<a href="http://eduesy.fsas.co.in/student/dashboard/index.php" class="-ajaxify q_tip_w" original-title="Dashboard">
<div class="iconWrapper">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Dashboard</div>
</a>
</li>
<li data-tab="my_bookmarks" class="">
<a href="http://eduesy.fsas.co.in/student/placement/index.php" class="-ajaxify -bookmarks q_tip_w">
<div class="iconWrapper">
<i class="fa fa-star-half-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Placement</div>
</a>
</li>
<li data-tab="achievements" class="">
<a href="http://eduesy.fsas.co.in/student/achievement/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-trophy" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Achievements</div>
</a>
</li>
<li data-tab="leaderboard" class="">
<a href="http://eduesy.fsas.co.in/student/leaderboard/index.php" class="-ajaxify -strk q_tip_w">
<div class="iconWrapper">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Leaderboard</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">Study Tools</div>
<footer class="mainSidebar_footer mv-20">
<ul class="cf">
<li>© Eduesy</li>
<span class="mainSidebar_footer_dot">•</span>
<li>About</li>
<span class="mainSidebar_footer_dot">•</span>
<li>
Discuss
</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Blog</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Terms</li>
</ul>
</footer>
</nav>
</div>
</body>
</html>

ShowMsg('Access denied ! ! !'); Access denied ! ! !

Bootstrap :Go to specific tab using a button in other page

In here,i have 2 HTML page(a.html,b.html), I use Bootstrap Tab in a.html to show different information.
a.html
<!DOCTYPE html>
<html>
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Home</a>
</li>
<li>iOS</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>abc</p>
</div>
<div class="tab-pane fade" id="ios">
<p>123</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>456</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>789</p>
</div>
</div>
</body>
</html>
Now I have another page(b.html),in (b.html),it has a button,I want if i click the button, I can back to a.html and show out the specific tab(ejb) in dropdown list(Java).How can I do it?
I try Default (Gray) Button,but it is not work.
If need to change the page to php to show out the specific tab, i can change it.
b.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>button</h2>
<a class="btn" type="button" href="a.html">Default (Gray) Button</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>

This is the step you need to try:
I. Add new parameter in the end of the a.php's URL (I mean, in button to be clicked in b.php) This is used to be a signal for a.php to see if it is spesific URL to handle.
For example:
http://www.myweb.com/a.php?q=ejb
So, in b.php, the whole codes will be:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0
/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>button</h2>
<a class="btn" type="button" href="http://www.myweb.com/a.php?q=ejb">Default (Gray) Button</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0
/js/bootstrap.min.js"></script>
</body>
</html>
This follows is for a.php scripting:
<?php
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if ($url=="http://www.myweb.com/a.php?q=ejb"){ //this is the point.
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade in active' id='ejb'>
<p>789</p>
</div>
</div>";
}
else{
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade in active' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade' id='ejb'>
<p>789</p>
</div>
</div>";
}
?>
Note: From the two (2) you can see that you just need to add in active which tab you need to open or to visit back.
So, the whole codes for a.php will be like this:
<!DOCTYPE html>
<html>
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Home</a>
</li>
<li>iOS</li>
<li class="dropdown">
Java <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" id="test_open_menu" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<?php
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if ($url=="http://localhost/test/a.php?q=ejb"){
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade in active' id='ejb'>
<p>789</p>
</div>
</div>";
}
else{
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade in active' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade' id='ejb'>
<p>789</p>
</div>
</div>";
}
?>
</body>
</html>
Sorry for long answer. This is what I can say since I have no good enough in English spoken.
Really hopes this work for you and be inspired for you to modify it in javascript.

Bootstrap modal not showing up, and I don't know why *using django-mako-plus

I am using DMP as the back end to my webpage, but am having trouble getting a modal to pop up on a button click event. I have been over the bootstrap docs, made sure I load jQuery before bootstrap, and made sure I have a data-target set up with a '#' included (basically all of the stuff here on stack overflow). Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>HomePage</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></link>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><span class="badge">new!</span>Colonial Heritage Foundation</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Browse</li>
<li>Rent </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#loginModal">Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-nav">
<ul>
<li>about</li>
<li>contact</li>
<li>terms</li>
</ul>
</div>
<div class="col-md-10">
<%block name="content">
</%block>
</div>
</div>
</div>
<div class="modal hide" id="loginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
header
</div>
<div class="modal-body">
body
</div>
<div class="modal-footer">
footer
</div>
</div>
</div>
</div>
<footer>
<div class="well">Blake Wight</div>
</footer>
I took out some of the DMP stuff so that it would be just the html.
Any idea what I am doing wrong?

jQuery:Ajax Don't work loaded scripts

I have this code :
//--Async load page
$("body").on("click", "a:not([data-noajax])", function(){
href = $(this).attr("href");
pageLoad(href + " .page-wrapper", ".page-wrapper", href);
//$('#header').load(href+' #header');
//$('#footer').load(href+' #footer');
return false;
});
function pageLoad(from, where, href)
{
href = typeof href === 'undefined' ? "" : href;
loading();
//$(where).empty();
$(where).load(from, function(data){
loading(false);
$("html, body").animate({ scrollTop: $(".page-header h1").offset().top }, "slow");
title = $(".page-header h1").text();
parent.location.hash = href;
window.history.pushState($(document).html(), title, href);
document.title = title;
$(document).ready(function() {
$('.page-header h1').text(title);
})
});
}
//--
working, but....scripts which will load another page don't work ((
example : go on the http://amour05.ru , click on some post title, and after try reload page;
first we don't see comments widget, and after reload we see it.
p.s. sorry for my english ((
RIGHT SOURCE CODE :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device_width, initial_scale=1.0" />
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/style.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css" />
<script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body>
<div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input type="search" name="search_text" value="" class="search-query" placeholder="Поиск">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"
data-yashareTitle="кто знает расписание пересдач ..." data-yashareDescription ="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>" ></div>
</div>
</div>
<script type="text/javascript">
VK.init({apiId: 4092141, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "100%", attach: "*", mini: "auto"}, 1560 );
VK.Observer.subscribe("widgets.comments.new_comment", commentAdd);
VK.Observer.subscribe("widgets.comments.delete_comment", commentDel);
function commentAdd(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_add',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
function commentDel(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_del',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
</script>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">34</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">10</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter23555398 = new Ya.Metrika({id:23555398,
webvisor:true,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div>
</body>
</html>
GENERATED SOURCE :
<html data-savefrom-tab-data="{"module":"lm","tooltip":"Найдено ссылок: 0"}" lang="ru"><head>
<meta charset="utf-8">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device_width, initial_scale=1.0">
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/theme/style/style.css">
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css">
<script src="http://mc.yandex.ru/metrika/watch.js" async="" type="text/javascript"></script><script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body data-savefrom-link-count="20" style="background-image: url("/theme/style/loveimgs/4.jpg");">
<div title="Загрузка" style="max-width: 500px;" id="loading" class="i hide"><img src="/theme/style/imgs/busy.gif" alt="загрузка"> идет загрузка</div><div class="page-wrapper"><div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input name="search_text" value="" class="search-query" placeholder="Поиск" type="search">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yasharel10n="ru" data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetitle="кто знает расписание пересдач ..." data-yasharedescription="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>"></div>
</div>
</div>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">26</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">8</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div></div>
</body></html>

Why isn't this JQuery code working on IE8 and IE9?

This function updates my content using the .load method from JQuery. The code works as intended on Google Chrome and Mozilla Firefox, but does not work at all in IE8 nor IE9.
Here is its content:
$(function(){
var newHash='';
$contentwrapper = $("#contentwrapper");
$("nav").delegate(".menuOptions", "click", function()
{
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function()
{
newHash = window.location.hash.substring(1);
$contentwrapper.load(newHash + " #contentcolumn");
setTimeout(TitleUpdater, 200);
});
});
function TitleUpdater()
{
top.document.title=$("#contentcolumn").attr("title");
}
I would like to know how to make this code compatible with Internet Explorer! Thank you.
Edit: On Firefox and Chrome, this code only replaces one big <div id="contentcolumn">...</div> and all the style around stays the same as it was before the script execution. While IE8 and IE9 just remove ALL my html code by <div id="contentcolumn">...</div> (it even writes over the head and body tags). This is really weird!
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Vladi Manaev</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/bagums.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div id="banner"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<nav>
<a class="brand" href="">Bagums.com</a>
<ul class="nav">
<li class="dropdown">
Basic Tutorials<b class="caret"></b>
<ul class="dropdown-menu">
<li><a class="menuOptions" href="BasicTutorials/CTutorial.html" name="CTutorial">C</a></li>
<li><a class="menuOptions" href="BasicTutorials/CppTutorial.html" name="CppTutorial">C++</a></li>
<li><a class="menuOptions" href="BasicTutorials/CsharpTutorial.html" name="CsharpTutorial">C#</a></li>
<li><a class="menuOptions" href="BasicTutorials/JavaTutorial.html" name="JavaTutorial">Java</a></li>
<li><a class="menuOptions" href="BasicTutorials/OtherTutorials.html" name="OtherTutorials">Others</a></li>
</ul>
</li>
<li class="dropdown">
My Projects<b class="caret"></b>
<ul class="dropdown-menu">
<li><a class="menuOptions" href="MyProjects/CProject.html">C</a></li>
<li><a class="menuOptions" href="MyProjects/CppProject.html">C++</a></li>
<li><a class="menuOptions" href="MyProjects/CsharpProject.html">C#</a></li>
<li><a class="menuOptions" href="MyProjects/JavaProject.html">Java</a></li>
<li><a class="menuOptions" href="MyProjects/Others.html">Others</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Links.html">Links</a></li>
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Contact.html">Contact</a></li>
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/About.html">About</a></li>
</ul>
</nav>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div><!-- navbar -->
</div><!-- topsection -->
<div id="contentwrapper">
<div id="contentcolumn" title="Vladi Manaev">
<div id="mainPostsTitle">Latest News</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">Third post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 7:23 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">Second post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 7:22 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">First post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 6:48 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
</div><!-- contentcolumn -->
</div><!-- contentwrapper -->
<div id="footer">
<nav>
<div> Copyright © 2012 created by <a class="menuOptions" href="OtherPages/Contact.html"> Vladi Manaev</a></div>
</nav>
</div><!-- footer -->
</div><!-- maincontainer -->
<!-- Placed at the end of the document so the page load faster -->
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/bootstrap-dropdown.js"></script>
<script>
$(function(){
var newHash='';
$contentwrapper = $("#contentwrapper");
$("nav").delegate(".menuOptions", "click", function()
{
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function()
{
newHash = window.location.hash.substring(1);
$contentwrapper.load(newHash + " #contentcolumn");
setTimeout(TitleUpdater, 200);
});
});
function TitleUpdater()
{
top.document.title=$("#contentcolumn").attr("title");
}
</script>
</body>
</html>

When i changed my href to start with # like this:
<a class="menuOptions" href="#BasicTutorials/CTutorial.html" name="CTutorial">C</a>
...
It start working on IE as well!
My guess is that window.location.hash does not work on IE... and when i added "#" by hand it solved the problem.
Thanks everyone for trying to help !

Categories

Resources