We Keep Coding

Ajax .load sending me the link instead of loading the html into the div

So I've recently started a new laravel project and am in the user profile page, this page will have a sidebar (with links like Portfolio, Account Settings, etc..).
The thing I'm trying to do, is to load each pages into a div when a link in the sidebar is clicked and instead of loading the pages, it just acts as a normal link <a>, It redirects me to the link provided in the href. (I've already prevented default)
Here's the code :
#extends('layouts.app')
#section('content')
<!-- The sidebar -->
<div id="sideCont" class="sidebar">
<a class="active" href="#home">Profile</a>
News
Portfolio
About
</div>
<!-- Page content -->
<div id="contentCont" class="content1">
#if (\Session::has('success'))
<div class="alert success">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<p>{{\Session::get('success')}}</p>
</div>
#elseif (count($errors) > 0)
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
#foreach ($errors->all() as $error)
<li>{{$error}}</li>
#endforeach
</ul>
</div>
#endif
<h3>Contributor details</h3>
<table class="table table-borderless">
<tbody>
<tr>
<th>ID</th>
<td>{{$contributor->id}}</td>
<td></td>
</tr>
<tr>
<th>Display Name</th>
<td>{{$contributor->display_name}}</td>
<td><span id='clickableAwesomeFont'><i class="fas fa-user-edit" onclick="openForm_DisplayName()"></i></span></td>
</tr>
<tr>
<th>Email</th>
<td>{{Auth::user()->email}}</td>
<td><span id='clickableAwesomeFont'><i class="fas fa-user-edit" onclick="openForm_Email()"></i></span></td>
</tr>
</tbody>
</table>
</div>
#endsection
and here is the js :
<script>
$(function () {
$('#sideCont a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#contentCont').load(page);
});
});
</script>
The script I included :
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> --Ajax purpose--
I tried a lot of things, and iam still stuck so if you could help me it would be awesome thanks.

I imagine it's because your href's aren't real links - they are only location hashes, which are not passed to the destination server. If your nav was like so:
<div>
<a id='home' href="#home">Profile</a>
<a id='about' href="/about">About</a>
</div>
Based on your click handler code, if you press 'Home' you will eventually be effectively calling
$('#contentCont').load('');
But on About, it would be
$('#contentCont').load('/about');
So, changing your hashes to slashes as a baseline should get you closer to where you want to be.

