HighCharts is conflicting with jquery datepicker - javascript

I Had a working PHP page where the datepicker script from jquery would work with no issues. I decided to include HighCharts into the same page. As soon as I do, the datepicker stops working. If I remove highcharts the datepicker starts to work no issues. I tried putting noconflict for the datepicker and that did not work. Does anybody know how to have the jquery datepicker work with highcharts?
<link rel="stylesheet" href="../../style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../style/menustyle.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../scripts/datepicker/jquery-ui.css" />
<script src="../../scripts/datepicker/jquery-1.9.1.js"></script>
<script src="../../scripts/datepicker/jquery-ui.js"></script>
<style>
.auto-style1 {
font-family: "Lucida Calligraphy";
text-align:center;
}
</style>
<script>
$(function() {
$( "#Date1" ).datepicker({
changeMonth: true,
changeYear: true
});
});
$(function() {
$( "#Date2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body style="color: #black; background-color: #0000FF;">
<div align="center"id="MainWrapper" style="width: 90%">
<div id="Maincontainer" style="width:100%">
<div id="PageHeader">
<?php include_once("../../template/template_header.php");?>
</div>
<div id="leftcolumn">
<?php include_once("../../template/menu.php"); ?>
</div>
<div id="content" style="background-color:#EEEEEE;height:auto;width:70%;float:left;">
<h2 class="auto-style1">Call Exception Tracker - Reporting Portal</h2>
<form name="reportform" method="post">
<table class="auto-style1" width="100%">
<tr>
<td style="height: 30px; width: 231px;" valign="bottom">From <input name="Date1" id="Date1" type="text" /></td>
<td style="height: 30px; width: 193px" valign="bottom">to <input name="Date2" id="Date2" type="text" /></td>
</td>
</tr>
</table>
</form>
<br />
<div id="container" align="center" width="99%">
<?php include_once("pie.php"); ?> //This is where HighCharts comes in
</div>
<div id="info"></div>
</div>
<div id="PageFooter">
<?php include_once("../../template/template_footer.php");?>
</div>
</div>
</div>
</body>

Related

validity and fancybox wont appear

I just recently starting to learn about programing. Right now im working on my little project for learning jquery. But i found some difficulty in those. The validity plugin and fancy box wont appear at all. Here is my code :
Fancybox :
<script type="text/javascript" src="../plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../plugin/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<?php
if(!defined("INDEX")) die("---");
?>
<h2>Galeri Foto</h2>
<div class="galeri">
<table cellpadding="5">
<tr>
<?php
$no=1;
$artikel = mysqli_query($koneksi, "select * from `Tabel Galeri` order by id_galeri desc limit 12");
while($data=mysqli_fetch_array($artikel)){
?>
<td align="center">
<a class="fancybox" href="../gambar/galeri/<?=$data['gambar'];?>" title="<?=$data['judul'];?>">
<img src="../gambar/galeri/<?=$data['gambar'];?>" width="150" height="100">
<br><?=$data['judul'];?>
</a>
</td>
<?php
if($no%4 == 0) echo"</tr><tr>";
$no++;
}
?>
</tr>
</table>
</div>
Validity
<script src="../plugin/validity/build/jquery.validity.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../plugin/validity/build/jquery.validity.css" >
<script type="text/javascript">
$(document).ready(function() {
$("#formkontak").validate(function(){
$("#nama").require('Nama tidak boleh kosong!');
$("#email").require('Email tidak boleh kosong!').match('email', 'Email tidak valid!');
$("#pesan").require('Pesan tidak boleh kosong!');
});
});
</script>
<?php
if(!defined("INDEX")) die("---");
?>
<h2>Kontak</h2>
<form method="post" action="?tampil=kontak_proses" id="formkontak">
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td valign="top">Pesan</td>
<td><textarea name="pesan" id="pesan" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Kirim Pesan"></td>
</tr>
</table>
</form>
Index file:
<?php
session_start();
include("../lib/koneksi.php");
define("INDEX", true);
?>
<html>
<head>
<title> Halaman Pengunjung </title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu">
<?php include("menu.php");?>
</div>
<div id="content">
<div id="kiri">
<?php include("konten.php");?>
</div>
<div id="kanan">
<?php include("sidebar.php");?>
</div>
</div>
<div id="footer">
<p>Copyright © HASBY FAHRUDIN</p>
</div>
</div>
</body>
</html>
I try to trace my code one by one (based on book that i read) and looked for solution in stackoverflow but i cant make it works. Sorry for asking a basic question and i hope someone can help me. Cheers!

Create a dynamic Datepicker Jquery

Is there any way I could create a dynamic data picker like the image given below
This is What I have tried. But I want more interactive date picker. Is there any way I could create I given in the Image. This was not as my staff needed. So, I need some good look date picker for my assignment submit
NaCH.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Challenge</title>
<!-- Viewport-->
<meta name="viewport" content="width=device-width" />
<!-- Favicons
<link rel="shortcut icon" href="img\favicon.png" type="image/x-icon"> -->
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/date.js"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="block2">
<div class="container">
<div class="well"></div>
</div>
</section>
<section id="nach">
<div class="container2" style="margin-top:40px">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<tr class="header">
<td style="padding-left:25px;">Show</td>
<td>
<select>
<option value="" style="display:none;"></option>
<option value="0">KYC <span>COMPLETED</span></option>
<option value="1">MANDATE <span>SENT</span></option>
<option value="2">MANDATE <span>RECEIVED</span></option>
</select>
</td>
</tr>
<tr class="body">
<td >Sl.no</td>
<td style="text-align:left;">Customers</td>
<td>KYC COMPLETED</td>
<td>MANDATE SEND</td>
<td>CLEARED</td>
<td>DISAPPROVED</td>
</tr>
<tr id="calenderdate">
<td>01</td>
<td style="text-align:left;">Ellen <span>De generes</span></td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td ><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td class="tick2"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
<td class="wrong"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
</tr>
<tr id="calenderdate">
<td>02</td>
<td style="text-align:left;">De generes</td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td><input type="text" is-datepicker="1" placeholder="01/02/2016">
<img class="checked" src="img/gear.png" width="10px" height="10px">
</td>
<td class="tick3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
<td class="wrong3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
</tr>
</table>
</div>
</div>
</section>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
$(function() {
$("[is-datepicker=1]").each(function() {
$(this).datepicker({
showOn:"button",
buttonImage: "img/calendar.png",
buttonImageOnly: true
});
});
});
Here, we're giving an attribute for the inputs is-datepicker and telling the JS code to apply the datepicker function to each of these fields.
Use different id's like datepicker1, datepicker2 for multiple date
$( "#datepicker1" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
Or use foreach as suggested by Roc Khalil

How to reload table content only whenever a database record is added/changed

I have a PHP page which contains 2 tabs Entry and View. From the Entry tab I can insert data in a database and on my View tab I have an HTML table which displays the data. There is also a provision to insert data from my View tab as well.
I want to reload my table every time some new data is added. I tried this using jQuery but the problem is that it reloads my entire page and sends me back to my Entry tab, even if I have inserted the data from my View tab. Can anyone tell me if there is any provision to reload just HTML table every time I add new data to the database and stay on the same tab from wherever I have added my data?
Here is what I have tried:
$(document).ready(function(e) {
var refresher = setInterval("update_content();", 60000);
})
function update_content(){
$.ajax({
type: "GET",
url: "main.php",
cache: false,
}).done(function( page_html ) {
// alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
});
}
main.php code goes here-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Logsheet-Dhanraj & Co.</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/table_edit.css" rel="stylesheet">
<link href="css/styleinputcontainer.css" rel="stylesheet">
<link href="css/footable.standalone.css" rel="stylesheet">
<link href="css/footable.core.css" rel="stylesheet">
<link rel="stylesheet" href="jquery-ui\jquery-ui-themes-1.11.4\jquery-ui-themes-1.11.4\themes/smoothness/jquery-ui.css" />
</head>
<body>
<header>
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title ">Logsheet-Dhanraj
<button type="button" class="close" data-dismiss="panel">×</button></div>
</div><!--panel heading-->
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active">Entry</li>
<li >View</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="Entry">
<div class="container-fluid">
<form id="dataentry" action="insert_data.php" method="post">
<div class="row">
<br />
<br />
</div><!--empty row-->
<div class="row">
<div class="form-group col-md-2">
<label for="Date">Date</label></br>
<input type="text" name="date" id="date" autocomplete="off"/>
</div><!--col 1-->
<div class="form-group col-md-3">
<div class="input_container">
<label for="Clientname">Client Name</label></br>
<input type="text" name="clientname" id="clientname" onkeyup="autocomplete_client()" autocomplete="off" />
<ul id="clientlist_id"></ul>
</div><!--inputcontainer client-->
</div><!--col 2-->
<div class="form-group col-md-4">
<div class="input_container">
<label for="Staff">Staff</label></br>
<input type="text" name="staff" id="staff" onkeyup="autocomplete_staff()" autocomplete="off"/>
<ul id="stafflist_id"></ul>
</div><!--inputcontainer staff-->
</div><!--col 3-->
</div><!--row1-->
<div class="row">
<div class="form-group col-md-12">
<label for="Matter">Matter</label></br>
<textarea rows="4" cols="60" name="matter" id="matter" ></textarea>
</div><!--matter col-->
</div><!--row2-->
<div class="row">
<div class="col-md-9">
<button id="sub" name="submit" class="btn btn-info">Submit</button>
<button id="cancel" class="btn btn-danger">Cancel</button>
</div><!--button col-->
</div><!--row3-->
</form>
<div class="container-fluid">
<br />
<div class="row">
<br />
<p id="result"></p>
</div>
</div><!--result-container-->
</div><!--entry container-->
</div><!--entry tab-->
<div class="tab-pane fade" id="View">
<div class="container-fluid" id="view_result"><br />
<form id="viewentry" action="view_insert.php" method="post">
<div class="inputWrapper">
<div class="row">
<div class="col-md-3">
<div class="input_container">
<label for="Client Name">Client Name</label><br />
<input type="text" name="viewclientname" id="viewclientname" onkeyup="viewautocomplete_client()" autocomplete="off"/>
<ul id="viewclientlist_id"></ul>
</div>
</div>
<div class="col-md-3">
<div class="input_container">
<label for="Staff Name">Staff Name</label><br />
<input type="text" id="viewstaff" name="viewstaff" onkeyup="viewautocomplete_staff()" autocomplete="off"/>
<ul id="viewstafflist_id"></ul>
</div>
</div>
<div class="col-md-4">
<label for="Matter">Matter</label><br />
<input type="text" id="matter" name="matter" />
</div>
<div class="col-md-1">
<br />
<button id="add" class="btn btn-info">Add New</button>
</div>
<div class="col-md-1">
<br />
<button id="can" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</form>
<p id="done"></p>
<div class="row">
<br /><br /><label for="Search">Search:</label>
<input type="text" id="filter" /><br><br>
</div>
<div id="divGrid">
<table class="footable" data-filter="#filter" id="tableresult">
<thead>
<th>Client name</th>
<th>Staff name</th>
<th>Matter</th>
<th> Delete</th>
</thead>
<?php
include('db.php');
$sql=mysql_query("SELECT * FROM newdata ORDER BY client_name ASC");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$clientname=$row['client_name'];
$staff=$row['staff'];
$matter=$row['matter'];
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span>
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span>
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>
<td class="delete_td"><input type="button" id="del" class="btn btn-danger" value="×"></input></td>
</tr>
<?php
}
?>
</tbody>
<tfoot class="hide-if-no-paging">
<th> </th>
<th>
<div class="pagination pagination-centered"></div>
</th>
<th> </th>
<th> </th>
</tfoot>
</table>
</div>
</div>
</div><!--view tab-->
</div><!--tab content-->
</div><!--panel body-->
</div><!--panel info-->
</div><!--container-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/footable.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/footable.filter.js"></script>
<script type="text/javascript" src="js/footable.paginate.js"></script>
<script type="text/javascript" src="scripts/autocomplete.js"></script>
<script type="text/javascript" src="scripts/view_autocomplete.js"></script>
<script type="text/javascript" src="scripts/footable.js"></script>
<script type="text/javascript" src="scripts/insert_submit.js"></script>
<script type="text/javascript" src="scripts/view_insert.js"></script>
<!--<script type="text/javascript" src="scripts/selected_row.js"></script>-->
<script type="text/javascript" src="scripts/table_edit.js"></script>
<script type="text/javascript" src="scripts/deletefootable_row.js"></script>
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true
});
});
</script>
<script>
$(document).ready(function(e) {
var refresher = setInterval("update_content();",60000); // 60 seconds
})
function update_content(){
$.ajax({
type: "GET",
url: "main.php", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
cache: false, // be sure not to cache results
})
.done(function( page_html ) {
// alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
//alert(page_html);
newDoc.close();
});
}
</script>
</body>
</html>
jquery's .load() method does exactly this:
function update_content() {
$('#divGrid').load('main.php #divGrid>table');
}

