I have this field
<input class="red-heart-checkbox " name="photo[]" type="checkbox" value="<?php echo $id; ?>" id="<?php echo $id; ?>" data-img="<?php echo $imageURL; ?>"/>
And I would like to make a list of image with url image from the data-img checked but I only have values with this code :
<script>
$(function() {
var masterCheck = $("#masterCheck");
var listCheckItems = $("#devel-generate-content-form :checkbox");
masterCheck.on("click", function() {
var isMasterChecked = $(this).is(":checked");
listCheckItems.prop("checked", isMasterChecked);
getSelectedItems();
});
listCheckItems.on("change", function() {
var totalItems = listCheckItems.length;
var checkedItems = listCheckItems.filter(":checked").length;
if (totalItems == checkedItems) {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", true);
}
else if (checkedItems > 0 && checkedItems < totalItems) {
masterCheck.prop("indeterminate", true);
}
else {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", false);
}
getSelectedItems();
});
function getSelectedItems() {
var getCheckedValues = [];
getCheckedValues = [];
listCheckItems.filter(":checked").each(function() {
getCheckedValues.push($(this).val());
});
$("#selected-values").html(JSON.stringify(getCheckedValues));
}
});
</script>
My result is on :
<li class="list-group-item" id="selected-values"></li>
And looks like this :
Is it possible to have url image instead of the value , or use the result with de database to have url image ?
Thanks a lot !
Two solutions in my opinion,
The one you already suggested, i.e. use a db call
try passing imageURL in value
Related
This question already has answers here:
Only one selected checkbox
(9 answers)
Closed 2 years ago.
I have the following:
<input type="checkbox" value="Spanish" <?php if($_GET['set'] == 'Spanish') echo 'checked'; ?> onclick="filter(this)" id="spanish">
<input type="checkbox" value="English" <?php if($_GET['set'] == 'English') echo 'checked'; ?> onclick="filter(this)" id="english">
<input type="checkbox" value="French" <?php if($_GET['set'] == 'French') echo 'checked'; ?> onclick="filter(this)" id="french">
function get_url() {
var urlPrefix = '<?php echo site_url('home/language?'); ?>'
var urlSuffix = "";
var slectedCategory = "";
$('#spanish:checked').each(function() {
slectedCategory = $(this).attr('value');
});
$('#english:checked').each(function() {
slectedCategory = $(this).attr('value');
});
$('#french:checked').each(function() {
slectedCategory = $(this).attr('value');
});
urlSuffix = "set="+slectedCategory;
var url = urlPrefix+urlSuffix;
return url;
}
function filter() {
var url = get_url();
window.location.replace(url);
}
The problem that occurs is that when I select the first option (spanish) it works, if I check the second option it also works (english). But if I try to check the previous option again (spanish) it doesn't work.
What can it be? It seems that it works only by going down.
The problem is occurring because you didn't work with the value of the clicked checkbox to generate new url in get_url function. Replace your js functions like below. It will work.
function get_url(elem) {
var urlPrefix = '<?php echo site_url('home/language?'); ?>'
var urlSuffix = "";
var slectedCategory = "";
slectedCategory = $(elem).attr('value');
urlSuffix = "set="+slectedCategory;
var url = urlPrefix+urlSuffix;
return url;
}
function filter(elem) {
var url = get_url(elem);
window.location.replace(url);
}
I have this leaderboard :
leaderboard
on clicking a name in the leaderboard, a popup gets displayed.
popup snap
Now ,I want to display info of any person whose name has been clicked in the popup.As,you can see the popup doesnot contain any data.
I have been using an active directory,from where I can fetch data like the profile pic and other info from a DB i am maintaing.
Question is How do i link the active directory and databases and display the required info in the popup,when a name is clicked.Please help
Javascript involved with the popup :
$(document).ready(function() {
$('.tab a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
$(".tab").removeClass("active");
_this.parent().addClass("active");
$(".leadboardcontent").hide();
$(block).fadeIn();
});
/**
* Fade in the Popup
*/
$('.leaderboard li').on('click', function () {
$('#popup').fadeIn();
var mark = $(this).find('name').text();
var small = $(this).find('points').text();
$('#popup-name').text('Name: ' + name);
$('#popup-score').text('Score: ' + points);
});
});
for active directory I am using this variable and echo it wherever I want for the logged in user :
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$server = 'ldap:xxxxx';
$domain = 'xxx'
$port = xxx;
$ldap_connection = ldap_connect($server, $port);
if (! $ldap_connection)
{
echo '<p>LDAP SERVER CONNECTION FAILED</p>';
exit;
}
// Help talking to AD
ldap_set_option($ldap_connection, LDAP_OPT_PROTOCOL_VERSION, 3);
ldap_set_option($ldap_connection, LDAP_OPT_REFERRALS, 0);
$ldap_bind = #ldap_bind($ldap_connection, $username.$domain, $password);
if (! $ldap_bind)
{
echo '<p>LDAP BINDING FAILED</p>';
exit;
}
else
{
echo 'login successful <br/>';
}
$base_dn = "OU=Employees,OU=Accounts,OU=India,DC=asia,DC=manh,DC=com";
$filter ="(&(objectClass=user)(samaccountname=$username))";
$result = ldap_search($ldap_connection,$base_dn,$filter);
$rescount = ldap_count_entries($ldap_connection,$result);
$data = ldap_get_entries($ldap_connection,$result);
if ($data["count"] > 0)
{
for ($i=0; $i<$data["count"]; $i++)
{
if(isset($data[$i]["employeeid"][0]))
{
$user= $data[$i]["employeeid"][0];
session_start();
$_SESSION['id']=$user;
}
if (isset($data[$i]["thumbnailphoto"][0]))
{
$photo=$data[$i]["thumbnailphoto"][0];
$_SESSION['photo']=$photo;
}
if (isset($data[$i]["title"][0]))
{
$title=$data[$i]["title"][0];
$_SESSION['Employeetitle']=$title;
}
if (isset($data[$i]["department"][0]))
{
$department=$data[$i]["department"][0];
$_SESSION['Employeedepartment']=$department;
}
}
}
else
{
echo "<p>No results found!</p>";
}
if(isset($_SESSION['id']))
{
echo "session set";
header('location:Profile/index.php');
}
?>
Update
Replace code with following code
HTML
<li>
<mark>Weekly LB</mark>
<small>315</small>
<input type="hidden" class="email" value="<?php echo $_SESSION['Employeetitle']; ?>">
<input type="hidden" class="designation" value="<?php $_SESSION['Employeedepartment'] ?>">
<input type="hidden" class="pro_pic" value="<?php echo $_SESSION['photo']; ?>">
</li>
JS
/**
* Fade in the Popup
*/
$('.leaderboard li').on('click', function () {
$('#popup').fadeIn();
// Changes
var email = $(this).find('.email').val();
var designation = $(this).find('.designation').val();
var pro_pic = $(this).find('.pro_pic').val();
// -------------------
var mark = $(this).find('mark').text();
var small = $(this).find('small').text();
// Changes
$('#popup-email').text('Email: ' + email);
$('#popup-designation').text('Name: ' + designation);
$('.profile__image').attr("src", pro_pic);
// -------------------
$('#popup-name').text('Name: ' + mark);
$('#popup-score').text('Score: ' + small);
});
Let me know if you have any concerns for the same..
It seems your data is stored in db, and you already managed to fetch them correctly. So instead of doing an ajax call maybe you can consider all the necessary information / key as custom attributes in html tag, so that it can be fetched easily via JavaScript. i.e.;
<li id="someid" designation="..." rmanager="..." email="...">
<mark>Weekly LB</mark>
<small>315</small>
</li>
and using JQuery;
var designation = $('#someid').attr('designation');
$('#designation-field').text('Designation: ' + designation);
hope it will help.
By the way, this method has advantages and disadvantages;
Disadvantage: it will increase your listing page size
Advantage: will reduce client-server and database calls
Did you try like this...
Define class of li elements as below..
<div class="leaderboard">
<ul>
<li class="name">value</li>
<li class="points">value</li>
</ul>
</div>
Then fetch value like this
var name= $(".leaderboard").find('.name').text();
var points= $(".leaderboard").find('.points').text();
$('#popup-name').text('Name: ' + name);
$('#popup-score').text('Score: ' + points);
I use this code inside our header to display our cart.
Currently the dropdown is displayed on hover.
How can I modify this so that the dropdown is displayed onclick?
<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
<span class="icon"></span>
<span class="label"><?php echo $this->__('Cart'); ?></span>
<span class="count"><?php echo $_cartQty; ?></span>
</a>
<div id="header-cart" class="block block-cart skip-content">
<?php echo $this->getChildHtml('minicart_content');?>
</div>
I use this code for the dropdown on the website:
<?php //Drop-down ?>
var ddOpenTimeout;
var dMenuPosTimeout;
var DD_DELAY_IN = 200;
var DD_DELAY_OUT = 0;
var DD_ANIMATION_IN = 0;
var DD_ANIMATION_OUT = 0;
$('.clickable-dropdown > .dropdown-heading').click(function() {
$(this).parent().addClass('open');
$(this).parent().trigger('mouseenter');
});
//$('.dropdown-heading').on('click', function(e) {
$(document).on('click', '.dropdown-heading', function(e) {
e.preventDefault();
});
$(document).on('mouseenter', '.dropdown', function() {
var ddToggle = $(this).children('.dropdown-heading');
var ddMenu = $(this).children('.dropdown-content');
var ddWrapper = ddMenu.parent(); <?php //$(this); ?>
<?php //Clear old position of dd menu ?>
ddMenu.css("left", "");
ddMenu.css("right", "");
<?php //Show dd menu ?>
if ($(this).hasClass('clickable-dropdown'))
{
<?php //If dropdown is opened (parent already has class 'open') ?>
if ($(this).hasClass('open'))
{
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
}
else
{
<?php //Add class 'open' to dd ?>
clearTimeout(ddOpenTimeout);
ddOpenTimeout = setTimeout(function() {
ddWrapper.addClass('open');
}, DD_DELAY_IN);
//$(this).addClass('open');
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
<?php //Set new position of dd menu.
//This code is delayed the same amount of time as drop-down animation. ?>
clearTimeout(dMenuPosTimeout);
dMenuPosTimeout = setTimeout(function() {
if (ddMenu.offset().left < 0)
{
var space = ddWrapper.offset().left; <?php //Space available on the left of dd ?>
ddMenu.css("left", (-1)*space);
ddMenu.css("right", "auto");
}
}, DD_DELAY_IN);
}).on('mouseleave', '.dropdown', function() {
var ddMenu = $(this).children('.dropdown-content');
clearTimeout(ddOpenTimeout); <?php //Clear, to close dd on mouseleave ?>
ddMenu.stop(true, true).delay(DD_DELAY_OUT).fadeOut(DD_ANIMATION_OUT, "easeInCubic");
if (ddMenu.is(":hidden"))
{
ddMenu.hide();
}
$(this).removeClass('open');
});
change 'mouseenter' --> 'click' , as 'click' will do it for you with significantly less brain damage. Still I see that your problem statement is not complete If you want complete solution for what you want to achieve,then perhaps you have to give some more details on the problem statement as the statement what you want to achieve and please provide the full html. Use Fiddler and upload the html and scripts and share the link.
change this line $(document).on('mouseenter', '.dropdown', function() {
to $(document).on('click', '.dropdown', function() {
you should probably remove the on('mouseleave') function completely and put it into your click logic
EDIT here is a complete solution in one JS (and please dont use a <?php tag for commenting )
var ddOpenTimeout;
var dMenuPosTimeout;
var DD_DELAY_IN = 200;
var DD_DELAY_OUT = 0;
var DD_ANIMATION_IN = 0;
var DD_ANIMATION_OUT = 0;
$('.clickable-dropdown > .dropdown-heading').click(function() {
$(this).parent().addClass('open');
$(this).parent().trigger('mouseenter');
});
//$('.dropdown-heading').on('click', function(e) {
$(document).on('click', '.dropdown-heading', function(e) {
e.preventDefault();
});
$(document).on('click', '.dropdown', function() {
if($(this).hasClass('open')) {
var ddMenu = $(this).children('.dropdown-content');
clearTimeout(ddOpenTimeout); <?php //Clear, to close dd on mouseleave ?>
ddMenu.stop(true, true).delay(DD_DELAY_OUT).fadeOut(DD_ANIMATION_OUT, "easeInCubic");
if (ddMenu.is(":hidden"))
{
ddMenu.hide();
}
$(this).removeClass('open');
} else {
var ddToggle = $(this).children('.dropdown-heading');
var ddMenu = $(this).children('.dropdown-content');
var ddWrapper = ddMenu.parent();
ddMenu.css("left", "");
ddMenu.css("right", "");
if ($(this).hasClass('clickable-dropdown'))
{
if ($(this).hasClass('open'))
{
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
}
else
{
clearTimeout(ddOpenTimeout);
ddOpenTimeout = setTimeout(function() {
ddWrapper.addClass('open');
}, DD_DELAY_IN);
//$(this).addClass('open');
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
clearTimeout(dMenuPosTimeout);
dMenuPosTimeout = setTimeout(function() {
if (ddMenu.offset().left < 0)
{
var space = ddWrapper.offset().left; <?php //Space available on the left of dd ?>
ddMenu.css("left", (-1)*space);
ddMenu.css("right", "auto");
}
}, DD_DELAY_IN);
}
});
I have a question about wordpress, I just added a button called Add Slider in Add/Edit Post Page.
here's my code in my function.php :
//Add button to create slider
add_action('media_buttons','add_my_media_button',15);
function add_my_media_button(){
echo 'Add Slider';
}
function include_media_button_js_file(){
wp_enqueue_script('media_button',get_bloginfo('template_directory').'/js/media_button.js',array('jquery'),'1.0',true);
}
add_action('wp_enqueue_media','include_media_button_js_file');
and this my media_button.js code
jQuery(function($){
$(document).ready(function(){
$('#insert-my-media').click(open_media_window);
})
function open_media_window(){
if (this.window === undefined) {
this.window = wp.media({
title: 'Insert a media',
library: {type:'image'},
multiple: true,
button: {text:'Insert'}
});
var self = this; //needed to retrieve the function below
this.window.on('select',function(){
var files = self.window.state().get('selection').toArray();
var values;
for (var i = 0; i < files.length; i++) {
var file = files[i].toJSON();
if(values===undefined){
var values = file.url;
}
else{
var values = values+','+file.url;
}
};
wp.media.editor.insert(values);
});
}
this.window.open();
return false;
}
});
after user select the pictures in media window and press Insert button it will add url value of pictures to content editor post box.
My question is how to add this value automatically on custom fields box and add/update that automatically without click add custom field button.
So user can add / update custom fields for that pictures url without view/ check custom fields to view in post editor on Screen Options in wordpress.
Please help me for this question, Thanks.
I modify my jquery / js like this..
$(document).ready(function(){
// $('#insert-my-media').click(open_media_window);
if($('#images_id').val() != '' && $('#images_url').val() != ''){
$('#open_media').text("Edit Slider");
}
$('#open_media').click(function(e){
e.preventDefault();
var target = $('#images_id');
var target_url = $('#images_url');
var btnSave = $('#publishing-action input.button');
if(target.val() == '' && target_url.val() == ''){
var wpmedia = wp.media({
title: 'Insert a media',
library: {type:'image'},
multiple: true,
button: {text:'Insert'}
});
wpmedia.on('select', function(){
var ids = [];
var urls = [];
var models = wpmedia.state().get('selection').toArray();
for (var i = 0; i < models.length; i++) {
var file = models[i].toJSON();
ids.push(file.id);
urls.push(file.url);
};
target.val(ids.join(","));
target_url.val(urls.join(","));
$('#deleting_slider').val("");
$('#open_media').text("Adding...");
btnSave.click();
});
wpmedia.open();
}else{
wp.media.gallery
.edit('[gallery ids="'+ target.val() +'" urls="'+ target_url.val() +'"]')
.on('update', function(g){
var ids = [];
var urls = [];
for (var i = 0; i < g.models.length; i++) {
var file = g.models[i].toJSON();
ids.push(file.id);
urls.push(file.url);
};
target.val(ids.join(","));
target_url.val(urls.join(","));
$('#deleting_slider').val("");
$('#open_media').text("Editing...");
btnSave.click();
});
}
});
$('#save_desc').click(function(e){
e.preventDefault();
var target = $('#desc_editor');
var btnSave = $('#publishing-action input.button');
target.val(target.val());
btnSave.click();
});
$('#delete_slider').click(function(e){
e.preventDefault();
/*var target = $('#images_id');
var target_url = $('#images_url');*/
var btnSave = $('#publishing-action input.button');
/*target.val("");
target_url.val("");*/
$('#deleting_slider').val("Deleting...");
$('#delete_slider').text("Deleting...");
btnSave.click();
});
});
and then I make file called metabox.php to create metabox
<?php
function koplan_add_metabox(){
add_meta_box(
'koplan_metabox_gallery',
'Slider Gallery',
'koplan_show_metabox',
'post'
);
}
function koplan_add_maps_metabox(){
add_meta_box(
'koplan_metabox_maps',
'Maps Descriptions',
'koplan_show_maps_metabox',
'post'
);
}
function koplan_show_metabox($post){
$ids = get_post_meta($post->ID, 'gallery_images', true);
$urls = get_post_meta($post->ID,'images',true);
?>
Add Slider
<hr>
<input type="hidden" name="gallery_images" id="images_id" value="<?php echo $ids; ?>">
<input type="hidden" name="gallery_urls" id="images_url" value="<?php echo $urls; ?>">
<input type="hidden" name="deleting_slider_post_meta" id="deleting_slider" value="<?php echo $urls; ?>">
<?php
if($ids=="" and $urls==""){
return;
}
else{
echo do_shortcode('[gallery ids="'.$ids.'" urls="'.$urls.'"]');
}
?>
<hr>
Delete Slider
<?php
}
function koplan_save_gallery_metabox($post_id){
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
if(! isset($_POST['gallery_images']) && !isset($_POST['gallery_urls'])){
return;
}
$ids = sanitize_text_field( $_POST['gallery_images'] );
$urls = sanitize_text_field( $_POST['gallery_urls'] );
$terms = wp_get_object_terms( $post_id, 'category', array( 'fields' => 'names' ) );
/*$termsname = $terms[0]->name;*/
if(strlen($terms[1]) > strlen($terms[0])){
$term = $terms[1];
}
else{
$term = $terms[0];
}
$sldata = '<slider images="'.$term.'" />';
update_post_meta($post_id, 'slider', $sldata);
update_post_meta($post_id, 'gallery_images', $ids);
update_post_meta($post_id, 'images', $urls);
if(isset($_POST['deleting_slider_post_meta']) && $_POST['deleting_slider_post_meta'] != ""){
delete_post_meta($post_id, 'slider', $sldata);
delete_post_meta($post_id, 'gallery_images', $ids);
delete_post_meta($post_id, 'images', $urls);
}
}
function koplan_show_maps_metabox($post){
$desc = get_post_meta($post->ID,'mapsdesc',true);
if($desc!=""){
?>
<textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"><?php echo $desc; ?></textarea>
<?php
}else{
?>
<textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"></textarea>
<?php
}
?>
<hr>
Save
<?php
}
function koplan_save_maps_desc_metabox($post_id){
if (define('DOING_AUTOSAVE') && DOING_AUTOSAVE){
return;
}
if(!isset($_POST['maps_descriptions'])){
return;
}
$desc = $_POST['maps_descriptions'];
update_post_meta($post_id,'mapsdesc',$desc);
}
add_action( 'add_meta_boxes', 'koplan_add_metabox' );
add_action('add_meta_boxes','koplan_add_maps_metabox');
add_action( 'save_post', 'koplan_save_gallery_metabox' );
add_action( 'save_post', 'koplan_save_maps_desc_metabox' );
?>
I said problem solved, case closed. Thanks all, thanks stackoverflow
I have the following:
PHP/HTML CODE:
<?php
$c = 1;
foreach($this->contactos as $contacto){
?>
<div class="uk-form-row">
<label for="contactopadrino<?php echo $c; ?>" class="uk-form-label"><?php echo $contacto->email; ?></label>
<input class="contactopadrinos" name="contactopadrino[]" id="contactopadrino<?php echo $c; ?>" type="checkbox" value="<?php echo $contacto->email; ?>" />
</div>
<?php
$c++;
}
?>
jQuery CODE:
function validarEnviarDescuento(){
$('#errorofertacontainerdescuento').css('display','none');
$('#errorofertadescuento').html('');
var validar = 0;
var vacio = 0;
for(var e=1; e<6; e++){
var email = $("#email_contactopadrino"+e).val();
if(!validarEmail(email) && email != ''){
validar++;
}
if(email != ''){
vacio++;
}
}
if(!vacio){
$('input:radio:checked').each(function () {
var $this = $(this);
if ($(this).prop('checked')) {
return true;
}
});
$('#errorofertadescuento').append('<li>' + '<?php echo JText::_('COM_CSTUDOMUS_ERROR_SIN_SELECCIONAR'); ?>' + '</li>');
$('#errorofertacontainerdescuento').css('display','block');
return false;
}
if(validar){
$('#errorofertadescuento').append('<li>' + '<?php echo JText::_('COM_CSTUDOMUS_ERROR_EMAIL_INCORRECTO'); ?>' + '</li>');
$('#errorofertacontainerdescuento').css('display','block');
return false;
}
else{
return true;
}
}
Im trying to go through each input and if one is checked it should return true and submit but what I have done is not working.
You don't need to use each. instead use cobination :checked and length
return $('input:checkbox:checked').length;
It will return true if anyone of the checkbox button has checked
You can use :checked with selector to get all radio buttons those are checked.
$('input:radio:checked')
Description: Matches all elements that are checked or selected, jQuery docs
If you want to check if atleast one radio is checked then you can use length
if($('input:radio:checked').length)
{
}
For iterating through checked radio you can use each
$('input:radio:checked').each(function(){
alert(this.value);
});