We Keep Coding

Issue with slideIn/Out menu

I have been working on this menu plugin, and its working fine, however there is one problem I've noticed, please see this JSFiddle Demo
When menu is opened, I have added a close button (x) on the top right corner of the menu, when I click on close its sliding to left and hiding but when I click on menu again its not opening but if you click once again it works perfectly.
Can somebody please guide how to make my custom close icon working perfectly, as its doing with outside menu click?
I found that on close click, its removing a class and adding inline css of translate3D which I have done same in my jquery, but no luck
Here is my close jQuery function
$(document).ready(function(){
$('.nav-close').click(function(){
$("#mp-pusher").removeClass('mp-pushed').css("transform","translate3d(0px, 0px, 0px)");
$(".mp-level").removeClass('mp-level-open');
});
});

What you want to do is keep a reference to the menu so you can close it in your event.
https://jsfiddle.net/ps855n8r/14/
var menuItem = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
That way in your event you can close like so :
menuItem._resetMenu();
Don't try to close it manually using the DOM, which means your even function becomes like this :
$(document).ready(function(){
$('.nav-close').click(function(el){
menuItem._resetMenu();
});
});
Also helpful for calling other methods on the mlPushMenu object elsewhere. In the above example; menuItem is your reference.

jQuery Widgets not working on tabs loaded by Ajax

I have an application that has many tabs, apart from the first tab - all others are loaded via Ajax.
The tab content all loads correctly.
However if I have a jQuery widget in a (ajax loaded) tab, the widget does not work.
I attempted to use:
$(document).on('click', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
But the datepicker does not display.
Confusingly (for me):
$(document).on('click', '#dateOfBirth', function() {
alert('This works properly');
});
Works properly! The alert displays when the date field is "clicked".
And of course if I have a simple page without the tabs / ajax content - the datepicker displays as expected when the date field is clicked.
I am using the jQuery 2.2.0 and
jQuery UI 1.12.0 with the "redmond" theme / CSS.
The view html follows the following;
<div class = "emr-bodycontent">
<div id="tabs">
<ul>
<li>Patient Details</li>
<li>Carers</li>
...
...
Here is the JS used for the TABS;
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"There seems to be an error retrieving the data you requested."
);
});
}
});

