Form generated from 3rd party javascript not appearing where it should - javascript

I have a wordpress site that uses 3rd party javascript to inject forms from Hubspot. The site is using Autoptimize plugin. While optimizing the site for google page insights speed test I encounter issues:
My footer should contain the form within a expanding menu but for some reason keeps generating in the body. I should mention that this only happens when adding the 3rd party script tag with async.
I have 2 different solutions written out in the snippet. All other dependencies loaded at the end.
How can I load this form into my footer and be placed where it should be?
Screen shot here.
<footer>
<div class="container-fluid">
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 subscribe text-center">
<div class="content tframe fw fh">
<div class="tcell valign-mid">
<div class="collapsible-data">
<a href="#" class="collapsible-opener">
Subscribe <span class="more">for Updates</span> <i class="fa fa-angle-up" aria-hidden="true"></i>
</a>
<div class="collapsible-content">
<div class="row" eq-height="">
<div class="col-lg-12 pull-left" eq-col="">
<div class="info">
<h3>Subscribe Today!</h3>
<!-- Start Solution 1: Prevents render blocking, but breaks layout -->
<script>
setTimeout(function(){
$.ajax({
url: '//js.hsforms.net/forms/v2.js',
dataType: 'script',
cache: true,
success: function() {
console.log("AJAX success!")
hbspt.forms.create({
portalId: '2564694',
formId: '2a257043-30bc-4888-a09e-745501e0012a'
})
}
})
},2800);
</script>
<!-- End Solution 1 -->
<!-- Start Solution 2: Works, but becomes render blocking -->
<!--<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '2564694',
formId: '2a257043-30bc-4888-a09e-745501e0012a'
});
</script>-->
<!-- End Solution 2 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 social text-center">
<div class="content tframe fw fh">
<div class="tcell valign-mid">
<div class="container-fluid">
<div class="addthis_toolbox social">
<a href="#" class="addthis_button_facebook" title="Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<!--<a href="#" class="addthis_button_twitter" title="Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>-->
<a href="#" class="addthis_button_email" title="Contact Us">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
<a href="#" class="addthis_button_linkedin" title="LinkedIn">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="#" class="addthis_button_more" title="Share">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 signup">
<div class="content tframe fw fh">
<div class="tcell valign-mid">
<?php echo g2is_home_webinar_latest() ?>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Pagespeed compliant - Avoid render blocking load of JS -->
<!--<script type="text/javascript">
function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) };
loadJS('<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js');
</script>-->
<!--Pagespeed compliant - Alternate non-render blocking JS -->
<script async type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<?php wp_footer(); ?>
<!-- Social Share Links -->
<script type="text/javascript" async="" defer="" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-588971d14a074f13"></script>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" async="" defer="" id="hs-script-loader" src="//js.hs-scripts.com/2564694.js"></script>
<!-- End of HubSpot Embed Code -->
</body>
</html>

wrap the code in noptimize-tags, cfr. AO's FAQ?

Related

Why is JQuery LoadHTML function not adding my html to my page?

