Magento OnePageCheckout Redirect After "Place Order" Click - magento

can anyone help with the following issue.
Once a customer in onepagecheckout clicks the „order now“ button I would like to show a custom page for 2-3seconds and the forward to either payment provider or thankyou page.
Currently I have an observer on
"checkout_type_onepage_save_order_after"
calling my custom model/method.
In this model/method I do a...
$this->_forward($url); //with $url being a custom controller/method
$res->sendResponse();
exit;
In this custom controller/method I load and render my layout the show my *.phtml – file and then...
$url = Mage::getUrl("???");
$this->_forward($url);<
$res = Mage::app()->getResponse();
$res->sendResponse();
And this is where I am lost (or maybe I am totally wrong on the whole thing).
First of all, the controller does not forward at all (whatever url or controller is given).
Second how do I know where to redirect to (if its payment provider or thank you page)
Is there a better way to „simply“ load a *.phtml after user clicks „order now“ and before he is redirected to either thank-you-page or payment-provider.
The phtml is user to load tracking code which must be placed and loaded in html.

I suggest instead that you consider doing the following:
Adding a javascript action to the place order button in the order review which will effectively issue an in-screen modal or popup
The click issuing the modal will set a timeout of 3000ms (3 seconds) which will then fire the order submit Ajax that Magento uses. This is important as the order submit and the redirect are dependent on AJAX.
This example jQuery script (requires adding jQuery to your Magento site, which is not standard) would set the timeout, issue the modal / popup I would add this code to the following file:
/app/design/frontend/[your theme]/template/checkout/onepage/review/button.phtml
Add a class to this line and remove the onclick event so you can capture the click and interject your timeout:
<button type="submit" title="<?php echo $this->__('Place Order') ?>" class="btn-place-order button btn-checkout"><span><span><?php echo $this->__('Place Order') ?></span></span></button>
<script>
$('#myform').submit(function(event) {
event.preventDefault();
//issue the popup - put your html in here:
var html = '<div style="position:absolute; top:0; left:0; min-height: 100%; width: 100%; background-color:white;"><h1>I am a popup</h1></div>';
$('body').append(html);
var self = this;
window.setTimeout(function() {
review.save();
}, 3000);
});
</script>

Related

Calling ajax function from another js script

I have a ajax function that is called by button tag
<button id="of_save" type="button" class="button-primary">
<?php echo __('Save All Changes', 'optionsframework');?>
</button>
$('#of_save').live('click',function() {
...
...
...
}};
The problem is that theme author put a single button on top of settings page and a million of settings, so every time I want to hit save, I must scroll whole page.
I found a little JS script that intercept CTRL+S or another browser combination and is working wonderful
http://www.openjs.com/scripts/events/keyboard_shortcuts
The problem is I don't know how to call the ajax function from this JS
shortcut.add("Ctrl+Shift+X",function() {
alert("Hi there!");
// not working...
live('click',function());
});

How can I change the style of a div on return from a form submit action in Razor MVC3?

I have a Razor/ASP/MVC3 web application with a form and a Submit button, which results in some action on the server and then posts back to the form. There is often some delay, and it's important that users know they should wait for it to complete and confirm before closing the page or doing other things on the site, because it seems users are doing that and sometimes their work has not been processed when they assume it has.
So, I added a "Saving, Please Wait..." spinner in a hidden Div that becomes visible when they press the Submit button, which works very nicely, but I haven't been able to find a way to get the Div re-hidden when the action is complete.
My spinner Div is:
<div id="hahuloading" runat="server">
<div id="hahuloadingcontent">
<p id="hahuloadingspinner">
Saving, Please Wait...<br />
<img src="../../Content/Images/progSpin.gif" />
</p>
</div>
</div>
Its CSS is:
#hahuloading
{
display:none;
background:rgba(255,255,255,0.8);
z-index:1000;
}
I get the "please wait" spinner to appear in a JS method for the visible button, which calls the actual submit button like this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
});
And my view model code gets called, does things, and returns a string which sets the usermessage content which shows up fine, but when I tried doing some code in examples I saw such as:
// Re-hide the spinner:
Response.write (hahuloading.Attributes.Add("style", "visibility:hiddden"));
It tells me "hahuloading does not exist in the current context".
Is there some way I am supposed to define a variable in the view model which will correspond to the Div in a way that I can set its visibility back from the server's action handler?
Or, can I make the div display conditional on some value, in a way that will work when the page returns from the action?
Or, in any way, could anyone help me figure out how to get my div re-hidden after the server action completes?
Thanks!
Is this done with ajax? I would assume so because the page is not being redirected. Try this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
$("#hahuloading").ajaxStop(function () {
$(this).hide();
});
});
As an aside, you no longer need runat=server.

Show div if validation fails

