I'm currently trying to create a button that allows me to group options based on an attribute. Since I'm no jquery wiz, I took the existing and working button "Add-all" and started modifying it in order to add only the options with a certain attribute. The following code is that intent...
this.container.find(".remove-all").click(function() {
that._populateLists(that.element.find('option').removeAttr('selected'));
return false;
});
this.container.find(".add-all").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible")) jQuery(options[i - 1]).attr('selected', 'selected');
});
} else {
options.attr('selected', 'selected');
}
that._populateLists(that.element.find('option'));
return false;
});
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible") && jQuery(this).has.class("auto")) jQuery(options[i - 1]).attr('selected', 'selected');
});
} else {
that.availableList.children('li').each(function(i) {
if (jQuery(this).has.class("auto")) jQuery(options[i - 1]).attr('selected', 'selected');
});
}
that._populateLists(that.element.find('option'));
return false;
});
},
I'm currently using the has.class in order to look for the attribute that i want. In this case , auto. But it's not working. I'm trying to fix the code shown on top, in order to call the attribute "auto". the label = "'+ option.attr('class')+'" is the code that generates the lable = "auto" in html.
_getOptionNode: function(option) {
option = jQuery(option);
var node = jQuery('<li class="ui-state-default ui-element " title="' + option.text() + '" data-selected-value="' + option.val() + '" label = "' + option.attr('class') + '" ><span class="ui-icon"/>' + option.text() + '<span class="ui-corner-all ui-icon"/></li>').hide();
node.data('optionLink', option);
return node;
},
Below there is an image that shows the user interface. When I inspect the AUTO: option , i have the following code...
<li class="ui-state-default ui-element ui-draggable ui-draggable-handle" title="AUTO: Car Dealers - New Cars (CARD_NEW)" data-selected-value="82" industry="auto'" style=""><span class="ui-helper-hidden"></span>AUTO: Car Dealers - New Cars (CARD_NEW)<span class="ui-corner-all ui-icon ui-icon-plus"></span></li>
I want my Add auto button to be able to move all industry = "auto" options to the left.
I am just going to base my answer on your Title
var elements = $(document).find("[data-attribute]")
that code is going to return all elements with an attribute of "data-attribute"
just change document if you want to find on specific places like inside of div#Header ... also change data-attribute to what you want like industry or title or even data-selected-value
Related
I'm currently trying to call only fields with certain attributes. Since I'm no jquery expert, I took the "add all" button as a guide and updated it to serve my purpose. So far, I haven't received the results I was expecting.
Down below is the original "add - all" code which adds all "li" from the left side of a table to the right.
this.container.find(".add-all").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible")) jQuery(options[i-1]).attr('selected', 'selected');
});
} else {
options.attr('selected', 'selected');
}
that._populateLists(that.element.find('option'));
return false;
});
This is the code that generates the "li".
_getOptionNode: function(option) {
option = jQuery(option);
var node = jQuery('<li class="ui-state-default ui-element " title="'+option.text()+'" data-selected-value="' + option.val() + '" industry = "'+ option.attr("class")+'" ><span class="ui-icon"/>'+option.text()+'<span class="ui-corner-all ui-icon"/></li>').hide();
node.data('optionLink', option);
return node;
I tried updating the "add all" code in order to call only the industry attribute. This is what I tried...
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible") && jQuery(this).find("[industry = 'auto']")) jQuery(options[i-1]).attr('selected', 'selected');
});
} else {
that.availableList.children('li').each(function (i) {
if (jQuery(this).find("[industry = 'auto']")) jQuery(options[i-1]).attr('selected','selected');
});
}
that._populateLists(that.element.find('option'));
return false;
});
This is what the inspect in the actual page brings up. Also , for some reason I'm getting an extra apostrophe in the industry = "auto'". Will this affect the end results? If so, how could I fix this?
I have a function that on click add/removes stuff from a SQL database.
I do a condition to check if it is refering to an add or remove and execute the code.
the add function works perfectly, but the remove not and its the same code, am i missing something obvious? And is this the best way to do this?
jquery:
//add card from list
$("#listcards a").click(function() {
if($(this).attr('add').length > 1) {
var value = $(this).attr('add');
$.post('searchc.php',{add:value}, function(data){
$("#add_result").html(data);
});
return false;
}
});
//remove card from list
$("#listcards a").click(function() {
if($(this).attr('rem').length > 1) {
var value = $(this).attr('rem');
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
}
});
html code:
<form id="listcards" method="post">
<input type='hidden' id='lcard' name='lcard' value=''>
<div>
bla bla -> imagem no + ? ou por algum efeito css+ | -<br>
coiso coiso + | -<br>
</div>
</form>
Do i also need to be in a form for the POST or a div would work too?
You've got two click handlers for the same elements, which could be causing a problem. You don't need to run both sets of code for each <a> element. Instead give the elements a class to show exactly what they do, and then limit your selectors to those elements
HTML:
+ | <a href="" class="remove" rem="bla bla">
Script:
$("#listcards a.add").click(function() {
var value = $(this).attr('add');
$.post('searchc.php',{add:value}, function(data){
$("#add_result").html(data);
});
return false;
});
//remove card from list
$("#listcards a.remove").click(function() {
var value = $(this).attr('rem');
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
});
You can use it like thisi will give only remove functionality. And oif possible add ajax.
$("#listcards .rem").click(function() {
var value = $(this).text();
if($(this).length()>1) {
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
}});
Suppose you don't have any card when you're loading this page 1st time. Then you click add new & a new card get's added to your html.
Now for this newly added card, the "remove" method doesn't get bind as that was loaded on page load (when this new card element was not present). Hence your remove method is not working for newly added cards.
So to make it work, you need to bing the remove method on new cards too. You can do that by keeping you remove part in a js function which you would call in "add" part after putting new card into html.
function removeCard(){
// first unbind the click event for all cards if any & then bind it
$("#listcards a").off('click');
//remove card from list
$("#listcards a").click(function() {
if($(this).attr('rem').length > 1) {
var value = $(this).attr('rem');
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
}
});
}
And you add part should be like this:
//add card from list
$("#listcards a").click(function() {
if($(this).attr('add').length > 1) {
var value = $(this).attr('add');
$.post('searchc.php',{add:value}, function(data){
$("#add_result").html(data);
removeCard(); // adding remove method here
});
return false;
}
});
Follow up your code,
$("#listcards a").click(function() {
var action = $(this).attr("add") ? "add" : "rem";
var value;
if(action == "add")
value = $(this).attr('add');
if(action == "rem")
value = $(this).attr('rem');
var param = {};
param[action] = value;
$.post('searchc.php',param, function(data){
$("#add_result").html(data);
});
});
Use onclick function to do this
It can help you out
+
-<br>
function addthis(addthis) {
if(addthis.length > 1) {
alert(addthis);
// $.post('searchc.php',{add:addthis}, function(data){
// $("#add_result").html(data);
// });
return false;
}
}
function removethis(remthis) {
if(remthis.length > 1) {
alert(remthis);
// $.post('searchc.php',{reb:remthis}, function(data){
// $("#add_result").html(data);
// });
return false;
}
}
I need help creating a split button in WordPress TinyMCE
(function() {
tinymce.create('tinymce.plugins.Wptuts', {
init : function(ed, url) {
ed.addButton('dropcap', {
title : 'DropCap',
cmd : 'dropcap',
image : url + '/dropcap.jpg'
});
ed.addButton('showrecent', {
title : 'Add recent posts shortcode',
cmd : 'showrecent',
image : url + '/recent.jpg'
});
ed.addCommand('dropcap', function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '<span class="dropcap">' + selected_text + '</span>';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand('showrecent', function() {
var number = prompt("How many posts you want to show ? "),
shortcode;
if (number !== null) {
number = parseInt(number);
if (number > 0 && number <= 20) {
shortcode = '[recent-post number="' + number + '"/]';
ed.execCommand('mceInsertContent', 0, shortcode);
}
else {
alert("The number value is invalid. It should be from 0 to 20.");
}
}
});
},
// ... Hidden code
});
// Register plugin
tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();
I can create simple buttons for the Wordpress TinyMCE Editor
But I don't know how to create a split button. I'm really having trouble with this. I already searched on Google but I can't find a good examples for creating split button, can someone help me for this?
try this
ed.createSplitButton('splitbutton', {
title : 'Splitbutton',
image : url + '/splitbutton.jpg'
});
I am really confused how i managed these things.Please look at the attached image.See the right panel area.
Starting from first, package name is coming from last page; let's say page1.php. Now assume this attached image is page2.php.I am able to grab the selected checkbox values from left hand side and it is posting on right hand side.See i have checked the video checkbox.I have used jquery for that.
Problem 1 if i refresh the page values disappear except package value.I want the all checkbox value from right panel whatever user checked and post it to page3.php for further usage.I dont think jquery will do.I used the ajax post but cant able to grab values from below code.kindly help him regarding this.
Image link http://s7.postimage.org/3zbf1ucwb/image.jpg
function refreshPrices() {
var beg=<?php echo isset($beg) ? $beg : 0 ?>;
var inte=<?php echo isset($int) ? $int : 0 ?>;
var advn=<?php echo isset($adv) ? $adv : 0 ?>;
var currentTotalValue = 0;
currentTotalValue = currentTotalValue + beg + inte + advn;
$("#results div").each(function() {
if (!isNaN(parseInt($(this).find("span").text().substring(1)))) {
currentTotalValue += parseInt($(this).find("span").text().substring(1));
}
});
$("#totalValue").text("$" + currentTotalValue)
}
$(document).ready(function() {
$('#1').click(function() {
//var row = $(this);
if (($(this).attr('checked')) == 'checked') {
$('#result').append("-PDF Document <html><span style=float:right>$100</span></html>");
}
else {
$('#result').text("");
}
refreshPrices()
});
$('#2').click(function() {
if (($(this).attr('checked')) == 'checked') {
$('#result2').append("-Video <html><span style=float:right>$200</span></html> ");
}
else {
$('#result2').text("");
}
refreshPrices()
});
});
$(this).attr('checked') returns true or false, not 'checked', so you need to do :
if ( $(this).prop(':checked') ) { --- }
or just
if ( this.checked ) {
$('#result').append("-PDF Document <html><span style=float:right>$100</span></html>");
}
Also, you should'nt be using just a number as an ID, change it to #a1 etc. and you do realize that <html> tags are the start and end of the document, and appending them to an element inside the DOM does really seem like a great idea.
I am new to json n php..
using code below to fetch data for radio button check box and text box with json . It is working fine but I donno how to populate data in select box in the same way .
function get_input_value(name, rval) {
//console.log(name + ' && ' + rval);
var i = 0;
var chk = $('input[name="' + name + '"]');
while (i < chk.length) {
//console.log($(chk[i]));
if ($(chk[i]).val() == rval) {
//console.log('loopvalue => ' + i);
$(chk[i]).prop('checked', true);
}
i++;
}
}
function loadJson (table, id) {
$.get("json-object.php", {'table': table, 'id':id}, function (data) {
console.log(data);
$.each(data, function (k, v) {
if ($('input[name="'+k+'"]').is('input[type="text"]')) {
$('input[name="'+k+'"]').val(v);
}
if ($('select[name="'+k+'"]').is('input[type="radio')) {
get_input_value(k,v);
}
if ($('input[name="'+k+'"]').is('input[type="checkbox"]')) {
get_input_value(k,v);
}
console.log(k+' ==> '+v);
});
}, 'json');
}
Your code is just setting value of text boxes and auto select certain checkboxes based on the PHP output.
To have it auto set the proper item in drop down lists as well you need to change this wrong code:
if ($('select[name="'+k+'"]').is('input[type="radio')) {
get_input_value(k,v);
}
To this:
$('select[name="'+k+'"]').val(v);
(No point to check type of <select> since it got none)