When I add a card in in-box list I am able, when double click on it, to open dialog. It works fine. The problem comes when I drag the card and drop it in Onhold list. I tried to double click to open the dialog but did not succeed.
ANY IDEA FOR A SOLUTION?
Demo
HTML:
<!--Wrapper div-->
<div id="wrapper">
<div id="onHoldList" class="cellContainer">
<p>On Hold</p>
</div>
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<p style="display: inline">Inbox</p>
<!--Button to add a Card-->
<input type="button" id="AddCardBtn" value="+ Add a Card..."/> <hr class="fancy-line"/> <br/>
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
</div>
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
</form>
</div>
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
$("#Getbtn").on("click",function() {
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val() );
$('#modalDialog').dialog("close");
});
// Sortable cards
$('.cellContainer').sortable({
items: '.sortable-div',
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '.cellContainer',
}).disableSelection();
});
Div moved to onhold list is not a child of #userAddedCard anymore.
Change
$('#userAddedCard').dblclick(function (e) {
with
$('#wrapper').on('dblclick', '.sortable-div', function (e) {
Related
I need help with following code. I have to add new li elements and them swap elements by clicking on img up or down. I need to do it dynamically. Thank you so much.
$(document).ready(function(){
$(".p-title").hide().fadeIn(1500);
const nameInput = document.querySelector('#f-name');
nameInput.focus();
$('form').on('submit', e=>{
e.preventDefault();
let name = nameInput.value;
addItem(name);
})
let addItem = (name)=>{
$('#list').append('<li>'+name+'<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>');
nameInput.value = '';
nameInput.focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
<div class="row">
<div>
<h4>
<span class="text-muted">List</span>
</h4>
<ul id='list' class="list-group mb-3">
</ul>
</div>
<div class="col-md-7 order-md-1">
<form class="needs-validation row-form">
<div class="mb-3">
<label for="nazov">Name</label>
<input id="f-name" type="text" class="form-control" placeholder="name" required>
</div>
<hr class="mb-4">
<button>Submit</button>
</form>
</div>
</div>
</main>
To reorder those dynamically added list' items using images (buttons) we set a click handler by selecting their parent container first because those images are also dynamically added !
$('#list').on('click', '.downArrow', function(e) {
Then we use insertAfter() to move Down or insertBefore() to move Up their position in the list.
$(document).ready(function(){
$(".p-title").hide().fadeIn(1500);
const nameInput = document.querySelector('#f-name');
nameInput.focus();
$('form').on('submit', e=>{
e.preventDefault();
let name = nameInput.value;
addItem(name);
})
let addItem = (name)=>{
$('#list').append('<li>'+name+'<img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Green_Arrow_Up_Darker.svg" class="upArrow"/ width="16"><img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Red_Arrow_Down.svg" width="16" class="downArrow"/</li>');
nameInput.value = '';
nameInput.focus();
}
$('#list').on('click', '.downArrow', function(e) {
var curLi = $(this).closest('li');
var tarLi = curLi.next('li');
curLi.insertAfter(tarLi);
});
$('#list').on('click', '.upArrow', function(e) {
var curLi = $(this).closest('li');
var tarLi = curLi.prev('li');
curLi.insertBefore(tarLi);
});
});
body{
font-size:1.2em;
}
li:last-child img.downArrow,li:first-child img.upArrow{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
<div class="row">
<div>
<h4>
<span class="text-muted">List</span>
</h4>
<ul id='list' class="list-group mb-3">
</ul>
</div>
<div class="col-md-7 order-md-1">
<form class="needs-validation row-form">
<div class="mb-3">
<label for="nazov">Name</label>
<input id="f-name" type="text" class="form-control" placeholder="name" required>
</div>
<hr class="mb-4">
<button>Submit</button>
</form>
</div>
</div>
</main>
[UPDATE] optimized the answer by changing the styling to hide button on the edges... which is better than doing it with jQuery. thanks to #bhoodream comment
I am loading jquery.ime editor which supports the multi language editing, using this library https://github.com/wikimedia/jquery.ime/blob/master/examples/ced/script.js, there behavior is on "change" they are loading corresponding language JSON. I need that work on button click. on button click i am opening modal window, there I have text field, where I have write in regional languages. I know the language code based on that corresponding language is coming there, but right now the issue is I am able write in regional language on second click of button.
Here is my code:
open(writecontent: TemplateRef<any>, countvalue,books) {
this.config.keyboard = false;
this.modalRef = this.modalService.show(writecontent, Object.assign({}, this.config,{ class: 'gray modal-lg' }));
$( document ).ready( function () {
'use strict';
var $ced, ime, $imeSelector, $langSelector;
$.ime.setPath( '../../' );
$ced = $( '#ced' );
// Initialise IME on this element
$ced.ime( {
showSelector: false
} );
// Get the IME object
ime = $ced.data( 'ime' );
ime.enable();
$imeSelector = $( '#imeSelector' );
$langSelector = $( '#go' );
$langSelector.click(function() {
ime.setLanguage(books.language[0].language_id);
});
$ced.on( 'imeLanguageChange', function () {
listInputMethods( ime.getLanguage() );
});
function listInputMethods( lang ) {
$imeSelector.empty();
ime.getInputMethods( lang ).forEach( function ( inputMethod ) {
$imeSelector.append(
$( '<option/>' ).attr( 'value', inputMethod.id ).text( inputMethod.name )
);
});
$imeSelector.trigger( 'change' );
}
$imeSelector.on( 'change', function () {
var inputMethodId = $imeSelector.find( 'option:selected' ).val();
ime.load( inputMethodId ).done( function () {
ime.setIM( inputMethodId );
});
});
});
}
HTML CODE
<button id="go" (click)="open(books)" [ngClass]="{'disabled': disbutton}" [disabled]="disbutton" class="cl_add">ADD CONTENT</button>
<ng-template #writecontent>
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide();destrory()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"> write Content</h4>
</div>
<div class="modal-body" role="application">
<form ngNativeValidate (ngSubmit)="onSubmit()" #writeContentForm="ngForm">
<div class='imeSelector' style="display:none">
<select id="imeSelector"></select>
</div>
<div>
<label for="regLang">Title</label>
<input type="text" id="ced" class="txt_book_inf" name="regLang" minlength="10" maxlength="150" required />
</div>
<div>
<label class="new_span_txt">Write Content</label>
<textarea id="mytextareaid" name="mytextareaid" rows="20" cols="80" style="width: 100%; height:200px;"></textarea>
</div>
<div id="message"></div>
<br />
<div class="text-center">
<button type="submit" class="btn-left" class="btn btn-primary">SAVE</button>
</div>
</form>
</div>
</ng-template>
And i am working on Angular project both id and angular click event on the same button is that causing the issue ?
problem with click event after making this change its working fine.
$(document).on("click", "#go", function(){
});
My HTML template will be appended many times depending upon the backend. So, I want to select the topics and send the id of selected elements. How to do it?
Right now I can only select and also after that i can't de-select it too.
Help!!
My Jquery code to select:
$(document.body).click(function(evt){
var clicked = evt.target;
var currentID = clicked.id || "No ID!";
document.getElementById(currentID).style.backgroundColor = "#00afbc";
//$(clicked).html(currentID);
})
My Html code:
<div class="container-fluid" id="container-<%=no%>">
<div id="circle" style="background:<%= colorCode %>;" class="col-xs-3">
<div class="text" style="color:<%= textColor %>;">
<%=p ercent %>
</div>
<div class="percent" style="color:<%= textColor %>;">%</div>
</div>
<div id="sideText">
<div class="checkbox col-xs-9 everything-checkbox">
<!--input type="checkbox" class="toggle" /-->
<div id="currentID">
<%=currentID %>
</div>
<div id="question">
<%=t otalQues %> Questions Attempts
</div>
</div>
</div>
</div>
<hr style="width: 100%; color: #d9d9d9; height: 1px; background-color:#d9d9d9; margin-top:0px;margin-bottom:0px;" />
You can just add and remove a class to keep track of the selected items and then just get all the selected items with an ID
$(document).ready(function () {
$(document.body).click(function (evt) {
var clicked = evt.target;
if (!$(clicked).hasClass('selected')) {
$(clicked).addClass('selected');
$(clicked).css('background-color', '#00afbc');
} else {
$(clicked).removeClass('selected');
$(clicked).css('background-color', '');
}
});
});
function getSelected() {
var ids = [];
$('.selected').each(function () {
var id = $(this).attr('id');
if (id) {
ids.push($(this).attr('id'));
}
});
return ids;
}
So I have some results that have items that get toggled, hidden/shown, etc. That bit works just fine except for the items that are appended to the bottom of the results. The click handler does not fire on them but work just fine on the others. I assume it has to do with reading the nodes at the time of page load. How do I get the appended items to also work?
<div class="event">
<a href="/profile/00000000">
<img class="user-image" src="https://graph.facebook.com/00000000/picture?width=100&height=100">
</a>
<div class="event-info">
<div class="content">
<div class="event-time-location">
<span class="user-name">Levi Thornton</span>
<span class="user-action-time">Posted 21 minutes ago</span>
</div>
<div class="event-caption">1
</div> </div>
<div class="event-like-comment">
<input id="js-eventId" type="hidden" value="201" name="eventId">
likedlike comment
more
</div>
</div>
<div class="comments" id="comments-201" style="display: block;">
<div class="newComments">
<input id="js-eventId" type="hidden" value="201" name="eventId">
<textarea class="addComment" value="Write a comment..." placeholder="Write a comment..." title="Write a comment..."></textarea>
</div>
</div>
<!-- comments -->
<div class="clear"></div>
</div>
The jQ:
...
// add like
$(".event-like").click(function(event){
event.preventDefault();
var likeBtn = $(this);
$.post('/shindig/ajax-like-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
if(data['success']){
likeBtn.hide();
likeBtn.siblings(".event-liked").show();
} else {
if(data['noaccess']){
window.location.href = data['url'];
}
}
},"json");
});
// soft delete like
$(".event-liked").click(function(event){
event.preventDefault();
var likeBtn = $(this);
$.post('/shindig/ajax-unlike-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
if(data['success']){
likeBtn.hide();
likeBtn.siblings(".event-like").show();
} else {
if(data['noaccess']){
window.location.href = data['url'];
}
}
},"json");
});
// hit bottom scrolling, load more results
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
console.log('bottom');
$.post('/index/ajax-feed-items-by-time', { pager: $("#js-pager").val(), ajax: true}, function(data){
$( ".feedContent" ).append( data );
$pager = $("#js-pager").val()+10;
$("#js-pager").val($pager);
});
}
});
Replace
$(".event-like").click(function(event) {
with
$(document).on("click", ".event-like", function(event) {
and similarly throughout your code. It's called event delegation, and the best place to start reading about it is the jQuery documentation.
I have two elements that are connected one is a sidebar element and the other is a chart or object that represents the data. If the sidebar is reordered then the corresponding, connected object should be reordered with the sidebar element. That is the problem. Both objects will move together but will not resort or snap into place. They will just go back to their original position. I wan to be able to reorder the sidebar and the corresponding chart or object to be reordered on the page in the correct position. I will provide the code below:
$(document).ready(function() {
$( "#sortable" )
.sortable({ handle: ".handle", placeholder: "ui-state-highlight", helper: 'clone' })
.find("li")
.prepend("<div class='handle'><p >☰</p></div>" )
$( "#sortable" ).disableSelection();
});
$(document).ready(function() {
$('#sortable').click(function() {
var address = $('#sortable').val();
});
$(document).on('click', '.delete', function() {
$(this).parent().remove();
});
$(document).on('click')
});
$(document).ready(function(){
$('.move-up').click(function(){
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
});
$('.move-down').click(function(){
if ($(this).next())
$(this).parent().insertAfter($(this).parent().next());
});
});
$(document).ready(function() {
// function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
var getAll = function(t) {
return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
};
// add drag functionality
$(".dragme").draggable({
snap: true,
revert: true,
containment: "#containment-wrapper",
axis:"y",
revertDuration: 10,
});
<input class="input btn-info" id='toggle' name='toggle' type="button" value="<">
<div id="draggable">
<ul id="sortable">
<div class="dragme group1"><li id="item-1" class="ui-state-default">Executive Summary
<button class="delete btn-danger" ><p class="icon-remove"></p></button>
<button class="move-up btn-info"><p class="icon-chevron-up"></p></button><br />
<button class="move-down btn-info"><p class="icon-chevron-down"></p></button>
</li></div>
<div class="dragme group2"><li id="item-2" class="ui-state-default">Company Performance<button class="delete btn-danger"><p class="icon-remove"></p></button>
<button class="move-up btn-info"><p class="icon-chevron-up"></p></button> <br />
<button class="move-down btn-info"><p class="icon-chevron-down"></p></button>
</li></div>
<div class="span10" id="draggable" style="float: right; width: 75%;">
<div class="row-fluid" ><div class="dragme group1">
<div class="span3"><div class="box style2"><span class="number">115,925</span><p>Total Impressions</p></div></div>
<div class="span3"><div class="box style2"><span class="number">1,100</span><p>Total Clicks</p></div></div>
<div class="span3"><div class="box style2"><span class="number">102</span><p>Total Leads</p></div></div>
<div class="span3"><div class="box style2"><span class="number">7.2%</span><p>Overall Conversions</p></div></div>
</div></div>
<div class="dragme group2"><div class="tab-content" id="white-bg">
<div class="tab-pane active" id="impressions">
<div id="chart_div" style=" width: 900px; height: 400px;"> </div>
</div>
</div>
</div>