My client is using Magento, and after clicking the submit button, the form submits to the controller and then the same page reloads. What he asked me is once he clicks on the submit button he wants a popup displayed. So I used a div with a disabled background as a popup in a dynamic way (JavaScript), but since the button is "submitting", the page refreshes and I lose the popup, so is it possible to keep that div displayed even after submitting?
Jquery example:
$(document).ready(function(){
$('#form_selector').submit(function(){
showDialog();
//stop submit
return false;
});
$('#dialog_button_selector').click(function(){
//submit form
$('#form_selector').submit();
});
});
I'm not familiar with Magneto, but generally speaking, couldn't you look for a form submit in the controller when the page reloads and call for the popup, if true?
Why don't you use slide panel instead of pop-up panel?
For instance, check isLoggedin function of Magento :
<?php
if ($this->helper('customer')->isLoggedIn() ) {
echo "Welcome!";
} else {
echo "Please log in.";
}
?>
if customer is logged, show necessary information of customer inside the slide panel.
If you want just one time show this panel, try to event observer methods of magento :
app/code/core/Mage/Customer/Model/Session.php
Event names :
customer_login
customer_session_init
For jQuery Sliding Panel, you can use jqEasy which is supporting showOnLoad property.
jqEasy
Given that you don't want to hold submission of the page, you basically need to echo the popup after the page is submitted. So, using some generic event (catalog_product_add_to_cart_after), add a session variable like this:
public function observer($event) {
Mage::getSingleton("customer/session")->setNeedsCartPopup(true);
}
Then, in your template, you can check for the existence of this variable to show your popup:
$session = Mage::getSingleton("customer/session");
if($session->getNeedsCartPopup()) {
$session->->setNeedsCartPopup(false);
// echo HTML to display popup as the page loads
}
This is not tested code, but it should give you the gist of how to capture the event and respond to it in the template. Hope that helps!
Thanks,
Joe
Related
I am trying to add a confirmation box before submitting a form in apex. Any ideas of how i can achieve that?
<script type="text/javascript">
response = response2();
function response2(){
apex.confirm("Are you sure you want to submit?)}
</script>
This could be achieved without any custom JavaScript code...
1) Set the button which submits the form to action "Defined by Dynamic Action" and give the button a static id
2) Define a new Dynamic Action which executes when this Button is pressed
3) This DA then have to native actions:
- Confirm
- Submit (Request / Button Name: The static id of your button)
Suppose that you're submitting a form by pushing the P1_BTN_SUBMIT button.
Set its action to Redirect to URL whose contents is
javascript:if(confirm('Are you sure??')){doSubmit('P1_BTN_SUBMIT');}
One option is to define the behavior of the submit button to "Redirect to URL". Then in the Target URL place the following javascript code;
javascript:apex.confirm('Are you sure?','REQUEST');
For example, this is the default behavior of the delete button:
I've implemented a Max Order Value restriction on my Magento Store from this tutorial: http://inchoo.net/magento/magento-maximum-allowed-order-amount/
The notification uses the following to show the error message:
Mage::getSingleton('checkout/session')->addError(
$this->_helper->__($this->_helper->getSingleOrderTopAmountMsg(), $formattedPrice));
Unfortunately, this is only shown on the next page load since it's Session based.
However, I would like the message as a popup when 'Add to cart' button is clicked. This could be a simple javascript alert or ideally a nicely styled popup.
I've looked into Ajax using:
$response = array();
$response['message'] = 'Your cart exceeds the maximum allowed order value';
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
but I'm not entirely sure how to get the response on the front end via jQuery.
Any help would be appreciate :)
Cheers
In a SAPUI5 controller of a master view I trigger a oModel.read() request to read some data (async). This read will be done each time the page will be reached during navigation.
onInit: function() {
var that = this;
this.getRouter().getRoute("PageName").attachMatched(this.onRouteMatched, this);
},
onRouteMatched : function(oEvent) {
...
oModel.read(....); // this will be done async
...
},
The app should be normal rendered (with normal binding).
The mentioned read will load some messages from the server and syncs it with a local model. Now in case of a new message a dialog should be shown.
Here is my problem: Where to place the dialog.open() call in the controller (what event?) so that the dialog will be shown?
Right now I tried with onAfterRendering and there it works for exactly the first call. For further calls I can't see any dialog. If I place the open dialog in the onRouteMatched I can see a short flickering.
So the problem is, that opening the dialog should be done after the rest of the application is rendered. But how to reach this?
Meanwhile I have a hacked solution.
In the onInit method of the controller I register to the onmousemove event. Each time the mouse will be moved I can check if there is some data to show.
this.getView().attachBrowserEvent("mousemove", function(oEvent) {
this.onCheckForMessages();
});
But better solutions are welcome.
So I have created a context box upon right click that has Add/Edit/Delete Rows. I also have a bunch of code launched before the Dialog is shown. My problem is that when I use the context menu it doesn't go through some of the code. I have tried to call on the functions directly but it doesn't format correctly.
I am mainly concerned with the edit button, here is the code I am using to bring up the edit Dialog
function editRow() {
var grid = jQuery("#<%= Jqgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");
if (rowKey) {
// I have tried calling functions here and it still doesn't work
grid.editGridRow(rowKey, grid.editDialogOptions);
}
else {
alert("No rows are selected");
}
}
So if I use this to display the editform it isn't formatted correctly nor does it go through the functions all correctly.
I am using the ASP Webforms version of Jqgrid so I call the function by doing this
<cc1:JQGrid1 ID="Jqgrid1
//other attributes
ClientSideEvents-BeforeEditDialogShown="ChangeMonitor"
//Rest of code />
So this works just fine, and I'm trying to get the Edit button on the context menu to display correctly.
My thought was to use Jquery to trigger a click on the actual Edit button once someone used the context menu. I couldn't find an ID that would work however.
Is there an easy way to connect my context menu Edit button, with the actual Edit button in the toolbar?
Well I found a solution to my problem.
The id field of the button was edit_ct100_cpMainContent_Jqgrid1_top so I just triggered a click with this code.
$("td[id^=edit][id$=top]").trigger("click")
For some reason when I used the _ct100_cpMainContent_Jqgrid1 it wasn't working, but now it does. Hope this helps someone.
I am in the process of porting a site I wrote from ASP.NET webforms to MVC3 and need some guidance as outlined below. I'm new to MVC3.
In my existing ASP.NET web forms project I have a simple page where the user enters a username, they then click a button which causes a postback, on postback there is some basic code that checks if the entered username exists in a user repository - if it does, a textbox containing the users e-mail is shown and the username textbox is made invisible. This happens with ajax and so when the username is entered, the textbox containing the e-mail along with an "Update" button is shown without a full page refresh.
I created a model such as:
public class ChangeEmailModel
{
[Required]
public string Username { get; set; }
[Required]
public string Email { get; set; }
}
Problem is that when the user first enters the page, they should only see a textbox prompting them to enter a username. Once the username is entered and an update button clicked, only then their e-mail is shown (retrieved from the database). Once the e-mail is shown, they can edit the e-mail and click update, which then will need to post to a controller action that saves the updated e-mail. I'm not yet fully used to thinking in the MVC way, so I'm not sure if I've started on the wrong foot with the model above...
Can someone give me some guidance on how this can be accomplished in MVC3 so I can give it a try?
I will start off by suggesting that you start using JQuery for your javascript/ajax functions. ASP.Net MVC3 supports JQuery nicely. I will ignore validation of the email for now as it will be much easier to get you started without it. A high level overview will be:
Add the JQuery script to your page
Add the JQuery vsdoc script to your page so you have some intellisense
Create a partial view to show the email and submit button
Create a controller action that performs the email lookup you mentioned
Create a div to accept the newly returned Email Update form
Use JQuery to override the submit on your username lookup to perform an ajax update instead (and populate the Email Update form div)
1. Add the JQuery script to your page
This should be pretty easy - just drag it from your scripts folder. I think mvc3 comes with jquery-1.5.1.js. Use the min (minified) version when you release to production.
2. Add the JQuery vsdoc script to your page so you have some intellisense
Not quite as easy here - you will want to use an if statement that always evaluates to false so the script is not actually included in your content. Having it on the page though, will cause VS to use it for intellisense. Put this near the top of your view:
#if (false) { <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> }
Hopefully you are using Razor. If not, start using it. It seemed a little foreign to me at first, but it requires much less markup.
3. Create a partial view to show the email and submit button
You could use the ViewBag to pass the Email address and UserName (for now as we are ignoring validation), but go ahead and make it strongly typed to your Model from above. Your view may look something like this:
#model ChangeEmailModel
#{using (Html.BeginForm("UpdateEmail", "Home", FormMethod.Post, new { id = "UpdateEmailForm" }))
{
<input type="hidden" name="userName" value="#Model.UserName" />
#Html.EditorFor(m => m.Email)
<button id="submitEmailUpdate" type="submit">Submit</button>
}
}
Note that we have given Ids to the form and the submit button. JQuery will find the form and button based on these ids. (if we need to, which we will if we want to "ajaxify" the action of updating the email. I did not go into that detail here, but it will be the same process to get that working as it is for the original username lookup)
4. Create a controller action that performs the email lookup you mentioned
I won't go into controllers much here (as you are asking about ajax type updates) but it might look like:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult LookupEmail(string userName)
{
//connect to db and lookup email based on passed in username
//create a new instance of your model
var changeEmailModel = new ChangeEmailModel(.....)
//return a partial view
return PartialView("EmailUpdateForm", changeEmailModel);
}
Make sure to return a PartialView here rather than a View.
5. Create a div to accept the newly returned Email Update form
Make sure this div is not contained in your Username lookup form (as you want to hide it). We will be working with two separate forms. This div could be hidden if you prefer (but will start out empty anyway) I am calling it emailFormDiv
6. Use JQuery to override the submit on your username lookup to perform an ajax update instead
JQuery will allow you to attach functions to... well a lot of things, but we will be using it to override the submit button on your username lookup form. Assume that your original username lookup form with an id of "formUserNameLookup" that has a submit button with an id of "submitUserNameLookup". You would then create a script tag that looks something like this:
<script type="text/javascript" language="javascript">
$(document).ready(function () { //The document.ready function will fire when the html document is... ready
$('#submitUserNameLookup').click(function (ev) { //fires when the submit button is clicked
ev.preventDefault(); //prevent the normal action of the button click
$.post($('#formUserNameLookup').attr('action'), //get the url from the form's action attribute. Could be hard coded for simplicity
$('#formUserNameLookup').serialize(), //serialize the data in the form
function (response, status) {
$('#emailFormDiv').html(response); //replace the html of your div with the response
$('#formUserNameLookup').hide(); //hide the original form
}, 'html'); //states that we are expecting html back from the post
});
});
</script>
The code above is attaching a function to be run when the submit button is clicked. It won't run, of course, until the button is actually clicked. Using JQuery/Javascript to attach functions to html elements, rather than embedding them directly inside the element is definitely preferred, and is referred to as unobtrusive javascript. If you continue with ajaxifying more of your page, you will want to look into JQuery's live and/or delegate functions. Note that there are plenty of things that can be changed once you start looking toward performance and/or best practices. The above should get you going though. I hope I haven't made too many assumptions on your current level of familiarity with ASP.Net MVC (like controllers and posting to controllers) but by all means, ask if you need further help.