This is the best i can do without some machinations. Please ignore the
obviousness to my only recent introduction to DOM/AJAX etc.
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="ajax/jquery.js"></script>
<script type="text/javascript" src="ajax/jtip.js"></script>
<script type="text/javascript" src="ajax/jquery.form.js"></script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>jSON test</title>
<style>
<!--
dl { }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 14px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
body {
margin: 0px;
padding: 0px;
}
tr.detailheading{
background: #CD853F;
font: Arial;
font-size; 16px
width: 400px;
}
#header {
background: #6495ED;
width: 900px;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
}
#action {
background: white;
float: left;
width: 150px;
height: 500px;
}
#results {
background: #A9A9A9;
float: left;
width: 250px;
height: 500px;
}
.resultsinner{
margin: 2px;
}
#resultsum{
background: #B0C4DE;
font-family: Arial;
font-size: 14px;
width:250px;
height: 25px;
}
.record A:link {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
#resultstable{
width:250px;
height: 475px;
overflow: auto;}
#details {
background: wheat;
float: left;
width: 500px;
height: 500px;
}
div.detailssurround {
background: wheat;
float: left;
width: 500px;
height: 500px;
outline: thick double red;
}
#footer {
background: #0f0;
clear: left;
width: 800px;
height: 100px;
}
-->
td.ditem{
background: tan;
font-style: bold;
}
td.dvalue{
background: wheat;
}
a.selectedrecord{
background: red;
}
a.unselectedrecord{
margin:2;
background: #FAFAD2;
border: thin solid;
}
</style>
<script>
var clickLock=false;
$(document).ready(function(){
// CSS Setups
$("dl.actionMenu").hide();
$("#action").hide();
// Event Handling
// Mouse Overs
$('body').mouseover(function(event) {
if ($(event.target).is("a.record")) {
$(event.target).toggleClass("selectedrecord");
entryDetail(event.target.id);
}
});
//MouseOuts
$('body').mouseout(function(event) {
if ($(event.target).is("a.record")) {
$(event.target).toggleClass("selectedrecord");
}
});
//OnChanges
// Quick Search Select
$('body').change(function(event){
if($(event.target).is("select#qsmode")){
$('#quicksearchform').ajaxSubmit({
dataType: 'json',
success: displayResults,
target: '#resultstable',
timeout: 5000
});
}
});
// OnClicks
// Action Menu Clicks
$("a#profile").click(function(){
if(!clickLock){
clickLock=true;
$("dl.actionMenu").hide();
var selected = $("tr#aa-gwprofile > td.dvalue");
var smode="profile";
var changearea = "<td class=\"dvalue\"><input
type=\"text\" value=
\"" + selected.html()+"\">";
var button = '<input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
selected.after(changearea + button).remove();
var revert = "<td
class=\"dvalue\">"+$(selected).html()+"</td>";
$('.saveButton').click(function(){saveChanges(this,smode,
false);});
$('.cancelButton').click(function(){
clickLock=false;
selected = $("tr#aa-gwprofile >
td.dvalue");
selected.after(revert).remove();
});
}});
$("a#swap").click(function(){
if(!clickLock){
clickLock=true;
$("dl.actionMenu").hide();
var selected = $("tr#uid > td.dvalue");
var smode="swap";
var changearea = "<td class=\"dvalue\"><input
type=\"text\" value=
\"" + selected.html()+"\">";
var button = '<input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
selected.after(changearea + button).remove();
var revert = "<td
class=\"dvalue\">"+$(selected).html()+"</td>";
$('.saveButton').click(function(){
saveChanges(this,smode, false);
});
$('.cancelButton').click(function(){
selected = $("tr#uid > td.dvalue");
selected.after(revert).remove();
clickLock=false;
});
}});
// Factory Reset Node
$("a#factory").click(function(){
if(!clickLock){
clickLock=true;
$("dl#factoryconfirm").slideDown("normal");
$('#factoryYes').click(function(){
var entry=$("tr#cn > td.dvalue").html()
$.post("UpdateEntry",{
entry: entry,
smode: "factory"
},function(txt){
alert(txt);
$("dl.actionMenu").hide();
entryDetail(entry);
});
});
$('#factoryNo').click(function(){
$("dl.actionMenu").hide();
clickLock=false;
});
}});
/// Delete Node
$("a#delete").click(function(){
if(!clickLock){
clickLock=true;
$("dl#deleteconfirm").slideDown("normal");
$('#deleteYes').click(function(){
var entry=$("tr#cn > td.dvalue").html()
var ip=$("tr#aa-gwextaddress >
td.dvalue").html()
var hn=$("tr#aa-gwprofile >
td.dvalue").html();
$.post("UpdateEntry",{
entry: entry,
smode: "delete",
oldip: ip,
hn: hn
},function(txt){
alert(txt);
$("dl.actionMenu").hide();
$("#details").empty();
});
});
$('#deleteNo').click(function(){
$("dl.actionMenu").hide();
clickLock=false;
});
}});
// Clear Node Profile
$("a#clearnode").click(function(){
if(!clickLock){
clickLock=true;
$("dl#clearconfirm").slideDown("normal");
$('#clearYes').click(function(){
var entry=$("tr#cn >
td.dvalue").html();
var ip=$("tr#aa-gwextaddress >
td.dvalue").html()
var hn=$("tr#aa-gwprofile >
td.dvalue").html();
var
dnsData="smode=clearnode&hn="+hn+"&oldip="+ip
+"&entry="+entry;
$.ajax({
url: "UpdateEntry",
type: "POST",
dataType: "html",
data: dnsData,
global: false,
success: function(html){
alert("DNS Update Succeeded");
}
,
error: function(html){
var damn="me";
alert("Critical
Error in DNS Update. No changes applied.
Please manually check UDNS for \n"+hn+" set to 1.1.1.1");
}
});
$("dl.actionMenu").hide();
entryDetail(entry);
});
$('#clearNo').click(function(){
$("dl.actionMenu").hide();
clickLock=false;
});
}});
// Search Submitted
$('#searchform').ajaxForm({
dataType: 'json',
success: displayResults,
target: '#resultstable',
timeout: 5000
});
});
function saveChanges(obj, mode,cancel) {
clickLock=false;
var entry = $("tr#cn > td.dvalue").html();
var attr = $(obj).parent().parent().attr("id")
if(!cancel ||!r) {
var t = $(obj).parent().children(0).val()
$.post("UpdateEntry",{
entry: entry,
sattr: attr,
sstring: t,
smode: mode
},function(txt){
alert(txt);
entryDetail(entry);
});
} else {
}
}
function displayResults(object,status)
{
var content = new String();
var rcount = 0;
$("dl.actionMenu").hide();
searchjson = object;
for (var key in object)
{
rcount++;
content+="<a id=\""+object[key]["cn"]+"\" href=\"#\"
class=\"record
\">";
content+=key+"</a></span><br>";
}
$('#resultsum').empty().append("<b>Total Records: </b>"+rcount);
$('#resultstable').empty().append(content);
$('#details').empty();
$('#action').hide();
}
function entryDetail(id)
{
// Generically release clickLock
clickLock=false;
// Get the Detailed Data Set:
$("dl.actionMenu").hide();
$.getJSON("SearchResult",
{ stype: "cn", smode: "detailed", sstring: id },
function(detailjson){
var content = new String();
for (var elem in detailjson)
{
content+="<table border=0 width=100%><tbody>";
content+="<tr class='detailheading'><td
colspan=2>Profile Info</
td></tr>";
content+="<tr id='aa-gwprofile'><td class='ditem'
width='25%'>Profile Name:</td><td
class='dvalue'>"+showvalue(detailjson[elem]['aa-gwprofile'])+"</td></
tr>";
content+="<tr id='mail'><td class='ditem'>Contact
Email:</td><td
class='dvalue'>"+showvalue(detailjson[elem]['mail'])+"</td></tr>";
content+="<tr id='cn'><td class='ditem'>Registration
#:</td><td
class='dvalue'>"+showvalue(detailjson[elem]['cn'])+"</td></tr>";
content+="<tr id='uid'><td
class='ditem'>MAC/Link:</td><td
class='dvalue'>"+showvalue(detailjson[elem]['uid'])+"</td></tr>";
content+="<tr id='aa-gwlinked'><td
class='ditem'>Linkage Status:</
td><td class='dvalue'>"+showvalue(detailjson[elem]['aa-gwlinked'])+"</
td></tr>";
content+="<tr class='detailheading'><td colspan=2>Network
Details:</
td>";
content+="<tr id='aa-gwipaddress'><td class='ditem'>IP
Address:</
td><td class='dvalue'>"+showvalue(detailjson[elem]['aa-gwipaddress'])
+"</td></tr>";
content+="<tr id='aa-gwgwaddress'><td class='ditem'>Default
GW:</
td><td class='dvalue'>"+showvalue(detailjson[elem]['aa-gwgwaddress'])
+"</td></tr>";
content+="<tr id='aa-gwextaddress'><td class='ditem'>External
IP:</
td><td class='dvalue'>"+showvalue(detailjson[elem]['aa-gwextaddress'])
+"</td></tr>";
content+="<tr class='detailheading'><td colspan=2>Entry
Details</
td></tr>";
content+="<tr id='modifytimestamp'><td class='ditem'>Last
Modified:</
td><td class='dvalue'>"+showvalue(detailjson[elem]['modifytimestamp'])
+"</td></tr>";
content+="<tr id='createtimestamp'><td class='ditem'>Created:</
td><td class='dvalue'>"+showvalue(detailjson[elem]['createtimestamp'])
+"</td></tr>";
content+="</tbody></table>";
$('#details').empty().append(content);
}
}
);
$("#action").show();
}
function showvalue(value)
{
if(value == null)
{ return "";
} else {
return value;
}
}
</script>
</head>
<body>
<div id="header">
<div id="search" style="float:left">
<form id="searchform" action="SearchResult" method="POST">
<select name="stype">
<option value="aa-gwprofile" selected>Profile
Name</option>
<option value="cn">Registration Number</option>
<option value="uid">MAC/Key</option>
<option value="aa-gwextaddress">External IP</option>
<option value="mail">Email</option>
</select>
<input type="text" size="30" name="sstring" value="*">
<input type="submit" value="Go" >
</form>
</div>
<div id="quicksearch" style="float:left">
<form id="quicksearchform" action="SearchResult">
<select id='qsmode'name="smode">
<option value="" selected>Choose Quick Search</option>
<option value="findunregistered">UnRegistered Units</option>
<option value="findunlinked">UnLinked Units</option>
</select>
</form>
</div>
</div>
<div id="results">
<div id="resultsum"><b> Total Records:</b></div>
<div class="resultsinner">
<div id="resultstable"></div>
</div>
</div>
<div id="details"></div>
<div id="action">
<ul>
<li><a id="swap" href="#">Swap Hardware</a></li>
<li><a id="profile" href="#">Change Profile</a></li>
<p></p>
<p></p>
<p></p>
<li><a id="clearnode" href="#">Clear Node Profile</a></li>
<dl id="clearconfirm" class="actionMenu">
<dt>Clearing the Node prepares profile for re-registration. It
makes
existing installs useless. Continue?</dt>
<dd><input type="button" value="Yes" id="clearYes"><input
type="button" value="No" id="clearNo"></dd>
</dl>
<li><a id="factory" href="#">Factory Reset</a></li>
<dl id="factoryconfirm" class="actionMenu">
<dt>Factory Reset Cannot be Undone are you sure you
want to reset this unit?</dt>
<dd><input type="button" value="Yes" id="factoryYes"><input
type="button" value="No" id="factoryNo"></dd>
</dl>
<li><a id="delete" href="#">Delete Node</a></li>
<dl id="deleteconfirm" class="actionMenu">
<dt>Deletion is permanant. Do you wish to continue</dt>
<dd><input type="button" value="Yes" id="deleteYes"><input
type="button" value="No" id="deleteNo"></dd>
</dl>
</ul>
</div>
</body>
</html>
The problems center around the .post .ajax and the click events for
a#delete and a#clearNode and the subsequent Yes and No buttons.
Thanks
On Aug 15, 8:23 am, "Mike Alsup" <[EMAIL PROTECTED]> wrote:
> deepreel,
>
> There must be something you're not telling us. Please make a page
> available publicly if possible. Strip it down to the bare bones -
> just enough to exhibit the problem you're seeing.
>
> Mike
>
> On 8/15/07, deepreel <[EMAIL PROTECTED]> wrote:
>
>
>
> > Come on folks please someone enlighten me as to why each time this
> >ajaxis called the error, success functions are called (but theajax
> > itself is not executed) n times.
>
> > The code below is in a click event. If I click once I get 1 error
> > response, if I click a second time I will get 2 exec's of the error
> > response, click a 3rd and 3 exec's of the error response....
>
> > On Aug 14, 1:24 pm, deepreel <[EMAIL PROTECTED]> wrote:
> > > Correction theajaxisn't actually submitting multiple times but the
> > > function in the error function (when I test an error use case) get
> > > called incrementally more times with each event.
>
> > > On Aug 14, 10:40 am, deepreel <[EMAIL PROTECTED]> wrote:
>
> > > > Folks, I'm fiddling with jquery for the first time and have an issue:
>
> > > > var dnsData="smode=clearnode&hn="+hn+"&oldip="+ip+"&entry="+entry;
> > > > $.ajax({
> > > > url:
> > > > "UpdateEntry",
> > > > type: "POST",
> > > > dataType:
> > > > "html",
> > > > data: dnsData,
> > > > success:
> > > > function(msg){
>
> > > >
> > > > alert("DNS Update Succeeded");
>
> > > > },
> > > > error:
> > > > function(msg){
> > > >
> > > > alert("Critical Error in DNS Update. No changes applied.
> > > > Please manually check UDNS for \n"+hn+" set to 1.1.1.1");
>
> > > > }
> > > > });
>
> > > > The preceeding code technically works but if I get an error from the
> > > > UpdateEntry servlet it throws the alert, however the next time I
> > > > trigger the sameajaxcall (without reloading the page) I get 2 error
> > > > alerts, then 3 then 4 ever incrementing. JS debugging seems to
> > > > indicate that the
>
> > > > // Handle the globalAJAXcounter
> > > > 2058 if ( s.global && ! --jQuery.active )
> > > > 2059 jQuery.event.trigger( "ajaxStop" );
>
> > > > jquery global counter is getting increased on each call so that it
> > > > essentially counts down with each error function call until the point
> > > > where ajaxStop is triggered.
>
> > > > I'm sure I'm missing something obvious. Any guidance would be
> > > > appreciated. Note I have not done any .ajaxSetup else where in the
> > > > page the above is the entirety of my .ajaxcall.
>
> > > > Cheers folks.
>
> > > > P.S. thanks for the great tool.
