I am using this nested sortable plugin mjsarfatti.com/sandbox/nestedSortable and the only issue I have so far is when I dynamically add an item to the "tree", I am not able to expand or collapse the item(s). I am just using the sample code so far, and adding to that.
How I am adding the items dynamically:
$('#new-button').on('click', function() {
var nextId = $('ol.sortable').nestedSortable('nextId');
var $li = $("<li id=\"list_" + nextId + "\"><div><span class=\"disclose\"><span></span>
</span>New Item</div>");
$li.addClass('mjs-nestedSortable-leaf');
$('ol.sortable').append($li);
})
When I add these new items to the tree, they work just fine - I can move them throughout the tree, make them children, etc.
However, when I try to collapse a new item that I have made a parent - there is no response.
I am sure I just haven't added the correct event handler somewhere, but I can't fin where that is happening. I have even triggered a destroy() and _create() of the tree after I add the new item(s), hoping that would "re-configure" all the items again. However, no luck there.
Can anyone tell me how I can properly hook up these new dynamically created items so they will be treated as other items in the tree?
Thanks!
Ok, after 2 days of looking at this, I was able to solve the issue. It is funny - the code I had been looking for was directly above the new code that I had entered. (Right under my nose.) Thanks to the kind people here for introducing me to: Visual Event - that greatly helped me to track down where the events were being created in the first place!
$('#new-button').on('click', function() {
var nextId = $('ol.sortable').nestedSortable('nextId');
//Begin creating dynamic list item
var $li = $("<li id=\"list_" + nextId + "\">");
var $lidiv = $("<div></div>");
var $disli = $("<span class=\"disclose\"><span></span></span>");
$li.addClass('mjs-nestedSortable-leaf');
//Assign event listener to newly created disclose span tag above
$disli.on('click', function() {
$(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
});
//Now actually start to append to DOM
$lidiv.append($disli);
$lidiv.append("New List Item " + nextId);
$li.append($lidiv);
$('ol.sortable').append($li);
})
Hopefully, this will help someone.
Here is a working copy in case you want to see it in action.
Related
I am developing a plugin for my own usage, and I want to get rid of all the annoying wordpress messages that appear on top including updates, errors, info, etc. Given the obvious fact that the plugin's menu page is generated by php, I tried removing these messages with a php code which according to my research is this:
function remove_core_updates(){
global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');
I added this at the top of my plugin php file and should remove the notifications, but the error message for some plugins still appear. Apart from this, the code above removes the update notification for all menu pages I access in my dashboard. This I do not want.
As a workaround, I wrote a function which does what I want:
function remove_wp_messages(selector) {
var child = document.querySelector(selector),
parent = child.parentNode,
index = Array.prototype.indexOf.call(parent.children, child);
for (var i = 1; i < Number(index + 1); i++) {
var elements = document.querySelector("#wpbody-content > :nth-child(" + i + ")");
while (elements.firstChild) {
elements.removeChild(elements.firstChild);
elements.style.display = "none";
}
}
}
window.onload = remove_wp_messages("#wpbody-content > link");
Given that the first html element I add to the menu page is a link to an external stylesheet, the javascript function above returns the index of that link and removes all child nodes from the elements up to the link, hence the loop. Here is the issue, I want to not only remove the child elements but the parents as well which would be equivalent to removing the notifications above the content of my plugin. I tried replacing:
elements.style.display = "none";
With this:
elements.remove();
No luck. What I do not understand is, that the parent elements get hidden, but I replace it with remove() it removes my content instead of the notifications. Why? I am open to both php and javascript suggestions.
SOLUTION
According to #PetrSr answer, my code now looks like this:
function remove_wp_messages(selector) {
var child = document.querySelector(selector),
parent = child.parentNode,
index = Array.prototype.indexOf.call(parent.children, child);
for (var i = Number(index); i > 0; i--) {
document.querySelector("#wpbody-content > :nth-child(" + i + ")").remove();
}
}
Pretty straightforward.
Looping through the elements backwards like this should fix your issue:
for (var i = Number(index); i > 0; i--) {
//your code
}
You cannot loop forward when removing DOM elements the way you did, because after removing element1, element2 becomes the first one. If you then remove the second element, you are in fact removing what was originally element3. Etc.
I have a table which contains input text and select option and button.The table row is cloned when the button is clicked. Every thing is working fine except the select option. After the table row is cloned the select option not display what i select. Here is the JsFiddle http://jsfiddle.net/aravinth/Ad22d/
Javascript code like
var b = 1;
function cloneRow() {
var row = document.getElementById("table");
var table = document.getElementById("particulars");
var clone = row.rows[1].cloneNode(true);
var clones = row.rows.length;
var workerName = clone.cells[0].getElementsByTagName('input')[0];
var position = clone.cells[2].getElementsByTagName('select')[0];
var date1 = clone.cells[3].getElementsByTagName('input')[0];
var fromHr = clone.cells[4].getElementsByTagName('input')[0];
var toHr = clone.cells[5].getElementsByTagName('input')[0];
var add = clone.cells[1].getElementsByTagName('input')[0];
workerName.id = "workerName" + b;
position.id = "position" + b;
date1.id = "date1" + b;
fromHr.id = "fromHr" + b;
toHr.id = "toHr" + b;
add.id = "add" + b;
$(date1).datebox();
table.appendChild(clone);
b++;
}
Also i referred this
1 . Change Select value using jQuery Uniform.js
2 . jquery cloning a block of element. select element acting weired
3. select not working after .clone
but not get success. Please suggest some solutions.
It seems, jQuery mobile doesn't recognize the cloned selectmenu.
What you can do, is remove the selectmenu and re-add only the HTML select and then initialize it with selectmenu()
$('.ui-select', clone).remove();
clone.cells[2].appendChild(position);
$(position).selectmenu();
See modified JSFiddle
Update:
I just followed jquery cloning a block of element. select element acting weired and found #malko's answer, which is a lot more elegant than removing and reinserting. This reduces it to
$(position).closest('.ui-select').replaceWith(position);
$(position).selectmenu();
See JSFiddle
I think you solved select option issue by using this answer. And another one issue you need to fix in your fiddle. The issue is time picker for last two columns (fromHr and toHr).
To fix this you need to add the bellow lines in your javascript code.
$(fromHr).datebox();
$(toHr).datebox();
because those rows are dynamically created. So you need to add the above lines to show time picker in your fromHr and toHr.
See this working FIDDLE
The issue is that jQuery Mobile recreates a lot of elements, for example your select, to be non-native widgets, and then binds functions to certain events. When you just clone the row, you aren't getting the event-bindings, so what you need to do is actually append the raw html -- what it was before it got re-rendered -- and then trigger the create method:
var template="<tr><td>..your row here..</td></tr>";
$("#particulars").append(template).parent().trigger('create');
I have a barely working fiddle, but I removed a lot of your code so I could easily illustrate what I am talking about.
http://jsfiddle.net/Ad22d/81/
I had the same issue and fixed it by calling selectmenu("destroy") on the original select box before cloning, and then re-initializing select boxes by calling selectmenu() after cloned select is appended.
So when a user presses a button, I am creating elements to make a list appear on the page. However, when they press the button again the new list goes after the previous content, and the old content remains. I need to clear the previous content (which was created with .createElement()), and then insert the fresh content.
This is how I'm making the elements:
I have a <ul id="positiveUL"> in the HTML. And positiveList = document.getElementById('positiveUL')
for(var positive in positives) {
var li = document.createElement('li');
li.innerHTML = positives[positive] + ', ';
positiveList.insertBefore(li, positiveList.firstChild);
}
What I have tried:
.innerHTML = ' ';
I also tried removing childNodes with .removeChild(), but it doesn't work.
Would really appreciate any help or direction to go in. Thanks!
Hopefully I understand you, but before inserting your new content, empty the old content?
while(node.firstChild)
{
node.removeChild(node.firstChild);
}
Where node is your parent node?
I have used firebug and IE profilers and can see what function in my code is causing the slowness. Being new to jquery, the recommendations that I have read online are not clear to me. I have made an example page that shows the slow behavior when you check or uncheck a check box. No surprise that this is fast using Chrome.
The function that is slow can be found on line 139.
$('.filters input').click( function()
JSFiddle can be found here
The code is 122 KB and can be found here
UPDATE: if you know of any examples online that are similar in function and faster, please share.
i had a brief look through your code, but it was very hard to follow. it seemed as if you were looping through things many many times. i used a much simpler approach to get the list of all states.
your approach was
* make a massive string which contained every class (possibly repeated multiple times)
* chop it up into an array
* loop through the array and remove duplicates
i simply took advantage of the fact that when you select something in jQuery you get a set rather than a single item. you can therefore apply changes to groups of object
$(document).ready(function () {
//this will hold all our states
var allStates = [];
//cache filterable items for future use
var $itemsToFilter = $(".filterThis");
//loop through all items. children() is fast because it searches ONLY immediate children
$itemsToFilter.children("li").each(function() {
//use plain ol' JS, no need for jQuery to get attribute
var cssClass = this.getAttribute("class");
//if we haven't already added the class
//then add to the array
if(!allStates[cssClass]) {
allStates[cssClass] = true;
}
});
//create the container for our filter
$('<ul class="filters"><\/ul>').insertBefore('.filterThis');
//cache the filter container for use in the loop
//otherwise we have to select it every time!
var $filters = $(".filters");
// then build the filter checkboxes based on all the class names
for(var key in allStates) {
//make sure it's a key we added
if(allStates.hasOwnProperty(key)) {
//add our filter
$filters.append('<li><input class="dynamicFilterInput" type="checkbox" checked="checked" value="'+key+'" id="filterID'+key+'" /><label for="filterID'+key+'">'+key+'<\/label><\/li>');
}
}
// now lets give those filters something to do
$filters.find('input').click( function() {
//cache the current checkbox
var $this = $(this);
//select our items to filter
var $targets = $itemsToFilter.children("li." + $this.val());
//if the filter is checked, show them all items, otherwise hide
$this.is(":checked") ? $targets.show() : $targets.hide();
});
});
FIDDLE: http://jsfiddle.net/bSr2X/6/
hope that's helpful :)
i noticed it ran quite a bit slower if you tried to slideup all the targets, this is because so many items are being animated at once. you may as well just hide them, since people will only see the ones at the top of the list slide in and out of view, so it's a waste of processor time :)
EDIT: i didn't add logic for show all, but that should be quite a trivial addition for you to make if you follow how i've done it above
You could use context with your selector:
$('.filters input', '#filters_container').click(function()...
this limits the element that jQuery has to look in when selecting elements. Instead of looking at every element in the page, it only looks inside your $('#filters_container') element.
How can i use javascript (i assume) to clone a table row like ive beautifully illustrated in the picture below?
You can hookup a live event to all the buttons. If you give them a class of clone for instance the following will work.
$('input.clone').live('click', function(){
//put jquery this context into a var
var $btn = $(this);
//use .closest() to navigate from the buttno to the closest row and clone it
var $clonedRow = $btn.closest('tr').clone();
//append the cloned row to end of the table
//clean ids if you need to
$clonedRow.find('*').andSelf().filter('[id]').each( function(){
//clear id or change to something else
this.id += '_clone';
});
//finally append new row to end of table
$btn.closest('tbody').append( $clonedRow );
});
Please Note:
If you have elements in the table row with id's you will need to do a .each through them and set them to a new value otherwise you will end up with duplicate id's in the dom which is not valid and can play havoc with jQuery selectors
You can do this like so
If you want a really simple solution, just use innerHTML:
var html = document.getElementById("the row").innerHTML;
var row = document.createElement('p');
row.innerHTML= html;
document.getElementById("table id").appendChild(row);
For what purpose do you want to use the data? I've done similar things previously on data input forms and generally I've found it to be beneficial to the users not to manipulate everything in Javascript but to hook to store the data on the server and interface with AJAX.
The issue is that as soon as you start letting users do this sort of complex table manipulation and they accidentally hit the back button you end up with a lot of disgruntled punters. Coding up transient storage on a database isn't that much harder than manipulating Javascript and in fact can be easier as you can break the operations down more easily. Debugging is simpler for that reason too (you always have inspect access to the current state of your table).
Lots of option for handling via AJAX - the simplest being to just use a place-holder division and feed the whole table structure in as needed.
A jQuery example:
$(document).ready(function(){
$('TABLE.recs').delegate('INPUT.clone','click',function(e){
e.preventDefault();
var s = $(this).parent().parent().clone().wrap('<div>').parent().html();
$('TABLE.recs TBODY TR:last').after(s);
});
});