codeigniter Json table in view page not loading table

codeigniter Json table in view page not loading table - mysql

trying to set crud with incodeigniter. I have never done it so I don't understand where I have gone wrong. I am able to insert data into the database and the insert data window is shown. I attached a picture of the result. The data gets retrieved from the database but not loaded into the table.
Result:
CONTROLLER
function get($id = null){
$this->load->model('model_peca');
$this->load->model('model_perfil');
// $this->load->view('telas/pecas/view_addvalue');
if ($id !=null) {
$data = $this->model_peca->getData($id);
} else {
$data = $this->model_peca->getData();
}
$dados ['telaativa'] = 'pecas';
$dados ['tela'] = 'pecas/view_addvalue';
$this->load->view('view_home', $dados);
echo json_encode($data->result_object());
}
function edit($id){
$this->load->model('model_peca');
$data = $this->model_peca->getData($id)->result_object();
// }
// else{
$this->load->view('telas/pecas/view_edit',array('data'=>$data));
// }
}
function add(){
//$this->load->view('insert');
$this->load->model('model_peca');
$this->load->view('telas/pecas/view_insert');
}
function insert(){
$this->load->model('model_peca');
if ($this->input->post()) {
$peca_parent_id = $this->input->post('peca_parent_id');
$nr_peca = $this->input->post('nr_peca');
//echo $peca_parent_id;
// die;
$insert = $this->model_peca->insert($peca_parent_id,$nr_peca);
if ($insert > 0) {
$result = 200;
}
else{
$result = 0;
}
echo json_encode(array("result"=>$result));
}
}
function deleteoperacao($id){
$delete = $this->model_peca->delete($id);
if ($delete > 0) {
$result = 200;
}
else{
$result = 0;
}
echo json_encode(array("result"=>$result));
}
function update($id){
if ($this->input->post()) {
$peca_parent_id = $this->input->post('peca_parent_id');
$nr_peca = $this->input->post('nr_peca');
// echo $barang;
$insert = $this->model_peca->update($id,$peca_parent_id,$nr_peca);
if ($insert > 0) {
$result = 200;
}
else{
$result = 0;
}
echo json_encode(array("result"=>$result));
}
}
MODEL
function getData($id =null){
if ($id ==null) {
$data = $this->db->get('peca_value');
}
else{
$data = $this->db->get_where('peca_value',array('id'=>$id));
}
return $data;
}
function insert($peca_parent_id,$nr_peca){
$data = array('peca_parent_id'=>$peca_parent_id,'nr_peca'=>$nr_peca);
return $this->db->insert('peca_value', $data);
}
function update($id,$peca_parent_id,$nr_peca){
$data = array('peca_parent_id'=>$peca_parent_id,'nr_peca'=>$nr_peca);
$where = array('id'=>$id);
return $this->db->update('peca_value', $data,$where);
}
function delete($id){
$where = array('id'=>$id);
return $this->db->delete('peca_value',$where);
}
}
VIEW
<head>
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="assets/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="content-wrapper">
<section class="content-header">
<h1>Lista Peças
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li>Peças</li>
<li class="active">Lista pecas</li>
</ol>
</section>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<button class="btn btn-primary btn-act" data-name='add' href="<?php echo base_url('Home/add') ?>"> Nova Operação</button>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<h1></h1>
<table class="table table-hover">
<thead>
<th>peca_parent_id</th><th>nr_peca</th><th>Editar/Apagar</th>
</thead>
<tbody id="wrap">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!------------------------------------------------------------------------------->
<style type="text/css">
body{
background: #eee;
}
</style>
<script src="../assets/js/jquery/jquery-2.2.3.min.js"></script>
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
<script src="../assets/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
list();
$(document).on('click',".update",function(){
$.ajax({
url: "<?php echo base_url('Home/update'); ?>"+$(this).data('id'),
method: "POST",
data: {
peca_parent_id: $(".name").val(),
nr_peca: $(".price").val()
},
dataType: 'json',
success:function(r){
if (r.result ==200) {
$("#myModal").modal('hide');
list();
}
}
});
});
$(document).on('click',".insert",function(){
$.ajax({
url: "<?php echo base_url('Home/insert'); ?>",
method: "POST",
data: {
peca_parent_id: $(".name").val(),
nr_peca: $(".price").val()
},
dataType: 'json',
success:function(r){
if (r.result ==200) {
$("#myModal").modal('hide');
list();
}
}
});
});
$(document).on('click','.btn-delete',function(){
$.ajax({
url: $(this).attr("href"),
dataType : 'json',
success: function(r){
if (r.result == 200) {
$("#myModal").modal('hide');
list();
}
}
});
});
function list(){
$.ajax({
url: "<?php echo base_url('Home/get'); ?>",
dataType:"json",
success: function(r){
var html ='';
var i;
for (i = 0;i < r.length; i++) {
html += "<tr>";
html += "<td>"+r[i].peca_parent_id+"</td>";
html += "<td>"+r[i].nr_peca+"</td>";
html += "<td><button data-name='edit' class='btn btn-act btn-update btn-success' href='<?php echo base_url('Home/edit'); ?>"+r[i].id+"'>Edit</button> <button class='btn-act btn btn-danger' data-name='delete' href='<?php echo base_url('Home/deleteoperacao'); ?>"+r[i].id+"'>Hapus</button></td>";
html += "</tr>";
}
$("#wrap").html(html);
}
});
}
});
// aksi btn-act
$(document).on("click", ".btn-act",function(){
var name = $(this).data('name');
// jika data-name sama dengan edit;
if (name=='edit') {
$("#myModal .modal-title").html("Edit Data");
$("#myModal .modal-body").load($(this).attr('href'));
$("#myModal").modal('show');
$("#myModal .modal-footer").html('<button type="button" class="btn btn-danger btn-close" data-dismiss="modal">Tutup</button>')
}
if (name=='add') {
$("#myModal .modal-title").html("Tambah Data");
$("#myModal .modal-body").load($(this).attr('href'));
$("#myModal").modal('show');
var href = $(this).attr("href");
$("#myModal .modal-footer").html('<button type="button" class="btn btn-danger btn-close" data-dismiss="modal">Tutup</button>')
}
if(name=='delete'){
$("#myModal .modal-title").html("Konfirmasi");
$("#myModal .modal-body").html("Apakah Anda Akan Menghapusnya?");
$("#myModal").modal('show');
var href = $(this).attr("href");
$("#myModal .modal-footer").html('<button href="'+href+'" type="button" class="btn btn-danger btn-delete" data-dismiss="modal">Hapus</button>')
}
});

