this is my first question in this site and I need some help.
I am creating a socialnetwork , facebook like style and I have a tabpanel with 2 tabs in bootstrap, the fist tab is "Friends", where the content of friends will be shown, and the second tab not so important as the fist one is called "Home" where all posts from the user will be placed.
In the first tab , I need to reload the content dinamically, by clicking this tab all new posts from friends must appear. (I have already done this).
It works now by refreshing all page, or F5. But I dont know how to do all this.
if code help, I paste here the html code:
<li role="presentation" class="active">
<a data-toggle="tab" role="tab" aria-controls="friends" href="#friends">
<i class="fa fa-user">
Friends
</i>
</a>
</li>
<li role="presentation">
<a data-toggle="tab" role="tab" aria-controls="home" href="#home">
<i class="fa fa-home">
Home
</i>
</a>
</li>
</ul>
<div class="tab-content">
<div id="friends" class="tab-pane active" role="tabpanel">
<p>
Friends
</p>
<p>
<?php ListFPosts($id_user);?>
</p>
</div>
<div id="home" class="tab-pane active" role="tabpanel">
<p>
Home
</p>
<p>
<?php ListMyPosts($id_user);?>
</p>
</div>
</div>
</div>
I've read a lot of, and I think I need Ajax and I dont know this language yet, someone could help me?.
Some help please?
Thx in advance.
Related
I've created two tabs, using PHP tab one is made to insert data to database and another to view the data from the database, someone suggested ajax, but i couldn't find the answer i want.
example code -
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active">
<?php require("insert.php"); ?>
</div>
<div id="menu1" class="container tab-pane fade">
<?php require("view.php"); ?>
</div>
</div>
at tab one, i insert data (PHP) and tab two i view the data in table (PHP), so after inserting, i have to refresh the whole page to view the updated data on tab two.
So is it possible to refresh tab two right after i insert data on tab two, so i can view updated data without refreshing the whole page? if this is already solved, please comment answer links.
It may seem crude, but i made it work using JavaScript.
$(document).ready(function(){
$(".t1").load("insert.php");
$(".t2").load("view.php");
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target=='#home')
{
$(".t1").load("insert.php");
}
else if(target=='#profile')
{
$(".t2").load("view.php");
}
});
});
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active t1">
</div>
<div id="profile" class="container tab-pane fade t2">
</div>
</div>
how to make #yield inside #yield, because the second #yield does not bring up the content that I want to release??
I'm tired of finding ways to make #yield inside #yield.
because I want to use side navigation inside side navigation, so I need a way to make #yield inside #yield.
please help
//THIS IS MY FIRST #yield (mail.blade.php)
#extends('layouts.app')
#section('content')
<div class="mail-w3agile">
<!-- page start-->
<div class="row">
<div class="col-sm-3 com-w3ls">
<section class="panel">
<div class="panel-body">
<a href="#" data-toggle="modal" data-target="#myModal1" class="btn btn-compose">
Compose Mail
</a>
<ul class="nav nav-pills nav-stacked mail-nav">
<li class="active"><a href="{{ route('mail') }}"> <i class="fa fa-inbox"></i> Inbox <span
class="label label-danger pull-right inbox-notification">9</span></a></li>
<li> <i class="fa fa-envelope-o"></i> Send Mail</li>
<li><i class="fa fa-star"></i>Favorit</li>
<li> <i class="fa fa-certificate"></i> Important</li>
<li><a href="#"> <i class="fa fa-file-text-o"></i> Drafts <span
class="label label-info pull-right inbox-notification">123</span></a></a></li>
<li> <i class="fa fa-trash-o"></i> Trash</li>
</ul>
</div>
</section>
</div>
<section id="main-content">
#yield('main-content')
</section>
</div>
<!-- page end-->
</div>
#endsection
//AND THIS IS MY SECOND #yield (inbox.blade.php)
#extends('admin.mail')
#section('main-content')
<h2>TESTING</h2>
#endsection
Are you looking for #stacks?
https://laravel.com/docs/6.x/blade#stacks
Instead of trying to use a mess of nested #yield you can define your side menu as a #stack('sideMenu') in the layout file, that way each time you include a blade file you would be able to add view data by targeting that specific stack with
#push('sideMenu')
This will be second...
#endpush
// Later...
#prepend('sideMenu')
This will be first...
#endprepend
I need to remove the ACTIVE class from nav-item when the user closes the tab. I try to build tabs with text content inside. Tabs should be closed by default when the user opens the page. When the user clicks on a tab to open it, it should change the color to blue (So here I can use the active class to add style), but when it closes, it should change the color to white. The best way would be to remove the ACTIVE class from li and I stuck here. How to do it? Unfortunately Bootstrap does not remove the ACTIVE class when I click on the tab to close it. Bootstrap removes the ACTIVE class only when I switch between tabs.
Here is my HTML:
<div class="col-md-12">
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#one" role="tab">One</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#two" role="tab">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#three" role="tab">Three</a>
</li>
</ul>
<div class="tab-content">
<div class="text-center tab-pane" id="one" role="tabpanel">1 tab content</div>
<div class="text-center tab-pane" id="two" role="tabpanel">2 tab Content</div>
<div class="text-center tab-pane" id="three" role="tabpanel">3 tab content</div>
</div>
</div>
And here is my JS:
jQuery(function ($) {
$(".nav-link").click(function(){
if ($(this).hasClass('active')){
$('#' + this.hash.substr(1).toLowerCase()).toggleClass('active');
}
});
});
Just go over all the nav-item's and remove the class when the user closes the tab
$('.your-close-icon').on('click', function() {
$('.nav-item').removeClass('active');
});
My wordpress sites redirects to the wrong location. Go to www.theladieschampion.com
On the left side bar you have the option to click on social media links. When you click on the social media link instead of going to www.facebook.com/theladieschampion it goes to:
www.theladieschampion.com/www.facebook.com/theladieschampion
Why is the happening? Even when I create buttons that lead to links on mysite the links URL gets placed over the sites URL. Please Help
You must be using your anchor tag as
Facebook
Change this to
Facebook
your code should look like below:--
<div class="social-links">
<ul>
<li>
<a class="social fb" target="_blank" href="https://www.facebook.com/TheLadiesChampion/">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="social tw" target="_blank" href="https://twitter.com/theladieschamp_">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a class="social gg" target="_blank" href="https://plus.google.com/+TheLadiesChampionOfficial/posts">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>``
I use bootstrap theme bs-admin-bcore and I want to make menu in file "menu.php" to be more dynamic.
For example, I have this code :
<ul id="menu" class="collapse">
<li class="panel">
<a href="index.php" >
<i class="icon-table"></i> Dashboard
</a>
</li>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
<i class="icon-tasks"> </i> UI Elements<span class="pull-right"><i class="icon-angle-left"></i></span> <span class="label label-default">10</span>
</a>
<ul class="collapse" id="component-nav">
<li class=""><i class="icon-angle-right"></i> Buttons </li>
</ul>
</li>
</ul>
when I call index.php <li class="panel"> becomes <li class="panel active"> and when I call button.php EU Elements becomes active.
You have to add "active" class to the parent li of buttons as well n it will work.