ajax and codeigniter code for add to cart button - javascript

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>

Related

Save data to MySQL from within jquery loaded page

I have created an example of what I am trying to accomplish:
I have an index page with a form + input elements (example.php).
When submitted I call a php page via jQuery that processes the form data and outputs result in div on index page (proces.php)
From within this php process page loaded in the div I have a button that when clicked I want to save $_POST data + other values from that page into MySQL.
I simply just cannot figure out how to "re-use" $_POST data and new values from example.php file and process.php file so I can save it from proces page when clicking button on proces.php page.
This is the example: http://mazey.dk/example.php
When form on index page is submitted the proces.php is called and here all POST data is parsed. This data I want to save when clicking Save button in proces.php file.
I hope someone can guide me in the right direction.
Thanks
***** UPDATE *****
Let me break down the code I have:
On example.php page I have a POST form with an action and a jQuery/AJAX script that prevents form from submitting in a normal way, instead it sends POST to form action URL. Result is then shown inside the with .previews class.
<script>
$(document).ready(function(){
$('.selectform').ajaxForm( {
target: ".previews",
//success: function(res) {
//$( "#currentOrders" ).load(window.location.href + " #currentOrders" );
//}
});
});
</script>
<form action="proces.php" class="selectform" method="post">
<input name="test" type="hidden" value="123">
<div class="form-group col-md-9">
<input name="inputtest" type="text">
</div>
<div class="form-group col-md-9">
<div class="">
<button class="btn btn-primary btn-lg" type="submit"><i aria-hidden="true" class="fa fa-calculator"></i> Calculate</button> <button class="btn btn-default btn-outline btn-lg" type="reset">Reset</button>
</div>
</div>
</form>
<div class="col-md-6 col-lg-6 col-xl-6 col-xxl-6">
<div class="previews"></div>
</div>
Inside proces.php file (that displays in the .previews ) I have a button. This button I want to trigger a "save-action" so when clicked I can save POST values + other variables that will be defined in proces.php into the MySQL DB. I have no problem in handling functionality to MySQL, but I need to figure out how to call POST data + variables upon clicking the button.
Proces.php file:
<input type="submit" name="save" value="SAVE" class="btn btn-lg btn-default">
<?
print_r($_POST);
$newTest = "Check";
$data = 234;
// TEMPERATURE CONTROLLER
$controller = explode("|",$_POST[controller]);
$controllerCostEach = $controller[1];
$controllerName = $controller[2];
$controllerCost = $controller[1];
$qtyController = $controller[0];
$controllerAssemblyCost = $controller[3];
$totalControllerAssemblyCost = $controllerAssemblyCost * $qtyController;
$controllerCost = $qtyController * $controllerCost;
//SUBMIT BUTTON CLICKED
//E.g if(save).clicked{
echo "HERE I can save original $_POST data + other variables from $_POST values from index file and this proces.php file via standard mysqli_query";
//}
//SUBMIT
?>
I hope with this explanation that someone can help me :-)

Show and Hide element (jquery/javascript)

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>

Hiding tooltip on button click in jquery

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');

Show button onClick event of another 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>';
}
?>

Clear input in Angular with button, but same button is also used as part of ng-show

First of all, I can imagine the subject of this question is not very clear, so sorry for that.
I am using a button with ng-click to display an input (ng-show) and two other buttons(send, cancel). For hiding the input again I use the "cancel" button. But I also would like to clear the value of the input. The problem is that I dont know how to invoke the clear function as well as the hiding the input again with the same button.
Here is my code:
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
show input.
</button>
<div class="form-group" ng-show="showme">
<input id="myInput2" class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
<button ng-click="showme=false" class="btn btn-xs">Cancel</button>
<button ng-click="send()" class="btn btn-success btn-xs btn-sent">Send</button>
</div>
$scope.showme = false;
Just update your code
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
with
<button class="btn-share" ng-click="searchUser='';showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
I have added searchUser='' in ng-click. So, when user click on it, it will first update the searchUser to empty string in scope and then update showMe in scope.
If you do not want information after cancel, you can do the same thing with ng-click of cancel button.
Here is a plunker for you - http://plnkr.co/edit/X9wbGYsBoIXxR7QmE1zP?p=preview
If you add this line to your clear() function:
$scope.showme = false;
it will invoke the function and set the showme variable to false, thus hiding the div!
So your clear function could look like this:
$scope.clear = function() {
$scope.searchUser = "";
$scope.showme = false;
}

Categories