Related

If a user keep pressing button (see more) keep getting multiple times no results

I have created a partial view and I added the rendering in Index page. I have a button (See More) and every time I am calling controller with ajax and append the new data in the screen.
The problem is when i have no more results to show and a user keeps pressing the button I append multiple times "no results found".
Is there a way to prevent this?
My Index:
<div class="sectionMain" id="stopscroll">
#foreach (var item in Model)
{
if (item.restDetails != null && item.restDetails.Count() != 0)
{
#*<label class="sectionLabels" style="padding-left: 3%;">Restaurants</label>*#
#Html.Hidden("nextItems")
<div id="test" class="sectionSeeMore">
#Html.Partial("_RestaurantDetails", item.restDetails)
</div>
<div class="row">
<div class="col-5"></div>
<div class="col-2" style="text-align:center;">
<button id="btnsubmit" class="buttonCategory" onclick="callseemore(this)" style="font-family:'Fredoka-One';height: 36px;">See More</button>
</div>
<div class="col-5"></div>
</div>
}
break;
}
</div>
<script>
function callseemore(a){
var postcode = $("#inputPostCode").val();
var category = "";
var slides = document.getElementsByClassName("buttonCategoryMain");
for (var i = 0; i < slides.length; i++) {
if (slides.item(i).className == "buttonCategoryMain activebtnMain") {
category = slides.item(i).value;
}
}
var offerButton = document.getElementById("sidebarOfferBtn").classList.value;
var isofferparam = "False";
if (offerButton == "activebtn") {
isofferparam = "True";
}
var nextItems= $("#nextItems").val();
$.ajax({
url: "#Url.Action("RestaurantPaging", "Home")",
type: 'POST',
data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
cache: false,
success: function (result, status, xhr) {
debugger;
$('#tblSeeMore').append(result);
var asf = xhr.getResponseHeader("nextItems");
document.getElementById("nextItems").value =asf ;
}
})
}
</script>
PartialView:
#model IEnumerable<Restaurants.Models.RestaurantDetail>
#if (Model.Count() == 0)
{
<h3 style="text-align:center;font-family:'Fredoka-One'">No Results Found</h3>
}
else
{
<div style="display:flex;flex-flow:row wrap;" id="tblSeeMore">
#foreach (var itemRest in Model)
{
<div class="newRestaurantsSection" id="newRestaurantsSection">
<div class="newRestaurantBox">
#if (itemRest.RestaurantImgPath != null)
{
<img class="restImage" src="#Url.Content(itemRest.RestaurantImgPath)">
}
else
{
<img class="restImage" src="~/Content/Assets/Images/no_image.png" />
}
<div class="restMethods">
#if (itemRest.Pickup)
{
<span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
<img class="restMethodImg" src="~/Content/Assets/Images/takeaway.png" />
#*<i class="fas fa-box fa-2x"></i>*#
</span>
}
#if (itemRest.Delivery)
{
<span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
#*<i class="fas fa-motorcycle fa-2x"></i>*#
<img class="restMethodImg" src="~/Content/Assets/Images/delivery.png" />
</span>
}
#if (itemRest.OnlinePayments)
{
#*<i class="fas fa-credit-card fa-2x"></i>*#
<img class="restMethodImg" src="~/Content/Assets/Images/visa.png" />
}
</div>
<div class="row restLogoNameKitchenType">
<div class="col-xs-1" style="flex-grow: 0;">
#if (itemRest.Logo != null)
{
<img class="restLogo rounded-circle" src="#Url.Content(itemRest.Logo)">
}
else
{
<img class="restLogo rounded-circle" src="~/Content/Assets/Images/no_image.png" />
}
</div>
<div class="col-xs-9 restKitchenTypeContent">
<label class="restName">#itemRest.RestaurantName</label>
<br />
#{ string kitchenTypeFull = "";}
#foreach (var kitchenType in itemRest.RestaurantCategories)
{
kitchenTypeFull += "," + #kitchenType.Category.Description;
}
#if (kitchenTypeFull.Length > 0)
{
kitchenTypeFull = kitchenTypeFull.TrimStart(new Char[] { ',' });
<label>#kitchenTypeFull</label>
}
</div>
</div>
<div class="row restAddressPhoneOffer">
<div class="col-md-12">
<div class="row">
<div>
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col" style="margin-left:-20px">
#itemRest.Address1,<br /> #itemRest.Area, #itemRest.PostalCode<br /> #itemRest.City
</div>
</div>
<div class="row">
<div>
<i class="fas fa-phone-alt"></i>
</div>
<div class="col" style="margin-left:-20px">
#itemRest.PhoneNumber
</div>
<div>
#if (itemRest.Offer)
{
<img style="width:60px;" class="restOfferImg" src="~/Content/Assets/Images/gift.png" />
}
else
{
<img style="width:60px;height:60px;" src="~/Content/Assets/Images/no_image _blank.png" />
}
</div>
</div>
</div>
<div class="col-md-12" style="margin-top:10px;margin-bottom:10px;padding-left:0px;padding-right:10px;">
#if (itemRest.MenuLink != null && itemRest.TableLink != null)
{
<div class="rowMenuTableLink">
<button class="rowMenuTableLinkM">
#Html.Raw(itemRest.MenuLink)
</button>
<button class="rowMenuTableLinkT">
#Html.Raw(itemRest.TableLink)
</button>
</div>
}
else if (itemRest.MenuLink == null && itemRest.TableLink == null)
{
<div class="rowTableLink" style="height:44px">
</div>
}
else
{
if (itemRest.MenuLink != null)
{
<div class="col-md-12 rowMenuLink">
<button class="restMenuResrBtns">
#Html.Raw(itemRest.MenuLink)
</button>
</div>
}
if (itemRest.TableLink != null)
{
<div class="col-md-12 rowTableLink">
<button class="restMenuResrBtns">
#Html.Raw(itemRest.TableLink)
</button>
</div>
}
}
</div>
</div>
</div>
</div>
}
</div>
#*#Html.ActionLink("See More", "RestaurantPaging", "Home", new { JSONModel = Json.Encode(Model) }, null)*#
}
<script type="text/javascript">
$(document).ready(function () {
var el = document.getElementsByClassName("newRestaurantBox");
var sidebar = document.getElementById('scrollableSidebar').style.display;
var sidebarclasses = document.getElementById('scrollableSidebar').classList.value;
var newRestaurantsView = document.querySelectorAll("[id='newRestaurantsSection']");
for (var i = 0, ilen = el.length; i < ilen; i++) {
if (sidebarclasses != "sectionSidebar sectionSidebarMin" && sidebar != "none") {
$(newRestaurantsView[i]).addClass('newRestsSectionSidebar');
$(newRestaurantsView[i]).removeClass('newRestaurantsSection');
}
else {
$(newRestaurantsView[i]).addClass('newRestaurantsSection');
$(newRestaurantsView[i]).removeClass('newRestsSectionSidebar');
}
}
})
</script>
print screen example:

