I'm developing e-commerce project using codeigniter..i'm new to codeigniter.now i'm working shopping cart module..i want create a shopping cart popup window in codeigniter..i have used bootstrap modal window but i couldn't able to pass the product values so i didn't view cart details.how to pass values to jquery pop-up window for shopping cart.whenever i click the add to cart button the values to be stored in cart table and also display values in jquery pop-up window.i have spent more time but i can't get proper solution..
Call a ajax function on onclick like this :-
<a value-id='1' href='#myModal' class='marker' title='Edit' onclick="functionname(passifvalueisdynamichere)">click on me</a>
Now if required get value from server side then you can call like :-
function functionname(id) {
xmlhttp = getobject();
var query = "id="+id+"&action=setdraftMessage";
var base_url = document.getElementById("baseurlval").value;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var newArray = new Array();
////get value from server side///////////////
var result = xmlhttp.responseText;
///setvalue like///
document.getElementById("mailid").value =newArray[0];
}
};
xmlhttp.open("GET", base_url + "index.php/pass/index?type=setdraftMessage&"+ query, true);
xmlhttp.send(null);
}
Related
I want to hide a button in the cart page, if the cart total is less than $500,and display if it is more than $500.
Which must be get dynamically,when i update woocommerce cart.
Checked with many ajax codes,nothing works at all.
my code:
This button i want get hide/display with cart conditions:
<button id="add_cart_button_style_rg_id" onclick="onclick_pay_button()" class="add_cart_button_style_rg"></button>'
//refresh cart page
add_filter('add_to_cart_custom_fragments',
'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment( $cart_fragments ) {
global $woocommerce;
ob_start();
?>
<button id="add_cart_button_style_rogue_id" class="add_to_cart_button_link" onclick="onclick_pay_button()" class="add_cart_button_style_rg"></button>
<?php
$cart_fragments['.add_to_cart_button_link'] = ob_get_clean();
return $cart_fragments;
}
If you want to hide button based on cart update, you can use JQuery.
Try following code. It uses updated_cart_totals trigger and compare the price value then hide the element
jQuery (document.body ).on( 'updated_cart_totals', function(){
<!-- get subtotal after cart updated -->
var total = jQuery('table.shop_table .cart-subtotal').html();
<!-- format the price to integer value -->
total = total.replace(/,/g, ''); // Replace comas by points
var total_val = parseInt(total);
if (total_val < 500) {
jQuery("#add_cart_button_style_rogue_id").hide();
}else {
jQuery("#add_cart_button_style_rogue_id").show();
};
});
I want to populate a sub category when I choose a category from a select box.
I followed this (and many many other things on the Internet for days), but I feel like it is not meant to be used with Ajax, thus not using dynamic forms like I want it to be.
Any idea how I can do this ?
Thanks.
You should write a controller, which will process your ajax requests (i.e. response with categories json). Then you should write a JS code onto your form page, which will request this controller action, process response and update your selectbox
I.e you have a controller with route name categories_ajax_path which reponse a JSON like
[
{'label':'some category 1','id':1,'group':'group 1'},
{'label':'some category 2','id':2,'group':'group 2'},
{'label':'some category 3','id':3,'group':'group 1'}
]
Then add script to the page like this
<script>
$.getJSON('{{ path('categories_ajax_path') }}', function (data) {
var opt_groups = {};
$.each(data, function (i, value) {
if (!(value.season in opt_groups))
opt_groups[value.group] = [];
var opt = $('<option/>');
opt.val(value.id);
opt.text(value.title);
opt_groups[value.group].push(opt);
});
for (var group in opt_groups) {
if (!opt_groups.hasOwnProperty(group)) continue;
var $opt_group = $("<optgroup/>", {'label': group});
opt_groups[season].forEach (function ($item){
$opt_group.append($item);
});
$('#category_list').append($opt_group);
}
})
</script>
The problem is that ajax populated forms might not pass symfony builtin validations (because this is not the choices symfony expect), so you need additional tweaks
Created plugin, which showing form on shopping cart page after submit i am sending value to third party server.
jQuery.ajax({
type: 'POST',
url: 'http://www.yoursitename.com/wp-content/plugin/my-ajax.php',
How can i call woocommerce data on 'my-ajax.php'?
$subtotal = $woocommerce->cart->subtotal;
$shipping = $woocommerce->cart->shipping_total;
$orderTotal = $woocommerce->cart->total;
Above value i want to first call on my.ajax.php and then redirect page to shopping cart with some message etc.
Please help me i am really stuck here.
You'll need to start by using the $woocommerce global! You're on the right track.
function () {
global $woocommerce;
$subtotal = $woocommerce->cart->subtotal;
$shipping = $woocommerce->cart->shipping_total;
$orderTotal = $woocommerce->cart->total;
}
In my application I have a form in controller/index that consists out of 3 select boxes. When all three boxes have a value selected I need to show additional html and extra form options in the same view based on those select values. The obvious solution seems to make an ajax call to another action that handles the database operation and creates a view and loading that view into the controller/index.phtml
I have been able to load a view of another action in the index.phtml by using:
$('#select').change(function() {
event.preventDefault();
var id = $(this).attr('id');
$('#results').show();
$('#results').load('/controller/index/' + $(this).attr('value'));
return false;
});
However I need to pass the variables of all three select boxes and for that I alternatively used:
$('#select1').change(function() {
var select1 = $('#select1').val();
var select2 = $('#select2').val();
var select3 = $('#select3').val();
$.ajax({
type: 'POST',
dataType: 'json',
url: '/controller/index/',
data: { select1: select1, select2: select2, select3: select3},
success: function(result){
var return1 = result.return1;
var return2 = result.return2;
}
});
});
The last method works in as far that I do see the variables passed in the headers and the response contains the view, but I cant fix it that just the content of the ajax view is placed within the index view. (Ofcourse by not using AjaxContent switching, the ajax view will load but that includes the complete layout as well.) Anything that I echo in the ajax action or ajax view do not show in the index view. Any pointer would be more than welcome
EDIT
the ajax action now looks like
$this->view->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
$select1 = $this->_request->getParam('select1');
$select2 = $this->_request->getParam('select2');
$select3 = $this->_request->getParam('select3');
// DO THE OTHER STUFF AND LOGIC HERE
$results = array(
'return1' => 'value1',
'return2' => 'value2'
);
$this->_response->setBody(json_encode($results));
and the controller init
public function init() {
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('ajax', 'json')->initContext();
}
So everything works, I can see the returned values in the response by using developer tool (network) in my browser, however I just do not know how I can use this to "update" the view
You can do two things:
You can enable the layout of the action you are calling via ajax. See you have disabled layout so even if the view phtml file of the ajax action contains something, it won't show. You can enable layout, use text/html dataType instead of json and show the returned HTML somewhere.
Or, in the success event of the ajax call, write javascript codes to update DOM.
Thanks #Salman for your suggestions as they lead me in the right direction and I managed to solve the problem.
I managed to pass multiple parameters with the ajax .load() call by passing them as get parameters.
The results of the ajaxAction could then be formatted in the ajax.ajax.phtml view and were consecutively
shown within the #results div that resides in the index.phtml where the select boxes are.
controller/index.phtml
<div id="results" style="display:block;">Select all three values</div>
IndexController init and ajaxAction
public function init() {
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('ajax', 'html')->initContext('html');
}
public function ajaxAction() {
$select1 = $this->_request->getQuery('select1');
$select2 = $this->_request->getQuery('select2');
$select3 = $this->_request->getQuery('select3');
$form = new Application_Form();
// Database operations and logic
$this->view->form = $form;
$this->view->array = $somearray;
}
}
jquery script in index.phtml
$(document).ready(function(){
$('.selector').change(function() {
var select1 = $('#select1').val();
var select2 = $('#select2').val();
var select3 = $('#select3').val();
if ( select1 && select2 && select3) {
$('#results').show();
$('#results').load('/controller/ajax?select1=' + select1 + '&select2=' + select2 + '&select3=' + select3);
}
});
});
controller/ajax.ajax.phtml
<?php if ( $this->array ) : ?>
<?php echo( $this->form ); ?>
<?php else: ?>
Nothing found for selected values
<?php endif ?>
Can anyone help me with, I am trying to create a download counter to my website.
I have a ajax script that counts up by 1 when the users clicks the download link, the issue I am having is on some browsers it goes to the download link before completing the ajax count script.
Is there a way that I can redirect to the download file once the script has completed. At the moment I have as follows
This is the link :-
<a href='downloads/".$downfile."' onclick=\"Counter('$referid');\"'>Download File</a>
This is the counter script:-
<script type="text/javascript">
function Counter(id)
{
$.get("clickcounter.php?id="+id);
{
return false;
}
}
</script>
This is the php script (clickcounter.php)
<?php
include('dbutils.php');
$referid = $_GET['id'];
$q = "SELECT * FROM downloads WHERE downid =".$referid;
$r = mysql_query($q);
while ($row = mysql_fetch_array($r))
{
$click = stripslashes(trim($row['downcount']));
$download = $row['downfile'];
}
$countup = $click + 1;
$qUpdate = "UPDATE downloads
SET downcount=$countup
WHERE downid=$referid";
$rUpdate = mysql_query($qUpdate);
?>
A few relatively small modifications should solve the problem. First, change the onclick to the following:
onclick=\"Counter('$referid', this); return false;\"
What we have done is to send in this as the second argument to the Counter function so we have a reference to the clicked link. Secondly, we have added return false, which blocks the browser from navigating to the url specified in the href.
The modified counter function looks like this:
function Counter(id, link) {
$.get("clickcounter.php?id=" + id, function() {
location.href = $(link).attr("href");
});
}
We now have a reference to the clicked link. A function has now been specified as the second argument to $.get(). This is the success-function, which is called when the ajax call has been successfully called. Inside that function we now redirect to the url specified in the href attribute on the clicked link.
I feel I should point out that the recommended way is to bind the onclick using jQuery separate from the html. The referid can be stored in a data attribute (which I chose to call data-rid):
<a href='downloads/".$downfile."' class='dl' data-rid='$referid'>Download File</a>
Then you bind the onclick for all download links (a elements with a "dl" class):
$(function() {
$("a.dl").click(function() {
var id = $(this).attr("data-rid");
var href = $(this).attr("href");
$.get("clickcounter.php?id=" + id, function() {
location.href = href;
});
return false;
});
});
(I feel I should point out that the code has not been tested, so it's possible that a typo has snuck in somewhere)