Develop Reference

Popup modal doesn't have a value upon clicking trigger input button

I have a scenario:
Here's my HTML code:
<input type="submit" id="btnpin" data-url="#Url.Action("PIn", "PIO")" value="P In" class="btn pin-btn" data-toggle="modal" data-target="#popup-article"/>
<div id="popup-article" class="popup">
<div class="popup__block">
<div style="overflow: auto">
<div class="top-left-logo">
<img src="~/Images/my-logo.png" width="270" height="99">
</div>
<div class="modal-top-right animated bounce delay-3s">
</div>
</div>
<div class='grid'>
<div class='col modal-left-panel '>
#{
foreach (var m in DTR.Models.DataDetails.lstDetails)
{
<div class="modal-left-text-container-top">
<div class="modal-employee-name animated bounceInLeft fast delay-2s" >#m.Name</div>
<div class="modal-employee-info">#m.Pos</div>
<div class="modal-employee-info">#m.Dep</div>
</div>
<div class="modal-left-text-container-mid">
<div class="modal-show-punch">
<div class="modal-show-punch-text">#m.PIO</div>
<div class="modal-show-punch-time">#m.IO</div>
<div class="modal-show-punch-date">#m.DateIO</div>
</div>
</div>
}
}
</div>
<div class='col modal-right-panel'>
}
</div>
</div>
</div>
</div>
And Here's my JS code:
$(document).ready(function () {
$('#btnpin').click(function () {
var url = $(this).data('url');
var punchIn = 'PunchIn';
$.ajax({
async: false,
type: "post",
contentType: "application/json; charset=utf-8",
data: "{'punchIn':'" + punchIn.toString() + "'}",
url: url,
success: function (response) {
//$(document).ajaxStop(function () {
// punchIn = null;
//});
if (response !== null && response.success) {
window.location.href = "#popup-article";
location.reload();
}
else {
alert("Already P In.");
}
},
error: function (response){
alert("Error Message");
},
});
});
});
This Code is working fine but my Problem is i need to use location.reload();
upon clicking the button btnpin because the value not showing if don't have this location.reload();
When loading the page the value is already fetched and done but when i click the button there's nothing else showing on the popup portion.
The problem of this location.reload();, the page showing two times and its annoying but the page and the value load perfectly.
How to make it with out using this location.reload();? it seems like i need to have some .fucos() on that particular popup class when the page is loaded.
Any idea is pretty much appreciated.

How to show modal after Ajax success?

After the article is successfully added, the modal showing the message should appear, but I'm just getting errors. So far this is my code:
Modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title">Awesome!</h4>
</div>
<div class="modal-body">
<p class="text-center">Your booking has been confirmed. Check your email for detials.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-block" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Ajax:
<script type="text/javascript">
$('#form').on('submit', function (e) {
e.preventDefault();
var f = CKEDITOR.instances.text.getData();
var text = String(f);
var n=text.length;
var title = $('#title').val();
var docu_id = $('#docu_id').val();
var hidden_snippet = $('#hidden_snippet').val();
if (n!=0) {
$.ajax({
type: 'POST',
url: '/knowmore/index.php/ask_controller/book_add',
data: {text:text,title: title,hidden_snippet: hidden_snippet,docu_id:docu_id},
success: function (data)
{
$("#myModal").modal('show')
location.replace('/knowmore/index.php/index_controller/documentation/'+docu_id+'');
}
});
} else { alert('Enter contents of the Article!'); }
});
</script>
I used $("#myModal").modal('show') to show it but all I'm getting is an error saying modal is not a function.

If you all you need is to open a bootstrap modal, then just use
$('#myModal').modal();

It's because jQuery doesn't know any function named modal by default. If you want to show the modal you can just use show() function.
Change following
success: function (data) {
$("#myModal").modal('show')
location.replace('/knowmore/index.php/index_controller/documentation/' + docu_id + '');
}
into
success: function (data) {
$("#myModal").show();
location.replace('/knowmore/index.php/index_controller/documentation/' + docu_id + '');
}

Write down the following code.
success: function(msg)
{
$("#myModel").modal("show");
}

How to relocate the dz-remove link Dropzone.js

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

jquery on click no working on EDIT button

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()

AJAX - doesn't return value

I am trying to show mysql results from images.php to index.php. After I click on one link of my categories(which are named by id) then I want to show values from images.php.
Every category has one <div> which is tagged by id
The script doesn't work well, it only shows Loading...
$("a.load").on('click',function() {
var id = $(this).attr('data-gallery');
$.ajax({
url: 'http://example.com/images.php?c=' + id,
beforeSend: function() {
$("#" + id).html("Loading...");
},
success: function(data) {
$("#" + id).html(data);
}
});
},function() {
var id = $(this).attr('data-gallery');
$("#" + id).html("");
});
Thanks
[EDIT]
Here is my HTML code in index.php
<section class="mainmywork" id="categories">
<div class="container">
<!--<h1 class="myworkheading"><p>CATEGORIES</p></h1>!-->
<?php
foreach($images as $categories) {
echo '<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 categories">
<a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><img class="center-block" src="'.showConfigValues("img_source").'/'.$categories["photos_name"].'" alt=""></a>
<a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><h2><p>'.$categories["name"].'</p></h2></a>
</div>
<div id="'.$categories["code"].'">
</div>';
}
?>
</div>
</section>
and here is the which is in images.php
<?php
if(isset($_GET["c"])) {
$gallery_code = htmlspecialchars($_GET["c"]);
require_once 'init.php';
$db = new DB;
$query = "SELECT *
FROM photos
INNER JOIN gallery
ON gallery.code = photos.gallery_code AND photos.title_photo != 'y'
WHERE photos.gallery_code = '".$gallery_code."' OR gallery.name = '".$gallery_code."'
ORDER BY photos.id";
$photos = $db->get_special($query);
?>
<div id="lk-gallery">
<div class="wrapper">
<main id="main" role="main" class="photo-lk">
<?php
if($photos[0] != '') {
foreach($photos as $image) {
$mask_description = $image["photos_description"];
echo '<img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" />';
}
}
else
{ echo '<p class="inprogress">Sorry, I am working on this one!<br>Check out my other photos</p>'; }
?>
</main>
</div>
</div>
<div class="lk-gallery-touch">
<div class="flexslider">
<div class="wrapper">
<main id="main" role="main" class="photo-lk">
<ul class="slides">
<?php
if($photos[0] != '') {
foreach($photos as $image) {
$mask_description = $image["photos_description"];
echo '<li><img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" /></li>';
}
}
else
{ echo '<p class="inprogress">Sorry, I am working on this one!<br>Check out my other photos</p>'; }
?>
</ul>
</main>
</div>
</div>
</div>
<?php
}
?>

Try this:
$("a.load").on('click',function() {
var id = $(this).data('gallery'); // use .data() method
var $id = '#'+id;
$.ajax({
url: 'http://example.com/images.php?c=' + id,
beforeSend: function() {
$id.html("Loading...");
},
success: function(data) {
$id.html(data);
},
error: function(){
$id.html("Error...");
}
});
});

According to the documentation, the second argument to the .on function when there is more than 2 arguments is a selector string, but you have passed what appears to be your desired event handler. The last argument should be the event handler, in your code sample that is:
function() {
var id = $(this).attr('data-gallery');
$("#" + id).html("");
If you remove that last function, leaving just 2 arguments to .on, your handler should be called as expected.