I want select image from media library, in my admin page, there I have list of items and its image, I want to change image of items using media library, this is my code
add_action('admin_enqueue_scripts', array(&$this,'enqueue_media_lib'));
public function enqueue_media_lib(){
wp_enqueue_media();
wp_register_script( 'media-lib-uploader-js', plugins_url( 'js/media-library.js',dirname( __FILE__)), array('jquery'),'1.1.1',true);
wp_enqueue_script( 'media-lib-uploader-js' );
}
<?php
$result = $wpdb->get_results('SELECT id,category, type,image_path, name, description FROM '.$ps_detail_table_name, ARRAY_A);
foreach ($result as $value){ ?>
<tr id="view-row<?php echo $value['id']; ?>">
<td id="view-category<?php echo $value['id']; ?>"><?php echo $value['category']; ?></td>
<td id="view-type<?php echo $value['id']; ?>"><?php echo $value['type']; ?></td>
<td id="view-name<?php echo $value['id']; ?>"><?php echo $value['name']; ?></td>
<td id="view-description<?php echo $value['id']; ?>"><?php echo $value['description']; ?></td>
<td id="view-img-path<?php echo $value['id']; ?>">
<img id="product-img<?php echo $value['id']; ?>" src="<?php echo $value['image_path']; ?>" height="50px" width="50px"/>
<input id="new_upload_image_button<?php echo $value['id']; ?>" type="button" class="btn btn-primary btn-sm" value="Change"/>
<input type="hidden" name="new-image-attachment-id" id="new-image-attachment-id<?php echo $value['id']; ?>" value=""/>
</td>
Jquery
jQuery(document).ready(function($){
var mediaUploader;
$('#new_upload_image_button').click(function(e) {
e.preventDefault();
// If the uploader object has already been created, reopen the dialog
if (mediaUploader) {
mediaUploader.open();
return;
}
// Extend the wp.media object
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
// When a file is selected, grab the URL and set it as the text field's value
mediaUploader.on('select', function() {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#new_upload_image_button').attr('src',attachment.url);
$('#new-image-attachment-id').val(attachment.url);
});
// Open the uploader dialog
mediaUploader.open();
});
});
This is my code I don't want to hardcore ID name in jQuery please give me solution
Try to use
$("div[id^='new_upload_image_button']").click(function () {
//mediaUploader code..
});
Related
So, I am fairly new to codeignitor and was hoping to get some help. Below I have my controller(Estimates.php), my model(Invoice_items_model.php) and my view(_add_edit_items.php). These are shortened versions as the full versions are pretty long.
What I am looking to do is have it so that when one of the select options is clicked it will then check the $suboption['non_compatible'] field for that suboption. If the suboption in any of the other select options matches that non_compatible field it will be disabled.
I found this post that I could probably work with but i'm not sure how to do an onchange event for dynamically generated selects.
Estimates.php
`public function estimate($id = ''){$data['platforms'] = $this->invoice_items_model->get_platforms();
$data['options'] = $this->invoice_items_model->get_options();
$data['suboptions'] = $this->invoice_items_model->get_suboptions();
$this->load->view('admin/estimates/_add_edit_items', $data);}`
Invoice_items_model.php
public function get_platforms()
{
$platforms = array();
$this->db->order_by('name', 'asc');
return $this->db->get('tblplatforms')->result_array();
}
public function get_options()
{
$options = array();
return $this->db->get('tblplatform_options')->result_array();
}
public function get_suboptions()
{
$suboptions = array();
return $this->db->get('tblplatform_suboptions')->result_array();
}
}'
_add_edit_items.php
<?php foreach($options as $option) { ?>
<tr>
<td></td>
<td><p><?php echo $option['name']; ;?>:</p></td>
<td>
<select name="<?php echo $option['name']; ?>" id="<?php echo $option['name']; ?>" rows="4" class="form-control">
<?php foreach($suboptions as $suboption) { ?>
<?php if($suboption['plat_option'] == $option['name']) { ?>
<option value="<?php echo $suboption['name']; ?>" id="<?php echo $suboption['name']; ?>"><?php echo $suboption['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</td>
</tr>
<?php } ?>
<tr>
keep your code as it is just change the event like this.
$(document).on("onChange", "your_selector", function() {
// your code
}
HTML + PHP
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id, $('.copyTarget').attr('id'));">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id, target_id) {
alert(clicked_id);
alert(target_id);
}
</script>
What i want
I want to get the both values for copyTarget and copyButton as per loop cycle. It means
If current value of $i = 3
then I want alert values like,
clicked_id = copyTarget3
target_id = copyButton3
What i am currently getting is,
If current value of
$i = 3
then I want alert values like,
clicked_id = copyTarget0
target_id = copyButton3
Its taking first value of ID(copyTarget) stored initially. I want current loop cycle value.
Any help would do
Thanks
Why use JS in handler?
Try:
onClick="reply_click('copyButton<?php echo $i; ?>', 'copyTarget<?php echo $i; ?>')"
Also you should store id names (copyButton and copyTarget) in php variable, so you can change them in one place.
You could try something like below. However, I would go by Maxx's answer .. It really depends on what you plan to do with the rest of code etc.
<?php
for($i=0;$i<5;$i++){
?>
<div>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this)">Copy</button>
</div>
<?php
}
?>
<script>
function reply_click(btn) {
var clicked_id = $(btn).attr('id');
var target_id=$(btn).parent().find('span').html();
alert(clicked_id);
alert(target_id);
}
</script>
Try This
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id);">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id) {
alert(clicked_id); //clicked id
alert(clicked_id.split('copyButton').join('copyTarget')); // target id
}
</script>
Hi guys really need some help on this issue. I've searched all over but cant find any solution.
Using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.
Media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
<?php
$galleryImages = $this->getGalleryImages();
$numGalleryImages = count($galleryImages);
$i = 0;
foreach ($galleryImages as $_image): $i++; ?>
<div class="<?php
if($i == 1) {
echo 'first';
}
if($i == $numGalleryImages) {
echo 'last';
}
?>">
<a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div id="main-image">
<?php
$_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
jQuery('.more-views a').click(function(){
jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
return false;
});
</script>
jquery initialize script
jQuery(document).ready(function($) {
if (jQuery('.catalog-product-view').length) {
if (window.location.hash == '#_reviews') {
//add scroll to down to product reviews list when pagination is used
jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
}
//cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
$('#main-product-image').CloudZoom({
tintColor: '#6e4d56',
tintOpacity: 0.43,
zoomSizeMode: 'image',
autoInside: 1000
});
}
});
I need delete each row in html table using checkbox
Currently can delete row using link
I am using switch in my code in case delete query exist
Code php
<tr class="<?php if($i%2 == 0) { echo 'even'; } else { echo 'odd'; }
?>">
<td><div class="grid_content sno"><span><?php echo $i; ?>
</span> </div></td>
<td><div class="grid_content editable"><span><?php echo
$records['name_ar']; ?></span><input type="text"
class="gridder_input"
name="<?php echo encrypt("name_ar|".$records['id']); ?>"
value="<?php echo $records['name_ar']; ?>" /></div></td>
<td><div class="grid_content editable"><span>
<?php echo $records['name_en']; ?>
</span><input type="text" class="gridder_input"
name="<?php echo encrypt("name_en|".$records['id']); ?>"
value="<?php echo $records['name_en']; ?>" /></div></td>
<td>
<a href="<?php echo encrypt($records['id']); ?>"
class="gridder_delete"><img src="images/delete.png"
alt="Delete" title="Delete" /></a>
<input type="checkbox" name="delete[]"
value="<?php echo encrypt($records['id']); ?>" />
</td>
</tr>
case "delete":
$value = decrypt($_POST['value']);
$query = mssql_query("DELETE FROM Job_creation WHERE id = '$value' ");
break;
code ajax
// Function for delete the record
$('body').delegate('.gridder_delete', 'click', function(){
var conf = confirm('Are you sure want to delete this record?');
if(!conf) {
return false;
}
var ThisElement = $(this);
var UrlToPass = 'action=delete&value='+ThisElement.attr('href');
$.ajax({
url : 'ajax.php',
type : 'POST',
data : UrlToPass,
success: function() {
LoadGrid();
}
});
return false;
});
Many thanks in advance for those who help me :)
How to pass the id (generated dynamically in while loop ) to jquery.
echo '<div><td><select name=categoryname id="name-first'.$i.'" >';
echo '</select></td>';
$(function(){
$('#name-first+<?php echo $i; ?>').on('change',function(){
var selIndex= $("#name-second+<?php echo $i; ?> option:selected").index();
$("#name-second+<?php echo $i; ?> option").eq(selIndex).prop('selected', true);
});
});
You have an extra + in there which is not there when you generate the id:
$('#name-first+<?php echo $i; ?>').on('change',function(){
should be
$('#name-first<?php echo $i; ?>').on('change',function(){