I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
Related
Hello Folks both my buttons work when used individually, but when I use button A to click button B using Java script it does not work. I know button A works becuase the alert I added to the script pops up. But it won't invoke button B. I have tried it using classes and ID. Help Appriciated.
//Button A
<a class="send-btn"> <?php echo $buttontext?> </a>
//Button B
<a id="open-modal" class="openmodal-btn" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal">
// I have tried adding these in the js Script during testing.
$("#openmodal-btn").click();
$('.openmodal-btn').click();
<script>
$(document).ready(function(){
$('.send-btn').click(function(event){
$('.openmodal-btn').trigger('click');
});
});
</script>
Removing this link below which stood above all my Scripts at the bottom of the page resolved this issue as I had the same link duplicated in the page header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And thanks to Swati for helping with troubleshooting!
I am in the process of learning jQuery and JS, so I apologize if this is a stupid, easy question.
I am working with a tour plugin called intro.js that adds hints to a web page (bootstrap page). I got the intro.js hints working, however I need to be able to show and hide all of the hints by toggling one button. The way the plugin currently works, you show the hints by clicking a button, then you have to manually click on each hint icon to view the tooltip, then click a button on the tooltip to hide the hint icon. The web pages could have several hints displayed (anywhere from 10-15) and users may not want to see what all hints are, as they may want to just see what 1 or 2 are then close all the hints - so I want to be able to toggle all of them on/off with one button.
According to the plugin API (view it here: https://introjs.com/docs/hints/api/), the hints are added when the button is clicked using this function: introJs.addHints(). You are supposed to be able to hide all of the hints using this function: introJs.hideHints().
So, how can I toggle both of these functions with one button?
Also, another issue I am having is if a user does not close all of the hint icons and they open a new page, the hint icons are still visible. If I refresh the page, they disappear. Related to this, if someone opens the hints and closes them, but decides to reopen the hints again, they do not open unless the page is refreshed. The API documentation has a function called: introJs.refresh() that says it refreshes and rearranges the hints. I think this is what I need to clear the existing hints (but I could be wrong). How can I clear/refresh the hints when the hints are closed so users can reopen the hints if needed, without refreshing - and so the hints disappear if a new page is opened and some hints were not closed.
Please help me with these questions and make a newbie's Christmas/holiday even better!!!
Here is a jsfiddle with hints added to a bootstrap modal. The Show Hints link is what I need to toggle on/off: http://jsfiddle.net/beaver71/fc0rkakn/
Thank you to everyone reading - and Happy Holidays to all of you.
Sample HTML:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The API allows introJs to be commanded and for callbacks to be attached to various internal events, however it doesn't provide for inspection of state (in particular whether or not a hint is currently showing).
To achieve the toggle function, you will need to manage a state variable of your own.
Something like this ...
jQuery(function($) {
var hintShowing = false; // a variable by which to track the state of introJs.
introJs("#targetElment");
$("#myToggleButton").on('click', function() {
if(hintShowing) {
introJs.hideHints();
hintShowing = false;
} else {
introJs.showHints();
hintShowing = true;
}
});
function setShowing() {
hintShowing = true;
}
function resetShowing() {
hintShowing = false;
}
introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);
// add hints and set options here
});
That should work, at least to a certain extent. It depends on whether onchange fires when the initial hint is shown. If not, setShowing() will also need to be called manually (from your own code when the hint sequence starts) or maybe just initialise var hintShowing = true;
I have a div that produce search results on clicking search button. This is the view
and this is html div of it
<div class="bestil-menu__btn">
<a onclick="Searchcontrol(1)" class="btn btn_blue">Ændre datoeeller antal personer</a>
</div>
When I press the blue button
<div class="dins-searhc-luk" #Html.Raw(view2)>
<a id="btnclose" class="dinS-bluebuttonC" href="javascript:;">Luk</a>
</div>
it opens the search control and perform searches. I want to close it on pressing Luk anchor in below div to come as it was before. Please help me how to implement it into it. Thank you.
You can try something like
$('#btnclose').on('click', function(){
$(this).parent('div.dins-searhc-luk').hide();
});
I have a strange problem with the X-editable plugin for twitter-bootstrap.
What i am trying to do is trigger the 'Edit' popup screen on a button that is on the screen.
The problem is that the 'popup' div only stays on the DOM for less then a second.
I will put some example code below. I am not sure if this has something todo with the plugin/ or bootstrap.
$(document).ready(function() {
$('#questionDescription').editable();
$('.descriptionEditButton').on('click', function(e) {
$('#questionDescription').editable('toggle');
});
});
<a href="#" id="questionDescription" data-type="textarea" data-pk="1" data-placeholder="stackOVerflowRocks" data-title="Stack" style="display: inline;">
foo bar
</a>
<i class="btn icon-edit descriptionEditButton pull-right"></i>
What makes it even stranger is when i run the 'toggle' in chrome console the popup is shown.
Thank you!
Have you tried setting toggle to manual? Something like :
$('#questionDescription').editable(
toggle: 'manual'
);
I am very new to this so apologise in advance for offending/upsetting anyone.
I have built my first website (http://www.goodgollyexeter.co.uk). There is a shopping cart on my website (I'm using Plum shop which is working great). I want the user to be able to click the "View Cart" button (in the top right hand corner on the website which has id="viewcart") and then for the contents of their cart to be displayed in a lightbox style window. The contents of their cart is contained within a <div> which has id="cart_holder".
To try and achieve the above I am using lightbox_me but I can't get it to work off of the "View Cart" button click event. If I remove the button click event coding then lightbox_me works and displays the contents of the cart but, as there is no event to trigger it, it opens as soon as the page loads. For now I have removed the button click event coding so if you were to visit the website you should see lightbox_me working (but on page load rather then a button click event).
I have tried to pick out the relevant code and show it below. This is the code that I have tried in order to get lightbox_me to work off of the "View Cart" button click event (adapted from lightbox_me website example) but this does not work:
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox_me.js"></script>
</head>
<body>
<button id="viewcart" class="viewcart">View Cart</button>
<div id="cart_holder">
<h1> Your Cart </h1>
<p>Currently your cart contains the following items:</p>
<div id="cart"></div>
<label>Items:</label> <span class="cart-quantity">0</span><br>
<label>Sub-Total:</label> <span class="cart-subtotal">£0.00</span><br>
<label>Shipping:</label> <span class="cart-shipping">£0.00</span><br>
<label>Total:</label> <span class="cart-total">£0.00</span><br>
<br>
Please click below to pay using a credit or debit card or via Paypal:
<br>
<br>
<button class="paypal">Checkout</input>
</div>
<script>
$("#viewcart").click(function() {
$("#cart_holder").lightbox_me();
});
</script>
</body>
When I add the above code lightbox_me stops working which is really annoying as if I remove the View Cart button click event coding so it reads like this:
<script>
$("#cart_holder").lightbox_me();
</script>
then lightbox_me works (but only on page load and not on button click event).
I don't know if it is of any use but when I inspected the <div id="cart_holder"> element in Chrome I did notice the following error message:
Uncaught TypeError: Object [object Object] has no method 'lightbox_me'
Due to my ignorance I'm afraid this means very little to me. If anyone could tell me what I am doing wrong and how to get lightbox_me to work from the "View Cart" button click event I would be very grateful indeed. Please let me know if I can explain anything better or post more code or anything else to better assist. Thanks Alex
Check your last closing button tag for checkout:
<button class="paypal">Checkout</input> <!-- should this close with button and not input? -->
Can you wrap your jquery like this?
;(function($){ // add
$(document).ready(function(){
$("#viewcart").button().click(function() {
$("#cart_holder").lightbox_me();
});
});
})(jQuery); // add