jQuery bug when trying to insert partial elements before() / after()? - javascript

I'm trying to wrap a div around an element (my 'template' div) by using jQuery's before() and after(). When I try to insert a closing after the selected element, it actually gets placed before the target.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Wrap</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$('document').ready(function() {
var beforestr = "<div id=\"wrap\"><div id=\"header\">Top</div><div id=\"page\">";
var afterstr = "</div><div id=\"footer\">Bottom</div></div>";
$('#template').before(beforestr);
$('#template').after(afterstr);
});
</script>
</head>
<body>
<div id="template">
<h1>Page Title</h1>
<p>Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Mauris
placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra.
<script>document.write('This script should still work and might contain variables. Please don\'t recommend concatenation.');</script>
Donec non enim in turpis pulvinar facilisis.</p>
</div>
</body>
</html>
The result is:
<div id="wrap">
<div id="header">Top</div>
<div id="page">
</div>
</div>
<div id="template">
<h1>Page Title</h1>
<p>Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Mauris
placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra.
This script should still work and might contain variables. Please don't recommend concatenation.
Donec non enim in turpis pulvinar facilisis.</p>
</div>
<div id="footer">Bottom</div>
Why are my closing wrap and page divs getting placed before the target, when I'm trying to place them after() ? Is there an alternative way to accomplish this (keeping in mind I may need to call script functions within the template div)?
As I'm sure you're aware, best practices aren't what I'm going for here.


You can't insert fragments, as they need to be complete DOM elements. Instead you should use .wrap() in some spots here; it should look like this instead:
$(document).ready(function() {
$('#template').wrap('<div id="wrap">')
.wrap('<div id="page">').parent()
.before('<div id="header">Top</div>')
.after('<div id="footer">Bottom</div>');
});
You can test it out here. What this does is the effect you were after overall:
<div id="wrap">
<div id="header">Top</div>
<div id="page">
<div id="template">
<h1>Page Title</h1>
<p id="aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
<div id="footer">Bottom</div>
</div>


Don't use partials. Add your header and footer using before() and after(), but use wrap() for your wrapper. Reference http://api.jquery.com/wrap/


You cannot insert half of an HTML tag. Your code would leave an invalid DOM between the two calls.
The browser will fix up the HTML string for each call, and generate unwanted results.
Instead, call .wrap:
$('#template')
.find('script').remove().end()
.wrap('<div id="page"><div id="wrap"></div></div>')
.parent()
.before('<div id="header">Top</div>')
.after('<div id="footer">Bottom</div>')
This will also correctly preserve <script>s in the content.
Demo

Related

JS. How to Break selection/range into fragments per containing blocks and remove inline element formatting?

Lets say we have a div
<div id="my-div">
<p>Lorem ipsum dolor sit <strong>amet |consequat pharetra auctor </strong>condimentum lacus purus tortor habitasse molestie.</p>
<p>Auctor luctus lacus imperdiet <strong>pharetra| consequat</strong> egestas faucibus.</p>
</div>
And user selects a portion similar the one between "|".
function getSelectionPortion(){
const div = document.getElementById('my-div');
const selection = document.getSelection().getRangeAt(0).cloneContents(); // or extractContents();
return selection;
}
getSelectionPortion() will return the following:
<p><strong>consequat pharetra auctor </strong>condimentum lacus purus tortor habitasse molestie.</p>
<p>Auctor luctus lacus imperdiet <strong>pharetra</strong></p>
now we can get portions of the range by paragraphs, simply by e.g. fragment.querySelectorAll('p').
And if we extract the range contents and loop over each portion, we can take each strong inside each p and replace with its innerHTML
let blocks = getSelectionPortion().querySelectorAll('p');
for (let block of blocks){
let inlines = block.querySelectorAll('strong');
for (let inline of inlines){
inline.replaceWith(inline.innerHTML);
}
}
However, this outputs with additional paragraphs, because extracted fragment closes the paragraph tags. So we end up with
<div id="my-div">
<p>Lorem ipsum dolor sit <strong>amet</strong></p>
<p>consequat pharetra auctor condimentum lacus purus tortor habitasse molestie.</p>
<p>Auctor luctus lacus imperdiet pharetra</p>
<p><strong>consequat</strong> egestas faucibus.</p>
</div>
How do you remove the inline tag from the selection without creating additional block level elements with fragment? Is there a way to divide the range into peaces instead of its extract?

