Help
...is it possible to have the onclick ajax functions in an external javascript file?
...does anyone else achieve this?
...i'm not the best scripter in the world myself...i did try but couldn't seem to have it working...
...many thanks in advance!!
Page 1 of 1
ajax onclick external js
#1
apepp 
- Member
-
- Group: Members
- Posts: 233
- Joined: 30-October 11
Posted 03 February 2012 - 11:14 PM
Hello fellow Lemonheads!
...is it possible to have the onclick ajax functions in an external javascript file?
...does anyone else achieve this?
...i'm not the best scripter in the world myself...i did try but couldn't seem to have it working...
...many thanks in advance!!
...is it possible to have the onclick ajax functions in an external javascript file?
...does anyone else achieve this?
...i'm not the best scripter in the world myself...i did try but couldn't seem to have it working...
...many thanks in advance!!
#2
Aleksey
- Co-Founder
-
- Group: +Administrators
- Posts: 3,633
- Joined: 31-October 09
Posted 05 February 2012 - 05:05 PM
Hi!
Do you mean something like this?
Yes, it is possible. :-)
Thanks
Do you mean something like this?
... some external file ...
$('#my_link').click(function(){
$(this).getForm().sendRequest('shop:handler_name', {...});
return false;
});Yes, it is possible. :-)
Thanks
#3
apepp
- Member
-
- Group: Members
- Posts: 233
- Joined: 30-October 11
Posted 08 February 2012 - 01:29 PM
Hi Aleksey!
Thanks for reply!
...what i was trying to do was this below, but doesn't seem to work, probably doing something wrong maybe...
...in the <head> to external JS file:
...which holds a function, for example add to cart:
...and then on the onclick have the external function name:
Thanks for reply!
...what i was trying to do was this below, but doesn't seem to work, probably doing something wrong maybe...
...in the <head> to external JS file:
<script src="<?= theme_resource_url('js/libs/ajax.js') ?>"></script>...which holds a function, for example add to cart:
function addtocart()
{
return $(this).getForm().sendRequest(
'shop:on_addToCart',
{
onSuccess: function(){
custom_alert('Success!!! - Your cart has been updated');
},
onAfterUpdate: init_effects,
update: {'mini_cart_id': 'shop_mini_cart', 'product_page_div': 'shop_product'}
});
}...and then on the onclick have the external function name:
<a href="#" class="button_control" title="ADD TO CART" onclick="addtocart()">
<img title="ADD TO CART" class="btn_add_to_cart" alt="ADD TO CART" src="<?= theme_resource_url('images/btn_add_to_cart.gif') ?>">
#4
Phil
- Lemonholic
-
- Group: Members
- Posts: 195
- Joined: 13-January 10
- LocationCumberland, BC, Canada
Posted 10 February 2012 - 02:33 AM
Andrew,
The problem is your
1. Update your onclick handler to pass "this", and, while we're at it, return the value of the function:
2. Update your code to use the passed element rather than "this":
I think that should do it.
Cheers!
The problem is your
return $(this).getForm().sendRequest(line. If you're doing things this way, you'll want to make the following changes:
1. Update your onclick handler to pass "this", and, while we're at it, return the value of the function:
<a href="#" class="button_control" title="ADD TO CART" onclick="return addtocart(this)">
2. Update your code to use the passed element rather than "this":
function addtocart(el)
{
return $(el).getForm().sendRequest(
'shop:on_addToCart',
{
onSuccess: function(){
custom_alert('Success!!! - Your cart has been updated');
},
onAfterUpdate: init_effects,
update: {'mini_cart_id': 'shop_mini_cart', 'product_page_div': 'shop_product'}
});
}I think that should do it.
Cheers!
#5
apepp
- Member
-
- Group: Members
- Posts: 233
- Joined: 30-October 11
Posted 10 February 2012 - 03:34 PM
...hahahahahaaa!!
...thank you Magic Phil!!
...works great!
...this is now pinned to my memory! I would never have worked that out!
...as long as the (el) part matches in the return (el) part, i can use any valid text in there by the look of it...
...thanks again!!
...thank you Magic Phil!!
...works great!
...this is now pinned to my memory! I would never have worked that out!
...as long as the (el) part matches in the return (el) part, i can use any valid text in there by the look of it...
...thanks again!!
#6
apepp
- Member
-
- Group: Members
- Posts: 233
- Joined: 30-October 11
Posted 10 February 2012 - 03:43 PM
...ah, I've just hit a no go here with this experiment, just tried it with add to compare, but didn't work, "product not found"...so would gather it is to do with it not liking the "<?= $product->id ?>" in external file:
...it's a similar problem with moving the external add to cart code into external JS file...not one to give up me...but think i might quit while I'm ahead maybe:
function addtocompare(foo)
{
return $(foo).getForm().sendRequest(
'shop:on_addToCompare',
{
onSuccess: function(){
custom_alert('Product added to your compare list');
},
extraFields: {
'product_id': '<?= $product->id ?>'
},
update: {'compare_list_id': 'shop_compare_list'}
});
}...it's a similar problem with moving the external add to cart code into external JS file...not one to give up me...but think i might quit while I'm ahead maybe:
function addtocartext(foofoo)
{
return $(foofoo).getForm().sendRequest(
'add_to_cart_ext',
{
extraFields: {
'product_id': '<?= $product->id ?>'
},
onSuccess: function(){
custom_alert('Success!!! - Your cart has been updated');
},
update: {'mini_cart_id': 'shop_mini_cart'}
});
}
This post has been edited by apepp: 10 February 2012 - 04:04 PM
#7
Phil
- Lemonholic
-
- Group: Members
- Posts: 195
- Joined: 13-January 10
- LocationCumberland, BC, Canada
Posted 10 February 2012 - 04:30 PM
Andrew,
The problem is that any php won't be evaluated in js files (and even if it was, it wouldn't be evaluated in the context of the current product). Any information like that you need to pass along to your function so it can handle things. With that in mind, you could do something like the following:
Then, you would call it like the following:
Hope that helps!
The problem is that any php won't be evaluated in js files (and even if it was, it wouldn't be evaluated in the context of the current product). Any information like that you need to pass along to your function so it can handle things. With that in mind, you could do something like the following:
function addtocartext(foofoo, product_id)
{
return $(foofoo).getForm().sendRequest(
'add_to_cart_ext',
{
extraFields: {
'product_id': product_id
},
onSuccess: function(){
custom_alert('Success!!! - Your cart has been updated');
},
update: {'mini_cart_id': 'shop_mini_cart'}
});
}Then, you would call it like the following:
<a href="#" onclick="return addtocartext(foofoo, '<?= $product->id ?>');">Add to compare</a>
Hope that helps!
#8
apepp
- Member
-
- Group: Members
- Posts: 233
- Joined: 30-October 11
Posted 10 February 2012 - 05:26 PM
Hi Phil,
Thank you kindly for input and assistance with the experiment...i see what your saying with above PHP <?= $product->id ?>...
...just tested the proposed idea here...but it's not working for some reason.
Thank you kindly for input and assistance with the experiment...i see what your saying with above PHP <?= $product->id ?>...
...just tested the proposed idea here...but it's not working for some reason.
Share this topic:
Page 1 of 1