You just have to remove the previously appended "No Results Found" and show whatever your post method gives as a response. i.e
Create a separate div inside #tblSeeMore which will contain "No Results Found"
<div id="divNoResults">
</div>
and change your ajax post call to this:
$.ajax({
url: "#Url.Action("RestaurantPaging", "Home")",
type: 'POST',
data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
cache: false,
success: function (result, status, xhr) {
debugger;
if(result == "No Results Found"){
$('#divNoResults').empty();
$('#divNoResults').append(result);
}
else
$('#tblSeeMore').append(result);
//rest of the code
}
})
Or you can just change the display of #divNoResults based on the result from the post method
<div id="divNoResults" style="display:none">
<p>No Results Found</p>
</div>
$.ajax({
url: "#Url.Action("RestaurantPaging", "Home")",
type: 'POST',
data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
cache: false,
success: function (result, status, xhr) {
debugger;
if(result == "No Results Found"){
$('#divNoResults').show();
}
else
$('#tblSeeMore').append(result);
//rest of the code
}
})

Search HTML data table

I have some code (as below) that allows me to open and display a csv file in Firefox from a location on my hard drive. I'd like to add a search box so it will filter the list when text is entered. I've seen some other working examples that had the table data stored between tags, but I can't get this to work when it's pulling the data from an external file location. I'm really new to JavaScript and this is a bit over my head so if anyone has any pointers i'd appreciate it..
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>