Load html page for this tabbed angularjs page

I found this jsfiddle sample code which is provides multiple tabs for a single angularjs webapge.
http://jsfiddle.net/helpme128/99z393hn/
I adapted it to my own code. I wanted a certain tab to load a certain webpage my-custom-page.html.
Here are my relevant code. The html code;
<div id="tabs" ng-controller="StkViewMainCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}
</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne">
<h1>View One</h1>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
</div>
</script>
<script type="text/ng-template" id="my-custom-page.html">
<div id="viewTwo">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit
amet arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
The controller code;
.controller('StkViewMainCtrl', ['$scope', 'configuration',
function ($scope, $configuration) {
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'my-custom-page.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
No effect took place. my-custom-page.html does not load. my-custom-page.html is on the same folder as the single webpage that is being run.

Html is loading from main page, so if you want to load html from another html file in folder you should use something like ng-include.
So try to change
<script type="text/ng-template" id="my-custom-page.html">
<div id="viewTwo">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit
amet arcu. Class aptent taciti sociosqu.</p>
</div>
to
<script type="text/ng-template" id="my-custom-page.html">
<div id="viewTwo" ng-include="my-custom-page.html"></div>
i changed a code and here is a new code on plunker

Angular.js making repeated requests and never loading

I'm in the process of learning Angular.js, so I have a simple Node app serving a very basic Angular web page and writing simple log data to stdout. Up until now, this has worked just fine, but now, for no known reason, every time I try to load the page, the page doesn't load (and eventually crashes) and until I am forced by memory issues to kill it, this happens in the Node app:
My-iMac:Learning Angular.js me$ node node-app.js
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846525840
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846525840
Incoming request for /libs/angular.min.js?_=1443846526063
Loaded page /libs/angular.min.js?_=1443846526063
Incoming request for /libs/angular-route.min.js?_=1443846526340
Loaded page /libs/angular-route.min.js?_=1443846526340
Incoming request for /js/3.js?_=1443846526389
Loaded page /js/3.js?_=1443846526389
Incoming request for /libs/jquery.min.js?_=1443846526398
Loaded page /libs/jquery.min.js?_=1443846526398
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846526637
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846526637
Incoming request for /libs/angular.min.js?_=1443846526645
Loaded page /libs/angular.min.js?_=1443846526645
Incoming request for /libs/angular-route.min.js?_=1443846526693
Loaded page /libs/angular-route.min.js?_=1443846526693
Incoming request for /js/3.js?_=1443846526698
Loaded page /js/3.js?_=1443846526698
Incoming request for /libs/jquery.min.js?_=1443846526739
Loaded page /libs/jquery.min.js?_=1443846526739
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846526751
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846526751
Incoming request for /libs/angular.min.js?_=1443846526758
Loaded page /libs/angular.min.js?_=1443846526758
Incoming request for /libs/angular-route.min.js?_=1443846526789
Loaded page /libs/angular-route.min.js?_=1443846526789
Incoming request for /js/3.js?_=1443846526795
Loaded page /js/3.js?_=1443846526795
Incoming request for /libs/jquery.min.js?_=1443846526802
Loaded page /libs/jquery.min.js?_=1443846526802
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846527180
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846527180
Incoming request for /libs/angular.min.js?_=1443846527190
Loaded page /libs/angular.min.js?_=1443846527190
Incoming request for /libs/angular-route.min.js?_=1443846527220
Loaded page /libs/angular-route.min.js?_=1443846527220
Incoming request for /js/3.js?_=1443846527225
Loaded page /js/3.js?_=1443846527225
Incoming request for /libs/jquery.min.js?_=1443846527235
Loaded page /libs/jquery.min.js?_=1443846527235
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846527246
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846527246
Incoming request for /libs/angular.min.js?_=1443846527254
Loaded page /libs/angular.min.js?_=1443846527254
Incoming request for /libs/angular-route.min.js?_=1443846527266
Loaded page /libs/angular-route.min.js?_=1443846527266
Incoming request for /js/3.js?_=1443846527281
Loaded page /js/3.js?_=1443846527281
Incoming request for /libs/jquery.min.js?_=1443846527340
Loaded page /libs/jquery.min.js?_=1443846527340
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846527363
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846527363
Incoming request for /libs/angular.min.js?_=1443846527935
Loaded page /libs/angular.min.js?_=1443846527935
Incoming request for /libs/angular-route.min.js?_=1443846527957
Loaded page /libs/angular-route.min.js?_=1443846527957
Incoming request for /js/3.js?_=1443846527963
Loaded page /js/3.js?_=1443846527963
Incoming request for /libs/jquery.min.js?_=1443846527973
Loaded page /libs/jquery.min.js?_=1443846527973
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846528005
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846528005
Incoming request for /libs/angular.min.js?_=1443846528019
Loaded page /libs/angular.min.js?_=1443846528019
Incoming request for /libs/angular-route.min.js?_=1443846528031
Loaded page /libs/angular-route.min.js?_=1443846528031
Incoming request for /js/3.js?_=1443846528035
Loaded page /js/3.js?_=1443846528035
Incoming request for /libs/jquery.min.js?_=1443846528043
Loaded page /libs/jquery.min.js?_=1443846528043
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846528056
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846528056
Incoming request for /libs/angular.min.js?_=1443846528065
Loaded page /libs/angular.min.js?_=1443846528065
Incoming request for /libs/angular-route.min.js?_=1443846528141
Loaded page /libs/angular-route.min.js?_=1443846528141
Incoming request for /js/3.js?_=1443846528496
Loaded page /js/3.js?_=1443846528496
Incoming request for /libs/jquery.min.js?_=1443846528520
Loaded page /libs/jquery.min.js?_=1443846528520
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846528546
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846528546
Incoming request for /libs/angular.min.js?_=1443846528553
Loaded page /libs/angular.min.js?_=1443846528553
Incoming request for /libs/angular-route.min.js?_=1443846528564
Loaded page /libs/angular-route.min.js?_=1443846528564
Incoming request for /js/3.js?_=1443846528605
Loaded page /js/3.js?_=1443846528605
Incoming request for /libs/jquery.min.js?_=1443846528643
Loaded page /libs/jquery.min.js?_=1443846528643
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846528656
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846528656
Incoming request for /libs/angular.min.js?_=1443846528679
Loaded page /libs/angular.min.js?_=1443846528679
Incoming request for /libs/angular-route.min.js?_=1443846528694
Loaded page /libs/angular-route.min.js?_=1443846528694
Incoming request for /js/3.js?_=1443846528700
Loaded page /js/3.js?_=1443846528700
Incoming request for /libs/jquery.min.js?_=1443846528708
Loaded page /libs/jquery.min.js?_=1443846528708
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846528726
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846528726
Incoming request for /libs/angular.min.js?_=1443846529054
Loaded page /libs/angular.min.js?_=1443846529054
Incoming request for /libs/angular-route.min.js?_=1443846529083
Loaded page /libs/angular-route.min.js?_=1443846529083
Incoming request for /js/3.js?_=1443846529088
Loaded page /js/3.js?_=1443846529088
Incoming request for /libs/jquery.min.js?_=1443846529096
Loaded page /libs/jquery.min.js?_=1443846529096
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846529128
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846529128
Incoming request for /libs/angular.min.js?_=1443846529331
Loaded page /libs/angular.min.js?_=1443846529331
Incoming request for /libs/angular-route.min.js?_=1443846529354
Loaded page /libs/angular-route.min.js?_=1443846529354
Incoming request for /js/3.js?_=1443846529657
Loaded page /js/3.js?_=1443846529657
Incoming request for /libs/jquery.min.js?_=1443846529679
Loaded page /libs/jquery.min.js?_=1443846529679
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846529694
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846529694
Incoming request for /libs/angular.min.js?_=1443846529728
Loaded page /libs/angular.min.js?_=1443846529728
Incoming request for /libs/angular-route.min.js?_=1443846529740
Loaded page /libs/angular-route.min.js?_=1443846529740
Incoming request for /js/3.js?_=1443846529744
Loaded page /js/3.js?_=1443846529744
Incoming request for /libs/jquery.min.js?_=1443846529751
Loaded page /libs/jquery.min.js?_=1443846529751
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846529764
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846529764
Incoming request for /libs/angular.min.js?_=1443846529795
Loaded page /libs/angular.min.js?_=1443846529795
Incoming request for /libs/angular-route.min.js?_=1443846529902
Loaded page /libs/angular-route.min.js?_=1443846529902
Incoming request for /js/3.js?_=1443846529943
Loaded page /js/3.js?_=1443846529943
Incoming request for /libs/jquery.min.js?_=1443846529950
Loaded page /libs/jquery.min.js?_=1443846529950
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846529967
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846529967
Incoming request for /libs/angular.min.js?_=1443846530108
Loaded page /libs/angular.min.js?_=1443846530108
Incoming request for /libs/angular-route.min.js?_=1443846530137
Loaded page /libs/angular-route.min.js?_=1443846530137
Incoming request for /js/3.js?_=1443846530144
Loaded page /js/3.js?_=1443846530144
Incoming request for /libs/jquery.min.js?_=1443846530153
Loaded page /libs/jquery.min.js?_=1443846530153
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846530165
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846530165
Incoming request for /libs/angular.min.js?_=1443846530173
Loaded page /libs/angular.min.js?_=1443846530173
Incoming request for /libs/angular-route.min.js?_=1443846530189
Loaded page /libs/angular-route.min.js?_=1443846530189
Incoming request for /js/3.js?_=1443846530196
Loaded page /js/3.js?_=1443846530196
Incoming request for /libs/jquery.min.js?_=1443846530204
Loaded page /libs/jquery.min.js?_=1443846530204
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846530611
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846530611
Incoming request for /libs/angular.min.js?_=1443846530844
Loaded page /libs/angular.min.js?_=1443846530844
Incoming request for /libs/angular-route.min.js?_=1443846530857
Loaded page /libs/angular-route.min.js?_=1443846530857
Incoming request for /js/3.js?_=1443846530862
Loaded page /js/3.js?_=1443846530862
Incoming request for /libs/jquery.min.js?_=1443846530898
Loaded page /libs/jquery.min.js?_=1443846530898
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846530909
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846530909
Incoming request for /libs/angular.min.js?_=1443846531006
Loaded page /libs/angular.min.js?_=1443846531006
Incoming request for /libs/angular-route.min.js?_=1443846531021
Loaded page /libs/angular-route.min.js?_=1443846531021
Incoming request for /js/3.js?_=1443846531140
Loaded page /js/3.js?_=1443846531140
Incoming request for /libs/jquery.min.js?_=1443846531146
Loaded page /libs/jquery.min.js?_=1443846531146
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846531501
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846531501
Incoming request for /libs/angular.min.js?_=1443846531520
Loaded page /libs/angular.min.js?_=1443846531520
Incoming request for /libs/angular-route.min.js?_=1443846531680
Loaded page /libs/angular-route.min.js?_=1443846531680
Incoming request for /js/3.js?_=1443846532119
Loaded page /js/3.js?_=1443846532119
Incoming request for /libs/jquery.min.js?_=1443846532128
Loaded page /libs/jquery.min.js?_=1443846532128
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846532161
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846532161
Incoming request for /libs/angular.min.js?_=1443846532359
Loaded page /libs/angular.min.js?_=1443846532359
Incoming request for /libs/angular-route.min.js?_=1443846532386
Loaded page /libs/angular-route.min.js?_=1443846532386
Incoming request for /js/3.js?_=1443846532396
Loaded page /js/3.js?_=1443846532396
Incoming request for /libs/jquery.min.js?_=1443846532414
Loaded page /libs/jquery.min.js?_=1443846532414
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846532619
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846532619
Incoming request for /libs/angular.min.js?_=1443846532634
Loaded page /libs/angular.min.js?_=1443846532634
Incoming request for /libs/angular-route.min.js?_=1443846533444
Loaded page /libs/angular-route.min.js?_=1443846533444
Incoming request for /js/3.js?_=1443846533472
Loaded page /js/3.js?_=1443846533472
Incoming request for /libs/jquery.min.js?_=1443846533480
Loaded page /libs/jquery.min.js?_=1443846533480
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846534037
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846534037
Incoming request for /libs/angular.min.js?_=1443846534046
Loaded page /libs/angular.min.js?_=1443846534046
Incoming request for /libs/angular-route.min.js?_=1443846534058
Loaded page /libs/angular-route.min.js?_=1443846534058
Incoming request for /js/3.js?_=1443846534191
Loaded page /js/3.js?_=1443846534191
Incoming request for /libs/jquery.min.js?_=1443846534253
Loaded page /libs/jquery.min.js?_=1443846534253
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846534282
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846534282
Incoming request for /libs/angular.min.js?_=1443846534298
Loaded page /libs/angular.min.js?_=1443846534298
Incoming request for /libs/angular-route.min.js?_=1443846534343
Loaded page /libs/angular-route.min.js?_=1443846534343
Incoming request for /js/3.js?_=1443846534349
Loaded page /js/3.js?_=1443846534349
Incoming request for /libs/jquery.min.js?_=1443846534362
Loaded page /libs/jquery.min.js?_=1443846534362
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846534377
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846534377
Incoming request for /libs/angular.min.js?_=1443846534385
Loaded page /libs/angular.min.js?_=1443846534385
Incoming request for /libs/angular-route.min.js?_=1443846534401
Loaded page /libs/angular-route.min.js?_=1443846534401
Incoming request for /js/3.js?_=1443846534409
Loaded page /js/3.js?_=1443846534409
Incoming request for /libs/jquery.min.js?_=1443846534416
Loaded page /libs/jquery.min.js?_=1443846534416
Incoming request for /libs/bootstrap/js/bootstrap.min.js?_=1443846534427
Loaded page /libs/bootstrap/js/bootstrap.min.js?_=1443846534427
Here is the code for Angular:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainController',
templateUrl: './main6.html'
})
.when('/company', {
controller: 'CompanyController',
templateUrl: './company6.html'
})
.otherwise({
redirectTo: '/'
});
}]);
app.controller('MainController', function($scope) {
$scope.companies = [{
heading: 'text1',
content: 'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. '
}, {
heading: 'Text2',
content: 'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. '
}, {
heading: 'SoMe3',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus egestas mauris. Etiam blandit turpis a sapien pretium condimentum. Duis dapibus arcu ac tellus euismod, non feugiat est vulputate. Cras nec sodales felis. Sed ac massa lacus. Nunc in tellus a ante fermentum consectetur a at nulla. Cras nec egestas. '
}, {
heading: 'Pickles',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat augue, tristique a sollicitudin nec, rhoncus et nisi. Aenean at mi ex. Sed tincidunt euismod porttitor. Quisque varius elit in efficitur placerat. Morbi quis turpis facilisis, congue purus ut, vehicula felis. Nam ex nulla, pellentesque vitae ipsum eget, tincidunt luctus.'
}, {
heading: 'Dill',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat augue, tristique a sollicitudin nec, rhoncus et nisi. Aenean at mi ex. Sed tincidunt euismod porttitor. Quisque varius elit in efficitur placerat. Morbi quis turpis facilisis, congue purus ut, vehicula felis. Nam ex nulla, pellentesque vitae ipsum eget, tincidunt luctus.'
}];
});
app.controller('CompanyController', function($scope) {
$scope.companies = [{
heading: 'text1',
content: 'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. '
}, {
heading: 'Text2',
content: 'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. '
}, {
heading: 'SoMe3',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus egestas mauris. Etiam blandit turpis a sapien pretium condimentum. Duis dapibus arcu ac tellus euismod, non feugiat est vulputate. Cras nec sodales felis. Sed ac massa lacus. Nunc in tellus a ante fermentum consectetur a at nulla. Cras nec egestas. '
}, {
heading: 'Pickles',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat augue, tristique a sollicitudin nec, rhoncus et nisi. Aenean at mi ex. Sed tincidunt euismod porttitor. Quisque varius elit in efficitur placerat. Morbi quis turpis facilisis, congue purus ut, vehicula felis. Nam ex nulla, pellentesque vitae ipsum eget, tincidunt luctus.'
}, {
heading: 'Dill',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat augue, tristique a sollicitudin nec, rhoncus et nisi. Aenean at mi ex. Sed tincidunt euismod porttitor. Quisque varius elit in efficitur placerat. Morbi quis turpis facilisis, congue purus ut, vehicula felis. Nam ex nulla, pellentesque vitae ipsum eget, tincidunt luctus.'
}];
});
Why is the Angular app making continuous requests and re-requests for the files, instead of loading and behaving normally? If it helps, this problem began when I was tinkering with routing.
Update 1:
When I change this:
.when('/company', {
controller: 'CompanyController',
templateUrl: './company6.html'
})
to this:
.when('/company', {
controller: 'CompanyController',
templateUrl: './main6.html'
})
no more requests come into the server, and "/company" loads the same page as "/". Obviously this makes the page rather useless, if every url can only load the same template, but the information may be helpful. Of note is that "main6.html" and "company6.html" are basically identical, except for some changed text.
Update 2:
I've figured out that whenever I use ./main6.html as the template url it works, but when I use ./company6.html, it doesn't. This means that this issue is isolated to loading the /company page, and the / page loads just fine. I've checked for typos in company6.html, misspellings of the file name, errors in the html, but the html is almost identical to that of main6.html, with only a few differences in text.
Update 3:
Here is the code for main6.html (company6.html has different lorem ipsum, but is otherwise the same):
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">NYSE Companies</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<p>Quisque ultrices libero quis fringilla tempor. Ut egestas sapien posuere lorem eleifend bibendum. Duis et pellentesque ex, id scelerisque urna. Nullam ullamcorper molestie urna, eget lobortis eros finibus eu. Donec a vulputate nisi. Quisque eget ullamcorper nulla.</p>
</div>
</div>
<div class="container">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="text" class="form-control" placeholder="Company" aria-describedby="basic-addon1" data-ng-model="search">
</div>
<div class="row">
<div class="col-md-4" data-ng-repeat="company in companies | filter: search">
<h2>{{company.heading | uppercase}}</h2>
<p>{{company.content}}</p>
<p><a class="btn btn-default" href="#/company" role="button">View details ยป</a></p>
</div>
</div>
<hr>
<footer>
<p>Wibbly Wobbly Timey Wimey</p>
</footer>
</div>
Here is the code for 6.html, the actual main page that loads angular, and contains the templates:
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Lipsum Dipsum</title>
<link href="./libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script>
</script>
</head>
<body>
<div data-ng-view></div>
<script type="text/javascript" src="./libs/jquery.min.js"></script>
<script type="text/javascript" src="./libs/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./libs/angular.min.js"></script>
<script type="text/javascript" src="./libs/angular-route.min.js"></script>
<script type="text/javascript" src="./js/3.js"></script>
</body>
</html>

