jQuery Search page for word not working as expected - javascript

I have a view full of bootstrap collapsible panels. Inside the panels are a list of documents. I have a search box at the top of the page for the user to type in the document name.
What currently happens
When the user types in the name of a document and presses enter.. if a match is found.. the panel that contains the document does not expand, but if I click on it, then it expands and shows me the document that matched... the rest of the panels are still visible but do not open because they don't have any matches.
What I want to happen
What I want to happen is if a match is found then hide the panels and documents that don't have a match. When the clear search button is clicked to bring back all panels and documents (like a page refresh but I do not want a refresh).
Here is my code
Search Box
<div id="Search-Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." style="margin-left: 36%;"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" style="float: right; margin-right: -2%;"/>
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" style="margin-left: -69%;"/>
</div>
</div>
</div>
Collapsible Panel Example
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel One</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel Two</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 2</li>
<li>Test Document 3</li>
<li>Test Document 4</li>
<li>Test Document 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
So when I search for 'Test Document 1'.. then Panel Two should be completely hidden, but when I click 'Clear Search' button then Panel Two should be brought back along with Panel One (even though Panel One wasn't hidden because it contained a document that matched the search).
jQuery
// When user wants to search for document
$("#SearchLink").keyup(function (event) {
if (event.keyCode == 13) {
var textboxValue = $("#SearchLink").val().toLowerCase();
alert(textboxValue);
$('.panel-body').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
$(this).show();
exist = true;
} else
$(this).hide();
});
if (exist === false) {
$(this).prev('.panel-title').hide();
$(this).hide();
} else {
$(this).prev('.panel-title').show();
}
});
}
});
// When user wants to clear search
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.panel-body').each(function() {
$(this).prev('h4').show();
$(this).children().each(function() {
$('ul li').show();
$('a').show();
});
});
$('#SearchLink').blur(function() {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('Document Search'));
}
});
});

instead of $(this).show(); try to show the parent:
$(this).parents('.collapse').show();
or
$(this).parents('.collapse').addClass('in');
the script will like this:
$(function(){
$("#SearchLink").keyup(function (event) {
if (event.keyCode == 13)
search($(this).val());
});
$('#ButtonSearch').click(function(){
search($("#SearchLink").val());
})
function search(keyword){
var textboxValue = keyword.toLowerCase();
$('.panel-body').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
exist = true;
}
});
if (exist === false) {
$(this).parent().removeClass('in');
} else {
$(this).parent().addClass('in');
}
});
}
// When user wants to clear search
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.panel-body').each(function() {
$(this).parent().removeClass('in');
});
$('#SearchLink').blur(function() {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('Document Search'));
}
});
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="Search-Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." />
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" />
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel One</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel Two</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 2</li>
<li>Test Document 3</li>
<li>Test Document 4</li>
<li>Test Document 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Related

Show/Hide Multiple Div using multiple checkbox when checked

