I have this jquery to delete a customer comment.
my problem is in "if(confirm" part. I want to show a div asking if user is sure about deleting this comment. not just a browser default alert box.
how can I do this?
var Progressajax = false;
$(document).ready(function() {
$(".delete_post").on('click',function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var I = element.attr("id");
if(confirm('Are you sure?')){
$.ajax({
type: "POST",
url: "/js-calls/post_delete.php",
data: "id="+I,
success: function(){
Progressajax = false;
$(".volta"+I).fadeOut(600, function(){
$(".volta"+I).remove();
});
}
});
}
return false;
});
});
and is there something that I can improve here?
thanks
One simple solution would be to just utilize jquery .hide() and .show() to hide/show the div element when you need to. You could enhance this to leverage bootstrap as mentioned above to make it more of a visually appealing modal dialog, but this should give you an idea of how the code should work.
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="Delete Item" id="btnDelete"/>
<div id="confirmBox">
<p>Are you sure you want to delete this record?</p>
<br />
<input type="button" value="Yes" id="btnYes"/>
<input type="button" value="No" id="btnNo" />
</div>
<script type="text/javascript" src="jQuery_v1.10.2.js"></script>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
$(document).ready(function () {
$('#confirmBox').hide();
$('#btnDelete').on('click', function (e) {
$('#confirmBox').show();
});
$('#btnYes').on('click', function (e) {
//Do Delete Action Here
alert("Item Deleted");
$('#confirmBox').hide();
});
$('#btnNo').on('click', function (e) {
//Cancel Action Here
alert("Action Cancelled");
$('#confirmBox').hide();
});
});
Related
I'm trying to disable/enable a button based on the checkbox, which I am unable to do. Here is the sample I worked on. For enabled and disabled, different buttons have to be used.
function toggleContinue() {
$(document).ready(function() {
$("#swpRequired").click(function() {
$("input,select").change(function() {
$("#disableContinue").attr("style", "display:inline-block");
$("#continueButton").attr("style", "display:none");
});
});
$("#swpRequired").click(function() {
$("input,select").change(function() {
$("#disableContinue").attr("style", "display:none");
$("#continueButton").attr("style", "display:inline-block;");
});
});
});
}
Try this. use prop method of jquery
function s()
{
if($("#a").prop('disabled')==false)
$("#a").prop('disabled','true')
else
$("#a").removeAttr('disabled')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" onchange="s()" id="b"/>enable
<input type="button" value="click" id="a">
You could use attr() to disable/enable the button based on checkbox's value:
$(document).ready(function() {
$("#swpRequired").click(function() {
$("#continueButton").attr("disabled", this.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="swpRequired" />
<button id="continueButton">continue</button>
You can use change event and take the help of disabled property of button.
Solution will be like:
$(document).on('change', "#checkbox", function()
{
if ($(this).prop("checked") == true)
{
$("#btn").prop('disabled',true)
}
else
{
$("#btn").prop('disabled',false)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox"/>enable
<input type="button" value="click" id="btn">
I want to get done, When i try to checked checkbox, It will show popup. Then, there have a two option as "Yes" and "NO". When i click "yes" checkbox will checked and popup close. If i choose "NO" checkbox will unchecked and close popup.
Give me a help on this. Sample code here
Javascript
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
$("#txt").dialog({
close: function () {
$('#chkBox').prop('checked', false);
}
});
} else {
$("#txt").dialog('close');
}
});
});
HTML
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
<button>Yes</button>
<button>NO</button>
</div>
Live sample here :
http://jsfiddle.net/5vy1m233/37/
Please help. Thank you.
Try adding a buttons:{} object property instead of having two extra buttons in the markup. This setting will create buttons for you and in those buttons you can choose to check/uncheck the checkbox:
$(document).ready(function() {
$('#chkBox').click(function() {
var $chkBox = $('#chkBox'),
$txt = $('#txt');
$txt.dialog({
buttons: {
Yes: function() {
$chkBox.prop('checked', true); // check if Yes
$txt.dialog('close'); // and close the popup
},
No: function() {
$chkBox.prop('checked', false); // uncheck if No
$txt.dialog('close'); // and close the popup
}
}
});
});
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
</div>
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" onClick="confirmation(this);"/>
function confirmation(obj) {
obj.checked ? confirm("You have chosen " + obj.value + " as your type \n If you have chosen the right type, Click Ok!") ? alert("You clicked ok") : obj.checked = false : "";
}
you just have to put id on those button and add function and run it with 'onlick'
html
<button onClick="btn_yes()">Yes</button>
<button onClick="btn_no()">NO</button>
js
function btn_yes(){
$("#txt").dialog('close');
document.getElementById("chkBox").checked = true;
}
function btn_no(obj){
$("#txt").dialog('close');
}
here jsfiddle
http://jsfiddle.net/5vy1m233/40/
I use this code to show a form after a link is clicked:
$(function () {
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
});
});
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
Now I need the link "msg" to disappear, what would the code look like? I'm totally new in js
UPDATE:
<script language="javascript" type="text/javascript">
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
</script>
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
What is the problem in saying hide like after show the form like bellow
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
DEMO
I am trying to have a section of an html form to show/hide based on a checkbox. This is the essence code I have:
<script src="/js/jquery.js"></script>
<script language="JavaScript">
function toggle(className){
var $input = $(this);
if($(this).prop('checked'))
$(className).show();
else
$(className).hide();
}
</script>
<fieldset><legend>Check Here
<input type="checkbox" onclick="toggle('.myClass')" ></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
When you click on the checkbox, the span gets hidden and will not come back. I have also used $(this).is(':checked'). It appears that $(this).prop('checked') is evaluating to false whether it is checked or not. My best guess is that I am using $(this) incorrectly. What am I missing here?
HTML, pass this from on click event
<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>
JS
function toggle(className, obj) {
var $input = $(obj);
if ($input.prop('checked')) $(className).hide();
else $(className).show();
}
OR, without using prop you can just do:
function toggle(className, obj) {
if ( obj.checked ) $(className).hide();
else $(className).show();
}
OR, in one-line using .toggle( display ):
function toggle(className, obj) {
$(className).toggle( !obj.checked )
}
Use an event handler that is'nt inline, and then just toggle() the element based on the checkbox state :
<script src="/js/jquery.js"></script>
<script type="text/javaScript">
$(function() {
$('input[type="checkbox"]').on('change', function() {
$(this).closest('fieldset').find('.myClass').toggle(!this.checked);
});
});
</script>
<fieldset>
<legend>Check Here<input type="checkbox"></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
FIDDLE
This would even work with several fieldset's with the same markup.
try binding event via jQuery, and then you can access to $(this):
$(document).ready(function() {
$(":checkbox").click(function(event) {
if ($(this).is(":checked"))
$(".myClass").show();
else
$(".myClass").hide();
});
});
<input type="checkbox" checked>
<input type="text" id="amount">
$document.ready(function() {
$("input:checked").on("click",function () {
$("#amount").toggle()
})
});
how to edit the code, to function OnClick worked automatically?
This is code:
<form name="statusUpdate" action="" method="">
<textarea style="width:0; height: 0;" name="status" id="status" readonly>VARIABLE 1 http://bit.ly/VxwZWv </textarea>
<br />
<input type="button" onclick="updateStatusViaJavascriptAPICalling(); return false;" value="KLIKNIJ, ABY ROZPOCZAC" />
</form>
and function:
function updateStatusViaJavascriptAPICalling(){
var status = document.getElementById('status').value;
FB.api('/me/feed', 'post', { message: status }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Ok. Teraz w menu wybierz opcje GENERUJ ');
}
});
}
Thanks
Add the onload attribute to the HTML Body tag:
<body onload="updateStatusViaJavascriptAPICalling();">
without jQuery:
<body onload="javascript:function();">
or
<head>
<script type="text/javascript">
window.onload=function(){
};
</script>
</head>
or if using jquery simply put this in your document.ready function and then it will happen on page load instead of on button click.
If you are wanting the button to exist and be hidden no one can click it...but you can do this with hidden inputs and then running the function "sometime".