Instead of using click use focus and datepicker will work . Assumes that the element id is valid and is an input
$(document).on('focus', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
For any other plugins inside tabs you can use load callback of tabs ... see api docs
DEMO

I will suggest you to setup the datepicker() after Ajax content loaded, do not use click event. Because the initiate call of $('#dateOfBirth').datepicker() is to set up the datepicker, you may need to click again to trigger the calendar.
Or, you can try to manually trigger it right after set.
$(document).on('click', '#dateOfBirth', function() {
$(this).datepicker();
$(this).datepicker("show");
});

Firstly, thanks very much for the answers / comments.
Both answers work successfully.
Kieran's worked straight away as it was manually triggering the event.
Charlie's worked, too - but only after I clicked several times.
Though after fixing my underlying issue, Charlie's worked straight away, too.
The underlying issue was indeed a duplicate ID.
(thanks for the prompt to check, Charlie).
Because the TAB contents are their own individual forms / pages - I only ever worried about making ID's unique within individual TABs.
After ensuring that ALL IDs are unique, the widget works correctly / as expected.

Can't Add Event Handler Into Button With ID

I've got a jQuery plugin installed on a website I'm working on. The plugin in question adds a modal dialogue to the website when a certain image is clicked. I wanted to add a second button to this modal, to close the window in addition to the close button that already does so, and I managed to do this by creating a div for the button in the HTML. Note that the content for the modal is set in the plugin's content variable, so looks like this:
content: '<p>Want to get in touch? Drop us an email at:</p><br/>
<p><input type="text" id="inset" name="inset"
value="shoesfromlastnight#gmail.com"
onClick="javascript:this.focus();this.select();"
readonly="readonly" size="30"/></p> <br/>
<span id="appendto"><p>We look forward to hearing from you!</p></span>
<div type="button" id="crmbutton">Okay</div>'
...where #crmbutton is the div I want to use as a button. For some reason, though, I'm having trouble with setting the event handler to the button created there in order to make it close the modal. It sounds simple enough, but for some reason won't work when I do:
$("#crmbutton").click(function() {
this.close();
});
Although I couldn't find any documentation on it, the close() method I'm using here is the very same that is used by the plugin's own X button to close the modal. For what it's worth, here's that button's code, first to create the close button and then, using the .on method, to close the modal on click:
this.closeButton = jQuery('<div/>', {'class': 'jBox-closeButton jBox-noDrag'}).on('touchend click', function(ev) { this.isOpen && this.close({ignoreDelay: true}); }.bind(this));
I also copied everything after the .on method and applied it to my code, but wasn't successful with that either.
I also tried other approaches, like adapting the code above to create the button on the fly, and then appending or prepending it using the append/prepend methods. This worked, but only when appending to the modal's container, which always added the button outside of the container. I had no luck with appending the button after certain elements, like the #appendto - the button just wouldn't be added.
Does anyone know where I could be going wrong here? This is the first time I've worked with jQuery, and it's frustrating me to no end. Thanks!

The problem is because you're not calling the close method in the correct scope. In your eventlistener, 'this' points to the button. But in the code that you looked at, 'this' has been changed to another scope with the .bind() method.
$("#crmbutton").click(function() {
/* 'this' points to the element #crmbutton, which doesn't have a close method */
this.close();
});
The example code, look at the bottom where the .bind() method is used.
this.closeButton = jQuery(
'<div/>',
{
'class': 'jBox-closeButton jBox-noDrag'
}
).on(
'touchend click',
function(ev) {
this.isOpen && this.close({ignoreDelay: true});
}.bind(this) /* The scope is being set to another 'this' */
);
Documentation about the .bind() method

jQuery select links that don't have any JS events linked to them for PJAX to work on links only?

I have a basic shopping website built on WordPress and Woocommerce. Naturally, a lot of the buttons and links have Javascript functions preventing the default behavior of going to the link and doing something else instead. Unfortunately, if I set PJAX to select all $('a') elements, then the AJAX functions (or javascript such as even dropdown) functions would seize to work properly and PJAX would take over and refresh the page.
For example, if I would click on a Bootstrap dropdown link, it would go to the link rather than open the dropdown.
I want to know if there's a way to select elements (using jQuery) that only go to their links and have no JS events listening to them.

Try this demonstration and let me know if it works for your scenario.
HTML:
Link 1
Link 2
Link 3
Link 4
<br>
<br>
<button id="test">Which links have no jQuery click event bound?</button>
jQuery:
$(function() {
// Assign handler to links with class 'link-with-handler'
$('.link-with-handler').click(function() { alert('handled'); });
// Test function
$('#test').click(function(){
// Get all links
var links = $('a');
// Iterate through links testing each one for the event handler
$.each(links, function( index, value ) {
var ev = $._data(value, 'events');
if (!ev || !ev.click) {
alert(value.innerText + ' has no jQuery click handler bound to it.');
}
});
});
});
http://jsfiddle.net/goq7a6bn/2/

JQuery... change hover state on focus & Limit keyboard navigation tab area

I'm using a JQgrid in one of my projects (JFiddle LINK). and would like
1.) the save & cancel button to highlight when a user tabs to it (same as on mouse over). Found this post but can't seem to get it working
FIX: based on the answer provided by saratis
after
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
add the following
<script type="text/javascript">
$(document).delegate('a', 'focus', function (event) {
$(this).removeClass('ui-state-hover'); //Remove previous hightlights
$(this).addClass('ui-state-hover');
});
$(document).delegate('a', 'focusout', function (event) {
$(this).removeClass('ui-state-hover'); //Remove previous hightlights
});
</script>
2.) When the user tabs between the fields on the add modal, would it be possible to keep the focus on the modal. eg that when tabbing, the focus only loops between the controls on the modal itself
3.) I'm experiencing a weird issue with the pager not being centered, and not sure what the fix is. I see that an attribute of 106px gets added to pager_left td which is causing it, gut its a generated value, so i'm not sure how to override/disable it
FIX: #pager_left{width:30%!important;}
Would it be possible to achieve any of this?
Thank you

First:
$('.yourInput').bind("mouseenter focus mouseleave",
function(event) {
$('.highlight').removeClass('highlight'); //Remove previous hightlights
$(this).addClass('highlight');
});
I have tried to add this to the fiddle, but I think the modal dialog is written dynamically to the DOM, so the binding should occur after its being placed. And I do not know how to integrate that. Sorry.
For the second part, can be done, but it would be easier when you povided a sample, or even better, as JSDFiddle. -> Looking at it now, I wouldn't know. I'm sure a JS jQuery Guru good do it, but this is too much for me. Again sorry.
Third:
Some good news, don't know the cause, but: #pager_left{width:150px!important;} does the trick.
Sorry I couldn't help more.

Use jQuery to check if any of the modal fields already have focus. If they do, trigger a function on keyup() that checks whether the tab button was pressed (its keycode is 9).
Use this to limit the tab indexing to your form.