I am trying to add an event listener to the keyup event for some text
inputs that I am creating dynamically. I have no problems getting it
to work in Firefox, but IE just ignores them. I have created a few
functions to aid in making this process work semi-cross-browser. (I
develop in FF, but everyone who uses it will be using IE6.) ....
I've noticed I can bind and trigger events on objects that are not DOM elements. However this appears to be an undocumented feature, as the docs explicitly refer to the "DOM element" when discussing things like event.currentTarget. Is it safe to depend on code like the example below working in future jQuery releases?
var thing = $({hello: "world"});
thing.bind('bounce', function(e) {
alert('Boing! '+e.currentTarget.hello);
});
thing.trigger('bounce');
I have kind of a complicated setup, and I was hoping to bounce this off some one's head who's more experienced with JavaScript.Assuming I have the following HTML markup:
<div id="one-root">
ONE
<div id="one">
[code]....
I have a set of div elements cached inside var divs = $('#myDivs'). Suppose another div comes along that i want to add (push) to the group. is there a simple method for doing this without selecting ones already in the group for a second time?
View 3 Replies View RelatedI'm making some jQuery UI elements, and once an element is created, I want to add some custom functions and variables - I don't want to clutter up other jQuery objects by putting the functions in all jQuery objects, and obviously, the variables need to be different between different objects. However, the issue is, when I re-acquire the item, I won't have access to the variable any more.
That was probably confusing. Another way of putting it:
(function($){
var _MyUI_id=0;
jQuery.fn.MyUICreate = function(opts){
this.each(function(){
var obj=$(this)
//... code to turn the object into a MyUI object omitted to be concise
obj.MyUI_id = _MyUI_id;
_MyUI_id++;
}}
})(jQuery)
//now, create one
$('#some_div').MyUICreate({});
//The desired effect would be to give me the id in #14, instead I get 'undefined'.
alert($('#some_div').MyUI_id);
My 'solution', is to create an object variable in jQuery.fn called 'Collections'. It's indexes are the names of the new types, and each contains an object, the keys of which are the IDs of the UI elements that are converted to the type, and the values the jQueries objects. This is not only hackish, but it has a LOT of potential bugs. The code for this would look like:
This is in the 'create' function, at the end.
jQuery.fn.Collections.MyUI[obj.attr('id')]=obj;
This is outside of the create function, but within the (function($){...}) scope.
//jQuery.fn.Collections is set to {} in another file.
jQuery.fn.Collections.MyUI={};
jQuery.fn.GetMyUI(id){
return jQuery.fn.Collections.MyUI(id);
}
This will allow the first block of code to work as desired, but it inserts a whole new set of bugs. What are the common ways to achieve what I am trying to do?
I hava sortable list using jQuery UI Sortable. When the items are re-ordered the new order is written to the database. All working fine � however, if I use jquery to add a new item ....
[Code]..
I've got an input with a value. The input is called 'command2' and I want to send it's value to the 'rover2' object (although I don't know if that object exists yet). I test and say if(rover2){... and if not then I create the object/if so then I insert the value.Question is: I want to do:Code JavaScript:var rover2 = new Rover();but I want to pass the name of the new object by association, so in effect:Code JavaScript:var "rover"+i = new Rover();How would you do that? So that the objects and their names are generated dynamically (or [perhaps a better explanation] so that the string value of a variable can be used as the name of new variable/object)?PS Bonus marks: If I hold HTML fragments as an object and those fragments include inputs, is the value of the input collected as well? i.e. if I have
Code HTML4Strict:
<fieldset>
<input id="foo" type="text" />
[code]....
I have the following object:
var wDefaults = {
"skin":1,
"pagewidth":"960px",
"c1col":[
{"wid":"w001","pcol":0,"wpos":0,"wclosed":"false","wcollapsed":"true"}
],
"c3col":[
{"wid":"w002","pcol":0,"wpos":0,"wclosed":"false","wcollapsed":"false"},
{"wid":"w003","pcol":0,"wpos":1,"wclosed":"false","wcollapsed":"false"},
{"wid":"w004","pcol":0,"wpos":2,"wclosed":"false","wcollapsed":"false"},
{"wid":"w005","pcol":1,"wpos":0,"wclosed":"false","wcollapsed":"false"},
{"wid":"w006","pcol":1,"wpos":1,"wclosed":"false","wcollapsed":"false"},
{"wid":"w007","pcol":1,"wpos":2,"wclosed":"false","wcollapsed":"false"},
{"wid":"w008","pcol":1,"wpos":3,"wclosed":"false","wcollapsed":"false"},
{"wid":"w009","pcol":2,"wpos":0,"wclosed":"false","wcollapsed":"false"},
{"wid":"w010","pcol":2,"wpos":1,"wclosed":"false","wcollapsed":"false"}, {"wid":"w011","pcol":2,"wpos":2,"wclosed":"false","wcollapsed":"false"}
]}
First, how do I access a single value? I've tried some of the examples I saw on the forum, but nothing happened. The alert did not fire:
alert(wDefaults.c3col[0].wid); //first try
alert(wDefaults.c3col.0.wid); //second try
var obj = wDefaults.c3col[0]; //third try
alert(obj.wid);
The nested objects are the properties for widgets within a portal. After the user moves around the widgets, I need to update the object, putting the widgets in a different order within c3col and updating the values saved in pcol, wpos, wclosed, & wcollapsed. I also may need to add or delete an object, for example, delete wid=w003 and add a new one called w012.
My logic would be:
for each widget on the page
found = false
find the object in c3col where wid == x and update its other values
. set found = true
if found == false then add a new object to c3col with x & its properties
end for
for each object in c3col
if that wid isn't found in the list of widgets on the page, delete it from c3col
end for
sort the objects under c3col by pcol and then wpos
The red parts are the ones I'm unclear about how to do it. My basic questions are:
(1) How do you access a single nested object?
(an object within c3col, find and change its values)
(2) How do you add a new nested object to an existing object?
(add a new object to c3col)
(3) How do you delete an nested object?
(remove an object from c3col)
(4) How do you sort nested objects?
(sort the objects in c3col by pcol and wpos)
Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this...
[Code]....
I have part of a script like so:
var audioPlaylist = new Playlist("2", [
{
mp3:"audio/eight-day-week.m4a"
[code]....
I am looking to add a calendar to my website in order to list events for each day on the calendar you click on. For example, the link below shows a calendar on the left, that when you click on a day it lists all the events that day. I have done a few searches, but am not sure if I can find a calendar that acts like this... Calendar Example [URL].
View 5 Replies View Relatedwas wondering when you create an input element, i.e.
var someInput = createElement('input');
How do you add an event to an input item?
like a onKeyUp event.
I'd like to do something like this: After the page is loaded I have some forms with submit buttons. The buttons have a class called "open". By clicking any of these buttons the script is using AJAX to take some data from database and add some HTML to the document. This part of generated HTML has also buttons with a class "open". By clicking any of the new buttons script should do what it does with the old ones. The problem is I have no idea how to "refresh" a click function. After generating HTML it "sees" only the old buttons.
Here's some code:
$(document).ready(function(){
$(".open").click(function(){
var idVal = $(this).parent().parent().find("#PlaceId").val();
if($("#admin_places_"+idVal).html()=='')
[Code].....
function get_states(country_element,state_element){
countryElementIDHash = "#" + country_element;
stateElementIDHash = "#" + state_element;
$(stateElementIDHash).empty();
var geonameId = $(countryElementIDHash).val();
$.getJSON("[URL]",
{ 'geonameId': geonameId },
function(data) {
if (data.geonames == null) alert('No regions');
$.each(data.geonames, function(i,item){
$(stateElementIDHash).append($('<option>' + item.name + '</option>'));
});
});
}
I'm writing a function to populate a SELECT based on the select value of another SELECT. I can't figure out why this isn't working. It has something to do with not having "'s in my $(). for example: If this function wasn't dynamic.
The code:
$(countryElementIDHash).val(); could simply be
$("#country option:selected").val();
How can I pass dynamically assigned names into a $() ?
I'm having a hard time getting this code to work...the onMouseOver and
onMouseOut events don't seem to be firing in IE or Mozilla...
var imgf = document.createElement("img");
imgf.src = "../files/img.gif";
imgf.style.cursor = "pointer";
imgf.style.border = "1px solid blue";
imgf.title = "Date selector";
// below is not working at all......
imgf.
imgf.
I'm trying to add a <div> element with an event class="but"like the below mentiond:
$("body").append("<div><div id="effect3"><h3>Toggle3</h3></div><a href="#" id="button3">Run Effect</a></div>");
$("#button3").addClass("but");
[code]....
I'm new to js and jquery. I need to get access to select forms which are named dynamically. I have no problem when named statically, so this works fine:
[Code]...
This is my first time here so I hope I'm not posting to the wrong forum. If this has been answered before, please direct me to the corrent post.I've created several dynamic checkboxes with with following code:
<code>
var pnl = document.getElementById("pnlSalesPeople");
for (i = 0; i < sales.length; i++)
[code]....
I'm having trouble getting results on google chrome.
View 2 Replies View RelatedI'm fairly new to jQuery (1.4.4) but finding it to be an incredible library of tools. I recently scrapped my old image swapping JavaScripts for some new stuff I wrote for jQuery. It's all working in jQuery the way it was working before without jQuery. So far so good. Now I'm fiddling around with adding some jQuery animation effects and find the experience disappointing.
So I have images with an indexed id, like this...
Code:
<img id="m-0" src="/normal_0.jpg" />
<img id="m-1" src="/normal_1.jpg" />
etc.
With the following jQuery, I simply swap out the image ("m-0") on mouseover to an image called "over_0.jpg" by changing the url in "src" for image element id "m-0". The real code is doing image pre-loading, binding multiple elements, filling an array with all the URL's for the hover images, etc.
Code:
$(document).ready(function() {
var over; var out;
$('img[id|="m"]').each(function (i) {
$(this).hover(over, out);
// *snipped* code in here filling various arrays with URL's
// *snipped* code here doing some image pre-loading
});
function over(event) { // mouseenter
$(this).attr("src", '/over_'+$(this).attr('id').replace(/m-/, "")+'.jpg');
};
function out(event) { // mouseout
$(this).attr("src",'/normal_'+$(this).attr('id').replace(/m-/, "")+'.jpg');
};});
So the code above is working for me... swapping images.
The issue or question now is how can I apply a simple fadein or fadeout on the in/out events? I've been experimenting today and no matter what I do, I get the image swap and then an animation... or vice versa. It looks ugly since the background shows through... I just want to fade from one image to the next instead of a quick snap from one to the other. Most of the plugins I've found seem to be overkill for this. Or they require two separate image elements... I just want to do it each image with my single img element.
I have a page with a div that contains other divs. In the outer div, I have links that add new divs inside. I also have a link outside the outer div that adds more of those outer divs to the page (with an inner div, and the same links to add more). This works on the div that is hard coded on the page, but when I use the link to add additional container divs the links inside there to add more inner divs does not function.
Here is my code:
$(document).ready(function() {
$(".AddDisc").click( function() {
discContainerDiv = "<div class='discContainer'><div
class='trackContainer'><input type='text' class='trackInput' /></
[Code]....
I have a dynamic form with fields named using brackets ([]). Validation is working for fields that existed on the initial page load, but when I add append the code for a new field, the validation events are, of course, not attached to the new DOM elements. What's the best way to accomplish this?
View 1 Replies View RelatedI've come across an issue where I've got a dynamically created popup class that despite appearing to be bound according to Visual Event does not fire on clicking the closebutton attached to it. I'm not getting any errors in firebug and by setting breakpoints I've verified we are not reaching the code to execute. Ruling out the usual suspects such as obvious spelling mistakes/ swapping out jquery versions 1.3/1.4/1.5 doesn't make any difference.where else I can look?Here is the original function:
$this.find(".close").live('click', function() {
var $this = $(this);
$this.parents("." + sets.popupClass).remove();
[code]....
In the examples for live() and delegate(), the selectors match at least one element that already exists. Will either of these commands work on elements for which there is no match at all on page load?
In my case, I want to bind a keyup event to the textareas that jeditable creates. I could probably create custom plug-in (to the plug-in :) to do the job, but I'd like to use live or delegate if they would work.
how I would dynamically add another table once text fields in the existing table is clicked on.So pretty much what I have is a table with 5 textboxes lined up horizontally in the first row along with couple of buttons in the second row.What I want is that once one text box is clicked, another table like the one above is created and appears below that initial table. So this is the inital table that should be replicated on each click:
Code:
<table>
<tr>
<td><input type="text" /></td>
[code]....
I'm trying to add a script tag dynamically to the head of DOM of course without any success...this tag should use the google search api if only it worked...
var head = document.commandDispatcher.focusedWindow.document.getElementsByTagName("head");
var s = document.createElement("script");
s.type = "text/javascript";
[Code]....