I've encountered this issue in the past with single page applications. Check to make sure that all of your templateUrls point to existing file paths.
My node single page application server would default to serving an index.html file whenever it would normally serve a 404 page. So, when a directive had a templateUrl that did not exist, the server would serve index.html in its place. The script tags inside of index.html would subsequently be loaded and the whole process would repeat.
My best suggestion for debugging this issue would be to visit each templateUrl independently in your browser.

I think that you have created a infinite loop in you route config
Try it like this
$routeProvider
.when('/home', {
controller: 'MainController',
templateUrl: './main6.html'
})
.when('/company', {
controller: 'CompanyController',
templateUrl: './company6.html'
})
.otherwise({
redirectTo: '/home'
});
It looks to me like the otherwise condition will route you to example.com/, but if you just add a / to the end a website it will remove it when its loaded in turn sending you back to your otherwise state.
I don't have access to test this right now but I'm pretty sure this is the problem.

add value to existing class in jQuery

First of all, I have searched quite some hours to find this.. I presume it has an easy fix but I'm really new to jQuery and Javascript, so I'm here for your help.
The problem
I'm working with multiple divs and jQuery ToggleSlide(). I want the script to find the right div to open when I click the corresponding div.
For example, when I click the div 'hackandfly', I want it to open the div 'hackandfly-open'.
The code
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $(this);
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
HTML
<div class="content projects">
<h3>Projects</h3>
<div class="project project-big hackandfly">
<h3>Hack and Fly</h3>
</div>
<div class="hackandfly-open project-open" style="display: none;">
<img src="images/schiphol-logo.png" class="img-project-open"> Proin nec elit ac sapien facilisis ultrices. Integer pellentesque ex a luctus fringilla. Aenean in quam quam. Integer gravida quam eget mauris laoreet hendrerit. Vestibulum feugiat ipsum id.
<br>
<br>
Metus aliquet iaculis. Proin massa justo, maximus in tortor et, Proin massa justo, maximus in tortor et. In aliquam laoreet magna et iaculis. Vestibulum vel orci lobortis, elementum nulla eget, porta eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<br>
<br>
Proin massa justo, maximus in tortor et, tincidunt efficitur nibh. Mauris vulputate euismod lorem, vel rutrum ipsum iaculis eu.
</div>
So what I'm looking for, is that when I push 'hackandfly' div, 'scanergy' div or the 'connecting-food' div, I want it to slideToggle the corresponding div that has -open behind it (I have 3 divs with info called hackandfly-open, scanergy-open, connecting-food-open).
I tried some things like:
$slidah = $(this).after('-open');
And some other stuff but it didn't work. Who can help me?
Cheers!

