2
J'ai rencontré un besoin de cliquer sur un élément automatiquement après le chargement d'une page, donc j'ai implémenté le code suivant:document ready() ne fonctionne pas dans firefox donnant null pour élément DOM ... ie7 fonctionne bien
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
document.getElementById('handler2').click();
});
</script>
Ce qui fonctionne bien dans IE7, mais pas firefox. Quand j'exécute le script dans firefox 3 j'obtiens l'erreur suivante:
Ce que je crois est nul, parce que la page (dans firefox) n'a pas chargé complètement le DOM où se trouve l'id "handler2" ... mais je ne comprends pas. Pourquoi chargerait-il le DOM dans IE, mais pas Firefox? J'ai lu quelques messages qui ont déclaré firefox dans firefox3 fait quelques changements à la façon dont javascript est exécuté, ce qui pourrait causer le problème. Peut-être que le "document.ready" est en cours d'exécution trop tôt dans firefox3?
Quelqu'un at-il des idées ou comment résoudre ce problème?
Merci d'avance pour votre aide.
Ce n'est pas la meilleure sortie, mais la source complète est trop grande pour que stackoverflow accepte. Si vous recherchez "handler2", vous devriez le trouver dans une balise. Merci de votre aide.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <HTML><BODY id="srp" style="MARGIN-TOP: 2px; MARGIN-LEFT: 2px; CURSOR: default; COLOR: black; MARGIN-RIGHT: 2px; BACKGROUND-COLOR: white"><TABLE id="mainTable" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0" valign="top"><TBODY><TR><TD class="contentcell" vAlign="top" width="100%" height="100%"><TABLE class="manager" id="searchManager" cellSpacing="0" cellPadding="0"><TBODY><TR><TD class="managerBody" id="managerBody"><TABLE class="searchManager setHeight panelGroup" id="managerTable" style="HEIGHT: 536px" cellSpacing="0" cellPadding="0"><TBODY><TR><TD class="panelFrame filters" id="secondaryPod"><DIV class="filters setHeight" id="filters" style="HEIGHT: 503px"><DIV class="wrapper" id="filtersWrapper"><DIV class="content setHeight" id="searchFilters" style="HEIGHT: 503px"><DIV class="foldersPanel setHeight" id="foldersPanel" style="HEIGHT: 503px"><DIV class="content panelBorder foldersTree" oncontextmenu="return false;" id="foldersTree" style="WIDTH: 267px; HEIGHT: 150px"><DIV id="node1sub" style="DISPLAY: block"><DIV id="node2"><NOBR> <IMG id="handler2" style="VERTICAL-ALIGN: middle; WIDTH: 19px; HEIGHT: 20px" src="images/treeimages/plus_last.gif" /> </NOBR></DIV></DIV></DIV></DIV></DIV></DIV></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML>
Voici le code source. Ceci utilise un .jsp tiers sur Tomcat. Vous ne pourrez pas voir la liste étendue car un processus java la crée, mais il y a un élément "handler2" avec un événement click que je déclenche. J'espère que ce n'est pas trop de code pour encombrer la question. Mon script est tout en bas. Cette page .jsp utilise prototype.js, ce qui est la raison pour laquelle j'utilisais le « pas de conflit » pour que je puisse utiliser jquery ... Je ne sais pas prototype.js
Code Source:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/jasperserver.tld" prefix="js" %>
<%@ taglib uri="/spring" prefix="spring" %>
<%@ taglib prefix="authz" uri="http://www.springframework.org/security/tags" %>
<%@ page errorPage="/WEB-INF/jsp/JSErrorPage.jsp" %>
<%@ page import="org.apache.commons.lang.StringEscapeUtils" %>
<html>
<head>
<link href="${pageContext.request.contextPath}/stylesheets/table.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/stylesheets/customtooltip.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/stylesheets/std_treelook.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/stylesheets/manager.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/stylesheets/search.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/toolkit/parts/css/infiniteScroll.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/toolkit/parts/css/optionSet.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/toolkit/parts/css/tabularList.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/stylesheets/search.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/stylesheets/searchMenus.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="${pageContext.request.contextPath}/stylesheets/search-ie-specific.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE]>
<link href="${pageContext.request.contextPath}/stylesheets/manager/ie-specific.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link href="${pageContext.request.contextPath}/stylesheets/manager/ie7-specific.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/edition.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/dialog.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/checkbox-utils.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/table.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/customTooltip.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/nanotree.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath}/scripts/treesupport.js"></script>
<%--<script src="${pageContext.request.contextPath}/toolkit/utilities/common.js" type="text/javascript"></script>--%>
<script src="${pageContext.request.contextPath}/toolkit/parts/javascript/tabularList.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/toolkit/parts/javascript/infiniteScroll.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/ajax.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/rootObjectModifier.js"></script>
<script src="${pageContext.request.contextPath}/scripts/search/dialog.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/components.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/search.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/menu.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/dnd.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/resourceactions.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/folderactions.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/bulkactions.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/search/searchLayoutManager.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/scripts/e.js" type="text/javascript"></script>
<script type="text/javascript">
webHelpModule.currentContext = "search";
</script>
</head>
<body id="srp" >
<table id="searchManager" class="manager" cellspacing="0px" cellpadding="0px">
<tr><td class="fsection managerTitle"></td></tr>
<tr>
<td id="managerBody" class="managerBody">
<table id="managerTable" class="searchManager setHeight panelGroup" cellspacing="0px" cellpadding="0px">
<tr style="height:1px;">
<td style="height:1px;"id="filtersHeader" class="panelHeader mainListFrame">
<!--COMMENTED BY AARON removes the label "SEARCH"
<h2>
<spring:message code="SEARCH_FILTERS" javaScriptEscape="true"/>
</h2>
-->
</td>
<td style="height:1px;" class="panelHeader sizerFrame" > </td>
<td style="height:1px;" class="panelHeader">
<!--COMMENTED BY AARON removes the label "REPOSITORY"
<h2>
<spring:message code="SEARCH_RESOURCE_TITLE" javaScriptEscape="true"/>
</h2>
-->
</td>
</tr>
<tr>
<td id="secondaryPod" class="panelFrame filters">
<div id="filters" class="filters setHeight">
<div id="filtersWrapper" class="wrapper">
<div id="searchFilters" class="content setHeight">
<div id="foldersPanel" class="foldersPanel setHeight">
<!--COMMENTED BY AARON to remove the header class which draws the box around the "include subfolders checkbox" see tag below
<div class="header">
-->
<div class="">
<!-- COMMENTED BY AARON Hides the SEARCH TEXT BOX options for filtering
<div id="js-search-secondary-control" class="js-search-control" style="width: 100%">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input id="secondarySearchText" name="searchText" type="text" class="rndCorners-all default" value=""/>
<div id="secondaryClearBtn" title="<spring:message code='SEARCH_BOX_CLEAR_LABEL'/>" class="clear setHidden"> </div>
</td>
<td class="button">
<button id="secondarySearchBtn" class="submit up" title="<spring:message code='SEARCH_BOX_SEARCH_LABEL'/>" type="submit">
<spring:message code='SEARCH_BOX_SEARCH_LABEL'/>
</button>
</td>
</tr>
</table>
</div>
-->
</div>
<div id="foldersTree" class="content panelBorder foldersTree" oncontextmenu="return false;"></div>
<!-- Controls the Checkbox for "Include Subfolders"
by moving the div below to "after the <div id="foldersTree"> it effectively hides the checkbox, other wise
the whole folder of reports gets hidden if u try to comment it
-->
<div >
<input id="searchMode" type="checkbox" class="modeSelector setHidden"/>
<span id="searchModeLabel" class="checkboxLabel setHidden">
<spring:message code='SEARCH_SWICH_MODE'/>
</span>
</div>
</div>
<div id="filtersPanel" class="filtersPanel filterList panelBorder" style="display:none;"></div>
<table id="filtersTable" class="panelBorder" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="panelHeader mainListFrame">
<h2>
<!--COMMENTED BY AARON . Removes the "Refine Label"
<spring:message code="SEARCH_REFINE" javaScriptEscape="true"/>
-->
</h2>
</td>
</tr>
<!--COMMENTED BY AARON. Removes the first top row for the REFINE category
<tr>
<td class="panelBorder top"> </td>
</tr>
-->
</tbody>
<!---->
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</td>
<td class="sizerFrame">
<!--ADDED BY AARON. Added the "Style" portion to add a different box around the resizer
<div id="vSizer" class="setHeight sizer vertical">
-->
<div id="vSizer" class="setHeight sizer vertical" style="border-width:1px;border:#F0F0F0;border-style:solid;">
</div>
</td>
<td id="primaryPod" class="panelFrameLast result">
<div id="result" class="panelBorder setHeight setWidth">
<div id="resultWrapper" class="wrapper">
<div class="toolbar container labels">
<div class="buttonSet fl">
<input id="bulkCheckbox" class="bulkSelector" value="" type="checkbox">
</div>
<div id="bulkBar" class="buttonSet fl">
</div>
<%--<div id="createResourceBar" class="buttonSet fl">--%>
<%--<button id="createResource" class="toolbarBtn complex up">--%>
<%--<span class="label"> </span>--%>
<%--<span class="menuSignal"> </span>--%>
<%--</button>--%>
<%--</div>--%>
<div class="cb"></div>
</div>
<div class="toolbar secondary bulkBar">
<div id="filterPath" class="container" style="float:left;">
<ul class="tabSet optionSet"></ul>
</div>
<div id="searchSort" class="container">
<ul id="sortBar" class="tabSet optionSet"></ul>
</div>
<div style="float:none;">
</div>
</div>
<div id="" class="<%--wrapper--%> tabularList setMyWidth" <%--style="display: none"--%>>
<table id="allResultsHeaderTable" class="setMyWidth" cellspacing="0px" cellpadding="0px">
<thead>
<tr class="headers">
<th class="bulkSelector" scope="col"></th>
<th class="scheduled" scope="col"></th>
<th class="expander" scope="col"></th>
<th class="name" scope="col"></th>
<th class="description" scope="col"></th>
<th class="modifiedDate" scope="col"></th>
</tr>
</thead>
<tbody class="resultGroup">
<tr id="allResultsHeader" style="display:none;" class="content">
<th class="typeHeader" colspan="6"><h4 id="resourceName" class="textAccent"></h4></th>
</tr>
</tbody>
</table>
</div>
<!--COMMENTED BY AARON: THIS IS THE BEGINNING OF THE PANEL THAT HAS THE LIST OF REPORTS-->
<div id="resultContent" class="content setMyWidth setHeight" oncontextmenu="return false;">
<div id="resourceList" class="wrapper tabularList setHidden">
<table id="resultsTable" class="" cellpadding="0" cellspacing="0">
<thead>
<tr class="headers">
<th class="bulkSelector" scope="col"></th>
<th class="scheduled" scope="col"></th>
<th class="expander" scope="col"></th>
<th class="name" scope="col"></th>
<th class="description" scope="col"></th>
<th class="modifiedDate" scope="col"></th>
</tr>
</thead>
<tbody class="resultGroup">
<tr colspan="5"></tr>
</tbody>
</table>
</div>
<div id="allList" class="wrapper tabularList setHidden">
<table id="allResultsTable" cellspacing="0px" cellpadding="0px">
</thead>
<tbody class="resultGroup">
<!--COMMENTED BY AARON. To remove an extra row
<tr colspan="5"></tr>
-->
</tbody>
</table>
</div>
</div>
<!--COMMENTED BY AARON: END OF THE PANEL THAT HAS THE LIST OF REPORTS-->
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="ajaxbuffer" style="display: none;"></div>
<%@ include file="menu.jsp" %>
<%@ include file="../repository/dragAndDrop.jsp" %>
<%@ include file="folder.jsp" %>
<div id="errorMsgBox" class="dialogFrame searchModalDialog" style="display: none; position: absolute;">
<div class="dialogHeader" onMouseDown="dialogOnMouseDown(event);">
<div id="errorMsgBoxTitle" class="dialogHeaderTitle"><spring:message code="SEARCH_CONFIRMATION_MESSAGE_BOX_TITLE"/></div>
</div>
<div class="dialogContent deleteDialogContent" onKeyPress="cancelEventBubbling(event);">
<div id="errorMsgBoxMessage" class="dialogMessages wrap"></div>
<div class="dialogButtons">
<input id="errorMsgBoxOk" value="OK" type="button" class="dialogButton">
</div>
</div>
</div>
<div id="confirmBox" class="dialogFrame searchModalDialog" style="display: none; position: absolute;">
<div class="dialogHeader" onMouseDown="dialogOnMouseDown(event);">
<div id="confirmBoxTitle" class="dialogHeaderTitle"><spring:message code="SEARCH_CONFIRMATION_MESSAGE_BOX_TITLE"/></div>
</div>
<div class="dialogContent deleteDialogContent" onKeyPress="cancelEventBubbling(event);">
<div id="confirmBoxMesage" class="dialogMessages"></div>
<div class="dialogButtons">
<input id="confirmBoxOk" value="Yes" type="button" class="dialogButton">
<input id="confirmBoxCancel" value="No" type="button" class="dialogButton">
</div>
</div>
</div>
<form id="redirectForm" action="flow.html" method="post" onSubmit="return false;" style="display:none;">
<input id="_flowExecutionKey" name="_flowExecutionKey" value="${flowExecutionKey}" type="hidden" />
<input id="_eventId" name="_eventId" value="redirect" type="hidden" />
<input id="flowParams" name="flowParams" value="" type="hidden" />
</form>
<!-- Page Specific Scripts -->
<script id="messagesScript" type="text/javascript">
<c:forEach var="type" items="${searchConfiguration.labelsForTypes}"
>messages["properties.type.${type}"] = '<spring:message code="resource.${type}.label" javaScriptEscape="true"/>';
</c:forEach>
<c:forEach var="type" items="${searchConfiguration.supportedTypes}"
>messages["${type}"] = '<spring:message code="SEARCH_${type}" javaScriptEscape="true"/>';
</c:forEach>
<c:forEach var="mode" items="${searchConfiguration.modes}"
>messages["mode.<c:out value="${mode}"/>"] = '<spring:message code="SEARCH_MODE_${mode}" javaScriptEscape="true"/>';
</c:forEach>
<c:forEach var="type" items="${searchConfiguration.typeFilter.types}"
>messages["${type.labelId}"] = '<spring:message code="${type.labelId}" javaScriptEscape="true"/>';
</c:forEach>
<c:forEach var="customFilter" items="${searchConfiguration.customFilters}">
<c:forEach var="option" items="${customFilter.options}">
messages["${option.labelId}"] = '<spring:message code="${option.labelId}" javaScriptEscape="true"/>';
</c:forEach>
</c:forEach>
<c:forEach var="sorter" items="${searchConfiguration.sorters}"
>messages["sort.by.${sorter.id}"] = '<spring:message code="${sorter.labelId}" javaScriptEscape="true"/>';
</c:forEach>
messages["root.filter"] = '<spring:message code="SEARCH_ROOT_FILTER" javaScriptEscape="true"/>';
messages["noResults"] = '<spring:message code="SEARCH_NO_RESULTS" javaScriptEscape="true"/>';
</script>
<script type="text/javascript" defer="defer">
// Init root object modifier variables.
var organizationId = "${organizationId}";
var publicFolderUri = "${publicFolderUri}";
Search.Folder.publicUri = "${publicFolderUri}";
JSAJAX.flowExecutionKey = '${flowExecutionKey}';
Search.conf = ${searchConfiguration.json};
<authz:authorize ifAllGranted="ROLE_ADMINISTRATOR">
Search.User.isAdministrator = true;
</authz:authorize>
<c:if test="${defaultTypeFilter != null}">
Search.conf.typeFilter.defaultType = '${defaultTypeFilter}';
</c:if>
var search = {};
document.observe("dom:loaded", function() {
CursorManager.initialize();
KeyManager.initialize();
MenuManager.initialize();
search = new Search(${searchFilters});
search.activate();
new SearchDnD(search);
new LayoutDnD();
disableSelectionWithoutCursorStyle($('foldersTree'));
disableSelectionWithoutCursorStyle($('vSizer'));
disableSelectionWithoutCursorStyle($('searchMenuTemplate'));
disableSelectionWithoutCursorStyle($('addMenuTemplate'));
disableSelectionWithoutCursorStyle($('primaryPod'));
});
// Secondary search box initialization
var jsSearchBoxSecondary = new JSSearchBox("js-search-secondary-control", "<spring:message code='SEARCH_BOX_DEFAULT_TEXT'/>",
"<c:if test="${searchText != null}"><%= StringEscapeUtils.escapeJavaScript(request.getSession().getAttribute("searchText").toString())%></c:if>",
{inputId: "secondarySearchText", clearBtnId: "secondaryClearBtn", searchBtnId: "secondarySearchBtn"});
jsSearchBoxSecondary.onSearch = function(searchString) {
search.showTypedList();
search.notifyFilterSelected(Filter.Types.searchTermFilter, "'" + searchString + "'");
search.loadData(searchString);
};
jsSearchBoxSecondary.onClear = function() {
search.showTypedList();
search.notifyFilterSelected(Filter.Types.searchTermFilter, "<spring:message code='SEARCH_ROOT_FILTER'/>");
search.loadData("");
};
jsSearchBoxSecondary.activate();
</script>
<script type="text/javascript">
// var $j = jQuery.noConflict();
// $j(function($) {
// $j('#handler2').click(function(e) {
// e.preventDefault();
// document.getElementById('handler2').click();
// alert('hello');
// });
// });
jQuery(document).ready(function() {
document.getElementById('handler2').click();
});
</script>
</body>
</html>
Où est ce bloc de code situé?Dans 'head' ou avant/après handler2? –
C'est au bas de la page, je ne peux pas le charger si je le mets dans la tête, même si je ne sais pas pourquoi, je mets généralement le js dans la tête? – Ronedog
Essayez d'utiliser "jQuery (document) .ready (function ($) {...});" à la place. – lucifurious