I working on an ajax cart function for an e-commerce store and the functionality I require is that when the add to cart button is clicked, the item is added to cart then the user is directed to the checkout page.
The scenario I'd like to accomplish is as follows: Have a 'Buy It Now' button and once clicked, change to 'Processing'. When in the 'Processing' state, an ID is added and I need the resulting button to be clicked.
The original ajax cart code is here: https://github.com/carolineschnapp/ajaxify-cart/blob/master/ajaxify-cart.liquid
I've attempted to add $('checkout').trigger('click'); as seen in the code below, although it's not working as I've intended.
success: function(itemData) {
// Re-enable add to cart button.
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
window.setTimeout(function(){
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
_setText($addToCartBtn,_config.addedToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
$addToCartBtn.attr('id', 'checkout');
$('checkout').trigger('click');
Assuming your using jquery,
$('#buttonid').trigger('click');
Related
I have a login and register modal and these modals share one same attribute, so I wanted to create an onclick function for each of the modals' submit buttons to trigger errors in respective modals. I tried this code to see if the button can trigger for the modals to show,
function loginModal(){
$('#modal-register').modal('show');
}
document.getElementById("modal-login-btn").addEventListener("click", loginModal);
and it does, however it only works before the page reload, as when i click the submit button, the page will reload. I want the modal to show after the page reload. I also tried this but it doesn't work.
$(document).ready(function(){
function loginModal(){
if (count($errors) > 0){
$(document).ready(function(){
$('#modal-login').modal('show');
});
}
}
});
document.getElementById("modal-login-btn").addEventListener("click", loginModal);
Does anyone have any idea how to make the function run after page reload?
You can use a GET value at the url of the page when the page reload:
you can set the url in javascript at the moment of reload
for example
window.location.replace(window.location.href+"?reloaded=true");
implement a function who detect if the url contains a reload GET
value.
if the GET value exist, show the modal directly.
I have a controller in c# and inside the controller there is a save method. The save method saves/updates data that is submitted by submit button click and javascript. The problem is, if you click on the button multiple time, it should only process the very first click and rest of them should be identified as duplicate submit and should be discarded by controller. How to do this in c# mvc web application?
Disable the button after it's clicked. So it can just be clicked once.
Simple way
when button clicked disabled it then actived again after you got response result from ajax! u can also add loader that make ur web look so cool!
<button id="btnSend" onClick="send()">submit</button>
<script>
btnSend=document.getElementById("btnSend");
function send(){
btnSend.disabled=true;
//set disabled button here
$.ajax({ type: "GET",
url: "http://www.google.de",
async: false,
success : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
},
fail : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
}
});
}
</script>
I would also disable the button on the client side. But you could also check if the submitted data is different from the stored data. If no changes were made you could just return without further saving logic.
Should it be possible to just save the data once? Maybe a redirect to a different view after saving could be a possible solution in special cases.
I make a premise: I'm working on a school project and the technologies that I can use are: python, flask, bootstrap, JavaScript and JQuery.
I have a button (that I will call to "Update Product") that "onclick" must enable one of these buttons:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp, the "Update Product" button must be hidden and must call a function in python (example: updateProducts ()).
At the end of this function (the function returns ok or ko), I return the message (using flash), but I do not know how to hide the Loading button and show the "Update Product" button again.
Can you help me?
Here is one way.
When you render the template in python you could pass a variable to control the visibility of the button.
render_template('page.html', visible=True)
Then, on your page perhaps something like this (found at Hiding a button in Javascript and adapted)
<script>
var hidden = {{ visible|safe }};
function action() {
if(hidden) {
document.getElementById('button').style.visibility = 'hidden';
} else {
document.getElementById('button').style.visibility = 'visible';
}
}
You can also change the variable with an onclick function on then page itself.
Your button to call a python function could look something like this.
<input type="button" id="toggler" value="Toggler" onClick="/funcionName" />
Remember to use the #app.route("/functionName") before the python function.
Hope this is close to what you wanted.
Here are the steps to achieve this.
Add loading button with hidden class.
When you click update Product button, following things should happen.
$(".update_button").on("click", function(e){
$(".loading_button").show(); // show loading button
$(".update_button").hide(); // hide update button
$.ajax({}) // send ajax request to update product, on success, hide loader and show update button
});
I am building an app where a user can submit a form using ajax and the form will submit and upon success will go back to the previous page and then load two more pages. Here is a little bit more info before I get to my code snippet
I have a list of items and want to add another item. I have a button that will open up an add item form. When I submit the form with AJAX and upon success I want to :
Go back to the list of items in history mainView.router.back() to refresh with newest item and then
Go to the item page mainView.router.loadPage() and then
Go to a task for that item automatically which is another page mainView.router.loadPage()
I want all these three actions done at once one after the other. Going back will prevent the user from using the back button and getting back at the form that has already been submitted, going to the item page will be there in case the user does not want to perform the default action of starting a task for the item. I have successfully tested and can perform any ONE of these actions, but cannot figure out how to call the router functions one after the other simultaneously.
...
var item_id = data.newItem.id;
mainView.router.back({
url: page.view.history[page.view.history.length - 2],
force: true,
ignoreCache: true
});
mainView.router.loadPage('http://app.myapp. com/item.php?id='+item_id);
mainView.router.loadPage('http://app.myapp.com/start-item-task.php?id='+item_id);
...
I'm using WordPress Liveblog and a not-yet merged pull-request so will reference the code directly on the GitHub repo to hopefully explain my question better. Please see here for a working example of the plugin code in action.
The WordPress comment form is shown when I click on the Reply button. Before clicking the button, the form is hidden from view.
The comments are shown when I click on the second reply button > Reply
My aim is to replace both buttons with one single button called Toggle. When clicked, I'd like both the WordPress comment form AND the comments to be displayed.
So far I have done the following...
My Toggle button:
<a class="toggle" href="#">Toggle</a>
My script (modified from here):
jQuery('a.toggle').click(function () {
var openImgUrl = 'open.png',
closeImgUrl = 'close.png';
var $newsItem = jQuery(this).closest('.news-text'),
$newsContent = $newsItem.find('.news-content'),
isContentVisible = ($newsContent.is(':visible'));
// slide up all shown news-items - but its expected that only one is visible at a time
jQuery('.news-text').find('.news-content').slideUp(function () {
// on animation callback change the img
jQuery('.news-text').find('.toggle > img').attr('src', openImgUrl);
});
if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
$newsContent.slideDown(function () {
// on animation callback change the img
$newsItem.find('.toggle > img').attr('src', closeImgUrl);
});
}
return false; // stop postback
});
Using my script and toggle button, when the Toggle button is clicked, comments are displayed under each entry. When the toggle button is clicked again, the comments are hidden. However, this doesn't take the WordPress comment form into account.
How can I get the WordPress comment form to display along with the comments when the Toggle button is clicked?
Liveblog Glossary:
Entry: An entry is a top-level comment just like a standard 'comment' made in WordPress.
Comment: Comments can be made on entries.
I found comment_reply_link to be the answer!
http://codex.wordpress.org/Function_Reference/comment_reply_link
Using this function to output the reply link enabled me to do what I needed. I just had to change my selector in my script to use the comment reply button as the toggle and remove the original toggle button I had set up. For example:
jQuery('a.comment-reply-link').click(function () {