jQuery slider button shows through data picker

I have a jQuery datepicker on a form and a jQuery slider just below it. When I select the datepicker the calendar pops up, but the button from the slider is visible on top of the calendar.
Is there a way to make sure that the calendar is on top of all other elements on the form?
Here's the page source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My ASP.NET Web Page</title>
<link href="../Styles/Site.css" rel="stylesheet" />
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link type="text/css" href="../css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
//date picker
$(function () {
$("#classDate").datepicker({ minDate: 0 });
});
//Slider1
$(function() {
$("#slider1").slider({
value:60,
min: 0,
max: 120,
step: 5,
slide: function( event, ui ) {
$("#class1").val(ui.value);
}
});
$("#class1").val($("#slider1").slider("value"));
});
//Slider2
$(function () {
$("#slider2").slider({
value: 6,
min: 1,
max: 12,
step: 1,
slide: function (event, ui) {
$("#class2").val(ui.value);
}
});
$("#class2").val($("#slider2").slider("value"));
});
</script>
</head>
<body>
<div id="page">
<div id="main">
<div id="content">
<form method="post" action="">
<fieldset>
<legend>Sign-up Form</legend>
<ol>
<li class="classDate">
<label for="classDate">Date:</label>
<input type="text" id="classDate" name="classDate" title="Start Date" />
</li>
<li class="class1">
<label for="class1">Slider1:</label>
<input type="text" id="class1" name="class1" title="slider1" style="border:0; color:#f6931f; font-weight:bold;" />
<br/>
<div id="slider1" class="slider" ></div>
</li>
<li class="class2">
<label for="class2">Slider2:</label>
<input type="text" id="class2" name="class2" title="slider2" style="border:0; color:#f6931f; font-weight:bold;" />
<br /><div id="slider2" class="slider" ></div>
</li>
</ol>
<p class="form-actions">
<input type="submit" value="createClass" title="createClass" />
</p>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Edit:
Still no takers on this, so here's a image to make it clear. The left side shows the normal form; a few boxes and sliders. The right side shows what happens when a user tries to select a date. You can see that the button for the slider is appearing on top of the calendar that pops up.
Add this to your CSS:
.ui-datepicker {z-index:3!important;}