Try this solution :
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
var searchKey = "";
function myFunction(e){
searchKey = e.value;
}
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
if(!cell_data[cell_count].includes(searchKey) && cell_count == 0){
break;
}
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Keep in mind that this solution only works if you're going to search within the first column only

Autodesk Forge Extension

So I am following this tutorial to extend the autodesk forge viewer. I have compelted all of the steps and no button is showing, I assume this is due to an error with the loading.
https://forge.autodesk.com/blog/extension-skeleton-toolbar-docking-panel
I have also tried this tutorial, with the same issue:
http://learnforge.autodesk.io/#/viewer/extensions/selection?id=conclusion
My issue is I am not getting an error, the extension just isn't showing... does anyone know why?
I'm assuming theres an error in either the viewer or the index.
Below is my code: (index & forge viewer)
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Autodesk Forge Tutorial</title>
<meta charset="utf-8" />
<!-- Common packages: jQuery, Bootstrap, jsTree -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="/js/MyAwesomeExtension.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v6.0" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.0"></script>
<!-- this project files -->
<link href="css/main.css" rel="stylesheet" />
<script src="js/ForgeTree.js"></script>
<script src="js/ForgeViewer.js"></script>
</head>
<body>
<!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav left">
<li>
<a href="http://developer.autodesk.com" target="_blank">
<img alt="Autodesk Forge" src="//developer.static.autodesk.com/images/logo_forge-2-line.png" height="20">
</a>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
<div class="container-fluid fill">
<div class="row fill">
<div class="col-sm-4 fill">
<div class="panel panel-default fill">
<div class="panel-heading" data-toggle="tooltip">
Buckets & Objects
<span id="refreshBuckets" class="glyphicon glyphicon-refresh" style="cursor: pointer"></span>
<button class="btn btn-xs btn-info" style="float: right" id="showFormCreateBucket" data-toggle="modal" data-target="#createBucketModal">
<span class="glyphicon glyphicon-folder-close"></span> New bucket
</button>
</div>
<div id="appBuckets">
tree here
</div>
</div>
</div>
<div class="col-sm-8 fill">
<div id="forgeViewer"></div>
</div>
</div>
</div>
<form id="uploadFile" method='post' enctype="multipart/form-data">
<input id="hiddenUploadField" type="file" name="theFile" style="visibility:hidden" />
</form>
<!-- Modal Create Bucket -->
<div class="modal fade" id="createBucketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
</div>
<div class="modal-body">
<input type="text" id="newBucketKey" class="form-control"> For demonstration purposes, objects (files) are
NOT automatically translated. After you upload, right click on
the object and select "Translate".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="createNewBucket">Go ahead, create the bucket</button>
</div>
</div>
</div>
</div>
</body>
</html>
ForgeViewer.js:
var viewerApp;
function launchViewer(urn) {
var options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken
};
var documentId = 'urn:' + urn;
Autodesk.Viewing.Initializer(options, function onInitialized() {
viewerApp = new Autodesk.Viewing.ViewingApplication('forgeViewer');
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['MyAwesomeExtension'] });
viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
}
function onDocumentLoadSuccess(doc) {
// We could still make use of Document.getSubItemsWithProperties()
// However, when using a ViewingApplication, we have access to the **bubble** attribute,
// which references the root node of a graph that wraps each object from the Manifest JSON.
var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
if (viewables.length === 0) {
console.error('Document contains no viewables.');
return;
}
// Choose any of the available viewables
viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);
}
function onDocumentLoadFailure(viewerErrorCode) {
console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}
function onItemLoadSuccess(viewer, item) {
// item loaded, any custom action?
}
function onItemLoadFail(errorCode) {
console.error('onItemLoadFail() - errorCode:' + errorCode);
}
function getForgeToken(callback) {
jQuery.ajax({
url: '/api/forge/oauth/token',
success: function (res) {
callback(res.access_token, res.expires_in)
}
});
}
MyAwesomeExtension.js:
// *******************************************
// My Awesome Extension
// *******************************************
function MyAwesomeExtension(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
this.panel = null;
}
MyAwesomeExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
MyAwesomeExtension.prototype.constructor = MyAwesomeExtension;
MyAwesomeExtension.prototype.load = function () {
if (this.viewer.toolbar) {
// Toolbar is already available, create the UI
this.createUI();
} else {
// Toolbar hasn't been created yet, wait until we get notification of its creation
this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
this.viewer.addEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
}
return true;
};
MyAwesomeExtension.prototype.onToolbarCreated = function () {
this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
this.onToolbarCreatedBinded = null;
this.createUI();
};
MyAwesomeExtension.prototype.createUI = function () {
var viewer = this.viewer;
var panel = this.panel;
// button to show the docking panel
var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showMyAwesomePanel');
toolbarButtonShowDockingPanel.onClick = function (e) {
// if null, create it
if (panel == null) {
panel = new MyAwesomePanel(viewer, viewer.container,
'awesomeExtensionPanel', 'My Awesome Extension');
}
// show/hide docking panel
panel.setVisible(!panel.isVisible());
};
// myAwesomeToolbarButton CSS class should be defined on your .css file
// you may include icons, below is a sample class:
/*
.myAwesomeToolbarButton {
background-image: url(/img/myAwesomeIcon.png);
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
}*/
toolbarButtonShowDockingPanel.addClass('myAwesomeToolbarButton');
toolbarButtonShowDockingPanel.setToolTip('My Awesome extension');
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('MyAwesomeAppToolbar');
this.subToolbar.addControl(toolbarButtonShowDockingPanel);
viewer.toolbar.addControl(this.subToolbar);
};
MyAwesomeExtension.prototype.unload = function () {
this.viewer.toolbar.removeControl(this.subToolbar);
return true;
};
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);
MyAwesomePanel:
// *******************************************
// My Awesome (Docking) Panel
// *******************************************
function MyAwesomePanel(viewer, container, id, title, options) {
this.viewer = viewer;
Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);
// the style of the docking panel
// use this built-in style to support Themes on Viewer 4+
this.container.classList.add('docking-panel-container-solid-color-a');
this.container.style.top = "10px";
this.container.style.left = "10px";
this.container.style.width = "auto";
this.container.style.height = "auto";
this.container.style.resize = "auto";
// this is where we should place the content of our panel
var div = document.createElement('div');
div.style.margin = '20px';
div.innerText = "My content here";
this.container.appendChild(div);
// and may also append child elements...
}
MyAwesomePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
MyAwesomePanel.prototype.constructor = MyAwesomePanel;