I am trying to load html content from another file to my main page using JQuery. I am doing this because I have a navigation bar and footer that will be constant throughout all the pages. I wrote them independently in there own files first and tested each of them so I know they work when they are statically placed into the html file. However, when I try to load them using JQuery loadHTML function I am having issues getting them on the page.
Here is my index.html file for reference:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<link href="NavBarStyle.css" rel="stylesheet">
<link href="FooterStyle.css" rel="stylesheet">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src ="NavBar.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
$("header").enhanceWithin();
});
$("footer").load("Footer.html", function(){
$("footer").enhanceWithin();
});
});
</script>
</body>
</html>
My NavBar.html
<div class = "navbar">
<div class="FB">
<iframe id="share" class = "facebook-bt" src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&size=small&width=96&height=20&appId" width="96" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
<iframe id="like" class = "facebook-bt"src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<div class="navbar-items">
<div class="navbar-links">
<div id = "big" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CONTACT INFO
LOCATION
</div>
</div>
<div class="burger">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="small-Nav">
<div class="navbar-links">
<div id = "small" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "small" class="dropdown-small">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
CONTACT INFO
LOCATION
</div>
</div>
</div>
</div>
</div>
<a href = "#">
<div class = "logo-circle">
<div class="logo"></div>
</div>
</a>
My footer is set up the same way as the NavBar.html file only the content is slightly different.
What am I doing wrong that is causing the files to not load up?
You don't need enhanceWithin call, so your code should look like this:
$(document).ready(function () {
$("header").load("NavBar.html");
$("footer").load("Footer.html");
});
Check load method documentation here for details.
I also suggest checking paths to files and their names (maybe you are getting 404 errors)
Try to debug your issue through dev. console by pressing F12.
You should see several errors. Something like Failed to load resource: net::ERR_FAILED and cors.
Are you running a webserver or index.html directly from the folder?
The problem is .load doesn't run directly please read up on load from jquery as the answer above mentions.
You will need to run index.html through your webserver and you will see the file load the requested file.
I get this as message:
header
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
// $("header").enhanceWithin(); // Ignoring this line since question is not asking to fix the errors regarding enhance. I'll leave that upto you.
});
});
</script>
</body>
</html>
You can simply use without JQuery as well
<header>
<include src="My NavBar.html"></include>
</header>
<footer>
<include src="My Footer.html"></include>
</footer>

Error in setting user roles in php using access column in mysql

I have a login/register website. both admin and users are in the same table in mysql.
My users table is below:
There is certain pages where only admins can visit. I have made an access column and put the values like in the image. I have the following php code for checking whether its admin or not
<?
include("config.php");
session_start();
$user_email=$_SESSION['email'];
$check_user="select * from users WHERE user_email='$user_email'";
$run=mysqli_query($dbcon,$check_user);
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}
else if (isset($_SESSION['email']) && $_SESSION['email'] == true) {
echo " &nbsp You logged in as " . $_SESSION['email'] ;
echo "<div style='float: right;'><a href='logout.php'>logout</a>&nbsp</div>";
}
else{}
?>
<!DOCTYPE html>
<html>
<head>
<title>Nurses Pulse </title>
<!--/tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--//tags -->
<link rel="icon" type="image/png" href="images/imageedit_2_5125240109.gif"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/appointment_style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //for bootstrap working -->
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="header" id="home">
<div class="content white">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<h1 style="color:#e50000"><span class="fa fa-heartbeat" aria-hidden="true"></span>Nurses Pulse </h1>
</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Exams <b class="caret"></b>
<ul class="dropdown-menu">
<li>PROMETRIC</li>
<li class="divider"></li>
<li>HAAD</li>
<li class="divider"></li>
<li>MOH</li>
<li class="divider"></li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
<!-- banner -->
<!--//banner -->
<!-- about -->
<!-- emergency -->
<!-- //emergency -->
<!-- services -->
<div class="services">
<div class="container">
<h3 class="heading-agileinfo" style="color:#e50000"><span>Sorry! You Have Timed Out!</span></h3>
<div class="services-top-grids">
<div> </div><br>
<br>
<?php
$session_value=(isset($_SESSION['correct_score']))?$_SESSION['correct_score']:'';
$session_value2=(isset($_SESSION['not_correct_score']))?$_SESSION['not_correct_score']:'';
echo "<div class='div-left'> Number Of Correct Answers = " . $session_value . "</div>";
echo "<div class='div-left'> <br>Number Of Wrong Answers = " . $session_value2 . "</div>";
?>
</div>
<div class="services-bottom-grids">
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //services -->
<!-- Clients -->
<!-- //Clients -->
<!--/icons-->
<!--//icons-->
<!-- footer -->
<div class="footer_top_agile_w3ls">
<div class="container">
<div class="col-md-3 footer_grid">
<h3>About Us</h3>
<p>NursesPulse is for those who are preparing for the staff nurse entrance exam for abroad.
</p>
</div>
<div class="col-md-3 footer_grid">
<h3>Other Services</h3>
<ul class="footer_grid_list">
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="exambooking.php" >Book Exam </a>
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Course Materials
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="membership.php" >Membership </a>
</li>
<!-- <li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li> -->
</ul>
</div>
<div class="col-md-3 footer_grid">
<h3>Contact Info</h3>
<ul class="address">
<li><i class="fa fa-map-marker" aria-hidden="true"></i>Team Pulse, Kannur <span>Kerala.</span></li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>nursespulse#gmail.com</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>+91 95444 12311</li>
</ul>
</div>
<div class="col-md-3 footer_grid ">
<h3>Sign up for our Newsletter</h3>
<p>Get Started For Free</p>
<div class="footer_grid_right">
<form action="#" method="post">
<input type="email" name="Email" placeholder="Email Address..." required="">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer_wthree_agile">
<p>© 2018 Nurses Pulse. All rights reserved | Design by Bluroe Labs</p>
</div>
<!-- //footer -->
<!-- bootstrap-modal-pop-up -->
<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
Nurses Pulse
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<img src="images/g7.jpg" alt=" " class="img-responsive" />
<p></i></p>
</div>
</div>
</div>
</div>
<!-- //bootstrap-modal-pop-up -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$('ul.dropdown-menu li').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
The code is not working, it's redirecting me to login page even if its admin who logs in.
Can anyone help me?
Thanks in advance.
try this one
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
$_SESSION['access'] = $row['access']; //define here
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}

