I'm having some problems getting jquery mobile to work properly. I'm using the anatomy of a page and this stackoverflow example.
The output I'm expecting is for jqm to only show the contents of the first data-role in the code. However, what's actually happening is after jqm loads, it sets the view to the size of the browser window, but still shows the contents of the second data-role plus the words "loading" beneath it.
I'm pretty sure I'm missing something very simple. Any help will be greatly appreciated.
I'm using PhoneGap and RequireJS.
Here is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>Student Picker</title>
</head>
<body>
<div data-role="page" id="test1">
Goto Test2
</div>
<div data-role="page" id="test2">
Goto Test1
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
require.config({
baseUrl: 'js',
paths: {
'jquery': 'jquery',
'jquery.mobile.config': 'jquery.mobile.config',
'jquery.mobile': 'jquery.mobile',
'app': 'app'
},
map: {
'*': {'jquery': 'jquery-private'},
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
'jquery.mobile.config': ['jquery'],
'jquery.mobile': ['jquery', 'jquery.mobile.config']
}
});
require(['jquery', 'app', 'jquery.mobile'], function(jq, app) {
jq(function() {
//app.initialize();
});
});
jquery.mobile.config
define(['jquery'], function (jq) {
jq(document).on("mobileinit", function () {
jq.mobile.ajaxEnabled = false;
jq.mobile.linkBindingEnabled = false;
jq.mobile.hashListeningEnabled = false;
jq.mobile.pushStateEnabled = false;
});
});
Picture of the output:
The results are the same with or without the jqm config file. If you need any more information, please feel free to leave a comment :)
CSS file corresponding to the JQM file is missing in the code.
Add CSS file and it should work because "data-role" works as a CSS selector.
Related
I'm trying to add a default 404 error page to my Spring app, and I thought it would be nice to add an animate template like that: https://codepen.io/wikyware-net/pen/xywexE
The whole idea is a validation of form and redirection to the error page, if it fails.
Basically, redirection works fine, but the problem I have is I can not make the JS part running (the tost doesn't pop up :-/)...
Here's how my error page looks like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
<script type="text/javascript" th:src="#{/static/js/error.js}"></script>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img"
src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
</div>
</body>
Both CSS and JS code I use, is included in the template I attached at the very beginning.
Here's also the snapshot of the project's resources structure:
What am I doing wrong here?
What are best practices in importing such a HTML template into a Spring Boot/Thymeleaf project?
Thank you in advance for your help.
Kind regards,
Matthew
EDIT:
So I changed my html page to that form:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
</body>
Plus, I also updated my build.gradle file:
buildscript {
ext {
springBootVersion = '2.0.5.RELEASE'
}
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
plugins {
id 'war'
}
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
group = 'pl.mpas'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
targetCompatibility = 1.8
repositories {
mavenLocal()
mavenCentral()
}
dependencies {
compile('org.springframework.boot:spring-boot-starter-data-jpa')
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
compile('org.springframework.boot:spring-boot-starter-web')
compile group: 'org.springframework.boot', name: 'spring-boot-starter-validation', version: '2.3.7.RELEASE'
compile group: 'org.webjars', name: 'bootstrap', version: '3.3.6'
compile group: 'org.webjars', name: 'bootstrap-datepicker', version: '1.0.1'
compile group: 'org.webjars.bower', name: 'jquery', version: '3.5.1'
runtime('org.springframework.boot:spring-boot-devtools')
runtime('com.h2database:h2')
runtime('mysql:mysql-connector-java')
testCompile('org.springframework.boot:spring-boot-starter-test')
compile('org.apache.struts:struts2-core:2.3.16.1')
providedCompile('javax.servlet.jsp:jsp-api:2.1')
providedCompile('javax.servlet:javax.servlet-api:3.1.0')
}
Thanks to that, I no longer see any errors in the browser's console.
However... JS still doesn't work as expected. :-/
Your files structure looks good. you have added your js file in error page by
<script type="text/javascript" th:src="#{/static/js/error.js}"></script>
but I don't thing you need to mention static in your source URL for JS, Change it to
<script type="text/javascript" th:src="#{/js/error.js}"></script>
also please add the below dependencies in your pom.xml for jQuery and Bootstrap
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.6</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.0.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.9.1</version>
</dependency>
change your error.html file as shown below
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
</body>
</html>
now it will work fine. Let me know if any doubt.
Refer:https://www.springboottutorial.com/spring-boot-with-jquery-and-bootstrap-web-jars
A couple of notes:
Change your JavaScript reference for your error.js script to this:
<script type="text/javascript" th:src="#{/js/error.js}"></script>
There is no need to include the /static portion of the URL.
Also, have you included jQuery in the page? For example:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
You will see an error in the browser's console if jQuery is not available.
Try to change your JavaScript reference in your HTML page:
<link rel="stylesheet" href="../static/css/error.js" type="text/javascript" th:href="#{/error.js}">
All right guys, I finally made it running. In my case the problem was a lack of jQuery's script tag in html's head section. I used Google's CDN hosting:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
So the final, working version of my page looks as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img"
src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
</div>
</body>
Thanks again for your help! Cheers!
I'm trying to implement Bryntum Siesta 4.3.2-lite to Sencha ExtJS 6.2 maded application and keep following ExtJS Essentials book.
I've created Siesta Test Runner's index.html and index.js as well.. Collected required Siesta files; js and css through in Siesta/resources folder. When I ran the Test Runner on browser, it gives this error:
siesta-all.js:45330 Uncaught TypeError: Cannot read property 'store' of undefined
at constructor.initComponent (http://nuri/webex/oweb/test/Siesta/js/siesta-all.js:45330:1458463)
I found an answer on Bryntum forums and says don't include ExtJS files to harness. I did the same and commented ExtJS parts but still errors continues. Any advice is welcome.
Some snippets:
Test Runner (index.html);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Siesta Examples</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-neptune/resources/theme-neptune-all.css">
<!-- Siesta CSS -->
<link rel="stylesheet" type="text/css" href="../Siesta/css/siesta-all.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>
<!-- Siesta application -->
<script type="text/javascript" src="../Siesta/js/siesta-all.js"></script>
<!-- Additional Siesta files, not required if you don't use code coverage feature -->
<!-- <script type="text/javascript" src="../siesta-coverage-all.js"></script> -->
<!-- A sample utility class with convenience methods helping you write your tests more efficiently -->
<!-- <script src="lib/Your.Test.Class.js" type="text/javascript"></script> -->
<!-- The test harness -->
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
Harness (index.js);
var harness = new Siesta.Harness.Browser.ExtJS();
harness.configure({
title: 'OWeb Test',
//viewDOM: true,
preload: [
//'../../../webex/build/production/OWeb/app.js',
//'../../../webex/build/production/OWeb/resources/OWeb-all.css',
//'https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-neptune/resources/theme-neptune-all.css',
//'https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js'
]
});
harness.start(
{
group: 'Login',
items: [
'010_login.t.js'
]
}
);
Test file (010_login.t.js);
describe('Testing Login screen', function (t) {
t.it('Should to login', function (t) {
t.chain(
{waitForCQ: 'window[title=Login]'},
{click: '>> textfield[itemId=userName]'},
{type: 'me#adress.com', target:'>> textfield[itemId=userName]'},
{click: '>> textfield[itemId=edtPassword]'},
{type: 'superSecretPass', target:'>> textfield[itemId=edtPassword]'},
{click: '>> button[text=Submit]'},
{waitForCQNotFound: 'window[title=Login]', desc: 'Login window should destroy'}
)
})
});
In your snippet - you are still including the Ext JS library files on the harness HTML page (from cloudflare). You need to remove these files. A sample harness html page can be found here:
https://www.bryntum.com/docs/siesta/#!/guide/siesta_getting_started
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Sample harness</title>
<link rel="stylesheet" type="text/css" href="__SIESTA_FOLDER__/resources/css/siesta-all.css">
<script type="text/javascript" src="__SIESTA_FOLDER__/siesta-all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
I want to develop a cordova app with multiple views using a single page with the aid of handlebars javascript library. I created a simple app with phonegap as a start under the name MyFirstApp and went to edit the index.html file under the www directory. But nothing shows when i run the app in internet browser. Anybody sees where i am doing it wrongly?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="mainpage">
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
<p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/handlebars-v4.0.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
Use this as your index.js:
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
I am pretty new to this whole angularjs thing and am having some trouble solving an issue. So we have a single page app that loads each page in an ng-view i have a directive that actually loads the date picker code into the view. When the page first loads it is fine but if I click to another page and then click back to the "add" page it gives me an error that says "Error: $(...).datepicker is not a function". I'm not sure if it's a jquery issue or what.
Here is my code:
index.html (towards the middle of the page is the ng-view where the views get loaded)
<!DOCTYPE html>
<html>
<head>
<title>Rx Pricing Maintenance</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<!-- <link rel="stylesheet" href="./resources/bootstrap-datepicker/css/datepicker.standalone.css"> -->
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/main.css">
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap-dialog.css">
<link rel="stylesheet" href="resources/DataTables-1.10.5-dist/css/jquery.dataTables.css">
<!-- External Sources -->
<script src="resources/jquery-2.1.3-dist/jquery-2.1.3.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="./resources/angular-1.3.15/angular.js"></script>
<script src="./resources/angular-1.3.15/angular-route.js"></script>
<script src="./resources/angular-1.3.15/angular-resource.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap-dialog.js"></script>
<script src="resources/DataTables-1.10.5-dist/js/jquery.dataTables.js"></script>
<script src="resources/angular-datatables-dist/angular-datatables.js"></script>
<script src="resources/angular-datatables-dist/vendor/datatables-columnfilter/js/dataTables.columnFilter.js"></script>
<script src="resources/angular-datatables-dist/columnfilter/angular-datatables.columnfilter.js"></script>
<script src="resources/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Internal Sources -->
<script src="resources/js/serviceCaller.js"></script>
<script src="./resources/js/controllers.js"></script>
<script src="./resources/js/application.js"></script>
<script src="resources/alasql/alasql.min.js"></script>
<script src="resources/alasql/xlsx.core.min.js"></script>
<script src="resources/alasql/alasql.js"></script>
</head>
<body ng-app="pricingApp" style="padding-top: 50px;">
<div class="container-fluid">
<nav><nav>
<div ng-view></div>
<footer>
<div class="footer-container">
</div>
</footer>
<!-- end footer -->
</div>
</body>
</html>
application.js
'use strict';
/* App Module */
var pricingApp = angular.module('pricingApp', [
'ngRoute',
'pricingControllers'
]);
pricingApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl : 'views/home.html'
}).when('/home', {
templateUrl : 'views/home.html'
}).when('/add', {
templateUrl : 'views/add.html',
controller : 'SchedulesController'
}).when('/help', {
templateUrl : 'views/help.html',
controller : 'VersionController'
});
$locationProvider.html5Mode(false).hashPrefix('!');
} ]);
pricingApp.directive('myDatePicker',function(){
return {
restrict: 'E',
templateUrl: 'views/dates.html',
controller: function($scope){
$(document).ready(function() {
$('#startDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
$('#endDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
});
}
}
});
add.html
<div class="main-container shadow-effect insert-tab">
<h2>Insert a New Pricing Schedule</h2>
<div>
<form class="form-inline" name="pricingInsertForm"
ng-submit="submitData()" role="form" novalidate >
<my-date-picker></my-date-picker>
</form>
</div>
I have left a lot of the filler code out but this is basically how it works. So When I load the application from localhost on the add view it works fine. But when I click off the add view to the home view or something like that and go back to the add view I get the error.
I want to know what is causing the datepicker not a function error and what I can do to fix it. Thanks in advance!
I don't know why and how, but my jQuery code appears to be firing twice on any event.
Here's a part of my code:
commmon.js:
$(document).ready(function() {
$(".fpbtn-one").click(function() {
console.log("Click recorded!"); // Gets logged twice on click
$(this).parent().next().slideToggle();
});
// The rest of the code...
});
$(window).load(function() {
console.log("Setting up slides"); // Gets logged 2 on page load
// These get initialized twice
$("#div-1").responsiveSlides({
auto: true,
pager: true,
pause:true,
nav: false,
timeout: 3000,
speed: 500,
maxwidth: 482,
namespace: "transparent-btns"
});
$("#div-2").responsiveSlides({
auto: true,
pager: false,
pause:true,
nav: false,
speed: 2000,
maxwidth: 320,
});
});
HTML:
<!doctype html>
<html lang="en">
<head><link href="/assets/css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/themes/1st-formation-theme/theme.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/efControl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery/jquery.qtip.js"></script>
<script type="text/javascript" src="/assets/script/jquery/plugin.efiling.full.js"></script>
<meta charset="utf-8" /><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function a(b,c,d){function e(f){if(!c[f]){var g=c[f]={exports:{}};b[f][0].call(g.exports,function(a){var c=b[f][1][a];return e(c?c:a)},g,g.exports,a,b,c,d)}return c[f].exports}for(var f=0;f<d.length;f++)e(d[f]);return e}({"4O2Y62":[function(a,b){function c(a,b){var c=d[a];return c?c.apply(this,b):(e[a]||(e[a]=[]),void e[a].push(b))}var d={},e={};b.exports=c,c.queues=e,c.handlers=d},{}],handle:[function(a,b){b.exports=a("4O2Y62")},{}],YLUGVp:[function(a,b){function c(){var a=m.info=NREUM.info;if(a&&a.agent&&a.licenseKey&&a.applicationID){m.proto="https"===l.split(":")[0]||a.sslForHttp?"https://":"http://",g("mark",["onload",f()]);var b=i.createElement("script");b.src=m.proto+a.agent,i.body.appendChild(b)}}function d(){"complete"===i.readyState&&e()}function e(){g("mark",["domContent",f()])}function f(){return(new Date).getTime()}var g=a("handle"),h=window,i=h.document,j="addEventListener",k="attachEvent",l=(""+location).split("?")[0],m=b.exports={offset:f(),origin:l,features:[]};i[j]?(i[j]("DOMContentLoaded",e,!1),h[j]("load",c,!1)):(i[k]("onreadystatechange",d),h[k]("onload",c)),g("mark",["firstbyte",f()])},{handle:"4O2Y62"}],loader:[function(a,b){b.exports=a("YLUGVp")},{}]},{},["YLUGVp"]);</script>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="/assets/custom/files/favicon.ico" rel="shortcut icon" />
<link href="/assets/custom/images/system/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="/assets/custom/images/system/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/assets/custom/images/system/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<meta content="" name="description" />
<meta content="" name="keywords" />
<meta content="NOINDEX, NOFOLLOW" name="ROBOTS" />
<title>Some title</title>
<link href="/assets/custom/files/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/base.css?=v1" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/font-awesome.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" href="/assets/custom/files/css/font-awesome-ie7_min.css">
<![endif]-->
<script type="text/javascript" src="/assets/custom/files/js/adobe-type.js"></script>
</head>
<body>
<!-- BODY STUFF IN HERE (REMOVED) -->
<script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery-anystretch-stand-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/common.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/modernizr.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/responsiveslides_min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/socialmedia.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery_atooltip_min.js"></script></div>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-4.newrelic.com","licenseKey":"204ccc8db2","applicationID":"1825150","transactionName":"YVNVYBACWxFTWxFcWVgZYkYLTFwMVl0dG0ZeRg==","queueTime":0,"applicationTime":187,"ttGuid":"","agentToken":"","userAttributes":"","errorBeacon":"jserror.newrelic.com","agent":"js-agent.newrelic.com\/nr-361.min.js"}</script></body>
</html>
What could be the reason?
Could it be that your code was manipulating the element that the code was loading into?
This answer may be the reason why it was happening:
jQuery $(document).ready () fires twice
Try putting the stuff in the body inside divs.
example. <div id = "menu"><script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script> </div>
I hope that works. :)
be careful for beginning use good practice when calling jquery :
!function( $ ) {
your code
}( jQuery )
like that you avoid conflict...
Then be careful when adding js script in html, you can add it twice, for example you call one js in a html file, ok but in the js you load in callback for example another page with the js inside, it will call twice your code.... i had the same probleme before with a recursive call, the js never stop to call it !!
in the main page it is better if your js will be called in several files otherwise you have to debug it....
moreover you don't paste all your code we can't help you, we can just tell in my opinion.... not a good advices often...
May be you have included your script file commmon.js twice. Check your references to it in your code.
It might be event bubbling. Use event.preventDefault(), it will prevent the default event from occuring or event.stopPropagation() will prevent the event from bubbling up.
$(document).ready(function() {
$(".fpbtn-one").click(function(event) {
event.stopPropagation();
console.log("Click recorded!"); // Gets logged twice on click
$(this).parent().next().slideToggle();
});
// The rest of the code...
});
The simplest explanation is that you have included the common.js twice by mistake.
Look into individual scripts and see if you have referenced common.js on top of your main file.
Your relevant code is required, but from the snippets above; try putting all the codes in the document ready method.