We Keep Coding

Accordion List Using Jquery and Ajax

I'm Trying to Implement an accordion list. So basically this a bootstrap accordion. The title of the accordion is already set by PHP. When the user clicks the accordion it must display list of the session that is coming from server. I am using an ajax call for this, the issue every time I click the accordion only first elements get the results. Other elements didn't get the result just a blank view is displayed. I am fairly new to jquery. Here is my Html Code
<div class="accordion" id="myAccordion">
<?php foreach($modules as $module): ?>
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button id="<?php echo $module->id;?>" type="button" class="btn" data-toggle="collapse"
data-target="#collapse<?php echo $module->id; ?>"><?php echo $module->module_name; ?></button>
</h2>
</div>
<div id="collapse<?php echo $module->id; ?>" class="collapse" aria-labelledby="headingOne"
data-parent="#myAccordion">
<div class="card-body">
<ul id="sessionlist" class="list-group list-group-flush">
<li class="list-group-item">
<i class="icon-play_circle_outline text-blue"></i>'+data[i].session_name+'' +
</li>
</ul>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
This is my Jquery and ajax code
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "<?php echo base_url(); ?>dashboard/displaysession/" + this.id,
type: 'GET',
data: {},
error: function () {
alert('Something is wrong');
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
var myhtmlstring = '<li class="list-group-item">' +
'<i class="icon-play_circle_outline text-blue"></i><a href="#">' +
data[i].session_name + '</a>' +
'</li>';
console.log($.parseHTML(myhtmlstring));
$("#sessionlist").append($.parseHTML(myhtmlstring));
}
},
dataType: 'json'
});
});
});
</script>
Really appricate your help

You need to give your sessionlists unique ids aswell. Because when you append your myhtmlstring to #sessionlist it only ever takes the first one.
<ul id="sessionlist<?php echo $module->id; ?>" class="list-group list-group-flush">
<li class="list-group-item">
<i class="icon-play_circle_outline text-blue"></i>'+data[i].session_name+'' +
</li>
</ul>
then you can append it to the right sessionlist in your ajax success:
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
const currentModuleId = this.id
$.ajax({
url: "<?php echo base_url(); ?>dashboard/displaysession/" + currentModuleId ,
type: 'GET',
data: {},
error: function () {
alert('Something is wrong');
},
success: function (data) {
$("#sessionlist" + currentModuleId ).html("");
for (var i = 0; i < data.length; i++) {
var myhtmlstring = '<li class="list-group-item">' +
'<i class="icon-play_circle_outline text-blue"></i><a href="#">' +
data[i].session_name + '</a>' +
'</li>';
console.log($.parseHTML(myhtmlstring));
$("#sessionlist" + currentModuleId ).append($.parseHTML(myhtmlstring));
}
},
dataType: 'json'
});
});
});
</script>

DataTables warning: table (id) Cannot reinitialise DataTable.(on server have error but on localhost not)

