SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with AJAX functions

    Howdy all. I'm working on an AJAX-app and have hit a snag. I already have a few pieces of the puzzle working, but this one has me stalled. Here's what's happening: on the click of an 'a' tag, I'm wanting to pull comments from a database and display them. Here are the two javascript functions:

    Code:
    var httpModifyComments = getHTTPObject();
    var modifyCommentsIsWorking = false;
    
    //modifyComments either displays or hides the comments for a graph
    function modifyComments(commentsSection, commentAction, questionNumber) {
    	
    	if (!modifyCommentsIsWorking && httpModifyComments) {
    		httpModifyComments.open("GET", "ModifyCommentSection.php?action="+commentAction+"&questionNumber="+questionNumber, true);
    		modifyCommentsIsWorking = true;
    		httpModifyComments.onreadystatechange = handleModifyComments(commentsSection);
    		httpModifyComments.send(null);
    	}
    }//end modifyComments
    
    //handleModifyComments handles the showing of the comments
    function handleModifyComments(commentsSection) {
    
    	if (httpModifyComments.readyState == 4) {
    		if (httpModifyComments.responseText.indexOf('invalid') == -1) {
    			results = httpModifyComments.responseText;
    			//control comments section
    			
    			document.getElementById(commentsSection).innerHTML = results;
    			modifyCommentsIsWorking = false;
    		}
    	}
    }

    I know that ModifyCommentSection.php is working fine because I passed parameters to it manually and it returned what I expected. The script isn't getting past

    Code:
    if (httpModifyComments.readyState == 4)
    because httpModifyComments.readyState equals 1 at that spot (I stuck an alert just before it to get the value). Any idea why this is happening? Thanks so much!

    edit: I forgot to mention that getHTTPObject() is a function located in another js file that creates the appropriate HTTP object given the user's browser.
    Last edited by yeah-yeah; Oct 18, 2005 at 13:38.

  2. #2
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I found the problem:

    Code:
    httpModifyComments.onreadystatechange = handleModifyComments(commentsSection);
    Usually that's written

    Code:
    httpModifyComments.onreadystatechange = handleModifyComments;
    but I need to pass a parameter to the handler because this function can be run on more than one spot on the page and I need to tell the function which div to look at. Any ideas?

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is definitely:

    Code:
    httpModifyComments.onreadystatechange = handleModifyComments(commentsSection);
    I need to pass a parameter to the handler, but I don't know how. Anybody out there know?

  4. #4
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a fairly common request at the moment, and it does have a nice simple answer - helps to know a little about function scopes in Javascript.

    I always try, in situations like this, not to rely on globals for my request objects - it'll work most of the time, but can lead to some pretty obscure bugs and odd behaviour when something unanticipated happens.

    Try the following:

    Code:
        function modifyComments(commentsSection, commentAction, questionNumber) {
     
        var httpModifyComments = getHTTPObject();
        if (!modifyCommentsIsWorking && httpModifyComments) {
     	httpModifyComments.open("GET", "ModifyCommentSection.php?action="+commentAction+"&questionNumber="+questionNumber, true);
      	modifyCommentsIsWorking = true;
        	httpModifyComments.onreadystatechange = function() { 
       	  handleModifyComments(httpModifyComments , commentsSection); 
       	}
        	httpModifyComments.send(null);
        }
        } //end modifyComments
        
        //handleModifyComments handles the showing of the comments
        function handleModifyComments(httpModifyComments , commentsSection) 
       
       {
        ...
        etc
    Only dead fish go with the flow

  5. #5
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hear what you're saying about global variables. That's how it was done in the tutorial I learned from, so that is the behavior I now exhibit. It was getting annoying creating new bools and http objects for each asynchronous function on the page. Thanks for the suggestion.

    The trick was to wrap the handler in another function declaration as you did. Bill, from webpasties, was kind enough to work through it with me.

    As I understand it,
    Code:
    httpModifyComments.onreadystatechange
    is a resource, whereas
    Code:
    handleModifyComments(commentsSection)
    attempts to supply whatever return type is specified in the function declaration of handleModifyComments. Since the data types don't match, the line of code doesn't work unless httModifyComments is wrapped in a function declaration.

    Of course now I'm getting an error with Internet Explorer. When the script gets to the handler, it won't recognize the parameter I'm passing as a valid id:
    Code:
    //handleModifyComments handles the showing of the comments
    function handleModifyComments(commentsSection) {
    	if (httpModifyComments.readyState == 4) {
    		if (httpModifyComments.responseText.indexOf('invalid') == -1) {
    			results = httpModifyComments.responseText;
    			//control comments section
    			document.getElementById(commentsSection).innerHTML = results;
    			modifyCommentsIsWorking = false;
    		}
    	}
    }
    When the script gets to
    Code:
    document.getElementById(commentsSection).innerHTML = results;
    IE gives an error. I think this is because the div that the variable commentsSection is referring to is generated dynamically. IE seems to have a problem with referring to divs that are created after the page is initially loaded. When I specify an id that is present at the time of page generation, the script works fine. Naturally, the script works perfectly in Firefox. Any ideas?

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Edit:

    I rethought this whole post, and after doing some testing I came to a different conclusion. Even though js doesn't have variable types, so generally there is no such thing as a "data mismatch", an event property of an object expects to be assigned a function reference--otherwise you get an error. I guess that makes sense since internally js will try to execute what is assigned to an event property, so js checks to make sure it is a function reference.


    Code:
    handleModifyComments(commentsSection)
    attempts to supply whatever return type is specified in the function declaration of handleModifyComments.
    That is the crux of the problem. The "( )" is the function execution operator. So, when that code fragment is encountered, the handleModifyComments() function is executed and replaced with its return value, which is then assigned to the onreadystatechange property. However, what you need to do is assign a function reference to onreadystatechange so that the function doesn't execute immediately. Assigning a function reference can take two forms:

    httpModifyComments.onreadystatechange = myFunc; //Note the absence of the function execution operator after the function name

    or

    httpModifyComments.onreadystatechange = function(){alert("hello");}; //define and assign the function in the same line

    In both those cases, the function execution will be delayed until the onreadystatechange event fires and causes the functions to execute.

    IE gives an error. I think this is because the div that the variable commentsSection is referring to is generated dynamically. IE seems to have a problem with referring to divs that are created after the page is initially loaded. When I specify an id that is present at the time of page generation, the script works fine. Naturally, the script works perfectly in Firefox. Any ideas?
    If you can, create all the elements to begin with, like this:

    <div id="d0"></div>

    then you can insert what you want in them with js.
    Last edited by 7stud; Oct 20, 2005 at 15:11.

  7. #7
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    Hi,
    I think that's a terrible explanation because it's just plain wrong and exhibits a lack of understanding of the basics of js. "Data types don't match"? Unlike in languages like C++, variables don't have a type in js.
    Wow, that was pretty rude. Javascript does have support for data types, but since it's a loosely typed language, you don't need to specify them.

    When my script reached
    Code:
    httpModifyComments.onreadystatechange = handleModifyComments(commentsSection);
    I was given the error "Type mismatch" in the debugger, hence me saying that they were different data types. The onreadystatechange property of a function returns an event handler. handleModifyComments(commentsSection) does not, therefore the type mismatch.

    If you can, create all the elements to begin with, like this:

    <div id="d0"></div>

    then you can insert what you want in them with js.
    I'd rather not have to do this, but it seems like it'll be the only way for it to work in IE. Thanks for the suggestion.

    edit: it didn't work. I put all possible divs at the end of the file
    Code:
    <div id="commentSection_1"></div>
    <div id="commentSection_2"></div>
    <div id="commentSection_3"></div>
    
    et cetera...
    and I'm still getting "htmlfile:Unknown runtime error".

    Thanks anyway.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript does have support for data types, but since it's a loosely typed language, you don't need to specify them.
    However, variables do not have a type, and more than not needing to specify a type, there is no way to specify a variable type in js. "httpModifyComments.onreadystatechange" is a variable name and therefore has no type. So how can there be a type mismatch?

  9. #9
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    However, variables do not have a type, and more than not needing to specify a type, there is no way to specify a variable type in js. "httpModifyComments.onreadystatechange" is a variable name and therefore has no type. So how can there be a type mismatch?
    While the variable isn't specified with a data type, it takes the type of whatever it is holding. My guess is that in certain cases, variables will change types (such as ints to strings and vice versa) but in this case, the variable httpModifyComments can't switch. httpModifyComments is an xmlhttprequest object and I guess it can't switch to something else, hence the type mismatch.

    Any ideas about my current error?

  10. #10
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While the variable isn't specified with a data type, it takes the type of whatever it is holding. My guess is that in certain cases, variables will change types (such as ints to strings and vice versa)
    Code:
    var num = 10;
    alert(num);
    
    num = "some text";
    alert(num);
    
    num = function(){alert("hello");};
    alert(num);
    
    num = new Object();
    alert(num);
    but in this case, the variable httpModifyComments can't switch. httpModifyComments is an xmlhttprequest object and I guess it can't switch to something else, hence the type mismatch.
    Code:
    var httpModifyComments = new Object();
    
    httpModifyComments.onreadystatechange = function(){alert("hello");};
    alert(httpModifyComments.onreadystatechange);
    
    httpModifyComments.onreadystatechange = 10;
    alert(httpModifyComments.onreadystatechange);
    
    httpModifyComments.onreadystatechange = "hello world";
    alert(httpModifyComments.onreadystatechange);
    The bottom line is that in js, you can assign any type of data to a variable name. However, in the case of an event property, atypically js checks the type of the data, and if it isn't a function reference, then it flags it as an error. It may just be semantics, but that's not a type mismatch between the variable and the data. It's a type mismatch between what js is expecting internally and the data.

    Any ideas about my current error?
    Code:
    <html>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    window.onload=function()
    {
    	document.getElementById("d").onclick = function()
    	{
    		document.getElementById("target").innerHTML = "some text";
    	}
    };
    
    
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div id="d">click me</div>
    
    <div id="target"></div>
    
    </body>
    </html>

  11. #11
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    The bottom line is that in js, you can assign any type of data to a variable name. However, in the case of an event property, atypically js checks the type of the data, and if it isn't a function reference, then it flags it as an error. It may just be semantics, but that's not a type mismatch between the variable and the data. It's a type mismatch between what js is expecting internally and the data.
    When the debugger reported that there was a type mismatch, my C++ background led me to believe that a type mismatch meant I was trying to assign something illegally. I guess "type mismatch" is a better error to get than "unknown runtime error".

    Code:
    <html>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    window.onload=function()
    {
    	document.getElementById("d").onclick = function()
    	{
    		document.getElementById("target").innerHTML = "some text";
    	}
    };
    
    
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div id="d">click me</div>
    
    <div id="target"></div>
    
    </body>
    </html>
    I would like the code to run in the handleModifyComments function. I tried wrapping the statement in a function,
    Code:
    function func() {document.getElementById(commentsSection).innerHTML = results;}; //where "results" is the output text from the PHP file opened by the xmlhttprequest object
    func();
    but that didn't work in IE.

    Thanks for the suggestions. Any more?

  12. #12
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but that didn't work in IE.
    Post your current code for the handleModifyComments() function.

  13. #13
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    Post your current code for the handleModifyComments() function.
    I'll do one better:

    http://anxiousplanet.com/thesis/Ajax...php?surveyID=8

    This is what I'm working on. Again, it works fine in Firefox. Choose at least two surveys, at least one user and at least one question and select Scatter Plot. It'll draw scatter plots for each question. Next to the plot is the "Show Comments" tag. Click that and the comment window will open. (Right now a random number of comments are displayed). The window doesn't open in IE. Here's the handleModifyComments code, for good measure:
    Code:
    function handleModifyComments(commentsSection) {
    	if (httpModifyComments.readyState == 4) {
    		if (httpModifyComments.responseText.indexOf('invalid') == -1) {
    			results = httpModifyComments.responseText;
    			//control comments section
    			document.getElementById(commentsSection).innerHTML = results;
    			modifyCommentsIsWorking = false;
    		}
    	}
    }
    As I mentioned before, if I switch commentsSection in
    Code:
    document.getElementById(commentsSection).innerHTML = results;
    with a string referring to an existing section, it works.

    Thanks!

    edit: forgot the first line of code...whoopsies.
    Last edited by yeah-yeah; Oct 20, 2005 at 22:48.

  14. #14
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had a look - seems to work fine - glad you got it sorted
    Only dead fish go with the flow

  15. #15
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Taken it as a given that httpModifyComments is a valid reference to an object that has a readyState of 4 and some valid responseText, your function works in IE6 for me:
    Code:
    <html>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    //Given:
    var httpModifyComments = {}; 
    httpModifyComments.readyState = 4;
    httpModifyComments.responseText = "new text";
    
    function handleModifyComments(commentsSection) {
    	if (httpModifyComments.readyState == 4) {
    		if (httpModifyComments.responseText.indexOf('invalid') == -1) {
    			results = httpModifyComments.responseText;
    			//control comments section
    			document.getElementById(commentsSection).innerHTML = results;
    			modifyCommentsIsWorking = false;
    		}
    	}
    }
    
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div id="d" onclick="handleModifyComments('target')">click me</div>
    
    <div id="target">***original text***</div>
    
    </body>
    </html>
    Are you aware that you have to create the XMLHttpRequest object differently for IE6 than for other browsers?
    Last edited by 7stud; Oct 21, 2005 at 12:41.

  16. #16
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dek
    Had a look - seems to work fine - glad you got it sorted
    It works in Firefox, but not in IE...

  17. #17
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    Taken it as a given that httpModifyComments is a valid reference to an object that has a readState of 4 and some valid responseText, your function works in IE6 for me:
    Code:
    <html>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    //Given:
    var httpModifyComments = {}; 
    httpModifyComments.readyState = 4;
    httpModifyComments.responseText = "new text";
    
    function handleModifyComments(commentsSection) {
    	if (httpModifyComments.readyState == 4) {
    		if (httpModifyComments.responseText.indexOf('invalid') == -1) {
    			results = httpModifyComments.responseText;
    			//control comments section
    			document.getElementById(commentsSection).innerHTML = results;
    			modifyCommentsIsWorking = false;
    		}
    	}
    }
    
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div id="d" onclick="handleModifyComments('target')">click me</div>
    
    <div id="target">***original text***</div>
    
    </body>
    </html>
    That function may work fine, but mine still does not work in IE. Visit this page in IE:

    http://anxiousplanet.com/thesis/Ajax...php?surveyID=8

    and render a scatter plot graph using the instructions I detailed above. Then click "Show Comments" and you'll see that the comments do not appear and that an error (unknown runtime error) occurs.

    Are you aware that you have to create the XMLHttpRequest object differently for IE6 than for other browsers?
    Yes. I have a separate js file that has the getHTTPObject() function - it assigns the appropriate xmlhttprequest object depending on the browser.

    Thanks again for looking.

  18. #18
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well - it works for me in IE6 on every machine I've tried it on.
    And for good measure, it works fine on the latest Safari

    I hesitate to ask, but are you sure you haven't managed to get an old version cached?
    Only dead fish go with the flow

  19. #19
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dek
    Well - it works for me in IE6 on every machine I've tried it on.
    And for good measure, it works fine on the latest Safari

    I hesitate to ask, but are you sure you haven't managed to get an old version cached?
    Really? When you click "Show Comments" a list of comments is displayed? I've cleared my cache and did a force-refresh (CTRL-F5) and I'm still getting the error.

  20. #20
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That function may work fine, but mine still does not work in IE.
    Then this isn't true:
    Taken it as a given that httpModifyComments is a valid reference to an object that has a readyState of 4 and some valid responseText
    Well - it works for me in IE6 on every machine I've tried it on.
    It doesn't work for me in IE6. It gives a line number for the error. Post 5 lines of your code above and below that line number.

  21. #21
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    Then this isn't true:


    It doesn't work for me in IE6. It gives a line number for the error. Post 5 lines of your code above and below that line number.
    According to the debugger, it's crashing at

    document.getElementById(commentsSection).innerHTML = results;

    Which is the line that writes the comments to the appropriate id. If I put an alert containing the id just before that statement (which I'll go do now so you can see it), the alert displays the id properly.

    http://anxiousplanet.com/thesis/Ajax...php?surveyID=8

    Again, it works fine in Firefox. Thanks again for everyone's continued assistance. Both my thesis advisor and I appreciate it!

    edit: here's the code the javascript code. it's visable on the site, but I'll include it for thoroughness:

    Code:
    var httpModifyComments = getHTTPObject();
    var modifyCommentsIsWorking = false;
    
    //handleModifyComments handles the showing of the comments
    function handleModifyComments(commentsSection) {
    	if (httpModifyComments.readyState == 4) {
    		if (httpModifyComments.responseText.indexOf('invalid') == -1) {
    			results = httpModifyComments.responseText;
    			//control comments section
    			alert(commentsSection);			
    			document.getElementById(commentsSection).innerHTML = results;
    			modifyCommentsIsWorking = false;
    		}
    	}
    }
    
    //modifyComments either displays or hides the comments for a graph
    function modifyComments(commentsSection, commentAction, questionNumber, surveyList) {
    	
    	if (!modifyCommentsIsWorking && httpModifyComments) {
    		httpModifyComments.open("GET", "ModifyCommentSection.php?commentAction="+escape(commentAction)+"&questionNumber="+escape(questionNumber)+"&surveyList="+escape(surveyList), true);
    		/*document.getElementById('vizSection').innerHTML = "ModifyCommentSection.php?commentAction="+escape(commentAction)+"&questionNumber="+escape(questionNumber);*/
    		modifyCommentsIsWorking = true;		
    		httpModifyComments.onreadystatechange = function() {handleModifyComments(commentsSection);};
    		httpModifyComments.send(null);
    	}	
    }

  22. #22
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post your html for the comments section.

  23. #23
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    Post your html for the comments section.
    Sure thing. It's all generated by the php file ModifyCommentsSection.php:

    Code:
    if ($commentAction== "show") {
    		//display "hide comments control"
    		echo("<div class=\"commentControl\">\n");
    			echo("<a href=\"#commentSection_".$questionNumber."\" onclick=\"modifyComments('commentSection_".$questionNumber."', 'hide', '".$questionNumber."', '".$surveyList."')\">Hide Comments</a>\n");
    		echo("</div>\n");
    		echo("<br />\n");
    		
    		//run query to get comments
    		
    			
    		echo("<div class=\"comments\">\n");
    		echo("Survey List:".$surveyList."<br />\n");
    			//display a random number of comments just for testing
    			for ($i=0; $i<rand(1,6); $i++) {
    				if ($i%2==0) {
    					$commentClass = "evenComment";
    				}
    				else {
    					$commentClass = "oddComment";
    				}
    				echo("<div class=\"".$commentClass."\">This comment is a sample comment.</div>\n");
    			}
    			echo("<br />\n");
    			echo("<span><b>Add a Comment</b></span><br />\n");
    			
    			echo("<textarea id=\"commentText_Section_".$questionNumber."\" name=\"commentText_Section_".$questionNumber."\" cols=\"39\" rows=\"5\"></textarea><br />\n");
    			echo("<br />\n");
    			echo("<div class=\"vizButton\"><a href=\"#commentSection_".$questionNumber."\">Add Comment</a></div>");
    		echo("</div>\n");
    	}
    	else if ($commentAction== "hide") {
    		//display "show comments" control
    		echo("<div class=\"commentControl\" style=\"border-bottom: 1px solid #c0c0c0;\">\n");
    			echo("<a href=\"#commentSection_".$questionNumber."\" onclick=\"modifyComments('commentSection_".$questionNumber."', 'show', '".$questionNumber."', '".$surveyList."')\">Show Comments</a>\n");
    		echo("</div>\n");
    	}

  24. #24
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Um. Oops. Forget what I said - I was being thick. Don't ask.

    A couple of things occurred to me. Your modifications of the comments div do work once - when you generate the 'Show Comments' button - so it does seem strange that they don't work a second time.

    Completely daft idea: if you change the line in showCommentsSection:

    Code:
    document.getElementById(commentsSection).innerHTML = results;
    to

    Code:
    document.getElementById('commentsSection_' + questionNumber).innerHTML = results;
    does it make any difference?
    Only dead fish go with the flow

  25. #25
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dek
    Um. Oops. Forget what I said - I was being thick. Don't ask.
    A couple of things occurred to me. Your modifications of the comments div do work once - when you generate the 'Show Comments' button - so it does seem strange that they don't work a second time.
    The first time the button is drawn, it is done so in PHP with no Javascript.

    Completely daft idea: if you change the line in showCommentsSection:
    Code:
    document.getElementById(commentsSection).innerHTML = results;
    to

    Code:
    document.getElementById('commentsSection_' + questionNumber).innerHTML = results;
    does it make any difference?
    That's actually better coding - instead of passing the commentSection variable, I can just pass the question number to the modifyComments function. Unfortunately, this does not work either.

    Here's the thing - the function works when I tell it to write to a specific id, not one I passed, e.g.,
    Code:
    document.getElementById('debug').innerHTML = results;
    the comments are written to the debug section with no problem.

    I have absolutely no idea why this is behaving in this way.

    edit: More info: I just tried passing the id "debug" as a variable to handleModifyComments. It worked. So it's not the fact that I'm using a variable in there that's throwing it off. The only thing I can think of at this point is that IE doesn't know how to handle dynamically generated divs, even if an empty div with the same name is specified when the page is first run.

    Check this out: First, I picked an arbitrary id to write the comments to, in this case, commentSection_4. When I ran the query, I selected every question. When I clicked "Show Comments", IE threw the "unknown run-time error". I refreshed the page and ran the query again, this time without question number 4, so a div with id commentSection_4 was not generated. Whenever I clicked "Show Comments", the javascript worked, generating the comments in the empty div with the id commentSection_4 at the bottom of the page.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •