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
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!
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.
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>
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>