CSS and Javascript aren't working inside my localhost PHP folder

Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.

Phonegap and Framework7, add external JavaScript files for specific pages

I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.

My bootstrap drown down menu doesn't work after ajax submission

I have a simple login page which logins the user and then redirects them, however I've made a ajax code for the reset password page and after I enter the wrong details and the login page reloads the dropdown menu doesn't work.
I've tried to use the $('.dropdown-toggle').dropdown(); function however it's not working at all.
Login.php
<?php
require_once('./files/functions.php');
require_once('phpmailer/PHPMailerAutoload.php');
?>
<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">
<title>log in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Vendors -->
<!-- Animate CSS -->
<link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
</head>
<body>
<div class="login">
<!-- Login -->
<div class="login__block toggled" id="l-login">
<div class="login__block__header">
<i class="zmdi zmdi-account-circle"></i>
Hi there! Please Sign in
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-register" href="">Create an account</a></li>
<li><a data-block="#l-forget-password" href="#">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form action="" method="POST">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control" name="email">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="password" class="form-control" name="password">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button type="submit" name="login" value="Sign In" class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</form>
<?php
// some php code for the login process...
?>
</div>
</div>
<!-- Forgot Password -->
<div class="login__block" id="l-forget-password">
<div class="login__block__header palette-Purple bg">
<i class="zmdi zmdi-account-circle"></i>
Forgot Password?
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-login" href="#">Already have an account?</a></li>
<li><a data-block="#l-register" href="#">Create an account</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form id="pw">
<p class="m-t-30">Please enter the e-mail address used to register. We will send your new password to that address.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" name="email" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div id="result"></div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</form>
<script type = "text/javascript">
$("form#pw").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login.php",
method: "POST",
data: email,
success: function (result) {
alert("result: " + result);
console.log(result);
$("#result").html(result);
$('.dropdown-toggle').dropdown();
}
});
});
</script>
<?php
// php code for the reset password....
?>
</div>
</div>
<!-- Older IE Warning -->
<!--[if lt IE 9]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
<div class="ie-warning__container">
<ul class="ie-warning__download">
<li>
<a href="http://www.google.com/chrome/">
<img src="img/browsers/chrome.png" alt="">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
<div>IE (New)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- Site Functions & Actions -->
<script src="js/app.min.js"></script>
</body>
</html>
You are including jQuery twice, once from a CDN and once from the local filesystem. Remove the CDN one at the top.
Your inline <script> block appears before your other Javascript resources are included. Try placing it after all other JS files, or even better in your app.min.js where it probably belongs.
It is hard to see the exact problem bcs so much of your code is your own custom stuff we can't see (and likely has nothing to do with this problem). In future, please try creating a minimal, verifiable example of your problem.

Categories