I'm new to jQuery and I have some issues to stop the scrolling effect. For context, I use this code for hide and show some section on button click.
This is my code:
jQuery(function($) {
$('.rv_button1').click(function(e) {
e.preventDefault();
$("#reveal1").slideToggle();
$('.rv_button1').toggleClass('opened closed');
});
});
I use wordpress with divi theme, the html is not really clear but this part is where my jQuery function is made for (sorry for my English though)
<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_button_alignment_center et_pb_module ">
<a class="et_pb_button et_pb_button_0 rv_button et_pb_bg_layout_light opened" href="http://valerieb30.sg-host.com/notre-equipe/#reveal">Québec</a>
</div>
<div id="reveal" class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters2" style="display: block;">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><h2>Cuisinistes</h2></div>
</div>
<div class="et_pb_module et_pb_de_mach_archive_loop et_pb_de_mach_archive_loop_0 main-loop loadmore-align- grid-layout-grid main-archive-loop
Im trying to make Links inside .newTP clickable, there is something in my Jquery that is not working. Its my first try with Jquery and I am trying to use this and adapt it to my code
<div class="newTablonJS">
<div class="newTP TPB1 newTPActive">
<div class="B1Row1">
Índice
Editar Perfil
</div></div>
<div class="newTP TPB2">
<div class="B2Col1"></div>
<div class="B2Col2"></div>
</div>
<div class="newTP TPB3"></div>
<div class="newTP TPB4"></div>
</div>
And here the Jquery
$(document).on('click', '.newTP', function(e) {
e.preventDefault();
var $el = $(this);
$el.addClass("newTPActive").siblings().removeClass('newTPActive');
$('.newTablonJS').load($el.find('a').attr('href')); });
This is my first time using ui-router and I find difficulties in handling routing and reloading some states. I hope anyone can help me with this.
overview of my index.html
<html ng-app="resApp">
<head></head>
<body ng-controller="mainCtrl" ng-cloak>
<div ng-show="showCustomerContent">
<div id="page-wrapper">
<div ui-view="header"></div>
<div ui-view="slider" ng-show="displaySlider"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</div>
</div>
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
<div ui-view="jsincludes"></div>
</body>
</html>
routing.js
'use strict'
resApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider','$locationProvider',function ($stateProvider, $urlRouterProvider, $httpProvider,$locationProvider) {
$urlRouterProvider
.when('/','/Home')
.when('/login','/Home')
.otherwise('/Home');
$stateProvider
.state("home",{
url:'/Home',
views:{
'jsincludes':{
templateUrl:'views/includes/jsincludes.html'
},
'header':{
templateUrl:'views/customer_part/header.html',
controller:'headerCtrl'
},
'slider':{
templateUrl:'views/customer_part/slider.html'
},
'footer':{
templateUrl:'views/customer_part/footer.html'
}
}
})
.state("home.aboutus",{
url:"/AboutUs",
views:{
'content#':{
templateUrl:'views/customer_views/aboutus.html',
controller:'aboutusCtrl'
}
}
})
$httpProvider.useApplyAsync(true);
}]);
controller.js
'use strict'
resApp.controller('mainCtrl',['$scope','$location','UserData','$rootScope',function($scope,$location,UserData,$rootScope){
$rootScope.displaySlider = true;
$scope.$on('$stateChangeSuccess',function(event, toState){
var url = $location.absUrl().split('/');
//console.log(url);
if(url.length > 6){
$rootScope.displaySlider = false;
}else{
$rootScope.displaySlider = true;
}
});
UserData.getSessVar().then(function(msg){
if(msg.data!="none"){
$rootScope.uid = msg.data["uid"];
$rootScope.fullname = msg.data["fullname"];
$rootScope.role = msg.data["role"];
$rootScope.Id = msg.data["Id"];
if($rootScope.role == "customer"){
$scope.showCustomerContent = true;
}else{
$scope.showAdminContent = true;
}
}else{
$rootScope.role = "none";
$scope.showCustomerContent = true;
}
});
}]);
resApp.controller('headerCtrl',['$scope','$rootScope','UserData','$location','$state','$stateParams',function($scope,$rootScope,UserData,$location,$state,$stateParams){
$scope.hideLoginBtn = false;
if($rootScope.uid!=undefined){
$scope.hideLoginBtn = true;
}
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
$scope.home = function(){
$state.go('home', {}, { reload: true });
}
$scope.aboutus = function(){
$state.go('home.aboutus',{},{reload:true});
}
}]);
resApp.controller('aheaderCtrl',['$scope','$rootScope','UserData','$location',function($scope,$rootScope,UserData,$location){
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
}]);
In my header.html I have this code
<li>
<a href="" title="Home" ng-click="home()">
Home
</a>
</li>
Whenever I click Home the index.html is displaying another copy of my header and slider. As you can see in the image the {{fullname}} scope was displayed and also the other ui-views. I tried doing the ui-sref="home" ui-sref-opts="{reload: true, notify: true}" and put it in my anchor tag but the result is the same. I need to reload the page because my slider is not displaying if I just do ui-sref="home". I also tried to use the ng-cloak but whenever I click the anchor tag it also display my raw code in angularjs. The displayed raw code disappear when the whole page was rendered. Can anyone help me with this?
Update
This error only appeared in mozilla firefox. My routing is perfectly fine in chrome
There is div tag closing issue on the below code
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
Change it as below
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
</div>
Also, I am not sure why are you keeping header, footer, and slider as a named ui-view while you can achieve the same using simple ng-include. Use routing only for redirection and hyperlinks.
Refer my plunker for how to do it
https://plnkr.co/edit/ZatFwz83ODsPjy55eRc5?p=preview
Ideally you should have another html file ex:- main.html and in main.html specify the ui-view. for ex:-
<div id="wrapper">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
I recently start to create an application with phonegap and jquery mobile that loads a json an create a elements this is my code.
<script type="text/javascript">
$(document).ready(function(){
$("#boton").click(function(){
$.getJSON("json url",function(data){
var instrucciones = data.Instrucciones;
document.getElementById("titulos").innerHTML = instrucciones;
var acordeonJSON = $('<div data-role="collapsible" id="accordeon"><h3>hi</h3><p>Hello</p></div>');
$.each(data.Items,function(llave,valor){
if(valor.nombreItem !="")
{
$("#accordeon").append(acordeonJSON);
}
});
});//Llave getJSON
});//Llave boton click
});
</script>
This is my Html structure
<div data-role="page" id="home">
<div data-role="header" id="titulo">
<h1 id="titulos"></h1>
</div>
<div data-role="main" class="ui-content" id="div1">
<button id="boton">Presioname</button>
<div id="instrucciones"></div>
<div data-role="collapsible-set" data-theme="c" id="accordeon">
<!--In this part i want to show the content of my json-->
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
My question is why i cant create my elements in jquery, the created elements shows without style.
After appending all the new dom elements within the collapsibleset, call $("#accordeon").collapsibleset( "refresh" ).enhanceWithin();
For example:
$("#boton").click(function(){
var acordeonJSON = $('<div data-role="collapsible" id="accordeon1"><h3>hi</h3><p>Hello</p></div>');
$("#accordeon").append(acordeonJSON).collapsibleset("refresh").enhanceWithin();
});
Here is a DEMO
I have created a sample web application using jQuery Mobile.
I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:
Error Loading Page
Can anybody see what might be causing this error?
<html> <head runat="server"> <title>How to expand collapse div layer using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />
<script language="javascript">
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" class='header_align'>Bristol-Myers Squibb</div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">Heading</div>
<div id="content">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
</div>
<div id="pages">
<div id="page-1">Page 1 Content</div>
<div id="page-2">Page 2 Content</div>
<div id="page-3">Page 3 Content</div>
</div>
</div>
</body>
</html>
The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.
Try this
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
return false;
});
});