I want this div to show if the form validation is unsuccessful.
<div class="alert">
<strong>Warning!</strong> #Html.ValidationSummary(false, "Fix these errors:")
</div>
I tried to wrapped it inside
if(! ViewData.ModelState.IsValid)
but div is not displayed when submitting the form. Probably because there is not post back due jquery validation. The validation logic seems alright, if i remove the if-statement validation summary list all incorrect input fields.
How can I toggle the visibility of the div based on the validation?
Update
I rewrote the accepted answer. If the server connection is slow the error div will be visible during the server request. Even if there is no errors. I changed it to check if the form is valid when submitting the form. This code snippet assumes you have one form.
$(document).ready(function () {
$(".alert").hide(); //hides the div on page load
$("form").submit(function () {
if (!$(this).valid()) {
$('.alert').show();
}
});
});
You can apply this simple script. It's not very sophisticated, but it should do the trick
$(document).ready(function () {
$('.alert').hide(); //hides the div on page load
$('#submit').click(function () { //assumes your submit button has id="submit"
$('.alert').show(); //shows the div when submit is clicked
});
});
As you can see, this doesn't actually care about the validation. It simply makes the 'alert' div visible when the submit button is clicked. If there are validation errors, the div will show with your warnings. If the form is valid, I'm assuming a refresh, or redirect, so the div will never actually have a chance to show.

jQuery loading items via ajax and while remove it getting notification from all previous deletion as well

I have a div like this
<section class="item_container">
<article class="item">
<h2>Page Title</h2>
<p><a class="delete_page" href="http://www.abc.com/delete/1/">delete</a></p>
</article>
<article class="item">
<h2>Second Page Title</h2>
<p><a class="delete_page" href="http://www.abc.com/delete/2/">delete</a></p>
</article>
</section>
And i am using this code to remove/delete items from item_container
$('a.delete_page').live('click', function(e){
e.preventDefault();
$('footer#ajax_footer').html('')
$('footer#ajax_footer').show("slide", { direction: "down" }, 500);
var url = $(this).attr("href");
var parent_div = $(this).parents("div").parent("article");
var title = $(this).parents("div").parent("article").find('h2').html();
$('footer#ajax_footer').html('<h2>Are you sure you want to delete <u>'+ title +'</u> Page</h2><p>'+ url +'</p><p>Yes, Please Delete It</p>');
$('a.delete_this_page').live('click', function(e){
e.preventDefault();
parent_div.remove();
$('footer#ajax_footer').html('').slideUp();
$.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
});
});
All the contents are loaded via Ajax and there are few more div in each article and there are 30+ articles.
The problem is i am using Sticky plugin to display notification after every item is deleted and it's working fine, Everything is working fine, But after i delete an Article, The sticky notification of previous deletion is displayed as well.
Like, After i delete an item, i see 1 sticky notification, After i delete second item i see 2 sticky notifications (1 of this and 1 of previous) i only want to see 1, And For every item i delete it display all the previous sticky notifications + 1.
Hope i made it clear enough, Thanks guys.
The problem you have is that every time you click on a a.delete_page element you're setting up a new click event handler using .live(), so for each subsequent click you get one more event handler that gets run.
The whole point of .live() - though, as a side note, it's deprecated; consider using .on() (jQuery 1.7+) or .delegate() (prior to 1.7) - is that it handles events triggered by dynamically added elements. Call this:
$('a.delete_this_page').live('click', function(e){
e.preventDefault();
parent_div.remove();
$('footer#ajax_footer').html('').slideUp();
$.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
});
outside of your other callback function (in your $(document).ready()), and find another way to identify parent_div. Or, bind the click event to that specific link directly inside the callback handler.

Getting instant ajax responce

I think there is a way to do this in ajax. But if you have a better way please let me know.
I have this code:
$interactionBox= '<input type="button" value="Pending Friend Requests('.$num_rows.')" onclick="return false" onmousedown="javascript:toggleInteractContainers(\'friend_requests\');"/>';
This code opens up a togle box where user can accept friends if there is a pending request.
So if button looks like this:
Pending Friend Request(1)
And user accepts that request user has to refresh the page for this to show as:
Pending Friend Request(0)
Is there a way to do this without refreshing the page using ajax or any other way?
Here is HTML for above code:
<div class="interactContainers" id="add_friend">
<div align="right">cancel </div>
Add <?php echo $username; ?> as a friend?
Yes
You can just get the value between brackets with JavaScript and then reduce by 1,
You can get that value (if it isn't a variable get via regexpresion:
var button = document.getElementById('buttonid'); // fill in the id
button.value = "Pending Friend Requests("+ (parseInt(button.value.match(/\d{1,10}/)) - 1) + ')';
just excute that after each accept (or not-accept)
note you should just use the function in onclick, it's not a link so it will only excute the javacript bit: so no onmousedown just onclick="javascript:toggleInteractContainers(\'friend_requests\');"
look ma: no jQuery!

Resources