I have a HTML & javascript custom made attribute that will show a popup containing message when a button is clicked.
Button to click :
<a data-deploy-menu="menu-sheet-tutorial-1" href="#">Tap Here to open</a>
The sheet/popup that opens :
<div id="menu-sheet-tutorial-1" class="menu-wrapper">
<div class="content">
<h4>Hello, I'm action sheet!</h4>
Close
</div>
</div>
The data-deploy-menu="menu-sheet-tutorial-1" is what firing the event to open the sheet.
And, this is what happens when the button is clicked in javascript.
$('a[data-deploy-menu]').on( "click", function(){
var menu_ident = $(this).data('deploy-menu');
$('#'+menu_ident).addClass('active-menu');
$('.fade-bg').addClass('active-fade'));
});
And, this is what happens when the close button is clicked
$('.close-menu').on('click', function(){
$('.menu-wrapper').removeClass('active-menu'));
$('.fade-bg').removeClass('active-fade'));
});
The problem i'm facing is that I'm not able to fire this event without a button click.
So, using angularJS, I want to fire this sheet automatically when the form is submitted or when a particular condition is true.
AngularJS has a directive calls ngSubmit who could be provided with an expression like a function. Here is te documentation:
https://docs.angularjs.org/api/ng/directive/ngSubmit
Related
I'm attempting to intercept a JavaScript event, and preventDefault, to display a warning modal. If the user chooses to accept the warning, then they click 'Continue' and carry on doing what they were doing. There are multiple possible events that this could occur for though, so I thought the best way to handle it would be to just attach the current event to the 'Continue' button.
This is the code I have so far:
$(document).on('click', 'nav.pagination a', function(e) {
e.preventDefault;
var checkedBoxes = $('.checkbox-pagination-warning:checked');
if(checkedBoxes.length > 0) {
$('.checked-box-warning-modal').modal("open");
// This is where I would attach the event to this button:
//
// $('.checked-box-warning-modal a.continue')
} else {
$(this).unbind("click");
}
})
For context, I am warning the user that there are checked checkboxes on the page before they navigate or paginate away.
Also the pagination is handled by Stimulus.
This is an example of the HTML:
<nav class="pagination">
<a href="/entities/1?signatories_page=1" class="pagination-first-page" data-action="click->entities--add-existing-signatories#onPaginate">
1
</a>
<span class="pagination-current-page">
2
</span>
</nav>
So how can I attach the event, which I ran preventDefault on, to the 'Continue' button, so that the event continues as if nothing happened?
I noticed you have an error when defining the data-action here:
<a href="/entities/1?signatories_page=1" class="pagination-first-page"click->entities--add-existing-signatories#onPaginate">
1
[update]
So I think you could prevent the paginate link action with event.preventDefault(). Then, you would trigger a global event that you would capture in a top controller. You would pass the current pagination link (event.target) to this new event that you will capture in the new controller.
Something like:
<!-- this controller will handle showing the modal when asked -->
<div data-controller="main" data-action="recheck#document->main#checkWithModal">
<!-- this is the controller that captures the click on pagination links -->
<div data-controller="pagination"></div>
</div>
----- javascript
You would use this to dispatch the event
document.dispatchEvent(new Event('recheck', {bubbles: true, detail: { existing event target here }}))
Wanna simulate a click on href element, but without redirect the page on browser. Actually without the user's knowledge. How can I achieve this?
Example:
var books = new Array();
$('p.tree_item_leaf').each(function(){
books.push($(this).find('a').attr('href'));
})
// for each book I wanna get the link and 'simulates' a click such that I can get the loaded content returned from the link in a variable
Thanks in advance!
Your remote click needs to be triggered somehow. In this example its being done by the click-this button
HTML:
<div class="myDiv" style="color: red;">Clicking this should open google even though this doesn't have an href</div>
<a class= "click-this" href="https://www.google.com">click this</a>
JS:
$(".myDiv").on("click mousedown mouseup focus blur keydown change", function(e) {
$link = $(".click-this");
console.log($link);
$(".click-this")[0].click();
});
jsFiddle: https://jsfiddle.net/0oecovtj/1/
I'm using this simple popup correctly initialized along with corresponding popupafterclose handler, wrapped appropriate in content div. It just works. -
<div id="start-activity-popup" data-role="popup">
here is popup.
<button id="start">Start</button>
<button id="cancel">Cancel</button>
</div>
But if I had to retrieve values from popup or know which button
was pressed - do I need to write another handler for each - start and cancel buttons ?
Is there a better way ?
You can just write one handler:
$("#start-activity-popup button").click(function() {
var clicked = this.id; //this is the id of the clicked button
//do stuff
});
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.
I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.
May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.