How to show data when using API? - javascript

Im trying to get data from an API using ajax request. I did it but im not sure how to show the information to the client. I want to search by artist and show their songs. Here is my code and link to the api. Please help me!
https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MusicApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MusicApp</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Lyrics</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row" style="margin-top:30px;">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<img class="thumbnail img-responsive" src="images/notes.jpg">
</div>
<div class="col-sm-8">
<input type="checkbox" class="form-check-input" id="sort">
<label class="form-check-label" for="sort">Sort</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="artist">Artist:</label>
<textarea class="form-control" rows="1" id="artist"></textarea>
</div>
</div>
</div>
</div>
<div class="panel-footer" style="height:55px;">
<button type="button" id="postComment" class="btn btn-primary pull-right publish"><span
class="glyphicon glyphicon-globe"></span> Search
</button>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Results</h3>
</div>
<ul class="list-group" style="min-height:241px;" id="contentList">
<li class="list-group-item" style="display:none" id="cloneMe">
<div class="row">
<div class="col-sm-2 col-xs-3">
<img src="images/notes.jpg" class="thumbnail img-responsive">
</div>
<div class="col-sm-7 col-xs-6">
<h4>Shakira</h4>
<p id="songName">some result </p>
<p id="lyricsLink">some result</p>
</div>
<div class="col-sm-3 col-xs-3">
<button type="button" class="btn btn-danger pull-right remove-post"><span
class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Delete</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";
$('#postComment').click(function(){
artistName=$('#artist').val();
console.log(artistName);
var settings = {
"async": true,
"crossDomain": true,
"url": "https://genius.p.rapidapi.com/search?q=" + artistName,
"method": "GET",
"headers": {
"x-rapidapi-host": "genius.p.rapidapi.com",
"x-rapidapi-key": "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"
}
}
$.ajax(settings)
.done(function (response) {
console.log(response.response.hits);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
console.log(r.result.header_image_url);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('#songName').html(r.result.full_title);
miniMe.find('#lyricsLink').html(r.result.url);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.find('checkbox').click(function(){
})
miniMe.show();
$('#contentList').append(miniMe);
});
});
return false;
});
});
</script>
</html>


You can iterate through the response with using this as your ajax block;
$.ajax(settings)
.done(function (response) {
// sort the response alphabetically
response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('p').html(r.result.full_title);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.show();
$('#contentList').append(miniMe);
});
});
You can see the working demo in codepen and you can look into this link if you want to learn about sort() function and how it works in JavaScript.

Related

hide .card-body when childrens has "display:none"

