jQuery .next().slideToggle() not working - javascript

I have am creating my own comments system from scratch. The comments themselves are dynamically generated from those in the database and for each comment I am appending a reply textarea and button for the user to post a reply to someone's comment.
The problem is that when I click the reply link it opens a reply box for each comment not just for the comment the user wishes to reply to.
The HTML:
<a class="comment-reply">Reply</a>
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- reply input textarea -->
<div class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
</form>
</div>
<?php } ?>
</div>
And the jQuery:
<script>
$(document).ready(function(e) {
//hide reply box on page load
$('.reply-box').hide();
//show each individual reply box on click
$('.comment-reply').click(function() {
//$('.reply-box').stop().slideToggle("fast"); /* This opens all div */
$(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */
});
});
</script>
What am I doing wrong?
edit
Ok this is the full HTML:
<!--POSTED COMMENT-->
<div id="comment-<?php echo $comment_id; ?>" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;"><?php echo $c_member_username; ?><small> <?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p>
<?php if($signed_in && $username == $c_member_username) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small>
<?php } else if($signed_in) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<?php } else { ?>
<small class="floatL">Sign in to reply to this comment</small>
<?php } ?>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
<?php } ?>
</div>
<!--END REPLY BOX-->
don't mind the styling, I am still prototyping
edit - added rendered page
<!--POSTED COMMENT-->
<div id="comment-139" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;">nicklaw<small> 9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;">this is a comment</p>
<small class="floatL"><a class="comment-reply" id="139" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
</div>
<!--END REPLY BOX-->

Maybe the following code will help, I am using the parentElement of the current element and then get the textarea that is in the same group. When attaching the click handler I use a div with class comments-container and attach on click only for anchors (second parameter in the .on function).
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="comments-container">
<div class="comment">
Comment1
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment2
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment3
comment<br>
<textarea></textarea>
</div>
</div>
<script>
$("textarea").hide();
$(".comments-container").on("click","a",function(e){
e.preventDefault();
$("textarea").hide();
$(this.parentElement.getElementsByTagName("textarea")[0])
.stop().slideToggle("fast");
});
</script>
</body>
</html>

The problem is that the .reply-box is not at the same level in the DOM as the .comment-reply link that is clicked (i.e. not a sibling). If you see the documentation for .click you will see that it only searches the siblings.
I think you want the .parents(".media").next(".reply-box")

Related

problem in ajaxx request when i click on button then nothing happen

hello every one please help me to solve this problem
js file code
$(document).on('click', '.retweet-it', function(){
var comment = $('.retweetMsg').val();
$.post('http://localhost/tweet/core/ajax/retweet.php', {retweet:$tweet_id,user_id:$user_id,comment:comment}, function(){
$('.retweet-popup').hide();
$count++;
$counter.text($count);
$button.removeClass('retweet').addClass('retweeted');
});
});
retweet.php code
if(isset($_POST['showPopup']) && !empty($_POST['showPopup'])){
$tid = $_POST['showPopup'];
$get_id = $_POST['user_id'];
$tweet = $getFromU->getPopupTweet($tid);
?>
<div class="retweet-popup">
<div class="wrap5">
<div class="retweet-popup-body-wrap">
<div class="retweet-popup-heading">
<h3>Retweet this to followers?</h3>
<span><button class="close-retweet-popup"><i class="fa fa-times" aria-hidden="true"></i>
</button></span>
</div>
<div class="retweet-popup-input">
<div class="retweet-popup-input-inner">
<input class="retweetMsg" type="text" placeholder="Add a comment.."/>
</div>
</div>
<div class="retweet-popup-inner-body">
<div class="retweet-popup-inner-body-inner">
<div class="retweet-popup-comment-wrap">
<div class="retweet-popup-comment-head">
<img src="<?php echo BASE_URL.$tweet->Pimg;?>"/>
</div>
<div class="retweet-popup-comment-right-wrap">
<div class="retweet-popup-comment-headline">
<a><?php echo $tweet->screnname;?> </a><span>‏#<?php echo $tweet->uname;?> <?
php echo $tweet->postedon;?></span>
</div>
<div class="retweet-popup-comment-body">
<?php echo $tweet->status;?> | <?php echo $tweet->timg;?>
</div>
</div>
</div>
</div>
</div>
<div class="retweet-popup-footer">
<div class="retweet-popup-footer-right">
<button class="retweet-it" type="submit"><i class="fa fa-retweet" aria-hidden="true">
</i>Retweet</button>
</div>
</div>
</div>
</div>
</div><!-- Retweet PopUp ends-->
<?php
}
?>
this is my whole code when i click on retweet-it class button then my ajax code is not work plese help me to solve this problem its most important for me . Please help me to solve this problem

