I'm developing CMS. Issue is that jquery on click no working on EDIT Button. Code seems fine to me but I did not understand why it is not working. It is working on Add Button.
JS
<script>
var loading_message = "<div class='row'><div class='col-md-4 col-md-offset-4'><img src='<?=site_url()?>assets/_admin/images/loading.gif'/></div></div>";
function list()
{
$('#main_contents').html(loading_message);
var form_data = {
ajax : '1',
actioncall : 'show_all',
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#main_contents').html(data);
}
});
}
function add()
{
$('#right_block').html(loading_message);
var form_data = {
ajax : '1',
actioncall : 'add_form',
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#right_block').html(data);
}
});
}
$(document).ready(function()
{
list();
add();
$('#addbanner').on('click',function()
{
add();
});
$('.edit').on('click',function()
{
$('#right_block').html(loading_message);
var id = this.id;
alert(id);
var form_data = {
ajax : '1',
actioncall : 'edit',
id : id,
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#right_block').html(data);
}
});
});
$('.delete').on('click',function(){
var id = this.id;
alert(id);
});
$(document).on('submit','form#process-data',function(e) {
e.preventDefault();
var form_data = {
ajax : '1',
link_togo : $('#link_togo').val(),
title : $('#title').val(),
description : $('#description').val(),
keyword : $('#keyword').val(),
placement : $('#placement').val(),
location : $('#location').val(),
status : $('#switch-size').val(),//#default
actioncall : 'add'
};
//alert(JSON.stringify(form_data));
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data)
{
/*setTimeout(function ()
{
$('.img_pre').attr('src',data);
$('.delete_btn').show();
}, 1000);*/
$("#right_block").html(data);
list();
}
});
});
});
</script>
HTML
<div class="banner-row1">
<div class="banner-row-pic">
<img src="http://localhost/cms-basic/assets/_admin/images/pic.png" alt="pic1" />
</div>
<div class="banner-row-text">
<h2>Latest News</h2>
<p>Every news is important</p>
<p class="text-muted">
<small>
Keyword: news<br />
Placement: others<br />
Location: Homepage<br />
Link: http://pakhotline.com
</small>
</p>
</div>
<div class="banner-row-edit">
<a class="edit" id="2" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/edit.png" />
</a>
<a class="delete" id="2" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/delet.png" />
</a>
</div>
<div class="clr"></div>
</div>
<div class="banner-row1">
<div class="banner-row-pic">
<img src="http://localhost/cms-basic/assets/_admin/images/pic.png" alt="pic1" />
</div>
<div class="banner-row-text">
<h2>title</h2>
<p>description</p>
<p class="text-muted">
<small>
Keyword: keyword<br />
Placement: Bottom<br />
Location: static_page<br />
Link: link
</small>
</p>
</div>
<div class="banner-row-edit">
<a class="edit" id="1" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/edit.png" />
</a>
<a class="delete" id="1" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/delet.png" />
</a>
</div>
<div class="clr"></div>
</div>
Note: - I'm using jQuery 1.11.3
You can only use an ID once, since it has to be unique.
The issue is happening because of same ids.
Replace
$('.edit').on('click',function()
with
$(document).on('click', '.edit', function()
Related
This is my html page:
<html>
<div class="panel-body text-center">
<div class="ttl-info">
STOK TM
</div>
<h4 class="show-value">
<span id="stktimur">0</span>
<h4>
</div>
$(document).ready(function(){
$('#stktimur').ambilData({
url : '<?php echo site_url('data/datastk') ?>',
reload: 65,
success: function(dt, th){
$('#stktimur').data('list', dt.data);
if( parseInt($('#stktimur').text()) != parseInt(dt.total) ){
$('#stktimur').text(parseInt(dt.total) )
.textEffect({effect: 'jumble',jumbleColor :'#FFF', letterJumble: txt});
}
}
})
}
</html>
You are missing the <script> tag. Also some formatting issues.
Try it like this:
<div class="panel-body text-center">
<div class="ttl-info">
STOK TM
</div>
<h4 class="show-value">
<span id="stktimur">0</span>
<h4>
</div>
<script>
$(document).ready(function(){
$('#stktimur').ambilData({
url : '<?php echo site_url("data/datastk") ?>',
reload: 65,
success: function(dt, th){
$('#stktimur').data('list', dt.data);
if( parseInt($('#stktimur').text()) != parseInt(dt.total) ){
$('#stktimur').text( parseInt(dt.total) ).textEffect({effect: 'jumble',jumbleColor :'#FFF', letterJumble: txt});
}
}
})
});
</script>
I assume you want to do ajax request while the stktimur is click. The correct code should be like this.
jQuery Ajax
jQuery Click Event Listener
<div class="panel-body text-center">
<div class="ttl-info">
STOK TM
</div>
<h4 class="show-value">
<span id="stktimur">0</span>
</h4>
</div>
<script>
$(document).ready(function () {
$('#stktimur').click(function () {
$.ajax({
url: "<?php echo site_url('data/datastk') ?>",
success: function (dt, th) {
$('#stktimur').data('list', dt.data);
if (parseInt($('#stktimur').text()) != parseInt(dt.total)) {
$('#stktimur').text(parseInt(dt.total)).textEffect({
effect: 'jumble',
jumbleColor: '#FFF',
letterJumble: txt
});
}
}
})
})
});
</script>
website: https://www.fermento24.com
If you add a product to the cart, it'll show you the recently added product, total and possibility to go to cart. What I wanted to add was a count of the sort, like: There are currently another 5 products in the cart.
I tried to use {{ cart.item_count }}, but since the popup works on Ajax it doesn't seem to update on time, only showing me at the first time how many products were in the cart (thus, incorrect informations).
How do I go and implement something like this? What follows under is a test I did based on other answers I found here, but that still didn't work.
<div class="loading-modal modal">{{ 'general.search.loading' | t }}</div>
<div class="newsletter-success-modal">
<div class="modal-overlay"></div>
<div class="ajax-modal-content">
<a class="close close-window btn" title="{{ 'general.password_page.close' | t }}">
<i class="fa fa-times"></i>
</a>
<i class="fa fa-check" aria-hidden="true"></i>
<span>{{ 'general.newsletter_form.mailing_list_success_message' | t }}</span>
</div>
</div>
<div class="ajax-error-modal modal">
<div class="modal-inner">
<div class="ajax-error-title">{{ 'general.search.error' | t }}</div>
<div class="ajax-error-message"></div>
</div>
</div>
<div class="ajax-success-modal modal">
<div class="overlay"></div>
<div class="content">
<div class="ajax-left">
<p class="added-to-cart info">{{ 'cart.general.added_to_cart' | t }}</p>
<p class="added-to-wishlist info">{{ 'products.wishlist.added_to_wishlist' | t }}</p>
<img class="ajax-product-image" alt="modal window" src="/" />
<div class="ajax-cart-desc">
<h3 class="ajax-product-title"></h3>
<span class="ajax_price"></span>
<p>{{ 'cart.general.qty' | t }}: <span class="ajax_qty"></span></p>
</div>
</div>
<div class="ajax-right">
<div>Totale nel carrello: <span class="ajax_cartTotal"></span><br>
<span class="cart-item-count"> </span>
</div>
<button class="btn continue-shopping" onclick="javascript:void(0)">{{ 'cart.general.continue_shopping' | t }}</button>
<div class="success-message added-to-cart"><i class="fa fa-shopping-cart"></i>{{ 'cart.general.view_cart' | t }} </div>
</div>
<i class="fa fa-times-circle"></i>
</div>
</div>
<script type="text/javascript">
$(function(){
var cartCount = {{ cart.item_count }};
$('.varients-item').on('click', function(){
var obj = $(this);
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: $(this).attr("data-variant")
},
dataType: 'json',
success: function (data) {
$.ajax({
type: 'GET',
dataType: 'json',
url: '/cart.json',
success: function(cart){
cartCount++;
$('.cart-item-count').html(cartCount);
}
});
}
});
});
});
</script>
You need to update the code and your JS code is looks like similar to demo code below:
$(function(){
$('.varients-item').on('click', function(){
var obj = $(this);
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: $(this).attr("data-variant")
},
dataType: 'json',
success: function (data) {
$.ajax({
type: 'GET',
dataType: 'json',
url: '/cart.js',
success: function(cart){
// once you get the data from AJAX API you need to get the latest count
let total = cart.item_count;
$('.cart-item-count').html(total);
}
});
}
});
});
});
Here is the reference for the cart.js over Shopify documentation.
Link
How to pass the different URL names to the javascript function. Here are my HTML and Javascript code.
{% for profile, g_name in group_list %}
<li class="contact">
<div class="wrap">
<img src="{{profile}}" alt="No image" />
<div class="meta">
<input type="hidden" id="myGroup" name="myGroup" value="{{g_name}}">
<button onclick="GetMessages()">
<p class="name">{{g_name}}</p>
</button>
</div>
</div>
</li>
{% endfor %}
<script>
function GetMessages() {
var myGroup = document.getElementById('myGroup').value;
$('.ajaxProgress').show();
$.ajax({
type: "GET",
url: "/getmsgs/"+myGroup,
success: function(response){
$("#display").empty();
...
},
error: function(response){
alert("No Data Found");
}
});
}
</script>
and this is my URL
path('getmsgs/<str:word>/', views.groupmsgs_ajax, name='groupmsgs_ajax'),
when I try the above method I am getting the first 'myGroup' id value. it is passing the first group name by default.
I am not able to call other group names.
Thank you for any help
That is because all input elements have the same id myGroup so document.getElementById('myGroup').value get always the first element value.
The following code changes should solve the issue given that g_id exists and is a string
{% for profile, g_name, g_id in group_list %}
<li class="contact">
<div class="wrap">
<img src="{{profile}}" alt="No image" />
<div class="meta">
<input type="hidden" id="{{g_id}}" name="{{g_id}}" value="{{g_name}}">
<button onclick="GetMessages({{g_id}})">
<p class="name">{{g_name}}</p>
</button>
</div>
</div>
</li>
{% endfor %}
<script>
function GetMessages(id) {
var myGroup = document.getElementById(id).value;
$('.ajaxProgress').show();
$.ajax({
type: "GET",
url: "/getmsgs/"+myGroup,
success: function(response){
$("#display").empty();
...
},
error: function(response){
alert("No Data Found");
}
});
}
</script>
Or pass the name directly to GetMessages function
{% for profile, g_name, g_id in group_list %}
<li class="contact">
<div class="wrap">
<img src="{{profile}}" alt="No image" />
<div class="meta">
<button onclick="GetMessages({{g_name}})">
<p class="name">{{g_name}}</p>
</button>
</div>
</div>
</li>
{% endfor %}
<script>
function GetMessages(myGroup) {
$('.ajaxProgress').show();
$.ajax({
type: "GET",
url: "/getmsgs/"+myGroup,
success: function(response){
$("#display").empty();
...
},
error: function(response){
alert("No Data Found");
}
});
}
</script>
On my image below as you can see I would like to be able change the position of the remove file link to out side of the content div area.
I have tried with custom template bit no luck.
Question How can I have a remove file button out side of my
content div area? Instead of below image.
I only want to be able to have the remove image link in different area
<div id="content">
<div id="my-dropzone" class="dropzone">
<span class="">Content Div Area</span>
<div class="dz-message">
<h3>Drop files here</h3> or <strong>click</strong> to upload
</div>
</div>
<div class="dropzone_preview" id="dz-preview">
<div class="dropzone_details">
<img data-dz-thumbnail />
</div>
<a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a>
</div>
</div>
<script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>vendor/dropzone/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
url: "<?php echo site_url("images/upload") ?>",
acceptedFiles: "image/*",
addRemoveLinks: true,
thumbnailWidth: null,
thumbnailHeight: null,
addRemoveLinks: true,
previewTemplate: document.getElementById('dz-preview').innerHTML,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: "post",
url: "<?php echo site_url("images/remove") ?>",
data: { file: name },
dataType: 'html'
});
var previewElement;
return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
},
init: function() {
this.on("thumbnail", function(file, dataUrl) {
$('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
}),
this.on("success", function(file) {
$('.dz-image').css({"width":"100%", "height":"auto"});
});
var me = this;
$.get("<?php echo site_url("images/list_files") ?>", function(data) {
// if any files already in server show all here
if (data.length > 0) {
$.each(data, function(key, value) {
var mockFile = value;
me.emit("addedfile", mockFile);
me.emit("thumbnail", mockFile, "<?php echo base_url(); ?>uploads/" + value.name);
me.emit("complete", mockFile);
});
}
});
}
});
</script>
I'm not 100% sure, if I understand you correctly, but does not previewTemplate solve your problem?
See http://www.dropzonejs.com/#config-previewTemplate
You do something like this:
HTML:
<div id="preview-template" class="dz-preview dz-file-preview">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size" data-dz-size></div>
<img data-dz-thumbnail />
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div><img src="removebutton.png" alt="Click me to remove the file." data-dz-remove /></div>
</div>
<div id="content">
<div id="my-dropzone" class="dropzone">
<div class="dz-message">
<h3>Drop files here</h3> or <strong>click</strong> to upload
</div>
</div>
</div>
JS:
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
...,
previewTemplate: document.getElementById('preview-template').innerHTML
});
</script>
Then you can modify with CSS where to display the removal button.
Just remove option parameter addRemoveLinks: true,... twice :-)
If you want some specific link to remove a file (instead of the built in addRemoveLinks config), you can simply insert elements in the template with the data-dz-remove attribute. Example:
<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />
You can find out more on https://docs.dropzone.dev/configuration/basics/layout
I am attempting to implement a Like / Dislike system with a counter. I am having problems with my AJAX call, more specifically when I am trying to change the HTML of selected elements in the view after passing values to the DB.
The element in question is .likeCount, a class with about a dozen or so siblings. If i simply use the selector $('.likeCount'), the AJAX call will actually successfully update the like count but it will do it for every instance of the class. If i attempt to use DOM traversal (.closest, this, .parent, etc) the like count does not update until I refresh the page.
the up and downvote carry a $('like') class.
$(document).ready(function()
{
$('.like').on('click', function(event)
{
postId = event.target.parentNode.parentNode.dataset['postid'];
var isLike = event.target.previousElementSibling == null;
$.ajax(
{
method: 'POST',
url: urlLike,
cache: false,
data: {isLike : isLike, postId : postId, _token : token},
success: function()
{
//first function working great
//(changes the like button to a disklike button and visa versa)
$.ajax(
{
method: 'POST',
url: urlCount,
cache: false,
data: {postId : postId, _token : token},
dataType: 'json',
async: true,
success: function(data)
{
var likeCount = event.target.parentNode.parentNode.childNodes[2].textContent;
$('likeCount').html(data["count"]);
console.log(data["count"]);
}
})
}
})
})
})
The console.log spits out the correct count every time.
How do I select the currently active likeCount without botching my AJAX call?
Here is the markup:
<div class="row posts">
<div class="col-md-6 col-md-offset-3">
<header><h3>Recent Posts:</h3></header>
#foreach($posts as $post)
#if (Storage::disk('local')->has($post->user->id . '.jpg'))
<div class="col-xs-2">
<img src="{{ route('account.image', ['filename' => $post->user->id . '.jpg']) }}" alt="" class="img-responsive">
</div>
#else
<div class="col-xs-2">
<img src="default.gif" alt="" class="img-responsive">
</div>
#endif
<article class="post col-xs-10" id="post" data-postid={{ $post->id }}>
<p class="post-body">{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->name }} on {{ $post->created_at }}
</div>
<div class="likeCount">{{ $post->likes->where('like', '1')->count() }} other people liked this.</div>
<div class="interaction">
<a class="like btn upvote">{{ Auth::user()->likes()->where('post_id', $post->id)->first() ? Auth::user()->likes()->where('post_id', $post->id)->first()->like == 1 ? 'You like this' : 'Like' : 'Like'}}</a> |
<a class="like btn downvote">{{ Auth::user()->likes()->where('post_id', $post->id)->first() ? Auth::user()->likes()->where('post_id', $post->id)->first()->like == 0 ? 'You dislike this' : 'Dislike' : 'Dislike'}}</a>
#if(Auth::user() == $post->user)
|
Edit |
Delete
#endif
</div>
</article>
#endforeach
<?php echo $posts->links(); ?>
</div>
</div>
The issue here is incorrect DOM Traversal.
var likeCount should be:
$(event.currentTarget.parentNode.parentNode.childNodes[5]);
Using 'event' simplifies things when multiple elements share a class name.