I implemented the creation of tables (based od Datatables library). The strange thing is that I getting DataTables warning: (table id=scoringTableI - Cannot reinitialize DataTable on my server) on the server-side but on the localhost everything works perfectly. Bellow text is PrintScreen and my source code. Does anyone know where is a problem?
scoringDetailView.js
/*
timer to reinit datatable after it is properly loaded
*/
var reinitInterval;
var scoreDown = false;
const scaleHeight = 20; // Height of the canvases on which to draw the score scales
const sliderHeight = 15; // Height of the slider controlling the scores
$(document).ready(function() {
console.log('document ready');
initTables();
reinitScoringTable();
initSliders();
$('.alert-dismissable').delay(2500).fadeOut();
$('[data-toggle="popover"]').popover();
$(document).keydown(function(event) { // bind function called when key is released
if (event.keyCode == 16){
scoreDown = true;
}
});
$(document).keyup(function() { // click method to call keydown() function
scoreDown = false;
});
});
/*
init all tables for the first time
*/
function initTables(){
$( ".table-bordered" ).each(function( index ) {
var id = '#' + this.getAttribute('id');
initTable(id);
console.log(id);
if($(this).has('input.score-slider').length){
// Add event listener to recalculate slider size on data table column width change
$(this).on('column-sizing.dt', function (){
initSliders();
});
}
// reinit table page to avoid empty buttons
$(id).on( 'page.dt', function () {
var reinitInterval = setInterval(function(){ reinitScoringTable() }, 10);
});
//reinit table on click of the first field.
//If the table shrunk due to the responsiveness the expanding buttons
//is placed there
$(id).DataTable().on( 'select', function ( e, dt, type, indexes ) {
dt.deselect();
if ( dt[0][0].column == 0) {
reinitScoringTable();
}
});
});
}
/*
options of one single table
*/
function initTable(id){
console.log('initTable(id=' + id + ')');
$(id).DataTable({
paging : true,
lengthChange: true,
pageLength : 10,
searching : true,
ordering : true,
info : true,
autoWidth : false,
responsive : true,
aaSorting : [],
language: {
paginate: {
previous: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
}
},
lengthMenu : [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
select: {
style: 'single',
items: 'cell'
},
dom: "<'row'<'col-12 col-sm-12 col-md-12 col-lg-12 additional-buttons'B><'float-right col-12 col-sm-8 col-md-8 col-lg-8'f><'col-12 col-sm-4 col-md-4 col-lg-4'l>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'ip>>",
buttons: [
{
extend: 'pdf',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copy',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
]
});
console.log('initTable(id=' + id + ')' + ' finished');
}
/*
fixes detached buttons, corrects displayed values in table buttons,
recalculates responsive table
*/
function reinitScoringTable() {
console.log('reinitScoringTable()');
clearInterval(reinitInterval);
$( ".table-bordered" ).each(function( index ) {
var id = '#' + this.getAttribute('id');
$(id).DataTable().columns.adjust().responsive.recalc();
});
//rebind all buttons. Used for AOI scoring
$('.btn-scoring').unbind();
$('.btn-scoring').click(function() {
var form = $($(this).attr('form-id'));
var typeId = form.attr('type-id');
var min = parseFloat(form.attr('min'));
var max = parseFloat(form.attr('max'));
var stepsize = parseFloat(form.attr('stepsize'));
var view = $(this).attr('view');
//will only be executed in the beginning and will update all scores to minimum
if(isNaN(parseFloat(form.val()))){
var newVal = min;
//updates the rest of the row
$('.' + form.attr('class').split(' ').join('.')).each(function( index ) {
$(this).val(parseFloat($(this).attr('min')));
updateButtons();
});
}else{
//normal increment by stepsize
var val = parseFloat(form.val()) == 0 ? form.val() : parseFloat(form.val()) || min;
if(scoreDown){
a = val-min-stepsize
b = max-min+stepsize
var newVal = ((a%b)+b)%b+min;
}else {
var newVal = (val-min+stepsize)%(max-min+stepsize)+min;
}
}
form.val(newVal);
updateSystemScores(form.attr('class'), form, view);
setTypeLabel(typeId, (newVal-min)/stepsize, this, newVal);
});
// Slider for image scoring
$('.score-slider').off("input change");
$('.score-slider').on('input change', function(){
var newVal = $(this).val();
var form = $($(this).attr('form-id'));
var typeId = form.attr('type-id');
var min = parseFloat($(this).attr('min'));
var stepsize = parseFloat($(this).attr('step'));
var label = $($(this).parent().parent().find('.score-label'));
// If no score was saved yet, initialise all to minimum
if(isNaN(parseFloat(form.val()))){
$('.' + form.attr('class').split(' ').join('.')).each(function(){
$(this).val(parseFloat($(this).attr('min')));
});
// Set the current one to the new value
form.val(newVal);
updateSliderLabels();
} else {
form.val(newVal);
}
setTypeLabel(typeId, (newVal-min)/stepsize, label, newVal);
// The saving of the new score is only done on slider release
if(event.type == 'change'){
var view = $(this).attr('view');
updateSystemScores(form.attr('class'), form, view);
}
})
updateButtons();
updateAllSystemScorings();
}
//set values of all buttons in table
function updateButtons(){
$( ".btn-scoring" ).each(function( index ) {
var form = $($(this).attr('form-id'));
if(isNaN(parseFloat(form.val()))){
$(this).html('n.d.');
}else{
var typeId = form.attr('type-id');
var val = parseFloat(form.val()) || 0;
var min = parseFloat(form.attr('min'));
var max = parseFloat(form.attr('max'));
var stepsize = parseFloat(form.attr('stepsize'));
setTypeLabel(typeId, (val-min)/stepsize, this, val);
}
});
}
/*
* Set values for all slider labels
*/
function updateSliderLabels(){
$('.score-slider').each(function(){
var form = $($(this).attr('form-id'));
var label = $($(this).parent().parent().find('.score-label'));
// If no value for this type yet, label is 'n.d.'
if(isNaN(parseFloat(form.val()))){
label.html('n.d.');
} else { // Else set label to current value
var val = parseFloat(form.val()) || 0;
setTypeLabel(form.attr('type-id'), (val - parseFloat($(this).attr('min'))/parseFloat($(this).attr('step'))), label, val);
}
})
}
// recalc responsive on resizing
$(window).resize( function(){
if(document.readyState === 'complete'){
reinitScoringTable();
}
});
/*
Save type scores, recalculate system score and load the result
*/
function updateSystemScores(rowClass, form, view){
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-spinner fa-spin scoring-status-symbol');
var data = $('.' + rowClass.split(' ').join('.')).serialize() + "&imageId=" + $('#image_id').attr('value');
if(form[0].hasAttribute('subSystem-id')){
data = data + '&subSystemId=' + form.attr('subSystem-id');
}
$.ajax({
type: 'POST',
url: "/scoring/systemscore",
data: data,
success: function(data, textStatus, xhr){
if(xhr.status == 200){
var scores = data[0];
var summary = data[1];
// Refill the score system scores with the new calculated scores
for (var score in scores) {
$(form.attr('score-ref') + '_' + scores[score]['score_system_id']).attr('value',scores[score]['result']);
}
updateAllSystemScorings();
// Reload summary view
$("#summary-pane" + view).html(summary);
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-check scoring-status-symbol');
}else{
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
},
error: function() {
console.log("AJAX save failed")
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
});
}
/**
* sets right system scores in scoring tables
*/
function updateAllSystemScorings(){
$( ".lab-scoring" ).each(function( index ) {
var form = $($(this).attr('form-id'));
var val = form.attr('value');
$(this).html(val);
});
}
/*
reinit on tab change
*/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
reinitScoringTable();
});
/**
* Delete image (div_id = I) or AOI (div_id = AOI) scores
* #param String div_id, indicates if request for deletion is coming from AOI or Image
* #param Int subSystemId potential subSystem to delete the scores from
*/
function deleteScores(div_id, subSystemId = null){
if(subSystemId){
var url = '/scoring/deletetimepointscores/';
url = url + $('#image_id').attr('value') + '/' + subSystemId;
} else {
var url = (div_id.indexOf('AOI') !== -1) ? '/scoring/deleteaoiscores/' : '/scoring/deleteimgscores/';
url = url + $('#image_id').attr('value');
}
$('.active .scoring-status-symbol').attr('class', 'fa fa-spinner fa-spin scoring-status-symbol');
$.ajax({
type: 'POST',
url: url,
success: function(data, textStatus, xhr){
console.log('Ajax successful');
$('.active .scoring-status-symbol').attr('class', 'fa fa-exclamation scoring-status-symbol');
if(xhr.status == 200){
var summary = data[0];
var score_labels = data[1];
$('#summary-pane' + div_id).html(summary);
$('#scoringTable' + div_id).find('.btn-scoring').each(function(index){
var form = $($(this).attr('form-id'));
// Reset buttons to n.d
$(this).html('n.d.');
form.val('n.d');
// Reset labels to minimum values
for (var score_label in score_labels) {
$(form.attr('score-ref') + '_' + score_labels[score_label][0]).attr('value', score_labels[score_label][1]);
}
});
if(subSystemId){
var scoringTableId = '#scoringTable' + subSystemId;
} else {
var scoringTableId = '#scoringTable' + div_id;
}
$(scoringTableId).find('.score-slider').each(function(index){
var form = $($(this).attr('form-id'));
var typeId = form.attr('type-id');
// Set slider to minimun
setSliderToMin($(this));
form.val('n.d');
$($(this).parent().parent().find('.score-label')).html('n.d.');
for (var score_label in score_labels) {
$(form.attr('score-ref') + '_' + score_labels[score_label][0]).attr('value', score_labels[score_label][1]);
}
})
updateAllSystemScorings();
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-check scoring-status-symbol');
}else{
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
},
error: function(){
console.log('Ajax failed');
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
});
}
/*
* Display modal for delete confirm and callback the delete function
* #param element: button triggering the function
* #param text: description text to display in the delete modal
* #param title: title for the delete modal
* remark: text and title should not be undefined, otherwise the modal message will not be related to its function anymore
*/
function ConfirmDeleteScores(element, text, title)
{
setUpDeleteScoresModal(text, title);
var div_id = (element.id).replace('delete-scores', ''); // check if AOI or image scores
$('#confirm-delete-modal').find('.modal-footer #modal-delete-btn').on('click', function(){
$("#confirm-delete-modal").modal("hide");
deleteScores(div_id, element.getAttribute('subSystem'));
return true;
});
return false;
}
$("#delete-scoresAOI").unbind();
$("#delete-scoresI").unbind();
documentation.blade.php
#if($scoreConfig->scoring_enabled)
<div class="row">
<div class="card ml-2" style="width: 100%;">
<div class="card-body" id="score-button-small" style="height: 10px;">
<button class="btn btn-box-tool collapse-tab-content float-right" href="#note-tabs">
<i style="color: #1e88e5;" class="fa fa-minus"></i>
</button>
</div>
<div class="card-body">
<div class="row">
<div class="nav-tabs-custom nav-tabs-documentation" style="width: 100%;">
<ul class="nav nav-tabs customtab" id="score-tabs">
#php
$activePane = "active";
#endphp
#if($scoreConfig->scoring_enabled && $scoreConfig->image_based_score)
<li class="nav-item {{$activePane}}">
#php
$activePane = "";
#endphp
<a class="nav-link active" href="#{{trans('scoring.scoring')}}" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_img')}}">
<span class="hidden-lg-up">ScI <i class="fa fa-check scoring-status-symbol"></i></span> </span>
<span class="hidden-md-down">{{trans('scoring.scoring_per_img')}} <i class="fa fa-check scoring-status-symbol"></i></span>
</a>
</li>
#if(in_array(\Auth::user()->userGroup->id,config('usergroups.summaryScoring')))
<li class="nav-item">
<a class="nav-link" href="#summary-paneI" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_img')}}">
<span class="hidden-lg-up">SuI</span> </span>
<span class="hidden-md-down">{{trans('scoring.summary_per_img')}}</span>
</a>
</li>
#endif
#endif
#if($scoreConfig->scoring_enabled && $scoreConfig->aoi_based_score)
<li class="nav-item {{$activePane}}">
<a class="nav-link" href="#{{trans('scoring.scoring')}}-aoi" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_AOI')}} ">
<span class="hidden-lg-up">ScA <i class="fa fa-check scoring-status-symbol"></i></span> </span>
<span class="hidden-md-down">{{trans('scoring.scoring_per_AOI')}} <i class="fa fa-check scoring-status-symbol"></i></span>
</a>
</li>
#if(in_array(\Auth::user()->userGroup->id,config('usergroups.summaryScoring')))
<li class="nav-item ">
<a class="nav-link" href="#summary-paneAOI" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_AOI')}} ">
<span class="hidden-lg-up">SuA</span> </span>
<span class="hidden-md-down">{{trans('scoring.summary_per_AOI')}}</span>
</a>
</li>
#endif
#endif
<div class="box-tools ml-auto" id="score-button-big">
<button class="btn btn-box-tool collapse-tab-content" href="#note-tabs">
<i style="color: #1e88e5;" class="fa fa-minus"></i>
</button>
</div>
</ul>
<div class="tab-content" id="note-tabs">
#php
$activePane = "active";
#endphp
#if($scoreConfig->scoring_enabled && $scoreConfig->image_based_score)
<div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}">
#php
$activePane = "";
#endphp
#if($scoreConfig->scoreSuperSystem)
#include('scoring.image.subsystem')
#elseif($scoreConfig->types->isEmpty())
#include('scoring.demo.scoring')
#else
#include('scoring.image.scoring')
#endif
</div>
<div class="tab-pane" id="summary-paneI">
#if($scoreConfig->scoreSuperSystem)
#include('scoring.image.subsystemsummary')
#elseif($scoreConfig->types->isEmpty())
#include('scoring.demo.summary')
#else
#include('scoring.image.summary')
#endif
</div>
#endif
#if($scoreConfig->scoring_enabled && $scoreConfig->aoi_based_score)
#php
$demoAOI = 1;
#endphp
<div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}-aoi">
#if($scoreConfig->types->isEmpty())
#include('scoring.demo.scoring')
#else
#include('scoring.aoi.scoring')
#endif
</div>
<div class="tab-pane" id="summary-paneAOI">
#if($scoreConfig->types->isEmpty())
#include('scoring.demo.summary')
#else
#include('scoring.aoi.summary')
#endif
</div>
#endif
</div>
</div>
</div>
#endif
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/bootstrap4.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/datatables.min.css') }}"/>
<script src="{{asset('/plugins/DataTablesBootstrap4/jquery.dataTables.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.responsive.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/plugins/datatables/1.10.16/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/jszip.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/pdfmake.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/vfs_fonts.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.print.min.js') }}"></script>
<script src="{{ asset('/js/jquery.form.js') }}"></script>
<script src="{{ asset('/js/scoring/scoringDetailView.js?v=2.25.0') }}"></script>
<script src="{{ asset('/js/scoring/scoring.js?v=2.25.0') }}"></script>
scoring.blade.php
<style>
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.dataTables_wrapper {
width: 100%;
}
</style>
{!! Form::open(['route' => ['documentation.scoring.scoring',$image->id], 'onSubmit' => '$.fn.showPleaseWait();', 'id' => 'scoringFormI']) !!}
<div style='position: absolute; visibility: hidden'>
#foreach ($scoreConfig->types as $type)
{!! Form::number('scoring',
$value = $prevScoresI->isEmpty() ? 'n.d.' : $prevScoresI->get($type->id)->score ,
['min' => $type->min, 'max' => $type->max,'stepsize' => $type->stepsize,
'class' => 'btn btn-default btn-datarow-image',
// id : id which is set as form-id in the according button,
// number code is the same as in the name field
'id' => 'scores'.$type->id,
// href to the system score div
'score-ref' => '#systemScoreImage',
// array field in which the score is saved
'name' => 'scores['.$type->id.']',
'type-id' => $type->id,
'style' => 'outline: none; visibility: hidden','required','readonly']) !!}
#endforeach
#if ($systemScoresI->count())
#foreach ($systemScoresI as $key => $scoreI)
<div id="systemScoreImage_{{$scoreI->systemScore->scoreSystem->id}}" style="visibility: hidden;" value="
{{ $scoreI->systemScore->result($scoreI, $scoreI->systemScore->scoreSystem->style->name) }}"></div>
#endforeach
#else
#foreach ($scoreConfig->scoreSystems as $key => $systems)
<div id="systemScoreImage_{{$systems->id}}" style="visibility: hidden;" value="
{{$systems->scoreSystemScores[0]->result(NULL, $systems->style->name)}}"></div>
#endforeach
#endif
</div>
<div class="card-body">
<div class="row">
<div class="table-responsive">
<table id='scoringTableI' class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 30%">{{trans('scoring.parameter')}}</th>
<th>{{trans('scoring.score')}}</th>
</tr>
</thead>
<tbody>
#foreach ($scoreConfig->types as $type)
<tr>
<!-- If the type has a description, show it, otherwise show the name -->
#if(isset($type->description))
<th title="{{$type->name}}">{{$type->description}} ({{$type->min}}-{{$type->max}})</th>
#else
<th>{{$type->name}} ({{$type->min}}-{{$type->max}})</th>
#endif
<td>
<div class="row">
<!-- The JS of this view relies on the position of the slider and its label in the DOM.
If the DOM structure is changed, please update the JS file accordingly
regarding the slider event listener which also updates the label -->
#php
if($prevScoresI->isEmpty()){
$savedScore = 'n.d.';
$hasScore = false;
} else {
$savedScore = $prevScoresI->get($type->id)->score;
$hasScore = true;
}
$savedScore = $prevScoresI->isEmpty() ? 'n.d.' : $prevScoresI->get($type->id)->score;
#endphp
<div class="col-lg-9 col-md-6 col-sm-6 col-xs-12">
<canvas class="score-scale" style="position: absolute"></canvas>
<input style="position: inherit; width: 80%;" class="score-slider" type="range" min="{{$type->min}}" max="{{$type->max}}" step="{{$type->stepsize}}" value="#if($hasScore){{$savedScore}}#else{{$type->min}}#endif" style=" position: absolute;" view="I" form-id="{{'#scores'.$type->id}} "class="form-control-range">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<label class="score-label float-right">{{$savedScore}} #if(count($type->labels) && $hasScore)({{$type->labels->where('type_index', ($savedScore - $type->min) / $type->stepsize)->pluck('label')->first()}})#endif </label>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
#if($scoreConfig->scoreSystems->count())
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 30%">{{trans('scoring.scoreSystem')}}</th>
<th>{{trans('scoring.score')}}</th>
</tr>
</thead>
<tbody>
#foreach ($scoreConfig->scoreSystems as $key => $system)
<tr>
<td>{{$system->name}}</td>
<td><label class="lab-scoring" form-id="#systemScoreImage_{{$system->id}}"></label></td>
</tr>
#endforeach
</tbody>
</table>
</div>
#endif
</div>
{!! Form::close() !!}
<div class ='card-footer' style="background-color: white;">
<div class="row justify-content-center">
<div class='col-md-2'>
<button id='delete-scoresI' class='btn btn-default btn-2icons btn-wrapper' onclick="return ConfirmDeleteScores(this, '{{trans('modals.delete_current_image_scores')}}', '{{trans('modals.delete_current_image_scores_title')}}')" data-toggle='tooltip' data-placement='top' title="{{trans('tooltips.delete_current_image_scores')}}">
<i class='fa fa-trash'></i>
</button>
</div>
</div>
</div>

JQuery foreach Loop +adding stuff

I´m trying to add a button which sends me to another HTML File inside the for each LOOP but my problem is once i add something new into the loop it doesn´t display any of the products anymore // "customize product"+ is the code that i´m trying to add but somehow it doesn´t work
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Produkte</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="javascript/jquery/jquery.min.js"></script>
<script src="css/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {});
console.log("Ready");
// var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item){
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>"+
"<div class='card h-100'>"+
"<a href='#'><img class='card-img-top' src='"+result[i].bildpfad+"' height='200' width='140'></a>"+
"<div class='card-body'>"+
" <h4 class='card-title'>"+
"<a href='#'>"+result[i].name+"</a>"+
"</h4>"+
"<p id=artikel"+ result[i].artikelId + " class='card-text'>Artikelnummer: "+result[i].artikelId+"</p>"+
"<p class='card-text'> Beschreibung: "+result[i].beschreibung+"</p>"+
"</div>"+
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>"+
"</div>"
);
});
},complete: function(xhr, statusText){
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},error: function(xhr, errMsg) {
if(xhr.status==401){
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url(){
document.location = 'http://somewhere.com/';
}
</script>
</body>
so everytime I add anything into the loop all my products disappear
I´m gladful for any help and any help is appreciated, I have been stuck a while on this now

As was mentioned, you can only use certain quotes inside of quotes. For example, if you define a String with double quotes ("), then inside, you must use single quotes (') and vice-versa.
Take a look:
$(function() {
console.log("Ready");
var result = [{
beschreibung: "Text 1",
name: "Name 1",
bildpfad: "Source 1",
artikelId: 1
}, {
beschreibung: "Text 2",
name: "Name 2",
bildpfad: "Source 2",
artikelId: 2
}, {
beschreibung: "Text 3",
name: "Name 3",
bildpfad: "Source 3",
artikelId: 3
}];
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
var content = "";
content += "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>";
content += "<div class='card h-100'>";
content += "<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>";
content += "<div class='card-body'>";
content += "<h4 class='card-title'><a href='#'>" + item.name + "</a></h4>";
content += "<p id='artikel" + item.artikelId + "' class='card-text'>Artikelnummer: " + item.artikelId + "</p>";
content += "<p class='card-text'> Beschreibung: " + item.beschreibung + "</p></div>";
content += "<a class='btn btn-primary' href='product_create.html'>customize product</a>";
content += "</div></div>";
$("#ArtikelContainer").append(content);
});
/*
var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>" +
"<div class='card h-100'>" +
"<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>" +
"<div class='card-body'>" +
" <h4 class='card-title'>" +
"<a href='#'>" + result[i].name + "</a>" +
"</h4>" +
"<p id=artikel" + result[i].artikelId + " class='card-text'>Artikelnummer: " + result[i].artikelId + "</p>" +
"<p class='card-text'> Beschreibung: " + result[i].beschreibung + "</p>" +
"</div>" +
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>" +
"</div>"
);
});
},
complete: function(xhr, statusText) {
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},
error: function(xhr, errMsg) {
if (xhr.status == 401) {
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
*/
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url() {
document.location = 'http://somewhere.com/';
}
});
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
Hope that helps.

How to make "this" refer to the element firing the event

I'd like to make "this" refer to the element which is actually firing the event:
<div class="input-group">
<span class="input-group-addon header-text" id="action-header-text">Action</span>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="action-dropdown" data-toggle="dropdown" aria-expanded="true" style="min-width:250px;">
<span class=" caret">
</span>
</button>
<ul id="action-menu" class="dropdown-menu" role="menu"></ul>
</div>
</div>
Filling Ajax Request:
function UpdateActionDropdown() {
$.ajax({
url: 'FrontEnd/Action',
type: 'POST',
dataType: 'json',
data: {
lid: document.getElementById('selected-language-id').value
},
success: function (data) {
document.getElementById('action-dropdown').firstChild.data = data.UnSelectable[0].ActionTrailer.DescriptionText;
$('#action-menu').html(null);
for (var i = 0; i < data.UnSelectable.length; i++) {
$('#action-menu').append("<li role='presentation' class='disabled'><a role='menuitem' tabindex='-1'>" + data.UnSelectable[i].ActionTrailer.DescriptionText + "</a></li>")
}
$('#action-menu').append("<li role='presentation' class='divider'></li>");
for (var i = 0; i < data.Selectable.length; i++) {
$('#action-menu').append("<li role='presentation'>" +
"<a role='menuitem' tabindex='-1' text='" + data.Selectable[i].DescriptionText + "' value='" + data.Selectable[i].ActionTrailer.ID + "'\" href='#'>" + data.Selectable[i].ActionTrailer.DescriptionText + "</a></li>")
}
}
});
}
global listener:
$('.dropdown').on('click', '#action-menu li', function(){
// Inside here I want to access the li-element which got clicked.
});
I assume that "this" inside the onclick Handler would refer to the document (or window) itself - is it possible to refer to the actual event firing element?
Thanks in advance!

Use $(this) which will be a DOM(in the context of jQuery) element when you are in a callback function
$('.dropdown').on('click', '#action-menu li', function(){
$(this)// It will be the li element clicked
});
See jQuery: What's the difference between '$(this)' and 'this'? and https://remysharp.com/2007/04/12/jquerys-this-demystified

Javascript runtime error: 'function' is undefined

It says my function is undefined yet it is clearly defined below the body of the program's content.
<button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
#*Add*#
function CmdBranchAdd_OnClick() {
alert('Hi');
#*$('#BranchEdit').modal({
show: true,
backdrop: false
});
document.getElementById('BranchEdit-BranchCode').value = "";
document.getElementById('BranchEdit-Branch').value = "";
document.getElementById('BranchEdit-CompanyID').value = "";*#
}
at the moment, the main body of the function has been commented out to test if it can connect to the function. but when run and pressed, it return a javarscript runtime error stating that the function in the button in undefined.
Edit #1:
Sorry, copied wrong line of code xD Forgive me
<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
while I'm at it, here are the loaded scripts - the function was originally supposed to call for a modal but It should just alert for now. But it's doesn't.
<script src="~/js/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"> </script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
Edit #2: Here's the entire code block to see if it has any problems.
#{
ViewBag.Title = "Branch";
}
<!-- Script Linkings -->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
#*<link href="/css/bootstrap.min.css" rel="stylesheet" /> --- this S.O.B will make things white. Big "NO, NO" *#
#*List*#
<div id="DivEvents">
<div class="container">
<div class="row">
<div class="col-lg-11">
<br /><br /><br />
<h2 style="margin-bottom:5px; margin-top:5px;">Branches</h2>
<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div id="BranchGrid" class="grid"></div>
</div>
</div>
<br />
<div class="row">
<div class="btn-group col-md-7" id="naviagtionPageEvent">
<button type="button" class="btn btn-default" id="btnMoveToFirstPageEvent">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default" id="btnMoveToPreviousPageEvent">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" class="btn btn-default" disabled style="width:100px" id="btnCurrentPageEvent"></button>
<button type="button" class="btn btn-default" id="btnMoveToNextPageEvent">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
<button type="button" class="btn btn-default" id="btnMoveToLastPageEvent">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
</div>
</div>
#*Edit Detail*#
<div class="modal fade" id="BranchEdit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">Branch Edit</h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Branch Code</dt>
<dd>
<input class="form-control" id="BranchEdit-BranchCode" type="text" />
</dd>
<dt>Branch</dt>
<dd>
<input class="form-control" id="BranchEdit-Branch" type="text" />
</dd>
<dt>Company ID</dt>
<dd>
<input class="form-control" id="BranchEdit-CompanyID" type="text" />
</dd>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
Ok
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="CmdBranchEditCancel">
Cancel
</button>
</div>
</div>
</div>
</div>
#*Loading*#
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="Loading..." aria-hidden="true">
<div class="modal-dialog" style="width: 220px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Loading...</h4>
</div>
<div class="modal-body">
<img src="/img/progress_bar.gif" />
</div>
</div>
</div>
</div>
#*Module*#
<script type="text/javascript">
var Branches;
var BranchGrid;
var btnFirstPageEvent;
var btnPreviousPageEvent;
var btnNextPageEvent;
var btnLastPageEvent;
var btnCurrentPageEvent;
#*Edit*#
function CmdBranchEdit_OnClick() {
Branches.editItem(Branches.currentItem);
$('#BranchEdit').modal({
show: true,
backdrop: false
});
var Branch = Branches.currentEditItem;
document.getElementById('BranchEdit-BranchCode').value = Branch.BranchCode ? Branch.BranchCode : '';
document.getElementById('BranchEdit-Branch').value = Branch.Branch ? Branch.Branch : '';
document.getElementById('BranchEdit-CompanyID').value = Branch.CompanyID ? Branch.CompanyID : '';
}
#*Add*#
$(document).ready(function(){
function CmdBranchAdd_OnClick() {
alert('Hi');
#*$('#BranchEdit').modal({
show: true,
backdrop: false
});
document.getElementById('BranchEdit-BranchCode').value = "";
document.getElementById('BranchEdit-Branch').value = "";
document.getElementById('BranchEdit-CompanyID').value = "";*#
}
}
#*Delete*#
function CmdBranchDelete_OnClick() {
Branches.editItem(Branches.currentItem);
var Id = Branches.currentEditItem.Id;
var BranchDescription = Branches.currentEditItem.Branch;
if (confirm("Delete " + BranchDescription + "?") == true) {
$.ajax({
type: "DELETE",
url: "/api/DeleteEvent/" + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
statusCode: {
200: function () {
window.location.reload();
},
404: function () {
alert("Not found");
},
400: function () {
alert("Bad request");
}
}
});
}
}
#*Save Edit*#
function CmdBranchEditOk_OnClick() {
if (confirm("Save Event?") == true) {
var Branch = new Object();
Branch.BranchCode = document.getElementById('BranchEdit-BranchCode').value;
Branch.Branch = document.getElementById('BranchEdit-Branch').value;
Branch.CompanyID = document.getElementById('BranchEdit-CompanyID').value;
var data = JSON.stringify(Event);
// Add New
if (Branch.Id == 0) {
$.ajax({
type: "POST",
url: "/api/AddEvent",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
success: function (id) {
if (id > 0) {
window.location.reload();
} else {
alert("Not added");
}
}
});
// Edit
} else {
$.ajax({
type: "PUT",
url: "/api/UpdateEvent/" + Branch.Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
statusCode: {
200: function () {
window.location.reload();
},
404: function () {
alert("Not found");
},
400: function () {
alert("Bad request");
}
}
});
}
}
}
#*List Functions*#
function GetBranches() {
var Branches = new wijmo.collections.ObservableArray();
$('#loading').modal('show');
$.ajax({
url: '/api/Event',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (Results) {
$('#loading').modal('hide');
if (Results.length > 0) {
for (i = 0; i < Results.length; i++) {
Branches.push({
EditId: "<button class='btn btn-primary btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchEdit_OnClick()'>Edit</button>",
DeleteId: "<button class='btn btn-danger btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchDelete_OnClick()'>Delete</button>",
Id: Results[i]["Id"],
BranchCode: Results[i]["BranchCode"],
BranchDescription: Results[i]["Branch"],
CompanyID: Results[i]["CompanyID"],
});
}
} else {
alert("No data.");
}
}
}).fail(
function (xhr, textStatus, err) {
alert(err);
}
);
return Branches;
}
#*Delete*#
function DeleteBranch(Id) {
$.ajax({
type: "DELETE",
url: "/api/DeleteEvent/" + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { Id: BranchId },
success: function (response) {
alert("Branch Deleted.");
window.location.reload();
},
failure: function (response) {
alert("Error - " + response.d);
},
error: function (e) { }
});
window.location.reload();
}
function UpdateNavigateButtonsEvent() {
if (Branches.pageSize <= 0) {
document.getElementById('naviagtionPageEvent').style.display = 'none';
return;
}
document.getElementById('naviagtionPageEvent').style.display = 'block';
if (Branches.pageIndex === 0) {
btnFirstPageEvent.setAttribute('disabled', 'disabled');
btnPreviousPageEvent.setAttribute('disabled', 'disabled');
btnNextPageEvent.removeAttribute('disabled');
btnLastPageEvent.removeAttribute('disabled');
}
else if (Branches.pageIndex === (Branches.pageCount - 1)) {
btnFirstPageEvent.removeAttribute('disabled');
btnPreviousPageEvent.removeAttribute('disabled');
btnLastPageEvent.setAttribute('disabled', 'disabled');
btnNextPageEvent.setAttribute('disabled', 'disabled');
}
else {
btnFirstPageEvent.removeAttribute('disabled');
btnPreviousPageEvent.removeAttribute('disabled');
btnNextPageEvent.removeAttribute('disabled');
btnLastPageEvent.removeAttribute('disabled');
}
btnCurrentPageEvent.innerHTML = (Branches.pageIndex + 1) + ' / ' + Branches.pageCount;
}
$(document).ready(function () {
btnFirstPageEvent = document.getElementById('btnMoveToFirstPageEvent');
btnPreviousPageEvent = document.getElementById('btnMoveToPreviousPageEvent');
btnNextPageEvent = document.getElementById('btnMoveToNextPageEvent');
btnLastPageEvent = document.getElementById('btnMoveToLastPageEvent');
btnCurrentPageEvent = document.getElementById('btnCurrentPageEvent');
Branches = new wijmo.collections.CollectionView(GetBranches());
BranchGrid = new wijmo.grid.FlexGrid('#BranchGrid');
BranchGrid.initialize({
columns: [
{
"header": "Edit",
"binding": "EditId",
"width": 60,
"allowSorting": false,
"isContentHtml": true
},
{
"header": "Delete",
"binding": "DeleteId",
"width": 60,
"allowSorting": false,
"isContentHtml": true
},
{
"header": "Branch Code",
"binding": "BranchCode",
"allowSorting": false,
"width": "4*"
},
{
"header": "Company ID",
"binding": "CompanyID",
"allowSorting": false,
"width": 80
},
{
"header": "Branch",
"binding": "BranchDescription",
"allowSorting": false,
"width": "4*"
},
],
autoGenerateColumns: false,
itemsSource: Brances,
isReadOnly: true,
selectionMode: wijmo.grid.SelectionMode.Row
});
BranchGrid.trackChanges = true;
Branches.pageSize = 15;
});
UpdateNavigateButtonsEvent();
// Page Button Events
btnFirstPageEvent.addEventListener('click', function () {
Branches.moveToFirstPage();
UpdateNavigateButtonsEvent();
});
btnPreviousPageEvent.addEventListener('click', function () {
Branches.moveToPreviousPage();
UpdateNavigateButtonsEvent();
});
btnNextPageEvent.addEventListener('click', function () {
Branches.moveToNextPage();
UpdateNavigateButtonsEvent();
});
btnLastPageEvent.addEventListener('click', function () {
Branches.moveToLastPage();
UpdateNavigateButtonsEvent();
});
});
</script>
Tried Rao's suggestion - still nothing :( This is starting to be a pain in the ass..)

You have code for a method called
CmdBranchAdd_OnClick
But the element references a function called
CmdBranchEdit_OnClick

move this line
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
to the top of other js files.
Also you have two jquery.js file included. Only choose one which is the best fixing your application.
<script src="~/js/jquery.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

Few Suggestions:
Try wrapping your function inside as below
$(document).ready(function(){
function CmdBranchAdd_OnClick() {
alert('Hi');
}
});
then as #user86745458 said remove either jquery.js or jquery-latest.min.js reference and keep your js files at the top of all other links!!
Try changing type of button from submit to just button.