I am trying to show/hide multiple div's using multiple checkboxes.
i.e. if a checkbox is checked it must target div using id or name and the div contents should be hidden.
Tried the following work but unable to achieve the required goal
<form id="varsection">
<div class="panel box box-primary">
<div id="controlledvariables" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-9">
<div class="row secrow">Wave</div>
<div class="row secrow">Gender</div>
</div>
<div class="col-md-1">
//if input name="Wave[]" is selected then
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Wave[]" value="top">
</div>
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Gender[]" value="top">
</div>
</div>
</div>
</div>
</div>
</form>
<form id="filters">
<div>
//show this div
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Wave" aria-expanded="false" class="collapsed">
Wave
</a>
</h4>
</div>
<div id="Wave" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-8">
</div>
<div class="col-md-4">
//or this one
<ul>
<li><input type="checkbox" name="Wave_fiters[]" value="1">Wave-1</li>
<li><input type="checkbox" name="Wave_fiters[]" value="2">Wave-2</li>
</ul>
</div>
</div>
</div>
</div>
[Other multiple div's]
</div>
</form>
jQuery
jQuery(function() {
var checks = $("[name='_Wave[]']");
checks.click(function() {
if (checks.filter(':checked').length == checks.length) {
$("[name='_Wave[]']").show();
} else {
$("[name='_Wave[]']").hide();
}
}).triggerHandler('click')
})
you have 2 problems with this code:
first the jquery selector is wrong it should be like this:
var checks = $("[name='Wave[]']");
without _
second you need to give the div you want to toggle a unique id or a class name
so your code should be like this
jQuery(function () {
var checks = $("[name='Wave[]']");
checks.click(function () {
if (checks.filter(':checked').length == checks.length) {
$(".waveDiv").show();
} else {
$(".waveDiv").hide();
}
}).triggerHandler('click')
})
and this is your input:
<input type="checkbox" name="Wave[]" value="top">
and your div which will be toggled:
<div class="waveDiv panel box box-primary">

scroll to top using href id

I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.
Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.

How to prevent html list menu items from refreshing after assigning permission

Please I am assigning user permission based on user type read from session data in Node.js and the hide html li elements based on the type of user. It seems to work but the behaviour it awful in the sense that. Whenever I load a page, all the menu items refresh/ loads again before they are hidden. How do I prevent this behaviour. It there something I have doing wrong or the approach is just not good. I have reference the client-side code on each page within the application
This is my code for the client side
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
if (data == 'Student') {
$("#Offer").find("#shareitem").show();
$("#Offer").find("#offeritem").hide();
$("#Offer").find("#returnitem").hide();
$("#Offer").find("#recallitem").hide();
$("#Offer").find("#renewitem").hide();
$("#Offer").find("#guestoffer").hide();
$("#Offer").find("#manageoffers").hide();
$("#Overview").hide();
$("#WithHolding").hide();
} else if (data == 'Admin') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else if (data == 'Teacher') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else {
$("#Offer").hide();
$("#Discover").hide();
$("#Overview").hide();
$("#WithHolding").hide();
$("#myAccount").hide();
$("#Message").hide();
}
})
});
This is my code on the server side
outer.get('/permission',function(req,res) {
if (req.user)
{
var UserType = req.user.UserType;
switch (UserType) {
case "Admin":
if ((req.isAuthenticated()) && (req.user.UserType == 'Admin')) {
res.send(UserType)
}
break;
case "Student":
if ((req.isAuthenticated()) && (req.user.UserType == 'Student')) {
res.send(UserType)
}
break;
case "Teacher":
if ((req.isAuthenticated()) && ((req.user.UserType == 'Admin') || (req.user.UserType == 'Professor'))) {
res.send(UserType)
}
break;
default :
if (req.isAuthenticated()) {
res.send(UserType)
}
}
}else{
res.send('undefined')
}
});
// This is my Navbar which contains the menus and it is called or references on each page through out the application
<script src="/javascript/ClientJs/HideMenus.js"></script>
//This my Javascript file which contains the permission instructions(client side)
<nav id="nav"class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><%=__('Borrowing Sys')%></a>
<div class="nav-collapse collapse" aria-expanded="true">
<ul id="menu"class="nav">
<li id="home"><%=__('Home')%></li>
<li id="Offer" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Offer')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li id="offeritem"><%=__('Offer Item')%></li>
<li id="recallitem"><%=__('Recall Item')%></li>
<li id="renewitem"><%=__('Renew Item')%></li>
<li id="returnitem"><%=__('Return Item')%></li>
<li id="odivider"class="divider"></li>
<li id="guestoffer"><%=__('Guest Offer')%></li>
<li id="shareitem"><%=__('Share Item')%></li>
<li id="manageoffers"><%=__('Manage Offers')%></li>
</ul>
</li>
<li id="Discover"class="dropdown">
<%=__('Discover Items')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><%=__('Discovery Map')%></li>
<li><%=__('Send a Request')%></li>
<li><%=__('Available Items')%>
</li>
</ul>
</li>
<li id="Message" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Messages')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Private Messages')%></li>
</ul>
</li>
<li id="Overview"class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('System Overview')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Data Analysis')%></li>
<li><%=__('User Activity Logs')%></li>
<li class="divider"></li>
<li><%=__('Remove Offers')%></li>
<li><%=__('Students Request')%></li>
</ul>
</li>
<li id="myAccount" class="dropdown">
<%=__('My Account')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li id="youroffers"><%=__('Your Offers')%></li>
<li id="reservations"><%=__('Reservations')%></li>
<li id="divider"class="divider"></li>
<li id="profile"><%=__('My Profile')%></li>
<li id="invite"><%=__('Invite Friend')%></li>
<li ><%=__('Log out')%></li>
</ul>
</li>
</ul>
<!-- add search form -->
<div id="WithHolding" class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=__('Student ID')%>" Id="SearchStudent" name="SearchStudent">
<button id="Search" name="Search" class="btn btn-primary" type="button"><%=__('Check Clearance')%>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
This is a typical example of how i have referenced the NavBar on all pages. This is the overall structure of the design
<!DOCTYPE html>
<html lang="en">
<% include ./MyLayout/header %>
<body>
<% include ./MyLayout/navbar %>
<script src="/javascript/ClientJs/RenewItem.js"></script>
<div class="container">
<div class="row-fluid">
<div id="content" class="span12">
<div class="row-fluid">
<form class="form-horizontal span12" method="post" action="RenewItems">
<fieldset>
<legend><%=__('Renew Item')%>
<h6 style="color: #006dcc"><%=__('Extend/Renew item given to student')%></h6>
</legend>
<br>
<% if(SuccessMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-success alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Success !')%></strong><%= SuccessMessage %>
</div>
</div>
</div>
<% } %>
<% if(ErrorMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-danger alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Error!')%></strong> <%= ErrorMessage %>
</div>
</div>
</div>
<% } %>
<div class="row-fluid">
<div class="span8">
<div class="control-group">
<label for="BookingNo" class="control-label"><%=__('Booking Number:')%></label>
<div class="controls">
<input id="BookingNumber" name="BookingNumber" type="text" value="" required=""
title="<%=__('Please enter Booking number for the transaction')%>"
placeholder="<%=__('Booking Number')%>">
</div>
</div>
<div class="control-group">
<label for="ItemName" class="control-label"><%=__('Item Name:')%></label>
<div class="controls">
<input type="text" id="ItemName" name="ItemName" value="" required=""
title="<%=__('Please enter Item Name')%>" placeholder="<%=__('Item Name')%>">
</div>
</div>
<div class="control-group">
<label for="StudentID" class="control-label"><%=__('Student/Guest ID:')%></label>
<div class="controls">
<input id="StudentID" name="StudentID" type="text" value="" readonly required=""
title="<%=__('Please enter student matriculation ID')%>" placeholder="<%=__('Matriculation Number/Guest ID')%>">
</div>
</div>
<div class="control-group">
<label for="ItemNumber" class="control-label"><%=__('Item Number:')%></label>
<div class="controls">
<input id="ItemNumber" name="ItemNumber" type="text" value="" readonly
required="" title="<%=__('Please enter Item Number')%>" placeholder="<%=__('Item Number')%>">
</div>
</div>
<div class="control-group">
<label for="EmailID" class="control-label"><%=__('Student/Guest Email ID:')%></label>
<div class="controls">
<input type="text" id="StudentEmail" name="StudentEmail" value=""
placeholder="<%=__('Student/Guest Email')%>" readonly required=""
title="<%=__('Student/Guest Email ID cannot be empty')%>">
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('Old Return Date:')%></label>
<div class="controls">
<input id="OldReturnDate" name="OldReturnDate" type="text" value="" readonly
placeholder="<%=__('DD-MM-YYYY')%>" required="" title="<%=__('Please search for item')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Duration:')%></label>
<div class="controls">
<select Id="Duration" name="Duration" class="form-control">
<option value="1 week"><%=__('1 week')%></option>
<option value="2 weeks"><%=__('2 weeks')%></option>
<option value="3 weeks"><%=__('3 weeks')%></option>
<option value="4 weeks"><%=__('4 weeks')%></option>
</select>
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('New Return Date:')%></label>
<div class="controls">
<input id="ReturnDate" name="ReturnDate" type="text" value="" placeholder="<%=__('DD-MM-YYYY')%>"
readonly required="" title="<%=__('Please specify duration of extension')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Remarks:')%></label>
<div class="controls">
<textarea id="Remarks" name="Remarks" style="width: 70%;" rows="4" required=""
title="<%=__('Any remarks regarding the renewal of an item')%>"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="reset" class="btn btn-default"><%=__('Cancel')%></button>
<button type="submit" class="btn btn-primary"><%=__('Renew')%></button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<% include ./MyLayout/footer_bottom%>
</html>
What about hiding everything first. Suppose your menu items are wrapped in a div or if menu items are in a OL/UL, you can set it up to hide on loading of page:
.menu-wrapper{
display:none;
}
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
//your stuff
}).always(function(){
$(".menu-wrapper").show();//this will toggle display:none
});
});
You are noticing this because of the delay in getting the response from the server.
All Menus Loaded First > Wait Few Seconds > Server Responds > Hide Menus
To avoid this, hiding menus during initial loading and showing them once you get the response will be the correct approach.
BTW, I will not prefer to show and hide menu items in the client side. The best option will be to get the list of allowed menu items from the server and rendering in the client side.
Please remember, an user can change the CSS styles to see the hidden menu and he could do operations that are not allowed, unless your server validates each request.
Change your html to render the menus in hidden mode, by adding the css class.
.menu-wrapper {
display:none;
}
<ul id="menu" class="nav">
<li id="home"class="hidden-menu"><%=__('Home')%></li>
<li id="Offer" class="dropdown menu-wrapper">
</li>
<li id="Discover" class="dropdown menu-wrapper">
</li>
<li id="Message" class="dropdown menu-wrapper">
</li>
<li id="Overview" class="dropdown menu-wrapper">
</li>
<li id="myAccount" class="dropdown menu-wrapper">
</li>
</ul>
Then after you get the permissions from the server, enable the nodes.
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
// If the menu should be shown then remove the css class
if(data === 'Admin') {
$("#Discover").removeClass('hidden-menu');
}
})
});

