3 Replies Latest reply on Mar 15, 2007 5:56 PM by Igor Shabalov

    How does A4J handle in-line JavaScript?

    Andrew Apprentice

      In my AJAX response (viewed by firebug) I have the following:

      ...<script language="JavaScript" type="text/javascript">
      // <![CDATA[
      osoftDialog_register('zfpPanel:liveReportFilterDlg');
      // ]]>
      //
      </script>...

      Even though this is there, the function is never called (the script contents are never evaluated, I even tested with an alert in the script contents, but that also did nothing). Does A4J not support in-line javascript for AJAX re-renders or am I missing something?

        • 1. Re: How does A4J handle in-line JavaScript?
          Andrew Apprentice

          I added the a4j:log to analyze this further, and it is ignoring my script tag. It is executing some of them, but not all.
          I'm not sure if it is truncating the response or reaching a limit or what.

          I presume the lack of new-line characters in the log is simply because of HTML and not the fact that it is stripping them.

          Here is the output:
          debug[13:10:18,273]: Have Event [object Object] with properties: target: https://localhost:8443/OSoft/pages/liveReport/index.jsf?conversationId=8#, srcElement: undefined, type: click
          debug[13:10:18,274]: NEW AJAX REQUEST !!! with form :zfpForm
          debug[13:10:18,276]: Form have onsubmit function, call it
          debug[13:10:18,281]: parameter actionPaneWindow:_id104 with value actionPaneWindow:_id104
          debug[13:10:18,283]: Start XmlHttpRequest
          debug[13:10:18,286]: Reqest state : 1
          debug[13:10:18,288]: QueryString: AJAXREQUEST=_viewRoot&zfpForm___jeniaPopupFrame=&zfpForm=zfpForm&autoScroll=&zfpForm%3A_link_hidden_=&zfpForm%3A_idcl=&collapseKey=&ajaxZone=&jsf_sequence=3&actionPaneWindow%3A_id104=actionPaneWindow%3A_id104&
          debug[13:10:18,298]: Reqest state : 1
          debug[13:10:20,356]: Reqest state : 2
          debug[13:10:20,358]: Reqest state : 3
          debug[13:10:20,360]: Reqest state : 3
          debug[13:10:20,366]: Reqest state : 3
          debug[13:10:20,367]: Reqest state : 3
          debug[13:10:20,367]: Reqest state : 4
          debug[13:10:20,368]: Reqest end with state 4
          debug[13:10:20,368]: Response with content-type: text/xml;charset=UTF-8
          debug[13:10:20,368]: Full response content: <?xml version="1.0"?> //<![CDATA[ // //]]> //<![CDATA[ var zfpForm_3AmessagesPopupCompPopup=new orgApacheMyfacesPopup('zfpForm:messagesPopupComp',-5,-5); // //]]> // <![CDATA[ osoftDialog_remove('zfpPanel:liveReportFilterDlg'); // ]]> // <div class="dialogTitleBar" onmouseover="dd.elements['zfpPanel:liveReportFilterDlg'].setDraggable(true)">Filter Options<div class="dialogTitleBarButtons" onmouseover="dd.elements['zfpPanel:liveReportFilterDlg'].setDraggable(false)"><a href="#" id="zfpPanel:liveReportFilterDlg:_id314" name="zfpPanel:liveReportFilterDlg:_id314" onclick="A4J.AJAX.Submit('_viewRoot','zfpForm',event,{'parameters':{'zfpPanel:liveReportFilterDlg_closeCommand':'true','zfpPanel:liveReportFilterDlg:_id314':'zfpPanel:liveReportFilterDlg:_id314'},'actionUrl':'/OSoft/pages/liveReport/index.jsf'});return false;"> <div class="dialogContent" onmousemove="return false;" onmouseover="dd.elements['zfpPanel:liveReportFilterDlg'].setDraggable(false)">What reports do you want to view? All From meWhat filters do you want to enable? All will be returned if a filter is not activated.<input type="checkbox" name="liveReportFilterDlgDlgTitleCheck" id="liveReportFilterDlgDlgTitleCheck" value="true" onclick="clickLink('liveReportFilterDlgLiveRepFilterTitle');" />Name<input type="checkbox" name="liveReportFilterDlgDlgTypeCheck" id="liveReportFilterDlgDlgTypeCheck" value="true" onclick="clickLink('liveReportFilterDlgLiveRepFilterType');" />TypeContains what text: Live Graph Live Report Live ScheduleTeam AccessDateAvailable teamseveryoneUsersFrom:JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecemberTo:JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember<input id="zfpPanel:liveReportFilterDlg:_id202" name="zfpPanel:liveReportFilterDlg:_id202" onclick="A4J.AJAX.Submit('zfpPanel:liveReportFilterDlg:_id172','zfpForm',event,{'parameters':{'zfpPanel:liveReportFilterDlg:_id202':'zfpPanel:liveReportFilterDlg:_id202'},'actionUrl':'/OSoft/pages/liveReport/index.jsf'});return false;" value="OK" type="button" /><input id="zfpPanel:liveReportFilterDlg:_id203" name="zfpPanel:liveReportFilterDlg:_id203" onclick="A4J.AJAX.Submit('zfpPanel:liveReportFilterDlg:_id172','zfpForm',event,{'parameters':{'zfpPanel:liveReportFilterDlg:_id203':'zfpPanel:liveReportFilterDlg:_id203'},'actionUrl':'/OSoft/pages/liveReport/index.jsf','single':true});return false;" value="Cancel" type="button" /> <script language="javascript" type="text/javascript" xml:space="preserve"> // <![CDATA[ var liveReportFilterDlgControls = new Array() registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgTitleCheck','liveReportFilterDlgDlgTitleText') registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgTypeCheck', 'liveReportFilterDlgDlgTypeCtl') registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgTeamCheck', 'liveReportFilterDlgDlgTeamCtl') registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgDateCheck', 'liveReportFilterDlgDlgDateCtl') function registerliveReportFilterDlgDlgCheckBox(checkboxId, controlIds) { var checkbox = document.getElementById(checkboxId) if (checkbox == null) { alert("Could not find " + checkboxId) return } var obj = new ReportFilterCheckBox(checkboxId, controlIds.split(",")) obj.oncheck() liveReportFilterDlgControls[checkboxId] = obj checkbox.onclick = function(evt) { var checkboxId if (window.event) checkboxId = window.event.srcElement.id else checkboxId = evt.target.id var obj = liveReportFilterDlgControls[checkboxId] obj.oncheck() } } function ReportFilterCheckBox(checkboxId,controlIds) { this.checkboxId = checkboxId this.controlIds = controlIds this.setEnabled = function(elem, value) { if (elem.tagName != null) { if (elem.tagName.toLowerCase() == 'a') setEnabledOfLink(elem, value) else elem.disabled = !value } // IE automatically handles disabled on all elements if (isInternetExplorer()) return if (elem.childNodes == null) return for (var c = 0; c < elem.childNodes.length; c++) this.setEnabled(elem.childNodes[c], value) } this.oncheck = function () { for (var i = 0; i < this.controlIds.length; i++) { var id = this.controlIds; var elem = document.getElementById(id) if (elem == null) continue var checkbox = document.getElementById(this.checkboxId) this.setEnabled(elem, checkbox.checked) } } } // ]]> // <![CDATA[ alert('okay this was called'); osoftDialog_register('zfpPanel:liveReportFilterDlg'); // ]]> //
          debug[13:10:20,370]: Update page by list of rendered areas from response zfpPanel:liveReportFilterDlg,zfpForm:messagesZone,zfpPanel:liveReportFilterDlg:_id172
          debug[13:10:20,370]: search for elements by name 'script' in element #document
          debug[13:10:20,376]: getElementsByTagName found 7
          debug[13:10:20,377]: in response with src=/OSoft/faces/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript
          debug[13:10:20,377]: Such element exist in document
          debug[13:10:20,378]: in response with src=/OSoft/faces/a4j.res/org/ajax4jsf/renderkit/html/scripts/form.js
          debug[13:10:20,378]: Such element exist in document
          debug[13:10:20,379]: in response with src=/OSoft/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/11739855/popup.HtmlPopupRenderer/JSPopup.js
          debug[13:10:20,379]: Such element exist in document
          debug[13:10:20,380]: search for elements by name 'link' in element #document
          debug[13:10:20,385]: getElementsByTagName found 0
          debug[13:10:20,386]: Attempt to update part of page for Id: zfpPanel:liveReportFilterDlg
          debug[13:10:20,386]: call getElementById for id= zfpPanel:liveReportFilterDlg
          debug[13:10:20,388]: Replace content of node by replaceChild()
          debug[13:10:20,390]: search for elements by name 'script' in element div
          debug[13:10:20,395]: getElementsByTagName found 1
          debug[13:10:20,396]: Scripts in updated part count : 1
          debug[13:10:20,396]: Update part of page for Id: zfpPanel:liveReportFilterDlg successful
          debug[13:10:20,397]: Attempt to update part of page for Id: zfpForm:messagesZone
          debug[13:10:20,397]: call getElementById for id= zfpForm:messagesZone
          debug[13:10:20,398]: Replace content of node by replaceChild()
          debug[13:10:20,399]: search for elements by name 'script' in element span
          debug[13:10:20,404]: getElementsByTagName found 2
          debug[13:10:20,404]: Scripts in updated part count : 2
          debug[13:10:20,405]: Update part of page for Id: zfpForm:messagesZone successful
          debug[13:10:20,405]: Attempt to update part of page for Id: zfpPanel:liveReportFilterDlg:_id172
          debug[13:10:20,406]: call getElementById for id= zfpPanel:liveReportFilterDlg:_id172
          error[13:10:20,406]: New node for ID zfpPanel:liveReportFilterDlg:_id172 is not present in response
          debug[13:10:20,407]: call getElementById for id= ajax-update-ids
          debug[13:10:20,407]: Hidden JSF state fields: [object HTMLSpanElement]
          debug[13:10:20,407]: search for elements by name 'input' in element span
          debug[13:10:20,411]: getElementsByTagName found 2
          debug[13:10:20,412]: Replace value for inputs: 28 by new values: 2
          debug[13:10:20,412]: Input in response: jsf_sequence
          debug[13:10:20,415]: Found same input on page with type: hidden
          debug[13:10:20,416]: Input in response: javax.faces.ViewState
          debug[13:10:20,417]: search for elements by name 'INPUT' in element span
          debug[13:10:20,421]: getElementsByTagName found 0
          debug[13:10:20,421]: Replace value for inputs: 28 by new values: 0
          debug[13:10:20,590]: Evaluate script replaced area in document: // var liveReportFilterDlgControls = new Array() registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgTitleCheck','liveReportFilterDlgDlgTitleText') registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgTypeCheck', 'liveReportFilterDlgDlgTypeCtl') registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgTeamCheck', 'liveReportFilterDlgDlgTeamCtl') registerliveReportFilterDlgDlgCheckBox('liveReportFilterDlgDlgDateCheck', 'liveReportFilterDlgDlgDateCtl') function registerliveReportFilterDlgDlgCheckBox(checkboxId, controlIds) { var checkbox = document.getElementById(checkboxId) if (checkbox == null) { alert("Could not find " + checkboxId) return } var obj = new ReportFilterCheckBox(checkboxId, controlIds.split(",")) obj.oncheck() liveReportFilterDlgControls[checkboxId] = obj checkbox.onclick = function(evt) { var checkboxId if (window.event) checkboxId = window.event.srcElement.id else checkboxId = evt.target.id var obj = liveReportFilterDlgControls[checkboxId] obj.oncheck() } } function ReportFilterCheckBox(checkboxId,controlIds) { this.checkboxId = checkboxId this.controlIds = controlIds this.setEnabled = function(elem, value) { if (elem.tagName != null) { if (elem.tagName.toLowerCase() == 'a') setEnabledOfLink(elem, value) else elem.disabled = !value } // IE automatically handles disabled on all elements if (isInternetExplorer()) return if (elem.childNodes == null) return for (var c = 0; c < elem.childNodes.length; c++) this.setEnabled(elem.childNodes[c], value) } this.oncheck = function () { for (var i = 0; i < this.controlIds.length; i++) { var id = this.controlIds
          ; var elem = document.getElementById(id) if (elem == null) continue var checkbox = document.getElementById(this.checkboxId) this.setEnabled(elem, checkbox.checked) } } } //
          debug[13:10:20,611]: Evaluate script replaced area in document: // // //
          debug[13:10:20,612]: Evaluate script replaced area in document: // var zfpForm_3AmessagesPopupCompPopup=new orgApacheMyfacesPopup('zfpForm:messagesPopupComp',-5,-5); // //

          • 2. Re: How does A4J handle in-line JavaScript?
            Andrew Apprentice

            Okay, I found the issue with one of my custom controls. I had the SCRIPT element outside the DIV tag that had the ID that A4J was replacing. Since the SCRIPT was outside the replaced area, the A4J JS script was ignoring that element. I just made sure that the SCRIPT tag was rendered inside the components rendered DIV tag.

            Sorry for the trouble