How to get data from a form using JS/JQuery and pass info to a controller using yii2?

Im trying the following:
I have a form where some columns are created dynamically depending on the length of a certain array as follows:
<div class="row box-table">
<div class="col-sm-12">
<div class="panel-heading bold panel-title">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> text-center">
<span><?= Yii::t('app', 'Referral Code') ?></span>
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFillers[0]['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<span><?= $key ?></span>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<span><?= Yii::t('app', 'Actions') ?></span>
</div>
<!-- Actions -->
</div>
<!--<div data-key="%{id}" class="hidden row-model">-->
<div data-key="%{id}" class="row-model">
<div class="table row-type edit-model">
<!--<form id="%{id}" method="post">-->
<form id="formulario" method="post">
<?php foreach ($hbwellMarginsDataFillers as $hbwellMarginsDataFiller): ?>
<div class="row">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> <?= $style ?> text-center">
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[referralCode]" data-original="%{referralCode}"><?= $hbwellMarginsDataFiller['referralCode'] ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-referralCode"><input type="text" id="hbwell-margins-referralCode" name="HbwellMargins[referralCode]" value="<?= $hbwellMarginsDataFiller['referralCode'] ?>" class="form-control"></div>
</span>
<!-- ORIGINAL -->
<?/*= $hbwellMarginsDataFiller['referralCode'] */?>
<!-- ORIGINAL -->
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFiller['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<?php if($value === null): ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}">null</span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span>null</span>-->
<!-- ORIGINAL -->
<?php else: ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}"><?= $value ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="<?= $value ?>" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span><?/*= $value */?></span>-->
<!-- ORIGINAL -->
<?php endif ?>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<!--<div class="col-xs-<?/*= $widthActionsColumn */?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button"><span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span></a>
<button data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept"><span class="glyphicon glyphicon-ok"></span></button>
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>-->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button">
<span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span>
</a>
<!--<button data-editable = "true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept" type="submit" onclick="return epaCuliao();">
<span class="glyphicon glyphicon-ok"></span>
</button>-->
<a id="submitChanges" type="submit" onclick="return epaCuliao();" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request accept">
<span class="glyphicon glyphicon-ok"></span>
</a>
<!--<button id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class=" btn btn-sm btn-request cancel">
<span class="glyphicon glyphicon-remove"></span>
</button>-->
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<!-- Actions -->
</div>
<?php endforeach ?>
</form>
</div>
</div>
</div>
</div>
When pencil icon is clicked form can be edited.
Well my problem is how to get all the information from that form and pass it to a function (actionEditHbwellMargins) in a controller (ClinicController).
I started using JS/JQuery copying code from other parts of my project, but I dont know how to get a solution in this case:
$(document).ready(function () {
var editable_fields = {
'referralCode': 'HbwellMargins[referralCode]',
'payMethods': 'HbwellMargins[payMethods]',
};
document.getElementById('submitChanges').onclick = function() {
edit();
}
function edit() {
alert("Epa culiao");
var el = $(this);
var container = el.closest('.row-type.edit');
var form = container.find("form");
var id = form.attr('id');
var values = {};
var params = 'id='+encodeURI(id);
$.each(editable_fields, function(key,key2){
var input = container.find("[name=\""+key2+"\"]");
var val = input.val();
values[key2] = val;
//para generar la url
params += "&"+key+"="+encodeURI(val);
});
var thisapp = this;
axios.post('/clinic/edit-hbwell-margins?'+params)
.then(function (response) {
$.each(values,function(key,val){
container.find("span[data-id=\""+key+"\"]")
.text(val)
.attr('data-original', val);
container.find("[name=\""+key+"\"]").val(val);
});
container.removeClass('editable');
})
.catch(function (error) {
console.log(error);
edit_cancel();
});
}
}
'payMethods': 'HbwellMargins[payMethods]' will be an array with variable length.
Please would you be so kind to help me or giving me some hint to achieve a solution? I'm desperate to find out a solution.
Thank you!

Remove validation and auto-select default thumbnail image

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.

how to show/hide reply comment box on multiple displayed comments

so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>
id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>

close easy fancy box pop and show successful message as alert using contact form 7

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>

Categories