JavaScript Error Trying To Add Event Listeners Using DOM And AJAX
Oct 29, 2007
I have PHP file called file1.php with an empty <div></div> in the middle. I've added a 'load' event listener so that on page load, it calls an AJAX function that calls file2.php. file2.php creates a table and loads it into the <div></div> in file1.php.
file2.php has <a> tags in it's <th> columns and I wish to trap when a user clicks on the column heading. The old way was to use the onclick() method but I'd rather use event listeners.
Here's my problem. I am getting "obj has no properties" when trying to add those listeners. I *think* it is because the code in file2.php isn't part of the original DOM tree for file1.php. So how can I use event listeners instead of onlclick()? I know I can add top the DOM by creating elements and appending them but that adds to the HTML code and my code is already in place via the AJAX call. What to do...? DO I just use the old passe onclick() method?
The DOM Level 3 specification has a section (1.2.2.2) that talks briefly about "groups" of event listeners. What does this mean? Is this similar to attaching event listeners with a namespace, as in jQuery: "event.my_namespace"?
I feel like I must be missing something simple but I can't put my finger on it...
I'm moderately new to JS (programmed in other languages though) and am working on a Google Maps project.
This piece of code should show an alert of the region's name when a map polygon is clicked. Instead, no matter what polygon is clicked, it only does the name for the LAST iterated placemark. code...
What am I missing? What would be a better way of handling this?
Does anyone know where I can find a complete list of DOM/DHTML event types documented?
I'm trying to learn more about advanced event handling in JavaScript and I'd like to find lists of event types that I can attach/add event listeners to. I've been searching around and I've found a few resources, but nothing that seems complete.code...
Here's the situation: I have a javascript object for controlling a custom DHTML scrollbar. So that I can use more than one on a page, the event listeners need to be passed a reference to the particular instance of the object that each needs to connect to, but as I discovered the hard way, inside an event listener, 'this' returns a reference to the DOM object throwing the event, rather than to the JS object. Short of coming up with a linked list of different objects and having the event handler search through it for the right object when an event is generated, then writing a reference to that object to some global variable, is there any convenient way to tie this together? I hope I've made myself clear enough...
So I know all about the caviats of the 'this' keyword when calling object functions from event listeners:
Code: var foo = {bar: true, zoo: function() { return this.bar; }}; foo.zoo(); > true a = foo.zoo; a(); >
And I know that I can get around this by using an anonymous function so that 'this' is preserved in it's original context:
[Code]...
But then someone pointed out this article on memory leaks when using anonymous functions to call object methods because the anonymous function gets access to ALL variables in the enclosing environment and my not be properly disposed of by the garbage collector [URL] So that lead me to think about using a "3rd-person" approach to referencing object properties from within object methods.
I am creating JS objects that have some properties that contain DOM nodes, and some of these DOM nodes have event listeners attached to them. When I delete such objects, do I first need to remove the event listeners attached to some of the DOM nodes? And do I need to use removeChild on the DOM nodes that are properties of the object? Or does JavaScript take care of all that?
i want to do (multiple) file upload(s) and display a progress bar. with firefox and safari it is no problem at all. only IE makes some problems.
my script is based on ajax-uploader, which can be found at www.srmiles.com/freestuff/ajax_file_uploader/ . you can do multiple file uploads. each upload will have it's own "form"-tag, so that each file is uploaded for its own. could be a good solution if there are "big" uploads.
so here is what i do:
i have a html-page in which several forms with file-input fields are generated. when i now hit the "one" submit button at the bottom of the page a javascript function upload() starts it will iterate through all forms (id='frmUpload_xx'), will get the filename, start a ajax request for the progress-bar function and do a form.submit().
if the first form/file is uploaded, a settimeout('upload()', 1000); is called and the next form will be processed. all form's have an target="uploaddiv", where uploaddiv is a invisible iframe. so the output of the upload script is put in this div. output should only be a "OK" at the end. no usefull output no info no nothing.
firefox and safari are working as expected, only IE stops after the first file is uploaded. i get an javascript error saying "zugriff verweigert/access denied" on object line x... this is the place where i call "form.submit()".
this is the upload-function:
function upload() { if (uploads.length>0) { form = document.getElementById('frmUpload_'+uploads[0]); if (form["filename"].value == ""){ alert("Please Choose a file to upload."); } else { filename = form["filename"].value; if (filename.lastIndexOf("")>0) { filename = filename.substring(filename.lastIndexOf("") +1,filename.length); } else if (filename.lastIndexOf("/")>0) { filename = filename.substring(filename.lastIndexOf("/") +1,filename.length); } makeRequest("upload_progress.php?sid="+sid +"&filename="+filename,progress); form.submit(); } } }
the strange thing is, that filename is filled correct, that means the object "form" is found and exisits. the first iteration is working, only the second ends with an error.
think it have something to do with redirecting the output of the upload-script in an iframe. after that IE can't access form - at least IE is not allowed to submit the form as i can access a form field (filename). i worked on that the last two days and haven't found a solution...
jquery provides ajaxStart() and ajaxStop() events. Those two events do not seem to be triggered if the ajax requests are made by Microsoft Ajax tool Kit (from ASP.Net code). Is there any way to bridge those two event models? If not currently possible, is there any future initiative or plan out there to make this happen?
I know this isn't a jQuery question per se, but maybe there is an easier way to do this is jQuery than in javascript?
<script>
I was wondering if there is a better way to accomplish the above? Rather than directly changing the innerHTML of the element is it possible to add a onclick listener (or another javascript listener) to the element in a more direct way without having to go through the html.
I have a quandary of sorts here dealing with a list of checkboxes and the hiding/showing of a few divs associated with the checkbox selection. Here's basically what I need to do: Hide the lower div if no checkbox is selected. If any one of the first 6 checkboxes are selected, and NOT any of the remaining 6, then show the div. If at any time during selection one of the remaining 6 checkboxes are selected, then hide the associated div. Note this code doesn't really do much. I'm still trying to architect a solution that's best.
var aThroughf = false; var gThroughl = false; $('[name="'+q2030.name+'"]')).live('click', function() {
I'm trying to come up with a better architecture for dealing with multiple listeners in a multi-page questionnaire. Here's the general structure I'm looking to implement:
1. Set up CSS for animation
2. Look for preconditions
3. Initialize listener
4. Execute animation
Some issues to consider:
1. Some questions have dependencies that show or hide depending on what is selected in a parent question.
2. Needs to be IE 6 compatible.
3. It should be simple enough so that all you need to do is add a new question to a JSON object, which is what I have set up right now.
Some code (the looping structure that reads each question):
var newQ = eval(q); $.each(newQ, function () { // 1 - Setting CSS for each listener $(this.css).css({'width': '1500px', 'float': 'left', 'clear':'both'});
[Code].....
The problem here is that when I do a console.dir on $.each(this.value.length), it counts each character, as opposed to counting the number of elements in the array. Should I be doing an eval on q? Why or why not? If I could get this up and running, it would make my life 100x easier, as there are hundreds of questions, and I'd want to make this all data driven.
I have two pages, page A include "btnOK" button page B include "logon" button and iframe . After I clciked Page B "logon" button , I want to trigger javascript to search Page A button(object) in iframe object and click it,but got the error below as "//Error - Got object error even in the same site html" In short, I want to click Page A OK button by Page B javascript but not work.My target browser is IE, could you please advise me how can I complete this code?
Page B Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>
I have taken over from a developer who has used javascript to add additional text input boxes to a form so there is no limit to the number of input boxes there can be. I have got a jquery autocomplete function that works fine if the input box is added by the server but the listener doesnt fire when the text box is added client side. As with all things this is part of a much bigger project and I only want to change the smallest possible part (add autocomplete to this text input box) MY QUESTION: is it even possible fo ra jquery listener to fire when the input box has been written client side after the page has loaded? Is there a way to "refresh" a listenerto find the new tag that have been added?
what happens when you have an onclick event and an error occurs in it:
In an <a> element: onclick="zoomFullExtent(); return false;"
I know that there is an error happening in zoomFullExtent. I didn't define my own error handler, so the default one is used.(My browser is Firefox 1.0).
I notice that when this error happens, the browser makes a request to the server.
I thought that if an error happened in zoomFullExtent, the default error handler would catch it, and then zoomFullExtent would return normally. But that doesn't seem to happen. Instead the whole onclick script returns or is aborted? And it seems to return true so that the request is made. Is there a page where this program flow is explained?
This page works fine when viewed in Firefox 3: http://jimpix.co.uk/ecards/no-words.html
But in IE6, I get a javascript error:
Line 5 Error: Syntax Error
But line 5 refers to this: <link rel="Shortcut Icon" href="../favicon.ico" type="image/x-icon" />
Which isn't even javascript.In firefox, the drop down menus work in the black nav bar, but not in IE6, probably because of this JS error.The page's HTML validates, in case that helps.And to make things stranger, the page in IE6 works without an error when viewing the page on my local IIS web server. It only breaks when viewing the page remotely.
I have text box on a form that when I click on a image link button next to it, it loads a JS pop-up window with a list menu and I select an item from that menu and it closes the window and sets the value to what I chose form the menu in the text box from the parent window. I am using javascript to accomplish these tasks, but when I then try to go into the text box and edit the text after I set the value, once I do so and exit the text box with my cursor this error appears:
ERROR: 'window.NewWindow.document.test1' is null or not an object
anyone know what this might mean?
I made sure that I had the form, text box, menu and variable for the script named correctly so I know it's not my naming conventions.
form name = test1 list menu name = Times1 text box name = plannedTime
I have some jQuery making ajax requests that works just fine if the server returns a 200 but whenever it returns any error HTTP status none of the events fire. It's happening on more than one request to different servers but I'll just include one example for now:
The request gets made just fine, I can see the response in the net console in firebug and it returns the data I want with a 500 when I do not complete the form correctly. However, it does not fire either the error or the complete function when I get this status, and the ajaxResponse.responseText is undefined when it is logged to the screen. When the form is completed and the request is successfull the success function fires just fine.
I am trying to get the event to attach to the button but it doesn't want to work the way I was thinking it should I keep getting the error Error: this.altme is not a function Source File: http://trainrec.localhost/jstest.php Line: 22
This is the error I get when I try to download a file from Rapidshare.
ERROR: Please enable JavaScript.
I uninstalled and reinstalled Sun JDK 6.0. Sill the problem persists. The problem is generic now. For instance I cannot use the collapse / expnad links at the top of this post. I have also enabled all scritping options in my browser (IE 7.0).