I have two cards with collapse.
When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.
the .card-body is the .parent() of $('#Categories > .acc-row')
For now I'm only able to either hide all card-bodies,none of them or just the first one.
Below is a snippet to my whole code. And here is a link to a fiddle
Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).
var toHide = $('div.acc-row');
if(toHide.filter(':visible').length == 0){
$('.collapse').collapse("hide");
}
Another
if ($('#Categories > .acc-row').is(":visible")) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
And another
$('#Categories > .acc-row').each(function(){
if ($(this).is(":visible")) {
$(this).parent().show();
}else{
$(this).parent().hide();
}
});
And here is my latest approach
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
$(document).ready(function(){
$("#alphf .acco").each(function(){
$(this).on("click", function(){
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
if (cat != 0) {
$('#Categories > .acc-row').hide();
//$('#Categories > .acc-row:hidden').parent().hide();
$('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
}
//var toHide = $('div.acc-row');
// if(toHide.filter(':visible').length == 0){
// $('.collapse').collapse("hide");
// }
// if ($('#Categories > .acc-row').is(":visible")) {
// $('#Categories > .acc-row').parent().show();
// }else{
// $('#Categories > .acc-row').parent().hide();
// }
// $('#Categories > .acc-row').each(function(){
// if ($(this).is(":visible")) {
// $(this).parent().show();
// }else{
// $(this).parent().hide();
// }
//
// });
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
});
});
$("#search").on("keyup", function(e) {
//$('button').removeClass('collapsed');
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accordion_css.css">
<script src="js/jquery_3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popover.min.js"></script>
<script src="js/accordionFilter.js"></script>
<script src="js/scripts.js"></script>
<title>Accordion filter</title>
</head>
<body>
<div class="container">
<nav>
<ul class="pagination" id="alphf">
<!-- <li class="disabled"><span aria-hidden="true">«</span></li> -->
<li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
<li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
<li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
<li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
<li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
<li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
<li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
<li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
<li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
<li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
<li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
<li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
<li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
<li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li>
<li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li>
<li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li>
<li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li>
<li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li>
<li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li>
<li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li>
<li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li>
<li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li>
<li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li>
<li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li>
<!-- <li><span aria-hidden="true">»</span></li> -->
</ul>
</nav>
<div class="accordion accordian-wrapper" id="accordionStaff">
Search: <input id="search" type="text">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="accordian-title"> Department one </h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p>Aston</p>
</div>
<div class="col-md-4">
<p>Tracker</p>
</div>
<div class="col-md-3">
<p>aston#some.com </p>
</div>
<div class="col-md-2">
<p>Phone:: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p data-cat-type="A">Arleen</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>arleen#firm.is</p>
</div>
<div class="col-md-2">
<p>phone 1239484999</p>
</div>
</div>
<div class="row acc-row" data-cat-type="J" data-cat-name="J">
<div class="col-md-3">
<p data-cat-type="J">John</p>
</div>
<div class="col-md-4">
<p>Registar</p>
</div>
<div class="col-md-3">
<p>jj#arn.com </p>
</div>
<div class="col-md-2">
<p> 1234565469</p>
</div>
</div>
<div class="row acc-row" data-cat-type="K" data-cat-name="K">
<div class="col-md-3">
<p data-cat-type="K">Kyle
</p>
</div>
<div class="col-md-4">
<p>Driver
</p>
</div>
<div class="col-md-3">
<p>kdrive#company.com
</p>
</div>
<div class="col-md-2">
<p> 1234567890
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h5 class="accordian-title"> DepartmentTwo</h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p id="staff_name" data-cat-type="A">Allan</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>allan#lsome.com </p>
</div>
<div class="col-md-2">
<p>Phone: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p id="staff_name" data-cat-type="B">Brad</p>
</div>
<div class="col-md-4">
<p>IT-Guy</p>
</div>
<div class="col-md-3">
<p>brad#some.com </p>
</div>
<div class="col-md-2">
<p> 1234567890 </p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p>Brent</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>brent#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
<div class="row acc-row" data-cat-type="E" data-cat-name="E">
<div class="col-md-3">
<p>Evan</p>
</div>
<div class="col-md-4">
<p>Chef</p>
</div>
<div class="col-md-3">
<p>evan#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
</div>
</div>
</div><!-- Filter -->
</div>
</div>
</div><!--container -->
</body>
</html>

You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.
The whole code:
$(document).ready(function() {
$("#alphf .acco").each(function() {
$(this).on("click", function() {
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
// modified from here down
if (cat != 0) {
$('.card-body').each(function(i, cardBody) {
var hidebody = true;
($(cardBody.children)).each(function(f, accRow) {
$(accRow).hide();
if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
hidebody = false;
$(accRow).show();
}
});
if (hidebody) {
$(cardBody).hide();
} else {
$(cardBody).show();
}
});
}
// modified from here up
});
});
$("#search").on("keyup", function(e) {
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.

How to select data from DIV's with something like $this?

given the following code snippet:
<div class="container-fluid" id="networdapp">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
How can I read data from a random div/unknown position in for div? I can't use PHP.
This <div ... id="networdapp"> is created depending on the results from a database. How can I get the data {{result.title}} from a random div when I click the "Details" button from it?
I tried to get it using JQuery but I ended up by selecting all data from all DIVs. Then I was thinking if I can do that with $this and I tried but still can't do it.
EDIT: There is the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">WebSite for testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" >Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
//document.getElementById("networdapp").style.display = "none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
</html>

The div has the class card-header, so...
$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText
However, you want to get the one related to the button clicked. So that could look something like...
//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
//prevent the link so the runnable snippet stops jumping back to the top
e.preventDefault();
//find the parent div with the card class that is the parent to both
//the link and the title
var $card = $(this).closest('.card');
//find the nested card header in the card clicked
var $cardHeader = $card.find('.card-header');
//console log the text
console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 1 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 2 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 3 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>

Using jQuery:
$("#networdapp .card-header.text-center").html()
So:
$(".btn.btn-info").click(function(){
console.log( $("#networdapp .card-header.text-center").html() );
})
Or:
$(".btn.btn-info").click(function(){
console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})

You can select div then use the context to select the button r other elements within.
$(".card").each(function(){
var that = this; // <--- the current div
var header = $(that).find(".card-header");
var detailBtn = $(that).find(".btn-info");
// set event handlers here
// Example:
detailBtn.click(function(){
alert(header.text());
});
});
Here is a working Example

Using jquery
$(this).parents("#networdapp").find(".card-header.text-center").text();
To remove unneccesay spaces you can use trim
$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());

Disable first form and open another form to insert data.. all this i have to do in same page?

Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !

Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>

AJAX Post sometimes works, sometimes it doesnt, why?

I have several ajax posts in my pages and i find that somedays they do work correctly:
executes the method in the controller.
doesnt refresh page.
Sometimes it doesnt:
executes the method in the controller.
goes to a blank page.
I dont find a relation of when they work or they dont, it seems random but i hope its not.
I searched several stack overflow posts and articles and still couldnt find the reason hence why i am making this questin. Hope you understand that.
An example of an Ajax call that sometime works and sometimes not:
$(document).ready(function() {
$('form.ajaxaccount').on('submit', function(event) {
event.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: 'POST',
url: '/saveaccount', // This is the url we gave in the route
data: $('form.ajaxaccount').serialize(),
success: function(response){ // What to do if we succeed
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Sucesso",
text: "Editado com sucesso! ",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Erro :(",
text: "Os dados inseridos não foram guardados. Tenta novamente",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
}
});
});
});
FULL PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Wolistic</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<script src="https://use.fontawesome.com/a3f24bf03b.js"></script>
<link href="dist/notyf.min.css" rel="stylesheet">
<script src="dist/notyf.min.js"></script>
<link rel="stylesheet" href="{{ asset('vendor/backpack/pnotify/pnotify.custom.min.css') }}">
</head>
<body>
#include('frontoffice.login_popup')
#include('frontoffice.register_popup')
<header>
<div class="top_bar_right">
<div class="container">
<ul>
#if (Auth::guard('web_customer')->guest())
<!--Seller Login and registration Links -->
<li><a id="openloginpopup"> Iniciar Sessão </a></li>
<li><a id="openregisterpopup"> Registar </a></li>
<ul class="lang_switch">
<li>Pt</li>
<li><img src="./img/down_arrow.png" width="9"></li>
</ul>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::guard('web_customer')->user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/customer_logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/customer_logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
<nav id="mainNav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="{{ url('/eventos') }}">
<img src="img/wolistic_logo.png" class="logo" alt="Wolistic" title="Wolistic" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1" class="menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#download">Sobre Nós</a>
</li>
<li>
<a class="page-scroll" href="#features">Workshops</a>
</li>
<li>
<a class="page-scroll" href="#contact">Eventos</a>
</li>
<li>
<a class="page-scroll" href="#contact">Voluntariado</a>
</li>
<li>
<a class="page-scroll" href="#contact">Submeter Evento</a>
</li>
</ul>
</div>
</div>
</nav>
<form class="col-md-12 search_form">
<div class="container">
<input type="text" name="search_term" class="search_term" id="search_term" placeholder="O que procuras? (Ex. Permacultura)" />
<select name="event_type" id="event_type" class="event_type" placeholder="Tipo">
<option value="" disabled selected hidden>Tipo</option>
<option>Evento</option>
<option>Workshop</option>
<option>Voluntariado</option>
</select>
<select name="event_local" id="event_local" class="event_local" placeholder="Tipo">
<option value="" disabled selected hidden>Local</option>
<option>Porto</option>
<option>Braga</option>
<option>Lisboa</option>
</select>
<input type="text" name="event_begin_date" class="event_begin_date" id="event_begin_date" placeholder="Data (início)" />
<input type="text" name="event_end_date" class="event_end_date" id="event_end_date" placeholder="Data (fim)" />
<button id="submit" class="search_submit"></button>
</div>
</form>
</header>
<main>
<div class="container">
<div class="breadcrumb">
<span>Início</span> > <span>Perfil</span>
</div>
<div class="profile_title">
A MINHA CONTA
</div>
<div class="row">
<div class="left_sidebar col-md-3 left_aboutus">
<img
#if (is_null($customer->profile_pic))
src="\uploads\{{ $customer->profile_pic }}"
#else
src="./img/default_profile_picture.png"
#endif
class="img-responsive profile_pic" />
<h1 class="profile_name"> {{ $customer->name }} </h1>
<div class="perfil-menu text-left">
<div class="perfil-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default notbordered">
<div class="panel-heading active">
<h4 class="panel-title" >
<a class="accordion-perfil-tog-link-main" href="{{ url('/account') }}">Eu sou</a>
</h4>
</div>
</div>
<div class="panel panel-default notbordered">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#1collapse2" aria-expanded="false" class="collapsed">Eu gosto<span class="accordion-perfil-tog-link accordion-perfil-tog-plus"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="1collapse2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Os meu interesses</li>
<li>Wishlist</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#1collapse3" class="collapsed" aria-expanded="false">Eu quero<span class="accordion-perfil-tog-link accordion-perfil-tog-plus"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="1collapse3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Newsletter</li>
<li>Alterar password</li>
<li>Apagar conta</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="button_anunciante">EU SOU ANUNCIANTE</div>
-->
<div class="perfil-menu-anunciante text-left">
<div class="perfil-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default ">
<div class="panel-heading ">
<h4 class="panel-title">
<a class="accordion-perfil-tog-link-main" href="{{ url('/advertiser') }}">Eu sou anunciante</a>
</h4>
</div>
</div>
<div id="anunciante-options" class="">
<div class="panel panel-default ">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#2collapse2" aria-expanded="false" class="collapsed">Os meus eventos<span class="accordion-perfil-tog-link accordion-perfil-tog-plus"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="2collapse2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul>
<li> Os meus eventos </li>
<li> Submeter evento </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_content col-md-6 col-md-offset-1">
<div class="separator"></div>
<h3 class="personal_data">DADOS PESSOAIS</h3>
<div class="separator_personal"></div>
{{ Form::open(array('method'=>'post','class'=> 'profile_form ajaxaccount', 'url'=>'/saveaccount')) }}
<div class="form-group">
<label for="exampleInputEmail1"> Nome </label>
<input type="text" name="name" class="form-control" value="{{ $customer->name }}" placeholder="{{ $customer->name }} ">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Email </label>
<input type="email" name="email" class="form-control" value="{{ $customer->email }}" placeholder="{{ $customer->email }}">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Telemóvel </label>
<input type="text" name="phone" class="form-control" data-country="PT" value="{{ $customer->phone }}" placeholder="{{ $customer->phone }} ">
</div>
<div class="form-group">
<label for="exampleSelect1">Distrito / região </label>
<select class="form-control" name="districtID" id="exampleSelect1">
#foreach ($districts as $district)
<option value="{{ $district->id }}" > {{ $district->name }} </option>
#endforeach
</select>
</div>
<button type="submit" class="btn btn-primary">GUARDAR DADOS</button>
{{Form::close()}}
</div>
</div>
</div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
</main>
#include('frontoffice.footer')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js "></script>
<script src="./js/bootstrap.min.js "></script>
<script src="./js/script.js "></script>
<script src="vendor/backpack/pnotify/pnotify.custom.min.js"></script>
<script>
$(document).ready(function() {
$('form.ajaxaccount').on('submit', function(event) {
event.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: 'POST',
url: '/saveaccount', // This is the url we gave in the route
data: $('form.ajaxaccount').serialize(),
success: function(response){ // What to do if we succeed
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Sucesso",
text: "Editado com sucesso! ",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
new PNotify ({
title: "Erro :(",
text: "Os dados inseridos não foram guardados. Tenta novamente",
styling: "bootstrap3",
addclass: "stack-bottomright custom",
nonblock: {
nonblock: true
},
stack: stack_bar_bottom
});
}
});
});
});
</script>
</body>
</html>
FORM from the above page:
{{ Form::open(array('method'=>'post','class'=> 'profile_form ajaxaccount', 'url'=>'/saveaccount')) }}
<div class="form-group">
<label for="exampleInputEmail1"> Nome </label>
<input type="text" name="name" class="form-control" value="{{ $customer->name }}" placeholder="{{ $customer->name }} ">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Email </label>
<input type="email" name="email" class="form-control" value="{{ $customer->email }}" placeholder="{{ $customer->email }}">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> Telemóvel </label>
<input type="text" name="phone" class="form-control" data-country="PT" value="{{ $customer->phone }}" placeholder="{{ $customer->phone }} ">
</div>
<div class="form-group">
<label for="exampleSelect1">Distrito / região </label>
<select class="form-control" name="districtID" id="exampleSelect1">
#foreach ($districts as $district)
<option value="{{ $district->id }}" > {{ $district->name }} </option>
#endforeach
</select>
</div>
<button type="submit" class="btn btn-primary">GUARDAR DADOS</button>
{{Form::close()}}
What could be wrong ?

How to display sub menu-items on hover of main-menu in following scenario?

I have taken dump of bootstrap3 for menubar.
Its working fine, onclick of main-menu it is displaying sub menu-items.
But what i want is, on hover of main-menu sub menu-items should be displayed.
Following is code of onclick working menu bar:
<div class="jumbotron">
<div class="container">
<p class="lead">Grid Example</p>
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Yamm Megamenu
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">Grid<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</li>
</ul>
</li>
<!--
<With>Offsets </With>
-->
<li class="dropdown yamm-fw">Offset<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
</div>
</li>
</ul>
</li>
<!--
<Aside>Menu </Aside>
-->
<li class="dropdown yamm-fw">Aside<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3"><br>
<h3>3</h3><br>
</div>
<div class="col-sm-9"><br>
<h3>9</h3><br>
</div>
</div>
</li>
</ul>
</li>
<!--
<Nesting>Menu </Nesting>
-->
<li class="dropdown yamm-fw">Nesting<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-12">12
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript is as following:
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
can any one help me out to resolve this.
Thanks in advance.

Try This one:
<script>
$("#nav li").hover(
function(){
$(this).children('ul').hide();
$(this).children('ul').slideDown('slow');
},
function () {
$('ul', this).slideUp('slow');
});
</script>
and make your as like this
<ul id="nav">

Categories

Resources