Yes, you are missing the CSS for the Buttons and also the reference to the JS files pertaining to the extensions in your HTML file.
<script src="your_folder/MyExtensionFileName.js"></script>
http://learnforge.autodesk.io/#/viewer/extensions/selection?id=toolbar-css
Check this for the CSS of your extension buttons.

Full Calendar loading before my Navigation Bar

Having a weird problem with my C# ASP.net application using FullCalendar. When I load the FullCalendar, my nav bar isn't responding properly. When the calendar is loaded, I can't access the drop down list.
I think it has something to do with my FullCalendar loading in before my nav bar but I don't know. Here's my razor page where I carry out my Calendar.
<div id="calendar"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<button id="btnDelete" class="btn btn-default btn-sm pull-right">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
<button id="btnEdit" class="btn btn-default btn-sm pull-right" style="margin-right:5px;">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
#section Scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url: "/Appointments/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
details: v.DetailsOfAppointment,
date: moment(v.DateOfAppointment),
room: v.RoomType,
confirmed: v.Confirmed,
colour: v.ThemeColour,
church: v.Church.Name,
parishAdminName: v.Admins.AdministratorName,
parishAdminUser: v.Admins.AdminUsername,
parishAdminId: v.Admins.AdministratorId,
fee: v.Fee,
id: v.AppointmentId
});
})
GenerateCalender(events);
},
error: function (error) {
alert("failed");
console.log(error);
}
})
function GenerateCalender(events) {
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
contentHeight: 500,
defaultDate: new Date(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
timeFormat: 'HH:mm',
eventLimit: true,
eventColor: events.ThemeColour,
events: events,
eventRender: function (event, element) {
if (event.fee == null) {
if (event.confirmed == false) {
element.css('background-color', '#FF0000');
element.css('border-color', '#FF0000');
}
else {
element.css('background-color', '#008000');
element.css('border-color', '#008000');
}
}
else
{
element.css('background-color', '#0000FF');
element.css('border-color', '#0000FF');
}
},
eventClick: function (calEvent, jsEvent, view) {
$('#myModal #details').text(calEvent.details);
var $details = $('<div/>');
if (calEvent.fee != null) {
$details.append($('<p/>').html('<b>Date of Ceremony : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
}
else {
$details.append($('<p/>').html('<b>Date of Appointment : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
}
if (calEvent.end != null) {
$details.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$details.append($('<p/>').html('<b>Details : </b>' + calEvent.details));
$details.append($('<p/>').html('<b>Church Name : </b>' + calEvent.church));
if (calEvent.fee == null) {
if (calEvent.room != null) {
$details.append($('<p/>').html('<b>Room : </b>' + calEvent.room));
}
else {
$details.append($('<p/>').html('<b>Room Not Confirmed'));
}
}
$details.append($('<p/>').html('<b>Parish Admin : </b>' + calEvent.parishAdminName));
if (calEvent.confirmed == true)
{
$details.append($('<p/>').html('<b>Status : Confirmed </b>'));
}
else
{
$details.append($('<p/>').html('<b>Status : Not Confirmed </b>'));
}
$('#myModal #pDetails').empty().html($details);
$('#myModal').modal();
}
})
}
})
</script>
}

It seems like a z-index issue. Make sure your element is positioned (e.g relative) and add an z-index property like: z-index: 99;
More about it in the MDN documentation:

Links are not clickable?

As I'm designing my node.js application, I'm having trouble figuring out why my anchor links are not working/not clickable. The code itself was working fine before I designed the app. Is there a CSS property I need to configure to fix this? This is for the .player ul li links.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> -->
<meta charset="UTF-8">
<title>Open Mic Chatroom</title>
</head>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- <a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a> -->
<h1>OpenMic</h1>
</div>
</div>
</nav>
</header>
<body>
<div class="container">
<div class="row">
<div class="musicians col-sm-3 col-md-3">
<!-- <div class="musicians col-sm-6 col-md-4"> -->
<!-- <div class="col-sm-6 col-md-4"> -->
<!-- <div class="thumbnail musicians-box"> -->
<!-- <img src="..." alt="..."> -->
<div class="caption">
<h2>Musicians Online</h2>
<p>
<div id="chatters">
</div>
</p>
<!-- <p>Button Button</p> -->
<!-- </div> -->
</div>
</div>
<div class="chatroom col-sm-8 col-md-8">
<!-- <div class="chatroom col-sm-6 col-md-4">
--><!-- <div class="col-sm-6 col-md-4">-->
<!-- <div class="thumbnail chatroom-box"> -->
<!-- <img src="..." alt="..."> -->
<div class="caption">
<h2>Messages</h2>
<div id="messagesContainer"></div>
<!-- </div> -->
</div>
<form action="" id="chat_form">
<input id="info" autocomplete="off" />
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<!-- <h3>Messages</h3>
<div id="messagesContainer"></div>
<form action="" id="chat_form">
<input id="info" autocomplete="off" />
<input type="submit" value="Submit">
</form> -->
<!-- SoundCloud Recording Feature -->
<div class="row player">
<div class="soundcloud-player">
<ul>
<div id="player">
<!-- <button type="button" id="startRecording" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
</button> -->
<li id="startRecording">Start Recording</li>
</div>
<!-- <button type="button" id="stopRecording" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
</button> -->
<li id="stopRecording">Stop Recording</li>
<!-- <button type="button" id="playBack" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button> -->
<li id="playBack">Play Recorded Sound</li>
<!-- <button type="button" id="upload" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button> -->
<li id="upload">Upload</li>
</ul>
<p class="status"></p>
<div class="audioplayer">
</div>
</div>
</div>
<!-- <script src="/socket.io/socket.io.js"></script> -->
</div>
<script>
$(document).ready(function() {
var trackUrl;
//establish connection
var socket = io.connect('http://localhost:3000');
$('#chat_form').on('submit', function (e) {
e.preventDefault();
var message = $('#info').val();
socket.emit('messages', message);
$('#info').val('');
});
socket.on('messages', function (data) {
console.log("new message received");
$('#messagesContainer').append(data);
$('#messagesContainer').append('<br>');
// insertMessage(data);
});
socket.on('add_chatter', function (name) {
var chatter = $('<li>' + name + '</li>').data('name', name);
$('#chatters').append(chatter);
});
// //Embed SoundCloud player in the chat
// socket.on('track', function (track) {
// console.log("new track", track);
// SC.oEmbed(track, {auto_play: true}, function (oEmbed) {
// console.log('oEmbed response: ' + oEmbed);
// });
// SC.stream(track, function (sound) {
// console.log("streaming", sound);
// sound.play();
// });
// // socket.on('remove chatter', function (name) {
// // $('#chatters li[data-name=]' + name + ']').remove();
// });
//SOUNDCLOUD RECORDING FEATURE
function updateTimer(ms) {
// update the timer text. Used when user is recording
$('.status').text(SC.Helper.millisecondsToHMS(ms));
}
//Connecting with SoundCloud
console.log("calling SoundCloud initialize");
SC.initialize({
client_id: "976d99c7318c9b11fdbb3f9968d79430",
redirect_uri: "http://localhost:3000/auth/soundcloud/callback"
});
SC.connect(function() {
SC.record({
start: function() {
window.setTimeout(function() {
SC.recordStop();
SC.recordUpload({
track: { title: 'This is my sound' }
});
}, 5000);
}
});
//Adds SoundCloud username to chat app
console.log("connected to SoundCloud");
SC.get('/me', function(me) {
console.log("me", me);
socket.emit('join', me.username);
});
// SC.get('/me/tracks', {}, function(tracks) {
// var myTracks = $("<div>");
// var heading = $("<h1>").text("Your tracks");
// var list = $("<ul>");
// tracks.forEach(function (single) {
// var listItem = $("<li>").text(single.permalink);
// listItem.on("click", function () {
// SC.oEmbed(single.permalink_url, {
// auto_play: true
// }, function(oEmbed) {
// console.log("oEmbed", oEmbed);
// $('.status').html(oEmbed.html);
// });
// });
// list.append(listItem);
// });
// $("body").append(myTracks.append(heading, list));
// });
// username = prompt("What is your username?");
// socket.emit('join', username);
// });
//Start recording link
$('#startRecording a').click(function (e) {
$('#startRecording').hide();
$('#stopRecording').show();
e.preventDefault();
SC.record({
progress: function(ms, avgPeak) {
updateTimer(ms);
}
});
});
//Stop Recording link
$('#stopRecording a').click(function (e) {
e.preventDefault();
$('#stopRecording').hide();
$('#playBack').show();
$('upload').show();
SC.recordStop();
});
//Playback recording link
$('#playBack a').click(function (e) {
e.preventDefault();
updateTimer(0);
SC.recordPlay({
progress: function (ms) {
updateTimer(ms);
}
});
});
//Uploaded SoundCloud Track after recorded
$('#upload').click(function (e) {
e.preventDefault();
SC.connect({
connected: function() {
console.log("CONNECTED");
$('.status').html("Uploading...");
SC.recordUpload({
track: {
title: 'My Recording',
sharing: 'public'
}
},
//When uploaded track, provides link user, but not everyone
function (track) {
// console.log("TRACK", track);
setTimeout(function () {
SC.oEmbed(track.permalink_url, {auto_play: true}, function(oEmbed) {
console.log("THIS IS oEMBED", oEmbed);
// console.log(oEmbed.html);
socket.emit('messages', oEmbed.html );
$('.status').html(oEmbed.html);
});
}, 8000);
// $('.status').html("Uploaded: <a href='" + track.permalink_url + "'>" + track.permalink_url + "</a>");
});
}
});
});
});
});
</script>
</body>
</html>
CSS:
body {
background: url('microphone.svg') no-repeat center center fixed;
background-position: 4% 100%;
}
h1, h2, h3 {
font-family: 'Bree Serif', serif;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
color: white;
padding-left: 5%;
padding-bottom: 5%;
letter-spacing: 4px;
}
.navbar-default {
background-color: #000000;
/* background-image: url('SoundWave.jpg');
background-position: center;
opacity: 0.8;*/
}
input, button, select, textarea {
line-height: 3;
}
.chatroom, .musicians {
border-style: solid;
border-radius: 6%;
border-color: black;
margin-left: 20px;
height: 500px;
background-color: #F2F2F2;
opacity: 0.8;
}
.musicians {
height: fixed;
}
input#info {
margin: 47% 1%;
width: 656px;
border-radius: 10%;
}
.visualSoundContainer__teaser {
height: 100px;
}
.row {
padding-top: 2%;
}
.player {
text-align: center;
}
.player ul li {
z-index: 30;
}

Comment the margin property. It is cover the section. you can check it on firebug while selecting the anchor element.
input#info {
/*margin: 47% 1%;*/
width: 656px;
border-radius: 10%;
}
Working link: http://jsfiddle.net/95yz0h63/

add css
a{
cursor:pointer;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

codeigniter Json table in view page not loading table - mysql

Related

If a user keep pressing button (see more) keep getting multiple times no results

Search HTML data table

Autodesk Forge Extension

Full Calendar loading before my Navigation Bar

Links are not clickable?

Categories

Resources