I am using a PHP script which has a module of Article Posting
User needs to select a thumbnail else it gives an error. I want to remove mandatory validation, and when user has not selected any Thumnail, then it should select a default image somewhere from directory.
PHP Page:
<div id="thumbselect" class="hide bd margin-bottom-20 box">
<div class="upload-header">
<span><?= Lang::get('post_thumb_head') ?></span>
<a title="<?= Lang::get('upload_thumb') ?>" class="sendimg upload-image tip" href="#"><i class="pe-none icon-upload2"></i></a>
</div>
<div class="rightbox">
<div class="preview cover"><img src="Template/Images/imgplaceholder.jpg" class="topimg sendimg" style="opacity: 1;"></div>
</div>
</div>
<div id="photocover" class="hide">
<div class="upload-header">
<span><?= Lang::get('post_thumb_head') ?></span>
</div>
<div id="thmb" class="rightbox bd">
<div id="thmbinner" class="preview"></div>
<i class="icon-angle-left"></i>
<i class="icon-angle-right"></i>
</div>
</div>
<div id="frameselect" class="hide">
<a id="setframe" class="bttn bttn-primary selectframe" style="display:block;margin:4px;"><?= Lang::get('select_another_frame') ?></a>
<div id="mp4preview" class="rightbox bd hide"></div>
</div>
JavaScript page
define(["jquery","utils","tinyMCE"],function(e,t){var n,a={File:t.Query("#file"),Tags:t.Query("#input-tags"),Form:t.Query("#submitArticle"),Thumb:t.Query("#thumbselect"),AddImg:t.Query(".sendimg")},r={Init:function(){t.ResetCache(),r.initMCE(),r.setEvents(),r.setPlugins()},initMCE:function(){require(["tinycfg","tinyMCE"],function(e){tinyMCE.init(t.Extend(e.extended,{file_browser_callback:function(e,t,r,i){"image"==r&&(n="art",a.File.click())}}))})},UploadFile:function r(){var i=new FormData,o=new t.NodeCache,s=new XMLHttpRequest,u=a.File.files[0],g=o.FindElems({line:"#progress-bar",total:"#progress-total",status:"#progress-status",progress:".progress"});r.progress=function(e){g.total.innerHTML=Lang.get("prefix_uploaded")+" "+(e.loaded/1048576).toFixed(2)+" "+Lang.get("of")+" "+(e.total/1048576).toFixed(2)+" MB";var t=e.loaded/e.total*100;g.line.value=Math.round(t),g.status.innerHTML=Math.round(t)+"%"},r.complete=function(a){var r=a.target.responseText,i=JSON.parse(r);"thumb"!=n?(e(g.progress).delay(2500).slideUp(1e3),"duplicate"==i.status?t.Info("error",Lang.get("note_error_head"),Lang.get("img_exists")):tinyMCE.activeEditor.execCommand("mceInsertContent",!1,'<img style="width: 100%" src=\'Uploads/Temp/'+i.userdir+"/"+i.filename+"'>"),g.status.innerHTML=Lang.get("img_uploaded")):t.Query(".topimg").src="Uploads/Temp/"+i.userdir+"/"+i.filename},r.error=function(e){g.status.innerHTML=Lang.get("an_error_occured")},"image/jpeg"==u.type||"image/png"==u.type?(g.line.value=0,"art"==n&&e(g.progress).slideDown(1e3),t.Info("info",Lang.get("please_wait"),Lang.get("uploading_img")),t.Query(".mce-close")&&t.Query(".mce-close").click(),i.append("file",u),i.append("option","thumbnail"),"thumb"==n&&i.append("hash","cover"),s.upload.onprogress=r.progress,s.addEventListener("load",r.complete,!1),s.addEventListener("error",r.error,!1),s.open("POST",t.Path.Image),s.send(i)):(t.Query(".mce-close").click(),t.Info("error",Lang.get("img_invalid_head"),Lang.get("img_invalid_ext")))},setPlugins:function(){e(a.Tags).tagsInput(),e(a.Thumb).fadeIn()},setEvents:function(){PubSub.subscribe("unload",t.ResetCache),a.File.addEventListener("change",r.UploadFile),a.Form.addEventListener("submit",r.Submit),a.AddImg.forEach(function(e){e.addEventListener("click",r.SendImage)})},SendImage:function(e){e.preventDefault(),n="thumb",t.Query("#file").click()},Submit:function(n){n.preventDefault();var i=t.ParseForm.call(this);return i.Data.type="article",i.Data.desc=tinyMCE.get("art_content").getContent(),e.ajax({type:"POST",url:t.Path.Subm,data:i.Data,beforeSend:function(){t.Loading(Lang.get("please_wait"))},success:function(n){t.Loading(Lang.get("please_wait")),1!=n?t.Info("error",Lang.get("an_error_occured"),n):(t.Query(".topimg").src="Template/Images/imgplaceholder.jpg",e(a.Thumb).hide(),t.Info("success",Lang.get("success"),Lang.get("post_submitted")),r.ResetForm()),t.Loading("close")}}),!1},ResetForm:function(){a.Form.reset(),tinyMCE.get("art_content").setContent("");for(var e=document.getElementsByClassName("tag");e[0];)e[0].parentNode.removeChild(e[0])}};r.Init()});
Thumbnail goes to /Uploads/Media/Mar19/Sat30/291/cover.jpg.
I am using easy fancy box plugin to show contact form 7 in popup window and on successful submitting data.I am closing the pop up using on_sent_ok: "$.fancybox.close();",In additional settings of contact form 7, now i need to show popup of successful message on close, I tried "$.fancybox.close();alert('sucess');" but this will give alert box first than closing alert box the popup will also close, can someone please help me to show a alert box on close of fancy box?
I am new to JavaScript and WordPress.
Here is my html and javascript
<div class="mdl-layout__content text-center" style="background: url('<?=$dynamic_images[4]['full']; ?>');color:<?php the_field('text_color');?>;background-size: cover; background-position:center;">
<div class="mdl-grid">
<div class="mdl-typography--text-center mdl-cell mdl-cell--12-col mdl-cell--middle">
<?php the_field('demo'); ?>
<a href="#contact_form_pop" class="fancybox">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent prod-button3 prod-btn">Contact Us</button>
</a>
<div style="display:none" class="fancybox-hidden">
<div class="fancy-main-container">
<div id="contact_form_pop" class="slate_contact">
<?php echo do_shortcode('[contact-form-7 id="1579" title="Slate Form"]'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript below
<script>
$("#test").fancybox({
onClosed: function () {
alert('sucess');
})
});
</script>
Pass the onClosed option to the fancybox function.
i.e:
<a id="example1" href="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_b.jpg">
<img alt="example1" src="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_m.jpg">
</a>
$("#example1").fancybox({
onClosed: function() {
alert('sucess');
})
});
Updated
<div class="mdl-layout__content text-center" style="background: url('<?=$dynamic_images[4]['full']; ?>');color:<?php the_field('text_color');?>;background-size: cover; background-position:center;">
<div class="mdl-grid">
<div class="mdl-typography--text-center mdl-cell mdl-cell--12-col mdl-cell--middle">
<?php the_field('demo'); ?>
<a href="#contact_form_pop" id="test">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent prod-button3 prod-btn">Contact Us</button>
</a>
<div style="display:none" class="fancybox-hidden">
<div class="fancy-main-container">
<div id="contact_form_pop" class="slate_contact">
<?php echo do_shortcode('[contact-form-7 id="1579" title="Slate Form"]'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
I am displaying some images on my picture gallery page.
On this page I am using a jquery lightbox to display images.
The lightbox is working fine,but it doesn't have next and previous buttons .
How can I add the next and previous buttons on those pages.
There are number of pages having the lightbox so I don't want a major change.
Can anyone suggest me how can I add next and previous buttons with little changes ?
Here is my aspx page code :
<div class="row">
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="9.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="10.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="11.jpg" alt="..." class="styleforimg"/>
</a>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="<%= ResolveUrl("~") %>Images/logo.png" alt="" />
</div>
</div>
</div>
</div>
Here is the javascript file code:
$(document).ready(function () {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function (event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({ 'width': $img.width() });
$lightbox.find('.close').removeClass('hidden');
});
});
Here is the html that generates an array of 6 objects called from the DB (this is working fine), and prints them to a bootstrap row.
<div class="row products">
<?php while($product = mysqli_fetch_assoc($featured)) : ?>
<div class="col-md-2 col-sm-6">
<div class="product">
<div class="image">
<img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive">
<div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
</div>
<div class="text">
<h3> <?= $product["manufacturer"]; ?></h3>
<p class="price">$<?= $product["rrp"]; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
Here is the Jquery to generate the modal
<script>
function quickModal(recid) {
alert(recid)// checked it was receiving ID
// setting an id object as recid from db
var data = {"id" : recid};
jQuery.ajax({
url : '/MagV4(Final)/includes/quickModal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#product-quick-view-modal').modal('toggle');
},
error: function(){
alert("something wrong");
}
});
}
</script>
Here is the modal code, Now I know the ID is being passed (alert from Modal) but the modal doesn't generate new content after the first modal is loaded, (there are 6 different mag wheels) so if for example I load the modal for the first mag with id 1, the second mag which is id 7 also creates a modal for id 1.
Using $_POST['id'] doesn't work in the modal for some reason.
<?php
require_once '../core/dbcon.php';
if(isset($_GET['id'])) {
$id = $_GET['id'];
$id = (int)$id;
}
echo $id;
$sql = "SELECT * FROM wheels WHERE recid = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
$sql = ""
?>
<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<div class="row quick-view product-main">
<div class="col-sm-6">
<div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>
<!-- Ribbons
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">SALE</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon
<div class="ribbon ribbon-quick-view new">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon-->
<div class="row thumbs">
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
</div>
</div>
<div class="col-sm-6">
<h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
<p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
<div class="box">
<form action="add_cart.php" method="post">
<p class="price"><?= $product['rrp']; ?></p>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="modal_size">Choose your size</label>
<select id="modal_size" class="form-control">
<option value=""></option>
<option value=""></option>
</select>
</div>
<p>Current Stock: 3</p>
<div class="form-group">
<label for="modal_quantity">Quantity</label>
<input type="number" value="1" id="modal_quantity" class="form-control">
</div>
</div>
</div>
<p class="text-center">
<button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add to cart</button>
<button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
</p>
</form>
</div>
<!-- /.box-->
<div class="quick-view-social">
<h4>Show it to your friends</h4>
<p><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i><i class="fa fa-twitter"></i><i class="fa fa-envelope"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>
added in the new script but now the modals after the first just flash and then disappear with the same information.
<script>
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#quick-view-button').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#product-quick-view-modal').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
</script>
After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.
Meanwhile, this jQuery will patch up the problem*:
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#myModalLabel').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#utility_body').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
Please see http://jsfiddle.net/jhfrench/qv5u5/51/ for a working example.*
So, in your case, you'd also edit the calling button from <button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button> to Quick view. FWIW, I favor this "link invokes modal" approach (vs "button invokes modal") because this also allows the user to right-click the link and open the modal's contents in a new browser tab, should they so-choose. So think through the implications of that UX.
*-For some reason, sometimes when you click the button in the fiddle the modal will show blank. This is not a problem in the application I'm working with, so I suspect it's a problem unrelated to this question/answer.
So far I can now delete the record using modal, but it just needs to go to the page delete-page. I want to delete the record with confirmation before deleting (using modal) and then delete the record without refreshing the page.
This is what I've tried so far:
<script type="text/javascript">
$(function() {
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
</script>
<?php
$stmt2 = $conn->prepare("SELECT project_code, description FROM tblprojects");
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
<tr class="record" id="record-">
<td>
<a href="project-detail.php?code=<?php echo $project; ?>">
<?php echo $project; ?></a>
</td>
<td><?php echo $desc; ?></td>
<td>
<a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
</td>
<td>
<a href="#"
data-id="<?php echo $project; ?>"
id="<?php echo $project; ?>"
class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a href="delete-project.php?code=<?php echo $project; ?>"
data-id="<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
Any ideas? Thank you for your help.
Try this:
$("#btn-delete").click(function(e) {
e.preventDefault();
$.get(this.href, function(){
$("#dialog-example").modal('hide');
});
});
I do this all in the time in my projects but didn't want to post it since the code might not mean anything to others (and it's fairly long) but this is what I do:
<!-- Delete Modal -->
<div id="delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Delete</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="delete_confirm" class="btn red btn-primary" data-dismiss="modal">Delete</button>
</div>
<!-- Submit Delete Modal -->
<div id="submit_delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
<h3 id="myModalLabel">Deleting</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<div class="alert alert-info">Deleting... <img src="/images/loading.gif" alt="Deleting..." /></div>
</div>
</div>
</div>
</div>
So that's the two modals I use, one for the confirmation and another to show that the item is actually being deleted.
This is the JS:
$('.delete').click(function() {
$('#delete_modal .modal-body div div').html('Are you sure you want to delete this row?');
});
// this is the delete button in the confirmation modal
$('#delete_confirm').click(function() {
$('#delete_modal').modal('hide');
$('#submit_delete_modal').modal('show');
$.ajax({
url: '/delete-page',
data: { id: id },
type: "POST",
cache: false,
success: function(data) {
if (data === '1') {
// delete the row from the DOM
$('tr#record-' + id).fadeOut('slow').remove();
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-success"><i class="icon-ok-sign"></i> The row has been deleted</div>');
} else {
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
}
},
error: function() {
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
}
});
return false;
});
Just a pointer, looking at your tr markup, are you meaning to put the id from the database as part of the row id?
You have <tr class="record" id="record-"> so every row has the same id, if you add the correct parameter there every row will have a unique id and the delete part in the ajax callback will work.
The only thing that remains is to get the id when something is clicked but I'm finding it hard to tell what link you are using to perform the delete.
It should be something like this:
var id; // put this as the very first line of js, if it's in the global scope it can be accessed from anywhere, it's not best practise though.
$(document).on('click', '.some_class_name', function() {
id = $(this).parent().parent().attr('id').split('-').pop();
$('#delete_modal .modal-body').html('Are you sure that you want to remove this row?');
$('#delete_modal').modal('show');
// uncomment this to check you're getting the correct id and that it's not undefined etc
// alert('id');
return false;
});
I've tried to make everything generically named to avoid stuff from my projecting bleeding in but I might have missed some things and made some errors when renaming elements etc.