Use attr() like
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $($(this).attr('class')+'-open');
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
However, the above will fail if you have multiple classes.
A workaround would be to add data-* to the clicked elements like
<div class="hackandfly other-class" data-class-target="hackandfly-open"></div>
and then
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $('.'+$(this).attr('data-class-target'));
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});

I would generate a unique click handler for each class. That way, you can store all the applicable class names in an array:
// Creates a new unique click function for each class name
function generateClickHandler(className) {
return function(e) {
// select the open class here
$slidah = $('.'+className+'-open');
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
};
}
// Iterate over all the class names and add a new function for each
var clsList = ["hackandfly", "scanergy", "connecting-food"];
$.each(clsList, function(className) {
$("."+className).click(generateClickHandler(className));
});

Use:
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $("."+$(this).attr('class')+"-open");
$slidah.slideToggle();
});

If you added a wrapper around each section like so:
<div class="content projects">
<h3>Projects</h3>
<div class="project-wrapper">
<div class="project project-big hackandfly">
<h3>Hack and Fly</h3>
</div>
<div class="hackandfly-open project-open" style="display: none;">
{...}
</div>
</div>
</div>
you could use parent and find to get the corresponding element as follows:
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$(this).parent().find('.project-open').eq(0).slideToggle();
}

Accordion slider not close previous tab on click other tab

