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!
Related
I am trying to save form input into session variable using ColdFusion. I have tried many methods that I found posted on websites, but none of it is working on my code. Can anyone guide me on this?
Below is my full code.
<html>
<head>
<link rel="STYLESHEET" href="css/iesync2.css" type="text/css">
<link rel="STYLESHEET" href="css/iesync_style(awps).css" type="text/css">
<!--- <link rel="stylesheet" href="css/bootstrap-3.3.6-dist/js/jquery-ui-1.8.10.custom.css" /> --->
<link href="css/bootstrap-3.3.6-dist/js/bootstrap.min.css" rel="stylesheet">
<script src="css/bootstrap-3.3.6-dist/js/jquery-1.11.3.min.js"></script>
<!--- <script src="css/bootstrap-3.3.6-dist/js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/iesync_popup.js"></script> --->
<script language="javascript" src="css/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<cfoutput>
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
/*window.close();*/
}
}
</script>
</cfoutput>
</head>
<body>
<cfoutput>
<cfif structKeyExists(form,"submit")>
<cfset session.brandName = "#form.brandName#">
</cfif>
<center>
<div>
<form name="frmAddModel" action="" method="post" onSubmit="">
<br />
<table border="0" cellpadding="2" cellspacing="2" width="50%">
<tr>
<td colspan="2" align="left" class="cssSubTitleC">Model</td>
</tr>
<tr class="cssLine2L">
<td align="left">Brand Code (optional)</td>
<td><input type="Text" name="brandcode" size="25" class="cssForm" maxlength="10"></td>
</tr>
<tr class="cssLine2L">
<td align="left" class="cssLine2L">Brand Name<font class="cssRequired">*</font></td>
<td><input type="Text" name="brandName" size="25" class="cssForm" maxlength="10"></td>
</tr>
</table>
<table border="0" width="50%" style="padding: 10px;">
<tr>
<td class="cssButtonLine" colspan="2">
<input type="button" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
</td>
</tr>
</table>
</form>
</div>
</center>
</cfoutput>
</body>
</html>
You are never submitting the form in your JavaScript. Add an id to your form and this $("#form-id").submit(); to your function and try again.
Add an id to your form:
<form name="frmAddModel" id="frmAddModel" action="" method="post" onSubmit="">
Then add this $("#frmAddModel").submit(); to your function:
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
$("##frmAddModel").submit();
/*window.close();*/
}
}
</script>
NOTE: you need to use double hash-tags ## because your JavaScript function is currently wrapped by cfoutput tags. Although that does not appear to be necessary as currently written.
Change field type from 'button' to 'submit':
<input type="submit" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
I want http://jsfiddle.net/tv0evg7d/1/ to implement in my website. I copied the codes so that I can test whether its working or not. But when I click show on my website the image is not loaded as its working in the Fiddle. jQuery library is loaded from the header file which is included in the page. The library is named as jquery.min.js. Everything seems to be fine but I am not getting why its not working. Please help me and thanks in advance.
Markup from fiddle:
<input id="inputBox" value="http://www.clusterflock.org/wp-content/uploads/2010/09/owl-in-a-hat.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>
Code
$("#loadImage").on('click', function(){
$("#image").attr("src", $("#inputBox").val());
});
My script:
<script>
$("#loadImage").click(function(){
$("#image").attr("src", $("#inputBox").val());
});
</script>
<div id="wrapper">
<div class="main-container height-auto" style="width: 20%">
<?php include'side-menu.php'; ?>
</div>
<div class="main-container height-auto main-cont-adjust">
<div class="container-title">
<h3>Banner Ads on <?php echo $sf['si_name']; ?></h3>
</div>
<div class="divider"></div>
<div class="member-index-container" align="right">
<div class="mi-banner" style="margin-left: 0"><img src="images/adv-here2.png"></div>
</div>
<br>
<?php echo $msg; ?>
<div class="ads-box">
<table class="table-list">
<!--form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"-->
<tr>
<th class="left-align">Banner URL</th>
<td class="left-align"><input type="text" name="burl" class="ad-field" required value="<?php echo $burl; ?>"></td>
</tr>
<tr>
<th class="left-align">Target URL</th>
<td class="left-align"><input type="text" name="turl" class="ad-field" required value="<?php echo $turl; ?>"></td>
</tr>
<tr>
<th class="left-align">Duration</th>
<td class="left-align"><select name="bprice" class="select-field" required>
<?php while($bpf = $bpq->fetch()){ extract($bpf); ?>
<option value="<?php echo $bp_id; ?>"><?php echo $bp_days; if($bp_days > 1){ echo " days at $"; }else{ echo " day at $"; } echo $bp_amount; ?></option>
<?php } ?>
</select></td>
</tr>
<tr>
<th class="left-align">Wallet Balance: $<?php echo $pc_bal; ?></th>
<th align="right"><input type="submit" name="buy_ad" value="Pay with Wallet" class="login-btn btn btn-black" style="width: 170px"></th>
</tr>
</form>
</table>
</div>
<input id="inputBox" value=""/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded" />
<div class="container-title">
<h4>Ad Preview - This is how your Ad will look like</h4>
</div>
<div class="mi-banner" style="margin-left: 0; border: 1px solid #ddd;">
<!--img src="" id="image" alt="Type or Paste banner URL and click on CHECK"-->
</div>
</div>
</div>
Try this
$(document).ready(function() {
$("#loadImage").on('click', function() {
$("#image").attr("src", $("#inputBox").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="inputBox" value="http://publicador.tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>
Wrap you function with $(document).ready(function() {..});
$(document).ready(function() {
$("#loadImage").on('click', function() {
$("#image").attr("src", $("#inputBox").val());
});
});
From your comment "and header.php is included in this page" so basically, this code attempts to run prior to jQuery being included. That appears to be your real issue here. You should instead include jQuery on the page and then on the header only load it if it is not already present
There are many posts you can find on how to do that last part.
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');
}
JSON Array not returning object instead returning value
HI friends i have a scenario wherein the user enters his memberid i do a jquery ajax with memberid and fetch the details related to him and put it in a textbox ,
It was working fine on my server when the code is deployed to other server i'm not getting the result
the code is as shown below
createaccount.php
<title>Century Club</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/century-club.css" rel="stylesheet">
<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function check()
{
var mid = $("#memberid").val();
var dataString = "mid=" + mid ;
$.ajax({
type: "POST",
url: "getdetails2.php",
datatype: 'json',
data: dataString,
beforeSend: function()
{
$('#process').html($('#status').html());
},
success: function(data)
{
$('#process').html('');
alert(data);
$.each(data, function (i,member) {
$("#name").val(member.name);
});
}
});
}//End of SecureLogin
</script>
</head>
<body>
<div class="container">
<div class="menu">
<span class="nav_top"></span>
<div class="clr"></div>
<nav id="menu-wrap">
</nav>
</div>
</div>
<div class="container">
<div class="register">
<div class="row">
<div class="col-xs-12 col-md-9">
<div class="matter"><div style="clear:both; height:15px;"></div>
<center><h1>Create New Account</h1></center>
<div style="clear:both; height:8px;"></div>
<div class="join-club">
<h4 class="join-heading">Century Club - Create Account <br><span class="legend"><font color="#FF0000"><font class="red"> *</font></font> indicates a mandatory field</span></h4>
<div align="center" id="status" style="display:none">
Just Wait a Moment..</div>
<div id="process" class="process"></div>
<form id="register" name="register" method="POST">
<table class="join-members" width="100%" style="margin:10px 0 0 0; ">
<tbody>
<tr>
<td width="47%"><span>User Name (Membership Account No.)<font class="red"> *</font></span>
<p>(Example : abcd1234)</p>
</td>
<td colspan="2">
<input type="text" name="memberid" id="memberid" Maxlength="15"
value="<?php if(!empty($memberid)) echo $memberid;?>" autocomplete="off" style="width: 95%;
padding: 6px;" class="email2" onblur="check();" /></td>
</tr>
<tr>
<td><span>Name <font class="red"> *</font></span></td>
<td colspan="2"><input type="text" name="name" id="name" readonly
value="<?php if(!empty($name)) echo $name;?>" class="email"/></td>
</tr>
<tr>
<td >
</td>
<td colspan="2"> <input type="submit" name='submit_req' value="Submit" class="button" style="margin:0" /> </td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>
JSon response file getdetails2.php
<?php
include("connection.php");
$mid=trim($_POST['mid']);
$query="Select member_id,member_name,office_number,mobile_number,Residence_number from cm_details where member_id='$mid'";
$data=mysqli_query($dbc,$query);
//while loop starts here buddy
while($row=mysqli_fetch_array($data))
{
$mid=$row[0];
$mname=$row[1];
$rows[] = array("name" => $mname);
}//end of while loop here
#header("Content-type: application/json");
echo json_encode($rows);
?>
As far as the analysis made it is treating the JSON response as an object in my server where the code works fine but in the other server it doesnt treate it as an object
And one more error i noticed is
Uncaught TypeError: Cannot use 'in' operator to search for '182' in
[{"name":"SRI.M.S.ASHOKKUMAR","mobile":"9845901242","rescode":"080","resnum":"25253602","rescode1":"","resnum1":"","offcode":"","offnum":"","offcode1":"","offnum1":"","mobile1":""}]
Thats all i could do guys i feel like JSON is not identified by the server something like that help me guys expecting your answers as soon as possible
What kind of error / problems are you seeing if any? Also maybe use header instead of #header so that you can see error messages.
have you checked your php version on the server that isnt working?
json_encode / json_decode were introduced in php 5.2.
If that's the problem you might need to use something like jsonwrapper.
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);