I know there is some issue with get document.getElementById and IE, but not sure why IE is having a problem with .remove and all other browsers are not. Any help here would be appreciated. I am getting the error
SCRIPT438: Object doesn't support property or method 'remove'
from the error console. The Javascript works in all other browsers.
Here is the code:
<script type="text/javascript"><!--
function removeModule() {
<?php $tab = 1; ?>
var module_row = <?php echo $module_row; ?>;
if(!confirm('Are you sure?'))
{
return false;
}
var x = 1;
while (x < module_row)
{
if (document.getElementById('tab-' + x).checked)
{
document.getElementById('tab-' + x).remove();
document.getElementById('module-' + x).remove();
document.getElementById('tab-module-' + x).remove();
}
x++;
<?php $tab++; ?>
}
$('#form').submit();
}
//--></script>
This is from an opencart module, it is the tpl file. I've included part of the file here as well so hopefully someone can spot whatever the error is.
<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><?php echo $breadcrumb['text']; ?>
<?php } ?>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
<div class="heading">
<h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
<div class="buttons">
<a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a>
<a onclick="removeModule();" class="button"><?php echo $button_delete ?></a>
<a onclick="location = '<?php echo $cancel; ?>';" class="button"><?php echo $button_cancel; ?></a></div>
</div>
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
<div class="vtabsQS">
<?php $module_row = 1; ?>
<?php foreach ($modules as $module)
{ ?>
<div style="margin-left: -7px; float:left;">
<input type="checkbox" style="float: left; margin-top: 8px;" id="tab-<?php echo $module_row; ?>" onClick="" value="#tab-<?php echo $module_row; ?>" />
<a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
<?php foreach ($languages as $language)
{ ?>
<label class="inputLrgTab"><?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?></label>
<?php } ?>
</a><br />
</div>
<?php $module_row++; ?>
<?php } ?>
<span id="module-add" style="clear: both; margin-left: -7px;"><?php echo $button_add_module; ?> <img src="view/image/add.png" alt="" onclick="addModule();" /></span>
</div>
<?php $module_row = 1; ?>
<?php foreach ($modules as $module) { ?>
<div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content" style="margin-left:230px;">
<table class="form">
<tr>
<td><?php echo $entry_title; ?></td>
<td class="left">
<?php foreach ($languages as $language) { ?>
<img src="view/image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" />
<input class="inputLrg" type="text" name="<?php echo $classname; ?>_module[<?php echo $module_row; ?>][language_id][<?php echo $language['language_id']; ?>]" value="<?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?>">
<br />
<?php } ?>
<span class="error"><?php echo $error_title; ?></span>
</td>
</tr>
<tr>
<td><?php echo $entry_limit; ?></td>
You should get the parent of the element you are trying to remove and use the remove child method to find and remove the element
element.parentNode.removeChild(element);
this works in all browsers including IE.
remove() as a method on HTMLElements unfortunately is not supported by Internet Explorer.
You could use the workaround in this SO answer for a vanilla javascript solution.
However as you already seem to use jQuery, instead replace
document.getElementById('tab-' + x).remove();
with
$('#tab-' + x).remove();
You should use this
element.parentElement.removeChild(element);
Supported by all browser and also have some benefits over just a hack to
remove child element.
Here is another workaround for keep using .remove() function
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
And then you can remove elements like this
document.getElementById("my-element").remove();
or
document.getElementsByClassName("my-elements").remove();
Here is Stack Overflow link for further info also source of this answer.
It appears that IE10 also throws this error..
Here one way I tried using the objects outerHTML property:
if(typeof document.getElementById('id').remove=='function'){
//If support is found
document.getElementById('id').remove()
}
else{
//If not
document.getElementById('id').outerHTML='';
}
You can polyfill the remove() method:
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
this.parentNode.removeChild(this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
Related
i am reading and trying to get this to work for several hours. I am pretty new with javascript and only have a small knowledge base about it in general.
I hope someone can be so kind as to help me and share their knowledge with me.
The problem:
I have a image gallery with a php generated masonry look. And a visualization of either a selected or deselected image. (Info comes out of db). Now when i click a image it needs to call a method in one of my controllers.
And afterwards update the selected to deselected or vise versa css style.
The methods have been made and the return aswell.
This is what i got so far. But nothing seems to be working. I don't know if it is something specific to codeigniter or to javascript (jquery).
$(document).ready(function()
{
$('div#imagelink').click(function()
{
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
If anything else is required i will be happy to provide.
<div class="flex-column width-1275">
<div class="d-flex justify-content-between">
<div class="p-2">
<h1><?php echo $this->session->userdata('username'); ?></h1>
<h3><?php echo str_replace( '_', ' ', $selected_gallery) . ' Galerij'; ?></h3>
</div>
<?php echo $this->session->flashdata('gallerymsg'); ?>
<div class="p-2 text-right">
<?php echo $this->session->flashdata('clientmsg') . '</br>'; ?>
</div>
<div id="result"></div>
</div>
<div class="grid imageGallery" data-masonry='{ "itemSelector": ".grid-item", columnWidth: ".grid-sizer" }'>
<div class="grid-sizer"></div>
<?php $counter=1 ; $sizeGallery=c ount($images); foreach($images as $img) : $imageLocation='img/jpg/' . $folderName . '/' . $img[ 'image_name']; $id=$ selected_gallery . $counter; ?>
<div class="grid-item">
<a href="#<?php echo $id; ?>">
<img src="<?php echo base_url($imageLocation) ?>" alt="<?php echo $selected_gallery . ' ' . $counter ?>">
</a>
<?php $class='' ; $selected=$ img[ 'image_selected']; switch($selected) { case '0'; $class='isNot' ; break; case '1'; $class='is' ; break; default; $class='isNot' ; break; } if($img[ 'image_locked']=='1' ) { $class='locked' ; } ?>
<div id="imagelink" class="<?php echo $class ?> selected">
<?php if ($img[ 'image_locked']=='0' ) : ?>
<!-- -->
<?php endif; ?>
</div>
</div>
<div class="cssbox">
<a id="<?php echo $id; ?>" href="#<?php echo $id; ?>">
<img class="cssbox_thumb">
<span class="cssbox_full">
<img src="<?php echo base_url($imageLocation) ?>">
</span>
<div class="<?php echo $class ?> Lightbox-Selected"></div>
</a>
<a class="cssbox_close" href="#void"></a>
<?php if($counter < $sizeGallery) : ?>
<?php $next=$ counter+1; ?>
<a class="cssbox_next" href="#<?php echo $selected_gallery . $next ?>">></a>
<?php endif; ?>
<?php if($counter> 1) : ?>
<?php $prev=$ counter-1; ?>
<a class="cssbox_prev" href="#<?php echo $selected_gallery . $prev ?>"><</a>
<?php endif ?>
</div>
<?php $counter++; endforeach; ?>
</div>
</div>
<script>
$(document).ready(function() {
$('div#imagelink').click(function() {
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
</script>
<!-- <script src="<?php echo base_url('assets/js/image-select.js'); ?>"></script> -->
<script src="<?php echo base_url('assets/js/imagesloaded.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.js'); ?>"></script>
I am attempting to 'check' the the 'AC:Front' box from a button click on the below website. I tried changing the checkbox to 'checked' and I also tried changing the encompassing to class="checked".
The goal is to eventually collect the inputted VIN, run it through a decoder and use the data to fill the page.
Here is the website
HTML
<div class="stm-single-feature">
<div class="heading-font">Comfort</div>
<div class="feature-single">
<label>
<input type="checkbox" value="A/C: Front" name="stm_car_features_labels[]"/>
<span>A/C: Front</span>
</label>
</div>
CSS
div.checker span.checked {
background-position: -16px 0; }
PHP
<?php
if ($items) {
if (!empty($id)) {
$features_car = get_post_meta($id, 'additional_features', true);
$features_car = explode(',', $features_car);
} else {
$features_car = array();
}
foreach ($items as $item) { ?>
<?php if(isset($item['tab_title_single'])): ?>
<div class="stm-single-feature">
<div class="heading-font"><?php echo $item['tab_title_single']; ?></div>
<?php $features = explode(',', $item['tab_title_labels']); ?>
<?php if (!empty($features)): ?>
<?php foreach ($features as $feature): ?>
<?php
$checked = '';
if (in_array($feature, $features_car)) {
$checked = 'checked';
};
?>
<div class="feature-single">
<label>
<input type="checkbox" value="<?php echo esc_attr($feature); ?>"
name="stm_car_features_labels[]" <?php echo $checked; ?>/>
<span><?php echo esc_attr($feature); ?></span>
</label>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php }
}?>
JavaScript
<script type="text/javascript">
jQuery(function($) {
$("#generateVin").on("click", function() {
var $checkbox = $("input[type=checkbox]").eq(1);
$checkbox.prop("checked", true);
$checkbox.parent().addClass("checked");
});
});
</script>
I have a "read more about supplier" displayed on each productarticle. When you click it, it's supposed to pop-up a small box with information about the supplier.
The code is working, but when you click the text it only toggles the productarticle on the top of the page. It looks like it can't seperate them and give them each a unique ID. I have no idea how to do this as I'm an amateur. Any help please?
HTML:
<div class="popup" onclick="myFunction1()" style="position:relative; left:
70px;">Read more about <?php echo $supplier ?> here
<span class="popuptext" id="myPopup">
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier1') !== false) { echo 'Supplier 1 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier2') !== false) { echo 'Supplier 2 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier3') !== false) { echo 'Supplier 3 description'; } ?></b>
</span>
</div>
js:
function myFunction1() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
the loop including all products:
<?php $hr='';?>
<div class="row">
<ul class="listProductItems clearfix">
<?php for ($art=0; $art<count($articles); $art++){ ?>
<?php $imagine =$this->site_model->show_thumbs($articles[$art]['LA_ART_ID']); ?>
<?php $supplier =(($articles[$art]['producer']!==NULL) ? $articles[$art]['producer'] : $articles[$art]['SUP_BRAND']); ?>
<?php //$criteria =$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php $criteria =$this->site_model->article_criteria_filter($articles[$art]['la_id']); ?>
<?php $criteria .=$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php if ($hr !== $articles[$art]['generic_name'].' PRODUCED BY '.$supplier){ ?>
<div class="clearfix"></div>
<?php $hr = $articles[$art]['generic_name'].' PRODUCED BY '.$supplier; ?>
<?php } ?>
<li class="clearfix">
<div class="span4" style="max-height:50px">
<?php if (isset($imagine)){ ?>
<div class="thumbnail"><?php echo $imagine; ?></div>
<?php } else { ?>
<div class="thumbnail"><a href="<?php echo site_url('type/'.$versiune.'/category/'.$tree.'/article/'.$articles[$art]['la_id']); ?>">
I am using a jquery slider in my application.The input type hidden has got some image url paths. I want to get "
img-paths- <?php echo $omsg_id; ?>
"
$omsg_id value into
var image_path_id = "#img-paths-"+$(this).data('id');
when i console printed in fire bug, the output was #img-paths-undefined
how to resolve it ?
<div class="post-image">
<?php $imagePathArray = explode(',',$uploads); ?>
<input id="img-paths-<?php echo $omsg_id; ?>" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />
<div id="gallery7-<?php echo $omsg_id; ?>" ></div>
<script>
$(function(e) {
var image_path_id = "#img-paths-"+$(this).data('id');
var show_gallery_id = "#gallery7-"+$(this).data('id');
console.log(show_gallery_id);
console.log(image_path_id);
$(show_gallery_id).imagesGrid({
images:$.parseJSON($(image_path_id).val()),
align: true,
getViewAllText: function(imgsCount) { return 'View all' }
});
});
</script>
<!--<img src="<?php //echo $contentimage; ?>" class="image show-in-modal" alt="image post">-->
<p><?php echo $message; ?></p>
</div>
this refers to window object, thus $(this).data('id') will not return the desired data.
You can directly use $omsg_id in script.
var image_path_id = "#img-paths-<?php echo $omsg_id; ?>";
var show_gallery_id = "#gallery7-<?php echo $omsg_id; ?>";
On my controller I have a a data array which lets me find image location and then sets it as a
$data['template_image']. And on view <img src="<?php echo $template_image;?>" alt="" id="template" class="img-thumbnail" />
When I save form then the image changes, but what I am trying to get is that when I use my drop down select it will change with the drop down option.
How can I get that effect with jquery or java script with codeigniter.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Website extends Controller {
public function __construct() {
parent::__construct();
$this->load->model('admin/website/model_website');
$this->load->model('admin/website/model_website_setting');
$this->lang->load('admin/website/website', 'english');
$this->model_website_setting->setWebsiteID($this->uri->segment(4));
}
public function index() {
$this->document->setTitle($this->lang->line('heading_title'));
if (!empty($this->input->post('config_template'))) {
$data['config_template'] = $this->input->post('config_template');
} else {
$data['config_template'] = $this->model_website_setting->get('config_template');
}
$data['templates'] = array();
$directories = glob(APPPATH . 'modules/catalog/views/theme/*', GLOB_ONLYDIR);
foreach ($directories as $directory) {
$data['templates'][] = basename($directory);
}
if (is_file(FCPATH . 'image/templates/' . $this->model_website_setting->get('config_template') . '.png')) {
$data['template_image'] = base_url('image/templates/' . $this->model_website_setting->get('config_template') . '.png');
} else {
$data['template_image'] = base_url('image/no_image.png');
}
return $this->load->view('website/website_form', $data);
}
}
View
<form action="<?php echo $action;?>" method="post" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="input-template"><?php echo $entry_template; ?></label>
<div class="col-sm-10">
<select name="config_template" id="input-template" class="form-control">
<?php foreach ($templates as $template) { ?>
<?php if ($template == $config_template) { ?>
<option value="<?php echo $template; ?>" selected="selected"><?php echo $template; ?></option>
<?php } else { ?>
<option value="<?php echo $template; ?>"><?php echo $template; ?></option>
<?php } ?>
<?php } ?>
</select>
<br />
<?php if (is_file(FCPATH . 'image/templates/' . $this->model_website_setting->get('config_template') . '.png')) { ?>
<img src="<?php echo base_url('image/templates/' . $this->model_website_setting->get('config_template') . '.png');?>" alt="" id="template" class="img-thumbnail" />
<?php } else { ?>
<img src="<?php echo base_url('image/no_image.png')?>" alt="" id="template" class="img-thumbnail" />
<?php } ?>
</div>
</div>
</form>
$(document).ready(function(){
$("select").on('change',function(){
$("#my_image_id").attr("src",this.value);
});
});
http://jsfiddle.net/83xn35nk/
EDIT
in your case it will be:
$(document).ready(function(){
$("#input-template").on('change',function(){
$("#template").attr("src",this.value).;
});
});
<form action="<?php echo $action;?>" method="post" role="form">
where is your $action value? you are not sending the action value from controller.try to send it. like $data['action']='your action path'
add a id to your form like
<form id="myForm" action="<?php echo $action;?>" method="post" role="form">
now submit the form onchange of your select box
$(document).ready(function()
{
$(document).on("change", "#input-template", function(event)
{
$("#myForm").submit();
});
});