I am using the jquery accordion for display information for a website. i make the slider opens when the user clicks the specific link in the sub-menu like.
Facilities--> 1. Rooms
2. Hospitality
3. Green Walk
4. Book Options
If user click the any of the sub-menu the respected accordion tab will be open. with the below code i make it.
<script type="text/javascript">
jQuery(function () {
jQuery("#accordion").accordion();
});
jQuery(document).ready(function () {
$(<%=m_id %>).next().toggle('slow'); //<%=m_id%> the id of every tabs of accordion i pass form the code behind in asp.net
});
</script>
HTML:
<div id="accordion">
<h3 id="rooms">
a href="#">Rooms</a></h3>
<div id="rooms">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
</p>
</div>
<h3 id="Hosp">
a href="#">Hospitality</a></h3>
<div id="Hosp">
<p>
High Performance team Building, Leadership
Development Program, Train the Trainers, Introduction to NLP and Advanced NLP, Fire-Walk
etc.
</p>
</div>
<h3 id="green">
Green Walk
<div id="green">
<p>
et malesuada fames ac turpis egestas. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
lacinia mauris vel est.
</p>
</div>
<h3 id="book">
Book Options</h3>
<div id="book">
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
so, here the issue is when the user click the next sub-menu or click the next tab in the accordion the previous one is remains open.
How to close the opened tab when the next tab is open.

i got that accordion to work fine with this javascript
<script type="text/javascript>
var i=0;
$(document).ready(function () {
jQuery('#accordion').accordion();
autoHeight: true;
$('#<%=m_id %>').next().slideDown('slow');
$(document).click(function(){
if(i==0){$('#<%=m_id %>').next().slideUp('slow');i++}else{$('#<%=m_id %>').val('');}
});
});
</script>

Categories

Resources