I have strange issue in laravel blade everything works normally until I edit something in the file the master layout stop loading correctly for no reason
sometime the page html content load partially
It works fine on localhost but on the server
I stopped cloudflare and all caches
As I said the issue occurs only when I edit some file only that page stop working the other pages works normally unless I edit them or add something to them
I hope you can help me.
master file
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<link rel="icon" type="image/png" href="{{asset('../storage/app/public/Favicon_reviews.png')}}">
<title>
{{(is_array(($web_title ?? ''))? $web_title[1] ?? '': $web_title ?? '') ?? 'Home'}}
</title>
{{--foundation css--}}
<link rel="stylesheet" href="{{asset('css/foundation.css')}}">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{asset('css/dashboard.css')}}">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/dripicon.css')}}">
<link rel="stylesheet" href="{{asset('css/typicons.css')}}">
<link rel="stylesheet" href="{{asset('css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{asset('css/theme.css')}}">
<link rel="stylesheet" href="{{asset('css/jquery.toastmessage.css')}}">
<link rel="stylesheet" href="{{asset('js/circle-progress/jquery.circliful.css')}}">
<!-- pace loader -->
{{--for top blue line loader--}}
<script src="{{asset('js/pace/pace.js')}}"></script>
<link rel="stylesheet" href="{{asset('js/pace/themes/green/pace-theme-flash.css')}}">
{{--<link rel="stylesheet" href="{{asset('js/pace/themes/templates/pace-theme-barber-shop.tmpl.css')}}">--}}
{{-- <link rel="stylesheet" href="{{asset('js/pace/themes/green/pace-theme-big-counter.css')}}">--}}
{{--end pace--}}
<link rel="stylesheet" href="{{asset('js/slicknav/slicknav.css')}}">
{{--to support effects in old broswer--}}
<script src="{{asset('js/vendor/modernizr.js')}}"></script>
<link rel="stylesheet" href="{{asset('css/main-style.css')}}">
{{--js scripts--}}
#yield('css')
</head>
<body>
<!-- preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- End of preloader -->
<div class="off-canvas-wrap content" data-offcanvas>
<!-- right sidebar wrapper -->
<div class="inner-wrap">
<!-- Right sidemenu -->
<div id="skin-select">
<!-- Toggle sidemenu icon button -->
<a id="toggle">
<span class="fa icon-menu"></span>
</a>
<!-- End of Toggle sidemenu icon button -->
<div class="skin-part">
<div id="tree-wrap">
#include('main.left-nav')
</div>
</div>
</div>
<!-- end of Rightsidemenu -->
<div class="wrap-fluid" id="paper-bg">
<!-- top nav -->
<div class="top-bar-nest">
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
#include('main.top-nav')
</nav>
</div>
<!-- end of top nav -->
<!-- breadcrumbs -->
<ul class="breadcrumbs ">
<li><a href="{{url('/')}}"><span style=" font-size: 15px; position: relative; top: -3px;"
class="fa fa-home"></span></a>
</li>
#if(is_array(($web_title ?? false)))
#foreach($web_title as $title)
<li>
{!! $title ?? '' !!}
</li>
#endforeach
#else
<li>
{{$web_title ?? ''}}
</li>
#endif
{{--<li>{{$web_title}}
</li>--}}
</ul>
<!-- end of breadcrumbs -->
<!-- Container Begin -->
<div class="row" style="margin-top:-20px">
#yield('container')
</div>
<!-- End of Container Begin -->
#include('main.footer')
</div>
<!-- Right Menu -->
<aside class="right-off-canvas-menu">
{{--#include('main.right-nav')--}}
</aside>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
<!-- End of Right Menu -->
</div>
<!-- end paper bg -->
</div>
<!-- end of off-canvas-wrap -->
<!-- end of inner-wrap -->
<!-- main javascript library -->
<script src="{{asset('/js/jquery.js')}}"></script>
<script src="{{asset('/js/waypoints.min.js')}}"></script>
<script src="{{asset('/js/preloader-script.js')}}"></script>
<!-- foundation javascript -->
<script src="{{asset('/js/foundation.min.js')}}"></script>
<script src="{{asset('/js/foundation/foundation.dropdown.js')}}"></script>
<!-- main edumix javascript -->
{{--add scroll bar to divs--}}
<script src="{{asset('/js/slimscroll/jquery.slimscroll.js')}}"></script>
{{--mobile menu--}}
<script src="{{asset('/js/slicknav/jquery.slicknav.js')}}"></script>
<script src="{{asset('/js/sliding-menu.js')}}"></script>
<script src="{{asset('/js/scriptbreaker-multiple-accordion-1.js')}}"></script>
<script src="{{asset('/js/number/jquery.counterup.min.js')}}"></script>
<script src="{{asset('/js/circle-progress/jquery.circliful.min.js')}}"></script>
<script src="{{asset('/js/jquery.toastmessage.js')}}"></script>
<script src="{{asset('/js/app.js')}}"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
<script type="text/javascript">
(function ($) {
"use strict";
})(jQuery);
</script>
<script>
$(document).foundation();
</script>
<script>
/*helper functions*/
function confirm(title, message, callback) {
// create your modal template
var modal = '<div class="reveal-modal tiny" id="confirmation" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-animation-in="slide-in-down">' +
'<h2>' + title + '</h2>' +
'<p class="lead">' + message + '</p>' +
'<button class="button success yes" style="margin-right: 50px;">Yes</button>' +
'<button class="button alert float-right close-reveal" >No</button>' +
'</div>';
// appending new reveal modal to the page
$('body').append(modal);
// registergin this modal DOM as Foundation reveal
/* var confirmation = new Foundation.Reveal($('#confirmation'));
// open
confirmation.open();*/
var confirm_selector = $('#confirmation');
confirm_selector.foundation('reveal', 'open');
// listening for yes click
confirm_selector.children('.yes').on('click', function () {
// close and REMOVE FROM DOM to avoid multiple binding
confirm_selector.foundation('reveal', 'close');
confirm_selector.remove();
// calling the function to process
callback.call();
});
$(document).on('closed.zf.reveal', '#confirmation', function () {
// remove from dom when closed
confirm_selector.foundation('reveal', 'close');
});
}
$(document).on('click', '.close-reveal', function () {
$('#confirmation').foundation('reveal', 'close');
});
</script>
{{--header javascript--}}
{{--search process img--}}
<script>
$(document).ready(function () {
$('#search_form').submit(function (e) {
$('#search_loading').show();
});
});
</script>
<script>
$(document).ready(function () {
$('#contact_us_form').submit(function (event) {
event.preventDefault();
$('.message_button').prop('disabled', true);
$.ajax({
url: '{{url('/contact_us')}}',
type: 'POST',
data: $(this).serialize(),
success: function (data) {
// console.log(data);
$().toastmessage('showToast', {
text: data.success,
stayTime: 3000,
sticky: false,
position: 'top-center',
type: 'success',
closeText: '',
close: null
});
$('.message_button').prop('disabled', false);
$('#requests').foundation('reveal', 'close');
$("#contact_us_form")[0].reset();
}
});
})
});
</script>
{{--request form--}}
<script>
$(document).ready(function () {
$('#requests_form').submit(function (event) {
event.preventDefault();
$('.message_button').prop('disabled', true);
$.ajax({
url: '{{url('/contact_us')}}',
type: 'POST',
data: $(this).serialize(),
success: function (data) {
$().toastmessage('showToast', {
text: data.success,
stayTime: 3000,
sticky: false,
position: 'top-center',
type: 'success',
closeText: '',
close: null
});
$('.message_button').prop('disabled', false);
$('#requests').foundation('reveal', 'close');
$("#requests_form")[0].reset();
}
});
})
});
</script>
<script>
$('.input_option').change(function () {
if ($(this).val() == 'tag') {
$('.tag_messages').html('You can add more then one tag by adding comma Ex(tag1,tag2,.....)');
} else {
$('.tag_messages').html('');
}
});
</script>
<script>
var textarea = null;
window.addEventListener("load", function () {
textarea = window.document.querySelector("#contact_area");
textarea.addEventListener("keypress", function () {
if (textarea.scrollTop != 0) {
textarea.style.height = textarea.scrollHeight + "px";
}
}, false);
}, false);
</script>
<script>
var textarea = null;
window.addEventListener("load", function () {
textarea = window.document.querySelector("#contact_area1");
textarea.addEventListener("keypress", function () {
if (textarea.scrollTop != 0) {
textarea.style.height = textarea.scrollHeight + "px";
}
}, false);
}, false);
</script>
#yield('javascript')
</body>
</html>
Home page
#extends('main.master')
#section('container')
<div class="row" style="margin-top:-20px">
<div class="large-12 columns">
<blockquote style="border-right: 3px solid #8c92a3;text-align: center;margin-top: 5px;">
Thank you for installing the application, please take a moment of your time and rate the app. It will help us to improve the application for you.
<a>Rate Here</a>
</blockquote>
</div>
</div>
<div class="row" >
<div class="large-8 columns">
<div class="box bg-transparent ">
<!-- /.box-header -->
<div class="box-header no-pad bg-transparent">
<h3 style="margin-bottom:20px;" class="box-title">
<span>Daily Visitors</span>
</h3>
</div>
<div class="box-body no-pad">
<div id="line-chart" style="height: 235px; padding: 0px; position: relative;">
<canvas class="flot-base"
style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 785px; height: 235px;"
width="863" height="258"></canvas>
<div class="flot-text"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
<div class="flot-x-axis flot-x1-axis xAxis x1Axis"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
</div>
</div>
<canvas class="flot-overlay"
style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 785px; height: 235px;"
width="863" height="258"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="large-4 columns">
<div class="box bg-transparent ">
<!-- /.box-header -->
<div class="box-header no-pad bg-transparent">
<h3 style="margin:0 20px 0 -5px;" class="box-title">
<span>Visitors</span>
</h3>
</div>
<div style="margin:15px 0 0" class="box-body no-pad">
<div class="stats-wrap">
<h2><b class="counter-up" style="color:#666;">{{$counter_visitors_data[0]['year'] ?? 0 }}</b> <span
style="background:#666;">+<b
class="counter-up">{{($counter_visitors_data[0]['year_rating'] ?? 0) <= 100 ? ($counter_visitors_data[0]['year_rating']?? 0): 100 }}</b>%</span>
</h2>
<p class="text-grey">Total Visitors
<small>This Year vs last year</small>
</p>
<h4><b class="counter-up" style="color:#888;">{{$counter_visitors_data[1]['month'] ?? 0 }}</b> <span
style="background:#888;">+<b
class="counter-up">{{($counter_visitors_data[1]['month_rating'] ?? 0) <= 100 ? ($counter_visitors_data[0]['month_rating'] ?? 0):100}}</b>%</span>
</h4>
<p>New Visitors
<small>This Month</small>
</p>
<h4 style="color:#333;"><b class="counter-up">{{$counter_visitors_data[2]['week'] ?? 0 }}</b> <span
style="background:#333;">+<b
class="counter-up">{{($counter_visitors_data[2]['week_rating'] ?? 0) <= 100 ? ($counter_visitors_data[0]['week_rating']?? 0):100}}</b></span></h4>
<p>New Visitors
<small>This week</small>
</p>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
{{------------------------------------------section 2---------------------------------------}}
<div class="row" style="margin-top: 20px;">
<div class="large-4 columns">
<div class="box bg-transparent ">
<!-- /.box-header -->
<div class="box-header no-pad bg-transparent">
<h3 style="margin:0 20px 0 -5px;" class="box-title">
<span>Reviews</span>
</h3>
</div>
<div style="margin:15px 0 0" class="box-body no-pad">
<div class="stats-wrap">
<h2><b class="counter-up" style="color:#666;">{{$counter_reviews_data[0]['year'] ?? 0 }}</b> <span
style="background:#666;">+<b
class="counter-up">{{($counter_reviews_data[0]['year_rating'] ?? 0) <= 100 ? ($counter_reviews_data[0]['year_rating']?? 0):100}}</b>%</span>
</h2>
<p class="text-grey">Total Reviews
<small>This Year vs last year</small>
</p>
<h4><b class="counter-up" style="color:#888;">{{$counter_reviews_data[1]['month']?? 0 }}</b> <span
style="background:#888;">+<b
class="counter-up">{{($counter_reviews_data[1]['month_rating'] ?? 0) <= 100 ? ($counter_reviews_data[1]['month_rating']?? 0):100}}</b>%</span>
</h4>
<p>New Reviews
<small>This Month</small>
</p>
<h4 style="color:#333;"><b class="counter-up">{{$counter_reviews_data[2]['week']?? 0 }}</b> <span
style="background:#333;">+<b
class="counter-up">{{($counter_reviews_data[2]['week_rating'] ?? 0) <= 100 ? ($counter_reviews_data[2]['week_rating']?? 0):100 }}</b>%</span></h4>
<p>New Reviews
<small>This week</small>
</p>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green fa fa-star"></span>
<!-- <img src="img/bag.png"> -->
<h6 class="bg-black text-white"><strong><a href="https://apps.shopify.com/aliexpress-reviews-2"
style="color: #ffffff;">Rate Application</a></strong></h6>
</div>
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green fontello-doc-1"></span>
<!-- <img src="img/box.png"> -->
<h6 class="bg-black text-white">FAQ</h6>
</div>
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green icon-user-group"></span>
<!-- <i class="img/count.png"></i> -->
<h6 class="bg-black text-white"><a href="{{url('visitors')}}" style="color: #ffffff;">Latest
Visitors</a></h6>
</div>
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green fontello-params"></span>
<!-- <i class="img/count.png"></i> -->
<h6 class="bg-black text-white"><a href="{{url('General_options')}}" style="color: #ffffff;">Main
Setting</a></h6>
</div>
</div>
</div>
{{------------------------------------------section 3---------------------------------------}}
<div class="large-12 columns">
<div class="box">
<div class="box-header bg-transparent">
<!-- tools box -->
<div class="pull-right box-tools">
<span class="box-btn" data-widget="collapse"><i class="icon-minus"></i>
</span>
<span class="box-btn" data-widget="remove"><i class="icon-cross"></i>
</span>
</div>
<h3 class="box-title"><i class=" icon-calendar"></i>
<span>Latest Visitor</span>
</h3>
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<style>
#media screen and (max-width: 1400px) {
.visitors_images {
left: 60% !important;
}
}
#media screen and (max-width: 1000px) {
.visitors_images {
left: 50% !important;
top: 43px !important;
}
}
#media screen and (max-width: 700px) {
.visitors_images {
left: 65% !important;
top: 43px !important;
}
}
</style>
<div class="row">
<?php $counter = 0; ?>
#foreach($visitors as $visitor)
<?php
$product_id = $visitor['product_id'];
$country_code = $visitor['country_code'];
?>
<div class="large-4 medium-6 small-12 columns" style="float: left !important;">
<div class="school-timetable">
<hr>
<h5><span style="background: #92CD18;">New</span><strong> Visitor </strong>For
Product:<i><a
href="{{url("comments/$product_id/$shop")}}"
target="_blank">
{{str_limit(($visitor['product']['products'][0]['title'] ?? 'No Title'),17) }}
</a></i></h5>
<h6><i class=" fontello-home-outline"></i> From <span
style="background: transparent;"><img style="margin-bottom: 5px;"
src="{{url("images/flags").'/'.strtolower($country_code).'.png' ?? ''}}"></span>
</h6>
<h6 style="margin-bottom: 20px;"><i
class=" fontello-clock"></i>{{date('D, F y',strtotime($visitor['created_at'] ?? ''))}}
y
<span
class="bg-black">{{date('g a',strtotime($visitor['created_at'] ?? ''))}}</span>
</h6>
<div class="visitors_images" style=" position: absolute;
left: 56%;
top: 43px;">
<img width="50px"
src="{{$visitor['product']['products'][0]['images'][0]['src'] ?? URL::asset('../storage/app/public/NoPicAvailable.png')}}">
</div>
</div>
</div>
<?php $counter ++; ?>
#endforeach
</div>
</div>
<!-- /.box-body -->
</div>
</div>
#endsection
#section('javascript')
<script src="{{URL::to('/js/flot/jquery.flot.js')}}"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="{{URL::to('/js/flot/jquery.flot.resize.min.js')}}"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="{{URL::to('/js/flot/jquery.flot.pie.min.js')}}"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="{{URL::to('/js/flot/jquery.flot.categories.min.js')}}"></script>
<script type="text/javascript">
<?php $counter_days = 1;?>
var ticks = [
#foreach($numbers_of_visitors_last_10_days as $keys=>$dates )
#if($counter_days <=1)
[{{ltrim($keys,'0')}}, "days {{ltrim($keys,'0')}}"],
#else
[{{ltrim($keys,'0')}},{{ltrim($keys,'0')}}],
#endif
<?php $counter_days ++;?>
#endforeach
];
$(function () {
"use strict";
/*
* LINE CHART
* ----------
*/
var line_data2 = [
#foreach($numbers_of_visitors_last_10_days as $keys=>$dates )
[{{ltrim($keys,'0')}}, {{count($dates)}}],
#endforeach
];
var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>")
.text("My X Label")
.appendTo($('#line-chart'));
$.plot("#line-chart", [line_data2], {
grid: {
hoverable: true,
borderColor: "#E2E6EE",
borderWidth: 1,
tickColor: "#E2E6EE"
},
series: {
shadowSize: 2,
lines: {
show: true
},
points: {
show: true
}
},
colors: ["#333333", "#cccccc"],
lines: {
fill: true,
},
yaxis: {
show: true,
tickFormatter: function (val, axis) { return val }
},
xaxis: {
show: true,
ticks: ticks,
}
});
});
</script>
#endsection
I think it because of cached views. laravel make all the pages and save them in storage/framework/views directory.So that it won't have to make the pages from scratch in every request. And make the loading faster.
type this on cmd after editing the files:
php artisan view:clear
Or you can delete them manually.
after that type this on cmd:
composer dump-autoload
Then laravel has to make the pages and save them again.
Hope it would help!
I am trying to implement the sticky footer for bootstrap but it is not working for me. I have a header.php and a footer.php which I include in every page of my website. I saw a various posts here for the sticky footer but it doesn't seem to work for me. I saw an example to add a and a to the body of my page and modify the css accordingly but it doesnt seem to work. Please find my code below:
webpage.php
<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>
<div id="wrap">
<div id="main" class="container">
Content
<?php include "../includes/footer.php"; ?>
</div>
</div>
Footer.php
<html>
<body>
<div class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Compatible with Firefox and Chrome.
</div>
</div>
</div>
</div>
</body>
</html>
style.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
.wrap {
min-height: 100%;
margin: 0 auto;
min-width: 1000px;
}
.main {
overflow:auto;
padding-bottom:200px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
bottom:0;
}
How do i fix this? I want the footer to stick at the bottom of the page even if content gets over before half of the webpage.
In the CSS you select .main as a class but in the html you've put is as an ID <div id="main">.
Secondly the <div class="footer"> should be outside of #wrap, as a sibling and not a child.
<div id="wrap">
<div id="main">
// <div id="contnainer"...
</div>
</div>
<div class="footer">
// <div id="contnainer"...
</div>
A quick fix to your problem is to use a NavBar as a footer, and simply fill it with the content you'd like in it.
Bootstrap Components provides the JS for the NavBar to stick to the top or bottom of the screen.
You can read about it here
I can't get my footer to show below all my content. The content currently overlays anything right at the bottom and I can't fix it.
Footer code:
</div> <!-- end #content -->
</div> <!-- end #container -->
<?php wp_footer(); ?>
<div id="footer" width:100%; >
<div id="column" style="width: 100%; height:200px; background-color:none;">
<div style="width:100%; height:100px; background-color:#cdbfc9; ">
<div style="width:80%; height:80px; background-color:#fefefe; margin-top: 10px; margin-left:5px;">
<!--Information for left column content starts here-->
<h6>LATEST NEWS</h6>
</div><!--Information for left column content ends here -->
</div>
</div>
</body>
</html>
If anyone could help I would really appreciate it. The URL is:
I have a jquery mobile app that I'm using and I'm trying to get the right panel to open. Its for notifications. I have a feeling it has to do with with the ajax and it being done for multiple pages. I have many pages in the document and I have assigned unique id's for each "myContent" div and also for the function toggleDiv. For some reason when I click on the icon to open the panel it does nothing, and if i click it again it will open the panel then immediately close the panel.
Here is my code, any clues as to how this is happening?
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
</script>
<!-- BEGIN PAGE 1 -->
<div data-role="page" id="feed" data-add-back-btn="true">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<!--LEFT SIDE PANEL CONTENT HERE-->
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<center><img src="images/logo_app_white.png" height="25px"></center>
<!--THIS IS THE BUTTON TO PUSH TO MAKE NOTIFICATIONS APPEAR-->
<? echo $number; ?>
</div>
<div data-role="content">
<!--THIS IS WHERE CONTENT FOR THE PAGE GOES-->
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<!--ICONS FOR NAVIGATION BAR-->
</div><!-- /navbar -->
</div>
<!--HERE IS WHERE THE NOTIFICATIONS APPEAR-->
<div data-role="panel" id="myContent" data-position="right" data-display="overlay">
</div>
</div>
<!-- END PAGE 1 -->
Get your document ready out of the function. And the toggle() to show().
Change this
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
To this
function toggleDiv(divId) {
$("#"+divId).show();
}
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
DEMO
I have a button that I want to open a panel. Unfortunately my javascript is getting in the way. It's a notifications center in the panel and in order to retrieve the notifications I have to put javascript in the href of the link....but its not opening the open.
I put tags where the problem is that say THIS IS WHERE THE PROBLEM LIES.
If I change the href to #myContent then it will open, but in order for the script to work I need to to be javascript in the href.
Here's my code:
<? //PHP for getting username and database here ?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
</script>
<!-- BEGIN PAGE 1 -->
<div data-role="page" id="feed" data-add-back-btn="true">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<!--THIS IS THE LEFT PANEL-->
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<center><img src="images/logo_app_white.png" height="25px"></center>
<!--THIS IS WHERE THE PROBLEM LIES-->
<? echo $number; ?>
</div>
<div data-role="content">
<!--This is where the content of the page goes-->
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li>My Feed</li>
<li>Submit</li>
<li>Browse</li>
<li>Projects</li>
</ul>
</div>
<!-- /navbar -->
</div>
<div data-role="panel" id="myContent" data-position="right" data-display="overlay">
<!--THIS IS THE PANEL-->
</div>
</div>
<!-- END PAGE 1 -->
Why isn't the panel opening and how can I fix the issue.
Why put javascript in the 'href' tag and not in 'onclick'?
My guess is
<a href="javascript:void(0);" onclick="toggleDiv('myContent');">
will fix the issue.