I have a tooltip but it fails to hide on button click.
This is my button :
<button class="btn btn-outline-inverse ajax_addtocart additems
data-toggle="tooltip" title="Add to cart"
id="<?php echo $item->id ?>">
<i class="fa fa-shopping-cart"></i>
<span class="select_options">Add to cart</span>
</button>
This is the button click :
$("button.additems").click(function(e){ //user clicks form submit button
e.preventDefault();
var button = $(this);
var form_data = $(this).attr("id"); //prepare form data for Ajax post
button.prop('disabled', true); //Loading button text //change button text
.............. Continues to do ajax after ajax request
button.prop('disabled', false)
The tootltip stays displayed.
I have tried adding
button.tooltip('hide') //this also fails
I have also tried this and
If you are using a jQuery UI tooltip, have you tried the close method?
button.tooltip('close');
Related
I have a modal but I don't want to show it unless it ends doing all the validation.
So am I trying to hide it in the beginning and show it if it passes through the validation process..
My code still shows the modal when I click the btnSubmit
$('#btnSubmit').click(function(e) {
e.preventDefault();
$('#creationModal').modal('hide');
//if the flow is not validated
var flowName = $('#flowName').val();
//check if it exists
validateFlowName(flowName);
});
function validateFlowName(flowName) {
if //some validation processes)
{
}
//if passes all validations, show it
else {
$('#creationModal').modal('show');
}
<button type="submit" class="btn btn-rounded btn-success-outline top10" data-target="#creationModal" data-toggle="modal" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>
When page is load, at that time $('#creationModal').hide() will hide your element and then you will click on button $('#btnSubmit').click(function(e) will call. In this function you can check the condition like this :
$('#creationModal').hide();
$('#btnSubmit').click(function(e) {
e.preventDefault();
//if the flow is not validated
var flowName = $('#flowName').val();
//check if it exists
if(flowName) {
$('#creationModal').show();
}
else {
$('#creationModal').hide();
}
});
Remove data-target="#creationModal" data-toggle="modal" line of code from your button, because this line will open modal. Above line is required if you want open modal directly.
<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>
try removing the data-target="#creationModal" data-toggle="modal" from your button :
<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>
I'm trying since hours, to submit a form with AJAX, in order not to refresh or redirect the page.
I use this code to submit :
$('#files').on(submit, function(e) {
e.preventDefault();
$.ajax({
url:'actions.php',
type:'post',
data:$(this).serialize(),
success:function(){
console.log('sent');
},
error:function(){
console.log('not sent');
}
});
});
However, I noticed that there is nothing when I serialize the form. It's just blank.
I submit my form, and a PHP script fetches the name of the button pressed to determine what to do next.
In my example, the button name starts with "edit" so I'll only show the concerned part.
else if (substr($index, 0, 4) == "edit") {
$q = "UPDATE files SET file_name = '" . $_POST[$index] . "', file_path = 'users/" . $_SESSION['username'] . "/" . $_POST[$index] . "'" . " WHERE id = " . $file_id;
mysqli_query($link, $q);
rename('users/'.$_SESSION['username'].'/'.$filename, 'users/'.$_SESSION['username'].'/'. $_POST[$index]);
echo(json_encode(array('success'=>true)));
}
It keeps redirecting when I don't use the e.preventDefault() and when I use it, it does not submit anything.
EDIT: Here is the HTML
<td>
<span name="edit22" contenteditable="true">fake</span>
<div>
<span>
<button type="submit" name="edit22" form="files" value="fake">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</span>
<span>
<button>
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</span>
</div>
</td>
the fa fa-check button, with javascript will take for value the content of the first <span> element.
Where am I doing it wrong ?
To prevent the form to actually "submit" through redirection, just return "false" from within the event handler. Like so:
$("#files").submit(function (e) {
return false;
});
Also, you must set the "name" attribute of form elements in order to serialize them correctly. Refer to https://jsfiddle.net/ccsCoder/fyyd7mfw/3/ for an example.
So your submit handler should look something like this:
$("#files").on("submit", function(e) {
$.post("action.php", $(this).serialize(), function(data) {
console.log("success"); //do something with data
}, function(error) {
console.log("Failed!");
});
return false;
});
Here is the full snippet: https://jsfiddle.net/ccsCoder/fyyd7mfw/3/
Why not rearrange you code to be something like this
function onClick()
{
$.ajax({
url:'actions.php',
type:'post',
data:$('#FormID').serialize(),
success:function(){
console.log('sent');
},
error:function(){
console.log('not sent');
}
});
}
Change the HTML To be something like this
<td>
<span name="edit22" contenteditable="true">fake</span>
<div>
<span>
<button type="button" name="edit22" form="files" value="fake" onClick='javascript:onClick();'>
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</span>
<span>
<button>
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</span>
</div>
</td>
or just use <input type="button" /> instead of <input type="submit" />. You can even still set it as the default action of the form if you use that forms behavior. I find it better not to though and just force the click if there are multiple required fields. From there, you'll just use the click event instead of submit.
i have a form which comes on button click shows and hides on clicking on close button.
in the form i have a html Checkbox and when i ticked the checkbox and close the form and open again on button click the checkbox still remain the same which i don't want it should get unticketd(false) as soon as the form hides.
.aspx code
</div>
<label><input type="checkbox" name="Checkboxemail" id="ChkEmail" style="margin-right: 9px;" value="FALSE" />I wish to be contacted regarding my feedback</label>
</div>
<i class="fa fa-times-circle"></i>
function FeedBackClose() {
debugger;
$("#commentTextArea").val("");
$("#TopicSelect").prop("selectedIndex", 0);
$(".rating input:radio").removeAttr('disabled');
$("#<%= TenantMaster_FeedbackSubmitButton.ClientID %>").removeAttr('disabled');
$("#TopicSelect").removeAttr('disabled');
$("#commentTextArea").removeAttr('disabled');
$(".rating input:radio").removeAttr('disabled');
$('#TopicSelect').parents(".form-group").removeClass("has-error");
$('#commentTextArea').parents(".form-group").removeClass("has-error");
$(".close-feedback").show();
$("div.slideFeedback").show().stop().animate({
"top": "-100%"
}, 2000);
$("html, body").removeClass("hide-body-scroll");
$("#wrapper").css("overflow", "auto");
$(".mask").remove();
};
form UI screenshot.
Inside Close event you can add this Code to set up the value attribute
var res = document.getElementById("ChkEmail");
res.value = false;
Or
var res = document.getElementById("ChkEmail");
res.checked= false;
iam new to codeigniter and to ajax so i need to add a product to cart
the isert function is working and the button changes to 'remove' but when refreshing the page it again changes to add to cart in need to remain it as 'remove' pls help
$('.btn_add_remove_cart').click(function(e){
e.preventDefault();
var self = $(this);
if (self.hasClass('add-cart')){
// if it's add cart button, replace add-cart class by remove-cart and change label
self.removeClass('add-cart').addClass('remove-cart').text('Remove');
} else {
// it's remove cart button, do the inverse
self.removeClass('remove-cart').addClass('add-cart').text('Add to Cart');
}
});
});
this my ajax code
and my button is
<button name="submit" type="submit" class="btn btn-primary add-cart btn_add_remove_cart btn-default promotion-button" value="<?php echo $row->prod_id;?>">add as promotion product</button>
I need to show status after the onClick event of a button. But I want the shown button to be on another page. Is this possible?
For example, one button on my Investigation page shows the patient status for a user. If I click that button, the investigation status should be Pending and a user list should display in front of that particular patient.
Try this using jquery
Html
<button id="first-button" type="button" class="btn"> first button </button>
<button id="second-button" type="button" class="btn hide"> Pending </button>
Script
$("#first-button").click(function(){
ev.preventDefault();
$('#second-button').removeClass('hide');
$('#first-button').addClass('hide');
});
OR
In php
<?php
if($pedding)
{
echo '<button id="pending" type="button" class="btn">Pending</button>';
}
else
{
echo '<button id="status" type="button" class="btn">Status</button>';
}
?>