I use the following code to collapse/show divs in my content page:
$(document).ready(function() {
// Hookup event handlers and execute HTML DOM-related code
$('#nameHyperLink').click(function() {
var div = $('#nameDiv');
var link = $('#nameHyperLink');
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show('100');
}
else {
link.text('Show Data');
div.hide('100');
}
});
});
When I include the jquery UI script file, this code no longer works. The text for the hyperlink changes, but the div is not actually displayed.
Why is this?
I think what you're seeing here is a result of the removal/change of some code in jQuery UI 1.8. Previously, and still in core, any unrecognized string passed to hide/show defaults to the "normal" speed.
For more details, you can see a similar question here: jQuery 1.4.2 - is $("#foo").hide("normal") broken or am I crazy?
Related
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
I'd like to use instance method for testing if jQuery UI Dialog widget has been initialized or not. Regarding to API, this is possible, but it doesn't work for me:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'instance'
demo: http://jsfiddle.net/mDbV7/
UPDATE:
This was a mistake in the documentation, instance method will be available from version 1.11.0, see this issue.
The latest version of jQuery UI no longer allows you to call UI methods on items that are not initialized yet. I've just been wrapping them in an if statement, like:
if ($("#divToBeDialoged").hasClass('ui-dialog-content')) {
// do whatever
} else {
// it is not initialized yet
}
Edit: changed class name, thanks #dmnc
It is also a good habit to empty and destroy dialogs once you're done using them.
I usually use this code in the close event of each dialog
$("#myDialog").dialog({
// other options
close: function(event, ui) {
$(this).empty().dialog('destroy');
}
}
That'd be my advice, rather than asking every time if a dialog exists in an instance make sure that each dialog cleans up after itself.
You can use:
if($('#id').is(':ui-dialog')) {
}
or
var obj = $('<div>test</div>').dialog();
if (obj.is(':ui-dialog')) {
alert('I\'m a dialog')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
If you are making that dialog from an existing id in your html code, like this example:
$('#main').dialog({});
Notice that dialog() adds the class ui-dialog in a <div> parent element generated for it to work. At the #main element, the classes added by dialog() are: ui-dialog-content and ui-widget-content (in jquery-ui-1.9.2). So, in this case, following the example from #jbabey, you can check the existing dialog doing:
if ($('#main').hasClass('ui-dialog-content')) {
// do whatever
}
if ($('#update').is(':data(dialog)'))
{
//#update has dialog
}
else
{
//#update does't have dialog
}
For jQuery UI - v1.10.3
if($( "#myDialog" ).is(':data(uiDialog)')){//is(':data(dialog)') does not work
//Dialog exist
}
another way is
$('.element').is(':data(dialog)');
$("[aria-describedby="IDNAME"]").remove(); - if you want to remove same dialog, which makes as html code DATA
$("[aria-describedby="IDNAME"]") - element of Dialog with additional ID NAME. You can detect data by
($("[aria-describedby="IDNAME"]").lenght > 0)
or remove all dialog with this ID for prevent duplicate window.
I have a link which downloads a file on click. I wrote a function on onclick event of that link tag to do some ajax operations when it is clicked.
But the function is not getting called when we click on that link.
However, if i debug the code or place a alert box in that js function, it just works fine. what will be the cause for this?
My code:
HTML:
<a href="DllLocation.dll" onclick=fntrackdownloads() ></a>
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
}
Working code:
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
alert("something");
}
Any help will be appreciated.
note: the anchor tag is generated dynamically from code behind and
written to dom. i am unaware of what dll location will come in href
attribute.
$(document).("click", "a.putaclass", function(e) {
//what to do on the click
var $a=$(this);
$.get(pathtoserver,function(d) {
alert('data received:'+d);
})
return false; //or e.preventDefault
});
It's probably because the default anchor behaviour interrupts your AJAX response.
Try to put return false at the end of the function that's called on click and see what happens.
I think you are missing the "quotes" here:
//--------------------------------^------------------^
or more in jQuery way:
$('a[href="DllLocation.dll"]').click(function(){
fntrackdownloads();
});
and
$('a[href="DllLocation.dll"]').click(fntrackdownloads);
);
I just found out that after upgrading to Meteor 0.5.2 (from 0.5) event handling for key events ('keypress', 'keydown', keyup') stopped working for me. Other events like ('click' & 'blur') work just fine.
Even in sample apps the code like this doesn't do anything:
Template.someTemplate.events = {
'keydown' : function(e) {
console.log(e);
}
};
The interesting thing is that this code does work (function fires) for keypresses in I'm typing inside an input type="text" or a textarea.
But elsewhere - nothing happens.
I'm testing on the latest Crome in Ubuntu 12.10.
Has anybody else experienced the issue?
Thanks,
George
The keydown event works for me for html that is editable. Input fields or contenteditable tags fire the keydown event.
But if you're asking how to handle keydown events on the body, this thread might help:
You can take a look at this thread: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/uHy--xIGH8o.
Basically, for now, you can attach an event handler to the body element directly. In the example in the above link, he waits until the template is rendered, and then used jQuery to attach the handler:
Template.myTemplate.rendered = function() {
// Assuming you're using jQuery
$('body').on('keydown',function() {
console.log('key pressed');
});
}
The Meteor team is apparently going to include better support for attaching body level events soon.
You could have simply enclosed
$('body').on('keydown',function() {
console.log('key pressed');
});
in meteor.startup function
I have a JavaScript method that I need to run on one of my pages, in particular, the onresize event.
However, I don't see how I can set that event from my content page. I wish I could just put it on my master page, but I don't have the need for the method to be called on all pages that use that master page.
Any help would be appreciated.
Place the following in your content page:
<script type="text/javascript">
// here is a cross-browser compatible way of connecting
// handlers to events, in case you don't have one
function attachEventHandler(element, eventToHandle, eventHandler) {
if(element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if(element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandler(window, "onresize", function() {
// the code you want to run when the browser is resized
});
</script>
That code should give you the basic idea of what you need to do. Hopefully you are using a library that already has code to help you write up event handlers and such.
I had the same problem and have come across this post :
IE Resize Bug Revisited
The above code works but IE has a problem where the onresize is triggered when the body tag changes shape. This blog gives an alternate method which works well
How about use code like the following in your Content Page (C#)?
Page.ClientScript.RegisterStartupScript(this.GetType(), "resizeMyPage", "window.onresize=function(){ resizeMyPage();}", true);
Thus, you could have a resizeMyPage function defined somewhere in the Javascript and it would be run whenever the browser is resized!