document ready() not working in firefox giving null for DOM element...ie7 working fine [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
I have come across a need to click an element automatically after a page has been loaded, so I implemented the following code:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
document.getElementById('handler2').click();
});
</script>
Which is working fine in IE7, but not firefox. When I run the script in firefox 3 I get the following error: document.getElementById("handler2") is null
Which I believe is null, because the page (in firefox) hasn't loaded the DOM entirely where the id "handler2" is located...but I don't get it. Why would it load the DOM in IE, but not Firefox? I read some posts that stated firefox in firefox3 made some changes to how javascript is executed, which might cause the problem. Perhaps the "document.ready" is being executed too soon in firefox3?
Anyone got any ideas or how to fix this?
Thanks in advance for your help.
This isn't the best output, but the full source is too large for stackoverflow to accept. If you search for "handler2" you should find it inside an tag. Thanks for your help.
<!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>
Here's the Source Code. This is using 3rd party .jsp on tomcat. You won't be able to see the expanded list because a java process is creating it, but there is an element "handler2" with a click event that I am triggering. I hope this isn't too much code to clutter up the question. My script is at the very bottom. This .jsp page is using prototype.js, which is why I was using the "no conflict" so I could use jquery...I don't know prototype.js
Source Code:
<%# 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>
Try to use code below:
<script type="text/javascript">
jQuery(function($) {
$('#handler2').click(function(e) {
e.preventDefault();
alert('hello');
});
});
</script>
I see "handler2" is an image, so I guess that jQuery document ready event is happening before all images finished loading.
Adding this to the image tag itself should work though:
onload="this.click();"
You are using jQuery to launch the function, but not to make the click happens. This seems wrong, since you might have to deal with browsers not supporting getElementById. Your code could read like this:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#handler2').click();
});
</script>
This makes jQuery perform the click. My experience is that this does not always work as expected. Best results are when you have the click event attached using jQuery.
What would be even smarter, is to bypass the click and perform the JavaScript that the click is supposed to execute. I'm assuming the click on #handler2 is some kind of JavaScript function, let's call it handler2_click().
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
handler2_click(); // add params if necessary
});
</script>
try following:
(function($) {
document.getElementById('handler2').click();
})(jQuery);

Categories