jQuery & JEasyUI dynamic droppable element

I have an issue with jQuery & jEasyUI working together. In my code I have a button that when it is clicked it adds a new col-sm-3 to a row div. When I begin dragging around into the droppable nothing happens, although I'm suppose to see an alert. I played around and got it to work by calling .droppable() on newly added columns. That's where things began to get strange. The draggables started disappearing from their positions in the list. It was obvious that jQuery and JEasyUI are not playing well. JEasyUI has it's own draggable & droppable functions but there isn't anything written on how they could be applied to dynamically loaded DOM elements.
Code dynamically added:
This is HTML that I dynamically add to a row
<div class="col-sm-4" >
<div class="box options-list">
<div class="box-header with-border">
<h3 class="box-title"></h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<input class="form-control" placeholder="Name">
<div class="row">
<div class="col-xs-6">
<div id='validate-checkbox' class="checkbox icheck">
<label>
<label for="validate-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Validate
</label>
</div>
</div>
<div class="col-xs-6">
<div id='conform-value-checkbox' class="checkbox icheck">
<label>
<label for="conform-value-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Conform
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<ul class="">
</ul>
</div>
</div>
</div>
</div>
</div>
Static:
The element where the new element is appended to is <div class="row" id="sortable">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.col-sm-4 .ui-sortable-placeholder {
background: red;
}
</style>
<div class="box">
<div class="box-body">
<div class="row">
<div class="col-md-6">
<?= $this->Form->input('name', ['placeholder' => 'Enter part name']) ?>
</div>
<div class="col-lg-6">
<?= $this->Form->input('description', ['placeholder' => '(Optional)']) ?>
</div>
</div>
<div class="row">
<div class="col-md-8">
<?= $this->Form->input('item_part_type_id', ['label' => 'Type']) ?>
</div>
<div class="col-md-4">
<label for="has-validation-checkbox"></label>
<div id='has-validation-checkbox' class="checkbox icheck">
<label>
<input class="has-validation-checkbox" name="has_validation" type="checkbox"> Force Validation
</label>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><strong>Part Editor</strong></h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div class="easyui-layout" style="width:100%;height:400px;">
<div data-options="region:'east',split:true" title="Existing Miniparts" style="width:20%;">
</div>
<div data-options="region:'west',split:true" title="Options" style="width:20%;">
<ul class="list-group" id="options-list">
<li class=" bg-black-gradient list-group-item">
Text<span class="pull-right"><i class="fa fa-cog"></i></span>
</li>
<li class="bg-black-gradient list-group-item">
Textarea
</li>
<li class="bg-black-gradient list-group-item">
List
</li>
<li class="bg-black-gradient list-group-item">
Fabric
</li>
<li class="bg-black-gradient list-group-item">
Multi Fabric
</li>
<li class="bg-black-gradient list-group-item">
Buyin Code
</li>
<li class="bg-black-gradient list-group-item">
Buyin Supplier
</li>
</ul>
</div>
<div id="here" data-options="region:'center',title:'Miniparts'" style="width: 60%; padding:5px;" class="bg-black-gradient" >
<div class="row" id="sortable">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button id="add-part-btn" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus"></i> Add Part</button>
</div>
</div>
<div class="well clearfix">
<div class="pull-right">
<button class="btn btn-default btn-md"><i class="fa fa-times"></i> Discard Changes</button>
<button class="btn btn-primary btn-md"><i class="fa fa-save"></i> Save Changes</button>
</div>
</div>
<script>
/*
Each time this is triggered a new element is to be
added to the sortable <div class="row">. The element then
accepts a droppable from a UL list */
$('#add-part-btn').click(function() {
$.get("<?= $this->Url->build(['action' => 'minipart']) ?>", function (data) {
var newElement = $(data);
$('#sortable').append(newElement);
$(newElement).droppable({
accept: '.list-group-item',
drop: function(e,ui)
{
alert("AahhH! my foot!");
}
})
});
});
$(function(){ // DOM Ready
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
/* If I put into the DOM Ready function above,the list item being dragged to behave strangely
* So I left it out here instead. */
$( ".list-group-item").draggable({
revert: true,
appendTo: '.easyui-layout',
helper: 'clone',
zIndex: 3
}).disableSelection();
</script>
My project has so many dependencies that I don't think you will be able to run the snippets probably, but if you want to go the extra mile and help me out on this then please download the following dependencies below:
jQuery >=1.11.x
jQueryUI jEasyUI latest version
AdminLTE 2.1.1 (A bootstrap 3 theme, https://github.com/almasaeed2010/AdminLTE)

Link preview on page load using jQuery Preview Plugin(JavaScript)

I have use jQuery Preview Plugin for Link Preview on Github. It works smoothly when I enter or paste a URL in the input, But could it be possible for the links which are loaded from database while page loading/refreshing? I tried the below jQuery code but it isn't working. I'm using it in angularjs. Here is my markup.
<div class="post-feeds-block" data-ng-init="init()" >
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" >
<div class="panel panel-default" ng-repeat="feeds in postfeeds">
<div id="collapse{{feeds.p_id}}" class="panel-collapse collapse" ng-class="{in: feeds.expanded}" role="tabpanel" aria-labelledby="heading{{feeds.p_id}}">
<div class="panel-body">
<p data-ng-bind-html-unsafe="feeds.description" id="content{{feeds.p_id}}"></p>
<!-- Links section -->
<div class="attached-feeds" ng-show="feeds.weblink">
<div>
<input class="url_load" type="text" value="{{feeds.weblink}}" style="display:none;"/>
<div class="selector-wrapper" id="{{feeds.p_id}}"></div>
</div>
<span class="title-icon">
<span></span>
<a class="edit" href="javascript:void(0);"></a>
<span></span>
<a class="delete" href="javascript:void(0);"></a>
<span></span>
<a class="drag" href="javascript:void(0);"></a>
</span>
</div>
<!-- Links section -->
</div>
</div>
</div>
</div>
</div>
/* Javascript */
window.onload = function(){
setTimeout(loadPreview(), 1000);
}
function loadPreview(){
$(".url_load").each(function(){
$(this).preview({
key:'xxxxxxxxxxxxxxxx',
render: function(obj){
$(this).parent().find('.selector-wrapper').html(obj);
}
});
});
};
Can anyone help me with this?

Categories