I have used the below script to open a popup window of woocommerce product.
I am looking forward to close this window automatically as I will click on "Add to Cart" Button.
Can someone help me to achieve this task, please?
<script>// <![CDATA[
function pop1(){
window.open(
'https://www.veggietiffin.co.uk/product/flextiffin-plan'
,'popwin'
,'width=640
, height=480'
);
}
// ]]></script>
<p>
Flex Tiffin Day 1
</p>
Here is a code just change the button class to the class on your site have fun
<script>
function pop1() {
//wrapping the popup inside a variable
var popup = window.open('https://www.veggietiffin.co.uk/product/flextiffin-plan', 'popwin', 'width=640, height=480');
//add event listner to add to cart button
document.getElementsByClassName('your class here').addEventListener("click", function() {
window.close(popup);
});
}
</script>
Related
I need disable the browser back button after the window alert.
in page1.aspx i put like this
**$(document).ready(function () {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function (evt) { if (evt.persisted) disableBack() }
});**
After in Page2.aspx
I put alert message when button click.once close the alert message i press the back button.
same alert show when each click of back button.
(How to prevent the alert message when back button press)
Try This:
jQuery(document).ready(function(){history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};})
I have a page where the user can enter data and on submit, it shows up on a gridview right below it.
How do I prevent double click. I understand I can disable the button but that would defeat the purpose as then, the user cannot enter more information without refreshing the page.
I add a class to all elements I dont want the ability to add a double click
$('.disableDoubleClick').dblclick(function(e){
e.preventDefault();
})
this question has been answered many times, just google disabling double clicking in asp.net
You could always disable the button and then use setTimeout to re-enable the button after second or two: http://jsfiddle.net/BJKy4/
$("#btn").click(function () {
var button = $(this);
button.prop('disabled', true);
setTimeout(function () {
button.prop('disabled', false);
}, 1000);
});
I have to open a modal popup on link click .In that popup i have to take some user details and on submit some server side code has to be executed and new popup is to be opened.But problem is that on button click new popup opens and as soon as server side code gets executed second popup closes.
Expand your question as much as you it helps in understanding your problem
Anyways I guess your problem is that the page gets post back... You need to open your second Modal Popup from Server Side..
Here is a nice example of it: http://www.codeproject.com/Tips/215040/ModalPopupExtender-from-Server-Side-Code
write this in your codebehid button click event
popupid.Hide(); //hide the popup which you dont want to show.
//it will close when you click on submit button
popupid1.show();
write this in javascript
<script type="text/javascript">
var ShowVerifyInventory = '<%=popup_verifyInventory.ClientID %>';
function ShowPopUp_verifyInventory() {
$find(ShowVerifyInventory).show();
}
var HideVerifyInventory = '<%=popup_verifyInventory.ClientID %>';
function HidePopUp_verifyInventory() {
$find(HideVerifyInventory).hide();
}
</script>
I have a bootstrap page that lists items in a table. Each item has its own delete link that launches the modal.
<a href="#modalDel" data-idtodelete="<?php echo $value->id; ?>" class="deletelink">
Delete this item
</a>
...
jQuery("a.deletelink").click(function(event){
var id2del = $(this).data('idtodelete');
jQuery("#myModalLabel").html("Delete item: "+id2del); //works great
jQuery('#modalDel').modal('show');
});
I can pass data to the modal easily, but now I have to make the main button in modal to reflect the dynamic url and call to it (only) when this button is clicked
Any ideas? Thanks
PS: cannot use the hidden event for this, because modal can also be hidden with the cancel button. Also, modal should be closed after/before calling the dyn. delete url of main button
I'll hazard a guess at this. Haven't tested because I'm not really sure about the setup.
var $ = jQuery; // using as a shortcut
$('#modalDel').on('show',
function() {
// Composes delete URL with arguments
var dynUrl = composeUrl(args);
// assuming the modal button is an anchor element
$('#modalButton').attr('href', dynUrl);
// Also closes the modal box after being clicked
$('#modalButton').on('click',
function(e) {
$('#modalDel').modal('hide');
});
});
I use a ASP.NET Menu control with Orientation=Horizontal. It is kind of irritating that the popout menus appear on mouseover, which causes it to show by accident if you move the mouse over the menu when you want to click on something right below the menu. Then the menu popout hides the element you actually wanted to click on!
Is it possible to change the functionality so that the popout requires a mouse click instead of mouseover?
Well, I found a solution myself (kind of a hack...).
This solution requires use of AJAX to capture the menu item onclick postback event, so it can be picked up client side in javascript before doing the actual postback when you click the menu item.
First, I override these functions that is defined by the Menu control
to ignore the menu popout in the mouseover event:
var activeMenuItem = null;
function Menu_HoverStatic(item) {
// Register the active item to be able to access it from AJAX
// initialize postback event
activeMenuItem = item
// Apply the style formatting on mouseover (colors etc).
// This was also called in the original Menu_HoverStatic function.
Menu_HoverRoot(item);
}
function Menu_Unhover(item) {
activeMenuItem = null; // This is the only difference to the original
var node = (item.tagName.toLowerCase() == "td") ?
item:
item.cells[0];
var nodeTable = WebForm_GetElementByTagName(node, "table");
if (nodeTable.hoverClass) {
WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass);
}
node = nodeTable.rows[0].cells[0].childNodes[0];
if (node.hoverHyperLinkClass) {
WebForm_RemoveClassName(node, node.hoverHyperLinkClass);
}
Menu_Collapse(node);
}
// Then I added a renamed copy of the original `Menu_HoverStatic` function:
function Menu_ClickStatic() {
// Pick up the active menu item that is set in the
// overridden Menu_HoverStatic function.
// In the original, the item was input parameter.
var item = activeMenuItem;
// The rest is identical to the original Menu_HoverStatic.
var node = Menu_HoverRoot(item);
var data = Menu_GetData(item);
if (!data) return;
__disappearAfter = data.disappearAfter;
Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
}
Then I snap up the onclick postback event in AJAX that is triggered by the menu. This must be done to cancel the onclick postback and display the menu popout instead.
// Get the Page Request Manager that provides all the .NET
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Register postback event for asyncronous AJAX postbacks
if (prm) prm.add_initializeRequest(InitializePostback);
function InitializePostback(sender, args) {
var element = args.get_postBackElement();
//Check if the postback element is the menu
if (element.id == 'myMenu') {
// Name of the menu element that triggered is the postback argument
var postbackArguments = document.getElementById('__EVENTARGUMENT');
if (postbackArguments)
// Check on the menu item name to pick up only the menu items that shall
// trigger the popout (not the items that does an actual command).
if (postbackArguments.value == 'MenuTopItem1'
|| postbackArguments.value == 'MenuTopItem2'
|| postbackArguments.value == 'MenuTopItem3') {
// Abort and cancel the postback
prm.abortPostBack();
args.set_cancel(true);
Menu_ClickStatic(); // Call my own copy of the original function
return;
}
}
}
Note:
I found out the details about these functions by using the script viewer in Firebug.
The soluton provided above doesn't work in everone's case. One can also try this out, it worked in my solution-
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
});
3 Steps:
Stop the current hovering effects:
On page load (or on ready), write following line: $('#Menu1').find('ul .level2').css('display','none');
Once you do that, it'll stop the hovering effect of that menu. But once you do that, then you would only be able to open the submenu by making it display block, so for that I wrote following lines, onclick of an image inside the menu: $('#Menu1').find('ul .level2').css('display','block');
Open the menu on click of an element: I don't think need to explain it. Just make menu display block on click of the identified element.
Close the opened menu: 2 ways to do it: First; Use property Disapperafter as below:
Second: Write below code to close it onclick of anywhere else on the screen:
$('body').click(function(evnt) {
if($(evnt.target).parents('table#menu').length == 0)
{
$('#MenuInvitePatient').find('ul .level2').css('display','none');
return;
}
else
{
return;
}
});