It looks like your javascript is reloading the page.
You included ajax js but I don't see any Ajax calls.
The easiest way is to have a PHP listen for AJAX requests and ONLY produce JSON before exitting. so before your includes headers,
maybe after some core files that only redirect if not logged in but make sure they don't output anything to device being served or ajax request will fail stating invalid json received..page.php:
page.php:
$passwordhash= '$2y$10$dklsjfkljklsdjlkfjdksljflkjdslf.kjdhfjkdshkjfhkjdshfkjshfkjhkjdskdfhkjdshkjf';
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['AJAX']) && password_verify($_POST['SECRET'], $hash)) {
$results = someSQLquery();
echo json_encode(results);
exit;
}
include('header.php';
<button onclick="morePlease();">More</button>
<script>
function morePlease(){
var dataToSubmit = $('#myform').serializeArray();
//a secret/key might be enough, but setting ajax reminds me not to have DOM elements up there.
dataToSubmit.push({name: "secret", value: $("input[name=secret]").val()});
dataToSubmit.push({name: "AJAX", value: true});
$.ajax({
type: 'POST',
data: dataToSubmit
//url: anotherMachine.php
})
.done(function(response){
console.log('Submitted form successfully. Response:');
console.log(response == null ? "Null response." : response);
JSON.parse(response);
})
.fail(function() {
console.log('Failed submitting form.');
});
}
</script>
You could also just bypass the whole process and provide the data before the variable sees an EOL, no quests besides the one you're serving.:
javascript within the page serving PHP:
<script>
var wtf = JSON.parse( <?= $thinAir ?>; );
</script>

Ok, the issue was that my js was loaded before the jquery. it works now !
thank you all

Why jQuery selectable is not functioning properly?

I have an mvc project where I have implemented two jQuery selectable plugin like below:
The <HTML> code,
<div class="product-page-options">
<div class="pull-left">
<label class="control-label" style="font-weight:bolder">Size:</label>
<ol class="ui-selectable" style="width:auto" id="selectable">
#{
var size = Model.AvailableSizes.Split(',');
foreach (var item in size)
{
<li class="ui-selectable">#item</li>
}
}
</ol>
</div>
<div class="pull-left">
<label class="control-label">Color:</label>
<ol class="ui-selectable" style="width:auto" id="selectable1">
#{
var color = Model.AvailableColors.Split(',');
foreach (var clr in color)
{
<li class="ui-selectable">#clr</li>
}
}
</ol>
</div>
</div>
The static script for selectable jQuery plugin.
<script type="text/javascript">
$(document).ready(function () {
$("#selectable").selectable({
selected: function (event, ui) {
$(ui.selected).siblings().removeClass("ui-selected");
$("#selectedsize").val($("li.ui-selected").html());
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#selectable1").selectable({
selected: function (event, ci) {
$(ci.selected).siblings().removeClass("ui-selected");
$("#selectedsize").val($("li.ui-selected").html());
}
});
});
</script>
The first selectable jQuery plugin works perfectly while the second is not functioning properly. I mean I cannot select any item from the second selectable list and also the appearance is not same as the first one. The picture below shows clearly the problem.
Anything i can do about it? any help would be appreciated. Thanks in advance.

There's 2 issues at play here. Firstly, you will need to have styles set up specifically for both of the selectables (if you have based your code on the examples on the jQuery UI site. Secondly, upon selecting in the selector for the items, you will need to identify the path to the selected li element as a child of the relevant selectable.
$("#selectedcolor").val($("#selectable1>li.ui-selected").html());
The following plunker will show you it working :
Link To My Plunker

Dynamic binding of li items click event

I have durandal and knockout web application.
I have a html as follows:
<ul id="header">
</ul>
In .js function I am adding li dynamically as:
$("#header).append('<li id="btn"> <span class="name">Test</span></li>')
ko.applyBindingsToNode(ul);
I am aware of the fact that I am binding the li after applyBindings has been called. To add it dynamically I am using
ko.applyBindingsToNode(ul); , but still no luck.
Can anyone please tell me whats the syntax/alternative solution for this?

// begins a JavaScript comment. This means that everything after <a href="javascript: is commented out, and the resulting code will look something like this:
$("#header).append('<li id="btn"><a href="javascript:
ko.applyBindingsToNode(ul);
Furthermore, the ko.applyBindingsToNode call will be part of the ' string opened just after the opening brackets on the append call.
To resolve this, you need to escape those comments by placing backslashes before them:
href="javascript:\/\/"

Refer to the demo here.
Please find the code below:
HTML:
<ul id="header">
</ul>
JS:
$(function() {
$("#header").append('<li id="btn">' + ' <span class="name">Test</span></li>');
//ko.applyBindingsToNode(ul);
});

using foreach:
var DemoPage = (function() {
function DemoPage() {
var _this = this;
_this.buttons = ko.observableArray([]);
_this.debug = ko.observable('');
_this.testmethod = function(data, event) {
_this.debug('Clicked LI: ' + data.buttonId);
}
_this.addHeadingRow = function() {
_this.buttons.push({
buttonId: Math.floor(Math.random() * 100)
});
}
}
return DemoPage;
})();
var demoApp = new DemoPage();
ko.applyBindings(demoApp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul id="header" data-bind="foreach: buttons">
<li id="btn">
<a data-bind="click: $root.testmethod">
<span class="name">Test</span>
</a>
</li>
</ul>
<button data-bind="click: addHeadingRow">add heading row</button>
<p data-bind="text: debug"></p>

I would like to answer my own question.
The solution is very simple .
In the .js file define an observable array
self.arraysample = ko.observableArray([]);
In a method populate the array with data
self.arraysample.push(data)
In the html page , we can do this:
<ul id="head" data-bind:"foeach:arraysample">
<li>
<a id="btn">
<span data-bind="text:$data.arrayelement"></span>
</a>
</li>
</ul>
Thats it whenevr the data in the "self.arraysample" changes, automatic updating will take place because of knockout js properties.
I hope it helps someone because ,I have seen so many examples in the web advising to use ko.applyBindings() once again which doesnt work at all.

How to dynamically link tabbable tabs

I'm making a little app which sorts websites by groups - where the groups appear as tabs in the tabbable navigator (twitter bootstrap). The premise is therefore, for a new tab to appear whenever you add a new group. This is what it looks like at the moment:
So the part where the new groups show up works perfectly (rendering them by using ng-repeat and going through all of the groups). However, when I click on them, the tabs don't show, i.e. nothing happenes. It worked when I had static tabs.
Here's the relevant html code:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" id="myTab">
<li class="active">All websites</li>
<li ng-repeat="group in listGroups()">{{group.name}}</li>
<li>+Add group</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<table class="table">
<tr class="row">
<th align="center">URL</th>
<th align="center" colspan="2">Actions</th>
</tr>
<tr class="row" ng-repeat="item in listSites()">
<td><font color="{{item.color}}">{{item.url}}</font></td>
<td>Edit</td>
<td>Delete</td>
</tr>
</table>
</div>
<div class="tab-pane" id="Social">asdf</div>
<div class="tab-pane" ng-repeat="group in listGroups()" id="{{group.name}}">asdf</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
And here's my controller code:
app.factory('groups', function() {
var groups = [];
var groupsService = {};
groupsService.add = function(i_group) {
var group = {"name": i_group}
groups.push(group);
};
groupsService.list = function() {
return groups;
};
return groupsService;
});
function listCtrl($scope,sites, groups) {
$scope.listSites = sites.list;
$scope.listGroups = groups.list;
}
To sum it up, the question is essentially - how do I link tabs that have been dynamically generated to their also dynamically generated content?

You are mixing jQuery code and Angular and that causes problems.
For one, the jQuery code binds to <a>s already existing when the script is executed; new ones (the ones that Angular creates that is) will not get the event handler. You would want something like:
$("#myTab").on("click", "a", function(e) {
// same as your code
});
But you are still mixing Angular/jQuery. And it will probably not work, or work funkilly, because $scope.$apply() doesn't get called. Better is to use ng-click in your tabs and handle the event in the controller:
<li ng-repeat="group in listGroups()">
<a ng-click="selectGroup(group)">{{group.name}}</a>
</li>
(You will have to add the selectGroup() method in the controller.)
Having said that, you'd better use an existing component library, e.g. Angular UI with Bootstrap, as commented by pkozlowski.opensource.

ICanHaz Not detecting template

I've checked the other posts on this topic, but none of them match my problem. Here is the code for my template:
<script id ="postingcell" type="text/html">
<li class="postinglistcell">
<div class = "postinfowrapper">
<table class="centermargins">
<tr>
<td>
<div class="posttitle">{{Title}}</div>
</td>
</tr>
</table>
</div>
</li>
</script>
And here is the code where I call the ICH:
$(document).ready(function() {
var p = ich["postingcell"](thisobj);
});
I can get an error telling me that ich["postingcell"] is not defined, but it has been in the above script tag. Does anyone know what im doing wrong here?

ICanHaz also uses jQuery for setting up. One possible reason is your code runs before the ich.grabTemplates() call.
if (ich.$) {
ich.$(function () {
ich.grabTemplates();
});
}
You may try calling ich.grabTemplates() in your code:
$(document).ready(function() {
ich.grabTemplates();
var p = ich["postingcell"](thisobj);
});