I'm trying to sort a list of divs with the properties shown by particular attributes (gender, level, name etc) using the following script:
html:
<div id="sortThis" class="col-xs-12 alert-container">
<div id="1" class="container-element sortable box box-blue" data-gender="1" data-level="4" data-name="AAA"> <h3>AAA</h3><div class="panel-body">AAA is resp</div>
</div>
<div id="2" class="container-element sortable box box-pink" data-gender="2" data-level="3" data-name="DDD"><h3>DDD</h3><div class="panel-body">DDD is a s</div>
</div>
<div id="3" class="container-element sortable box box-blue" data-gender="1" data-level="2" data-name="FFF"><h3>FFF</h3><div class="panel-body">FFF has mad</div>
</div>
<div id="4" class="container-element sortable box box-pink" data-gender="2" data-level="4" data-name="CCC"><h3>CCC</h3><div class="panel-body">CCC has ma</div>
</div>
<div id="5" class="container-element sortable box box-pink" data-gender="2" data-level="2" data-name=EEE><h3>EEE</h3><div class="panel-body">EEE is a f</div>
</div>
<div id="6" class="container-element sortable box box-blue" data-gender="1" data-level="3" data-name="BBB"><h3>BBB</h3><div class="panel-body">BBB is an ou</div>
</div>
</div>
<button id="sLevel" class="LbtnSort">Sort by Level</button><br/>
<button id="sGender" class="GbtnSort">Sort by Gender</button><br/>
js:
var LdivList = $(".box");
LdivList.sort(function(a, b){
return $(a).data("level")-$(b).data("level")
});
var GdivList = $(".box");
GdivList.sort(function(a, b){
return $(a).data("gender")-$(b).data("gender")
});
/* sort on button click */
$("button.LbtnSort").click(function() {
$("#sortThis").html(LdivList);
});
/* sort on button click */
$("button.GbtnSort").click(function() {
$("#sortThis").html(GdivList);
});
when the .sortable divs are static, the sort works fine, as this jfiddle shows, however if the contents of the #sortable div (i.e. .sortable divs) are dynamically generated (in this case as the result of a form submit), when the sort button is pressed, the entire contents of the #sortable div disappears, and I can't seem to get it to work.
Any help or suggestions would be appreciated.
edit: The code for dynamic generation of the list is as follows - effectively it's an AXAX form submit that pulls data from a sorted list of items and outputs them.
$('#formStep2').submit(function(event) {
// get the form data
var studentArray = [];
$(".listbox li").each(function() {
studentArray.push({
'name': ($(this).text()),
'gender': ($(this).closest('ol').attr('id')).substr(0, 1),
'level': ($(this).closest('ol').attr('id')).substr(2, 3),
'topic': ($('input[name=topic]').val())
})
});
var studentString = JSON.stringify(studentArray);
console.log(studentString);
var formData = {
'students': studentString,
};
// process the form
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: 'process_step2.php', // the url where we want to POST
data: formData, // our data object
dataType: 'json', // what type of data do we expect back from the server
encode: true
})
// using the done promise callback
.done(function(data) {
if (!data.success) {
// error handling to go here.....
} else {
$('.alert-container').empty();
var obj = JSON.parse(data.message);
//sort the array alphabetically by name (default status)
var test = obj.sort(function(a,b){
var lccomp = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
return lccomp ? lccomp : a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
});
console.log(test);
var i=0;
test.forEach(function(st) {
console.log(st['name']);
var gen = (st['gender'] == 1) ? "blue" : (st['gender'] == 2) ? "pink" : NULL;
$('.alert-container').append('<div id="' + (i+1) + '" class="container-element sortable box box-' + gen + '" data-gender="' + st['gender'] + '" data-level="' + st['level'] + '" data-name="' + st['name'] + '"><h3>' + st['name'] + '</h3><div class="panel-body"><div class="col-xs-9"><i class="fa fa-quote-left fa-3x fa-pull-left fa-' + gen + '" aria-hidden=:true"></i>' + st['comment'] + '</div></div></div>');
i++;
});
// jump to the next tab
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
You are defining LdivList and GdivList inline with your code so they are defined on DOM ready. You have to wrap the definition of those inside a function and call it on click:
$(document).ready(function(){
$("button.LbtnSort").click(function() {
$("#sortThis").html(GenerateLdivList);
});
/* sort on button click */
$("button.GbtnSort").click(function() {
$("#sortThis").html(GenerateGdivList());
});
});
function GenerateLdivList(){
var LdivList = $(".box");
LdivList.sort(function(a, b){
return $(a).data("level")-$(b).data("level")
});
}
function GenerateGdivList(){
var GdivList = $(".box");
GdivList.sort(function(a, b){
return $(a).data("gender")-$(b).data("gender")
});
}
As #theduke said, the lists are probably empty at the time you sort them. Here's a simple change that will read and sort the lists when you click the buttons instead. (Not tested.)
var LdivList = function () {
return $(".box").sort(function(a, b){
return $(a).data("level")-$(b).data("level")
});
};
var GdivList = function () {
return $(".box").sort(function(a, b){
return $(a).data("gender")-$(b).data("gender")
});
};
/* sort on button click */
$("button.LbtnSort").click(function() {
$("#sortThis").html(LdivList());
});
/* sort on button click */
$("button.GbtnSort").click(function() {
$("#sortThis").html(GdivList());
});
Related
I have this unslider which display tweets polled from some sources via Ajax which refreshes every 8 sec. The Unslider works fine for the first time but subsequently when new ajax queries are fired, it is supposed to clear the first tags and repopulate with new one. For some reason, it doesn't clear out the old tags and instead appends the new tags to the old.
Here are the screenshots:
var flag = false;
(function setTweets() {
$.ajax({
type: "GET",
url: "../tweets/get_latest_tweets",
success: function(data) {
//clear all children first
$('#tweets-list').children().remove();
for (var i = 0; i < data.length; i++) {
$('<li>' + data[i].text + '<div class="card-footer bg-twitter"><div class="card-profile-image"><img src="' + data[i].pic + '" class="rounded-circle img-border box-shadow-1" alt="Card Image"></div>' +
'<footer class="blockquote-footer bg-twitter white"><strong>#' + data[i].screen_name + '</strong></footer></div></li>').appendTo($('#tweets-list'))
}
if (!flag) {
$('#tweet-slider').unslider({ //initialize unslider only once
autoplay: true,
arrows: true,
speed: 1000,
delay: 7000,
});
flag = true;
}
},
error: function(err) {
console.log(err);
}
}).then(function() {
setTimeout(setTweets, 8000); //Todo: Check how to do this async (dynamic adding of points)
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card bg-twitter white">
<div class="card-content p-2">
<div class="card-body">
<div class="text-center mb-1">
<i class="ft-twitter font-large-3"></i>
</div>
<div class="tweet-slider" id="tweet-slider">
<ul id='tweets-list' class="text-center">
</ul>
</div>
</div>
</div>
Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.
According to this, you are removing # tweets-list as an element, I think if you use .empty () you will clean it
uses $('#tweets-list').empty();
I was reading the unslider website and it says that if you delete or add slides you should use the method slider.unslider('calculateSlides');
var flag = false;
(function setTweets() {
$.ajax({
type: "GET",
url: "../tweets/get_latest_tweets",
success: function(data) {
//clear all children first
$('#tweets-list').children().remove();
for (var i = 0; i < data.length; i++) {
$('<li>' + data[i].text + '<div class="card-footer bg-twitter"><div class="card-profile-image"><img src="' + data[i].pic + '" class="rounded-circle img-border box-shadow-1" alt="Card Image"></div>' +
'<footer class="blockquote-footer bg-twitter white"><strong>#' + data[i].screen_name + '</strong></footer></div></li>').appendTo($('#tweets-list'))
}
if (!flag) {
$('#tweet-slider').unslider('calculateSlides');
flag = true;
}
},
error: function(err) {
console.log(err);
}
}).then(function() {
setTimeout(setTweets, 8000); //Todo: Check how to do this async (dynamic adding of points)
});
})();
apparently there is no need to reinitialize the unslider, try it but, you restart it
I want to populate the results div with the already loaded variable, data1, when the back button is clicked. With this code, when the back button is clicked, the results div gets set to "". How do I access the newer version of data1?
Javascript:
function finddata(def,id){
$("#doctitle").html($("#exp").val() + " - Writer's Dictionary");
$("#results").html('<span class="glyphicon glyphicon-cog glyphicon-spin" title="loading..."></span>').fadeIn();
if (def == 1) {
var word = id.innerHTML;
$.get( "processor.php?query=" + word + "&def=" + def, function(data2) {
$("#results").html(data2);
$("#back").click(function(){
$("#results").html(data1);
});
});
} else {
$.get( "processor.php?query=" + $("#exp").val(), function(data1) {
$("#results").html(data1);
});
}
}
HTML:
<div class="container">
<div class="col-md-6 col-md-offset-3" id="results">
<div id="back">Back</div>
</div>
</div>
Try
<div id="back" onclick="finddata(2)">Back</div>
to set def parameter to value other than 1 , which should call $.get() within else statement of finddata
Edit, Updated
var data;
function finddata(def) {
if (def === 1) {
// do stuff
} else {
// if `data` defined
if (data) {
// do not do stuff here
}
// else call `.get()`
else {
var word = id.innerHTML;
$.get( "processor.php?query=" + word + "&def=" + def, function(data2) {
$("#results").html(data2);
$("#back").click(function(){
$("#results").html(data1);
});
});
}
}
}
$("#back").click(function() {
finddata(2)
})
jsfiddle http://jsfiddle.net/229ad2b2/2/
I'd like to embed radio buttons inside more radio buttons, like this : https://jsfiddle.net/xa6ow1jq/
The fiddle behaves exactly like I want it to, however it seems to be a lot of code just for a 2x3 grid, and I'm planning to have at least a 3xN grid (3 layers of N buttons each, N being at least 10, but many more if the user keeps scrolling)... So I was wondering if anyone knew/could think of more efficient ways to do this. (Using php and/or javascript and/or jquery and/or jquery UI)
(I'm a javascript & jquery noob, currently (self) learning it since yesterday, so I'd appreciate if you could be gentle with technical terms and give as much explications as possible).
Thanks in advance.
The javascript code in the fiddle :
// main buttons
$(document).ready(function(){
$(".ap").click(function(){
$(".a").toggle();
$(".b").hide();
$(".c").hide();
$(".a.l").hide();
});
});
$(document).ready(function(){
$(".bp").click(function(){
$(".a").hide();
$(".b").toggle();
$(".c").hide();
$(".b.l").hide();
});
});
$(document).ready(function(){
$(".cp").click(function(){
$(".a").hide();
$(".b").hide();
$(".c").toggle();
$(".c.l").hide();
});
});
//secondary buttons
//a
$(document).ready(function(){
$(".a1").click(function(){
$(".a1.l").toggle();
$(".a2.l").hide();
$(".a3.l").hide();
});
});
$(document).ready(function(){
$(".a2").click(function(){
$(".a1.l").hide();
$(".a2.l").toggle();
$(".a3.l").hide();
});
});
$(document).ready(function(){
$(".a3").click(function(){
$(".a1.l").hide();
$(".a2.l").hide();
$(".a3.l").toggle();
});
});
//b
$(document).ready(function(){
$(".b1").click(function(){
$(".b1.l").toggle();
$(".b2.l").hide();
$(".b3.l").hide();
});
});
$(document).ready(function(){
$(".b2").click(function(){
$(".b1.l").hide();
$(".b2.l").toggle();
$(".b3.l").hide();
});
});
$(document).ready(function(){
$(".b3").click(function(){
$(".b1.l").hide();
$(".b2.l").hide();
$(".b3.l").toggle();
});
});
//c
$(document).ready(function(){
$(".c1").click(function(){
$(".c1.l").toggle();
$(".c2.l").hide();
$(".c3.l").hide();
});
});
$(document).ready(function(){
$(".c2").click(function(){
$(".c1.l").hide();
$(".c2.l").toggle();
$(".c3.l").hide();
});
});
$(document).ready(function(){
$(".c3").click(function(){
$(".c1.l").hide();
$(".c2.l").hide();
$(".c3.l").toggle();
});
});
Make formation of your html below, so you can deal with 3xN rows, you need to pop into array shown in javascript as // here and your HTML accordingly to achieve,
$(document).ready(function() {
var groups = ['a', 'b', 'c'];
// creating simple js array too use for DOM manipulation
$.each(groups, function(k, id) {
// loops groups array we just created id variable contains a, b and then c
$('#' + id).hide();
// will evaluate as $('#a').hide();
$('#' + id + 'l').hide();
// will evaluate as $('#al').hide();
});
$(".button").click(function() {
// bind click event on DOM items having class name as 'button'
var button_id = $(this).data('id');
/* $(this) will get us which button has been clicked, every
time click event occurs on DOM items having button class
and $(this).data(id); will get us clicked button's data-id attribute */
$('#' + button_id).toggle(); // toogle
var hide = $.grep(groups, function(value) {
// http://api.jquery.com/jquery.grep/
return value != button_id;
});
$.each(hide, function(k, id) {
// http://api.jquery.com/each/
$('#' + id).hide();
});
});
var selector = []; // initialize blank array
$.each(groups, function(k) {
selector.push('.' + groups[k]);
/* push groups array's elements with an extra .
so, .a .b and .c */
});
// join array elements with ,
selector = selector.join(',');
// now selector is string, having value .a,.b,.c
// https://api.jquery.com/category/selectors/
$(selector).click(function() {
// binding an event to the string we just created, follow the link above to get more idea
var button_id = $(this).data('id'); // clicked button's data-id attribute
var class_id = $(this).attr('class'); // clicked button's class
var flag = $('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').is(':visible');
/* for later use, will be true if elements with matched filter conditions is visible in DOM,
false otherwise */
$.each(groups, function(k, id) {
$('#' + id + 'l').children().hide();
// https://api.jquery.com/children/
});
$.each(groups, function(k, id) {
$('#' + id + 'l').hide();
});
$('#' + class_id + 'l').show();
if (flag)
$('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').hide();
else
$('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-id="a">Toggle a</button>
<button class="button" data-id="b">Toggle b</button>
<button class="button" data-id="c">Toggle c</button>
<div id="a">
<div class="a" data-id="1"><button>Toggle a1</button></div>
<div class="a" data-id="2"><button>Toggle a2</button></div>
<div class="a" data-id="3"><button>Toggle a3</button></div>
</div>
<div id="b">
<div class="b" data-id="1"><button>Toggle b1</button></div>
<div class="b" data-id="2"><button>Toggle b2</button></div>
<div class="b" data-id="3"><button>Toggle b3</button></div>
</div>
<div id="c">
<div class="c" data-id="1"><button>Toggle c1</button></div>
<div class="c" data-id="2"><button>Toggle c2</button></div>
<div class="c" data-id="3"><button>Toggle c3</button></div>
</div>
<div id="al">
<div class="al" data-id="1">this is line a1</div>
<div class="al" data-id="2">this is line a2</div>
<div class="al" data-id="3">this is line a3</div>
</div>
<div id="bl">
<div class="bl" data-id="1">this is line b1</div>
<div class="bl" data-id="2">this is line b2</div>
<div class="bl" data-id="3">this is line b3</div>
</div>
<div id="cl">
<div class="cl" data-id="1">this is line c1</div>
<div class="cl" data-id="2">this is line c2</div>
<div class="cl" data-id="3">this is line c3</div>
</div>
I have added a server side pagination with table sorter successfully. I just would like to know how can I refresh it? I would like to create a button to call a refresh function. Does anyone know if there is any method to do it? I do not want to reload the page for it.
UPDATE:
ajaxProcessing: function(data){
if (data && data.hasOwnProperty('rows')) {
var r, row, c, d = data.rows,
total = data.total_rows,
headers = data.headers,
rows = [],
len = d.length;
for ( r=0; r < len; r++ ) {
row = []; // new row array
// cells
for (c in d[r]) {
if (typeof(c) === "string") {
row.push(d[r][c]); //add each table cell data to row array
}
}
rows.push(row); // add new row array to rows array
}
var items="";
$("#tabelaTickets tr:has(td)").remove();
if (rows!==null && rows.length!== 0) {
$.each(rows,function(index,item) {
$("#tabelaTickets").append('<tr class="danger"><td align="center" style="width: 70px"><a type="button" class="btn btn-primary btn-xs" data-placement="right" title="Visualizar ticket" data-toggle="modal" class="btn btn-primary" href="visualizar.php?ticket='+item[3]+'"> #' + item[3] + '</a></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:250px">' + item[4] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:350px;">' + item[5] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:250px;">' + item[6] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:60px;">' + item[7] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:70px;">' + item[8] + '</div></td></tr>');
});
}else{
$("#tabelaTickets").append('<tr><td colspan = "6" align="center">SEM RESULTADO A SER EXIBIDO</td></tr>');
}
$("#tabelaTickets").trigger("update");
$("#tabelaTickets").trigger("appendCache");
$("#pleaseWaitDialog").modal('hide');
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [ total];
}
},
Thanks since now,
Erik
your repsonse is JSON, it's easy with a little AJAX function.
example your HTML is look like :
<div class="wrapper">
<div class="item">
<span>item 01</span>
</div>
<div class="item">
<span>item 02</span>
</div>
<div class="item">
<span>item 03 </span>
</div>
</div>
<button class="btn refresh-btn" type="submit"></button>
your response JSON maybe look like :
response = {
{ content : item11 },
{ content : item12 },
{ content : item13 }
};
your HTML render function with AJAX will be look like :
$('.refresh-btn').on('click', function() {
var url = 'yourUrl/?param=refresh&example=true';
var $wrapper = $('.wrapper'); // a div that wrap your new HTML.
$.get(url, {}) //call AJAX GET new item.
.done(function(data) {
$wrapper.html(''); // clear old list;
var $template = $('<div/>', {class : 'item'} ); // create item's HTML.
data.arrayItemList.forEach(function(item) {
var itemTemplate = $template.clone();
itemTemplate.append($('<span/>').text(item.content));
$wrapper.append(itemTemplate); // add new item in list.
});
});
})
that's mean : you create new HTML, and fill it with your data, everything worked fine.
Some time I create a empty template some where in view and clone it.
<div class="sample-template">
<div class="item">
<span> </span>
</div>
</div>
when I need it, I call the jQuery var $template = $('.sample-template').clone(); then fill data with $template.find('span').text(item.content);
I'm developing a simple example of Right Click Menu using Jquery. I'm using JQuery ContextMenu. So I have a simple table and the jsp code generete the cells in this way:
<div id="catS" class="pure-u-1-3">
<h4 class="l-box">Categorie</h4>
<table class="pure-table pure-table-horizontal l-box" id="catAssociate">
<tbody>
<%ObjectifyService.register(Categoria.class);
List<Key<Categoria>> lCategorie=s.getCategorie();
if(lCategorie!=null){
for(Key<Categoria> k : lCategorie){
Categoria c= ofy().load().now(k);
if(c!=null)
%><tr id="<%out.println(c.getId());%>" ><td id=" <%out.println(c.getId());%>" onclick="getSottocategorieDaC(this); getDispenseDaC(this)"><%out.println(c.getNome());%></td></tr> <%
}
}else{
%><tr><td>Nessuna categoria associata</td></tr><%
}
%>
</tbody>
</table>
</div>
So in an other table i can add elements on the datastore and via the ajax post i update the "catAsscoiate" table. these are my function:
This add the item on the datastore and redraw my table.
function AddAction(t, a) {
$.ajax({
url : 'studenteServlet?action=aggiungiC&ids='+$.urlParam('id')+'&idc='+t.id,
type : "POST",
async : false,
success : function(data) {
console.log(data);
$('#catAssociate tbody > tr').remove();
var html = '';
for(var i = 0; i < data.length; i++)
html += '<tr id='+data[i].id +'><td id='+data[i].id +' onclick="getSottocategorieDaC(this); getDispenseDaC(this)">' + data[i].nome + '</td></tr>';
$('#catAssociate').append(html);
}
});
}
Before the add action the context menu works on catAssociate, after no. this is the code:
$(document).ready(function() {
$('#catAssociate tbody tr').contextMenu('myMenu2', {
bindings: {
'open': function(t) { DeleteAction(t, "Open"); },
}
...
Can anyone explain me why?
Thanks!
when you replace all the html using $('#catAssociate').append(html); you effectively remove / lose all the event bindings that where attached to the old content that you just zapped.
so just reapply them after you rebuild the DOM in your success function:
$('#catAssociate').append(html);
$('#catAssociate tbody tr').contextMenu('myMenu2', {
bindings: {
'open': function(t) { DeleteAction(t, "Open"); },
}