I have a ribbon button to execute custom workflow. this action a setup from JavaScript and it worked perfectly. In this case I wanna show progress loading when after click or during custom workflow execution.
I just followed the tutorial HERE. this my javascript function code:
function showLoadingMessage() {
try{
tdAreas.style.display = 'none';
var newdiv = document.createElement('div');
newdiv.setAttribute('id', "msgDiv");
newdiv.valign = "middle";
newdiv.align = "center";
var divInnerHTML = "<table height='100%' width='100%' style='cursor:wait'>";
divInnerHTML += "<tr>";
divInnerHTML += "<td valign='middle' align='center'>";
divInnerHTML += "<img alt='' src='/_imgs/AdvFind/progress.gif'/>";
divInnerHTML += "<div/><b>Working…</b>";
divInnerHTML += "</td></tr></table>";
newdiv.innerHTML = divInnerHTML;
newdiv.style.background = '#FFFFFF';
newdiv.style.fontSize = "15px";
newdiv.style.zIndex = "1010";
newdiv.style.width = document.body.clientWidth;
newdiv.style.height = document.body.clientHeight;
newdiv.style.position = 'absolute';
document.body.insertBefore(newdiv, document.body.firstChild);
document.all.msgDiv.style.visibility = 'visible';
}
catch(ex){
alert(ex.message);
}
}
and this one is to hide progress:
function hideLoadingMessage(){
document.all.msgDiv.style.visibility = 'hidden';
}
this is the function that I called in my ribbon button action for testing loading progress work or not:
function ribbonButton()
{
var guid = Xrm.Page.data.entity.getId();
if (guid != null)
{
showLoadingMessage(); //show progress
/*var workflowId = '04E84379-87E4-E711-814E-000C294D2FF8';
var workflowName = 'CloneReward';
ExecuteWorkflow(workflowId, workflowName, function ()
{
RefreshForm();
});*/
//hideLoadingMessage(); //hide progress
}
}
when I pressed the button I get the following error message:
Need any suggestions. Thanks.
There is new nice client API for exact this feature: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/reference/xrm-utility/showprogressindicator
Here is example on how it looks in work: http://www.itaintboring.com/dynamics-crm/dynamics-365-v9-progress-indicator-api/
The only downside is that it's only applicable to Dynamics version 9.
just tried this THIS tutorial and it will fix the problem above.
show loading progress:
function _buildLoadingDiv(_entityName) {
var loadingDiv = "<div id='divLoading'style='width: 100%; height: 100%; display: block; position: fixed; top:0px; background:rgba(255,255,255,0.5);'><table style='width: 100%; height: 100%;'><tr><td align='center' style='vertical-align: middle;'>";
loadingDiv += "<img id='loading' alt='' src='/_imgs/AdvFind/progress.gif'/><br/>";
loadingDiv += "<label id='lblStatus'>Loading... " + _entityName + " Execute Workflow</label>";
loadingDiv += "</td></tr></table></div>";
$($('body', window.parent.document)).append(loadingDiv);
}
hide loading progress:
function _removeLoading() {
$($('body', window.parent.document)).find("#divLoading").remove();
}
Related
I am trying to write a mini-blog app, and I am trying to make a button to delete posts, but It doesn't work. It doesn't show any errors. I am confused. What I should do ? How can I tell what's going on to see where is the issue ? I have seen many relevant posts but it doesn't seems to be helpful for my situation.
Here is my code:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- style file -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- editorjs adn -->
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/header#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/list#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/checklist#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/quote#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/code#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/table#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/embed#latest"></script>
<!-- CSS -->
<style>
body {
margin: auto;
max-width: 900px;
}
#editor {
border: 1px solid;
}
.inserted_time {
font-style: italic;
font-size: 8px;
text-align: right;
}
</style>
</head>
<body>
<h2>Create a Blog</h2>
<button onclick="toggleBlogForm()" id="switchbutton">Create Post</button>
<div id="allblogs"></div>
<div id="editor"></div>
<div id="conversion"></div>
<button id="post_to_blog">Submit</button>
<div id="message"></div>
<script>
function toggleBlogForm() {
var x = document.getElementById("switchbutton");
if (x.innerHTML == "Create Post") {
x.innerHTML = "View Post";
document.getElementById("allblogs").style.visibility = "hidden";
} else {
x.innerHTML = "Create Post";
}
}
// saved posts
const blogs = [{"time":1641955404060,"blocks":[{"id":"t_39IX2iIH","type":"header","data":{"text":"First Blog Post","level":2}},{"id":"jBunZLMaJC","type":"paragraph","data":{"text":"gogogo"}}],"version":"2.22.2"},{"time":1641955680472,"blocks":[{"id":"fbfQo5o1_y","type":"list","data":{"style":"ordered","items":["ABC","DEF","HIJ"]}}],"version":"2.22.2"},{"time":1641955749893,"blocks":[{"id":"idQrTDXnzJ","type":"checklist","data":{"items":[{"text":"English","checked":true},{"text":"French","checked":false},{"text":"German","checked":false}]}}],"version":"2.22.2"},{"time":1641957539439,"blocks":[{"id":"ztUBHu3HHg","type":"table","data":{"withHeadings":false,"content":[["Category","Language"],["1","Java"],["2","Python"]]}}],"version":"2.22.2"},{"time":1641959106166,"blocks":[{"id":"Q6Z-TKWLup","type":"embed","data":{"service":"youtube","source":"https://youtu.be/tbXpX4dAqjg","embed":"https://www.youtube.com/embed/tbXpX4dAqjg","width":580,"height":320,"caption":"This is a tutorial for learning PHP Symfony framework."}}],"version":"2.22.2"}]
const blog_inserted_time = ["11:43:24 12/1/2022", "11:43:24 12/1/2022", "11:43:24 12/1/2022", "12:18:59 12/1/2022", "12:45:6 12/1/2022"]
// retrieve posts when loading the page
console.log(blogs.length);
loadingPosts();
console.log('retrieved!')
// constructor for the blog
const editor = new EditorJS({
holder: 'editor',
tools: {
header: Header,
list: List,
checklist: Checklist,
quote: Quote,
code: CodeTool,
table: Table,
embed: {
class: Embed,
inlineToolbar: true,
config: {
services: {
youtube: true,
coub: true
}
}
}
}
});
// saving the new post
let saveBtn = document.getElementById('post_to_blog');
saveBtn.addEventListener('click', function() {
editor.save().then((outputData) => {
// save to local variable
const jsondata = outputData;
blogs.push(jsondata);
console.log(blogs);
// get and save time
var currentdate = new Date();
var datetime = currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds() + " "
+ currentdate.getDate() + "/"
+ (currentdate.getMonth()+1) + "/"
+ currentdate.getFullYear();
blog_inserted_time.push(datetime);
console.log("inserted time: " + currentdate);
// reload all posts
var divForReset = document.getElementById('allblogs');
while(divForReset.firstChild){
divForReset.removeChild(divForReset.firstChild);
}
loadingPosts();
}).catch((error) => {
console.log('Failed: ', error)
});
});
function loadingPosts() {
for(var i = 0; i < blogs.length; i++) {
var getBlocks = blogs[i]['blocks'];
//console.log('retrieving');
//console.log(getBlocks);
for(var y = 0; y < getBlocks.length; y++) {
console.log('printing text.......');
console.log(getBlocks[y]);
var msg = convertDataToHtml(getBlocks);
console.log(msg);
}
// create a div for a post
var addblog = document.createElement('div');
// get post data from json array
var textmsg = document.createTextNode(msg);
//addblog.appendChild(textmsg);
var addblog = document.createElement('div');
// deleteButton
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'delete';
addblog.appendChild(deleteButton);
deleteButton.addEventListener('click', evt => {
evt.preventDefault();
alert('it does not work!!!');
});
// get time
addblog.innerHTML += "<p class='inserted_time'>"+blog_inserted_time[i]+"</p>";
// get post
addblog.innerHTML += msg;
addblog.style.cssText = "border: 1px solid; padding: 10px";
document.getElementById('allblogs').appendChild(addblog);
msg = '';
}
}
function convertDataToHtml(blocks) {
var convertedHtml = "";
blocks.map(block => {
switch (block.type) {
case "header":
convertedHtml +=
`<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
break;
case "embed":
convertedHtml += `<div><iframe width="560" height="315" src="${block.data.embed}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
convertedHtml += `<p>${block.data.caption}</p></div>`;
break;
case "paragraph":
convertedHtml += `<p>${block.data.text}</p>`;
break;
case "delimiter":
convertedHtml += "<hr />";
break;
case "image":
convertedHtml += `<img class="img-fluid"
src="${block.data.file.url}" title="${block.data.caption}" /><br />
<em>${block.data.caption}</em>`;
break;
case "list":
convertedHtml += "<ul>";
block.data.items.forEach(function(li) {
convertedHtml += `<li>${li}</li>`;
});
convertedHtml += "</ul>";
break;
case "checklist":
convertedHtml += "<ul>";
block.data.items.forEach(function(li) {
if (li["checked"] == true) {
convertedHtml += `<ol>✓ ${li["text"]}
</ol>`;
} else {
convertedHtml += `<ol>
${li["text"]}</ol>`;
}
});
convertedHtml += "</ul>";
break;
case "table":
convertedHtml += "<table class='table table-striped table-hover'>";
block.data.content.forEach(function(tdata) {
convertedHtml += "<tr>";
for (a = 0; a < tdata.length; a++) {
convertedHtml += "<td>" + tdata[a] + "</td>";
}
convertedHtml += "</tr>";
});
convertedHtml += "</table>";
break;
case "code":
convertedHtml += `<code>${block.data.code}</code>`;
default:
console.log("Unknown block type", block.type);
break;
}
});
return convertedHtml;
}
</script>
</body>
</html>
The issue with your code is that you're first appending the deleteButton element with the click event listener to the addBlog element and then using innerHTML to append further content to addBlog.
Using innerHTML this way will remove any previously defined event listener:
Please note that using innerHTML to append html elements (e.g.
el.innerHTML += "link") will result in the removal
of any previously set event listeners. That is, after you append any
HTML element that way you won't be able to listen to the previously
set event listeners.
A way to solve the issue is retrieving the button and adding the event listener after any DOM manipulation has been completed (adding a unique id to any delete button will help):
// create a div for a post
const addblog = document.createElement('div');
// deleteButton
const deleteButton = document.createElement('button');
deleteButton.setAttribute('id', 'deleteBtn_' + i);
deleteButton.setAttribute('type', 'button');
deleteButton.innerHTML = 'delete';
addblog.appendChild(deleteButton);
// get time
addblog.innerHTML +=
"<p class='inserted_time'>" + blog_inserted_time[i] + '</p>';
// get post
addblog.innerHTML += msg;
addblog.style.cssText = 'border: 1px solid; padding: 10px';
document.getElementById('allblogs').appendChild(addblog);
// Add event listener at least
document
.getElementById('deleteBtn_' + i)
.addEventListener('click', function (evt) {
evt.preventDefault();
alert('it does work!!!');
});
msg = '';
I developing comment section for my HTMl page. I place it in div container in body section in my page, like that:
<body>
...
<div id='commentsTree'></div>
...
</body>
Commment section generated by script, here it is
function createCommentsTree(commentsData) {
resultHTML = "";
let commentsArray = JSON.parse(commentsData);
//let result = "";
resultHTML = resultHTML + "<ul id='myUL'>";
commentsArray.forEach(element => {
if (element.hasOwnProperty("subordinates")){
resultHTML = resultHTML + "<li>" +
"<span class='caret'></span><textarea class='textFieldRoot'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>";
createCommentsTreeHyerarchycally(element);
resultHTML = resultHTML + "</li>";
}
else{
resultHTML = resultHTML + "<li>" +
"<textarea class='textField'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>" +
"</li>";
}
});
resultHTML = resultHTML + "</ul>";
return resultHTML;
}
function createCommentsTreeHyerarchycally(source) {
resultHTML = resultHTML + "<ul class='nested'>";
source.subordinates.forEach(element => {
if (element.hasOwnProperty("subordinates")){
resultHTML = resultHTML + "<li>" +
"<span class='caret'></span><textarea class='textFieldRoot'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>";
createCommentsTreeHyerarchycally(element);
resultHTML = resultHTML + "</li>";
}
else{
resultHTML = resultHTML + "<li>" +
"<textarea class='textField'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>" +
"</li>";
}
})
resultHTML = resultHTML + "</ul>";
}
in result i have hyerarchycally comments tree, you can see it on example here
https://jsfiddle.net/Obliterator/wogurs6L/, or, on picture "comment section" added below.
On picture you can see "caret" symbol, looks like black small arrow near textareas, i mark it on picture. When i click it, comment line must unfold, and show subordinate comment lines. You can try it in example here https://jsfiddle.net/Obliterator/wogurs6L/, in this example it works totally correct. But, in my web page, when i click on "caret" symbol, nohing happens, comment line do not unfold. And this is a problem.
For unfold by clicking "caret" symbol i make this script and css:
script:
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
css:
/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}
.textFieldRoot {
position: relative;
left: 15px;
width: 100%;
}
.textField {
position: relative;
width: 100%;
}
/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
position: absolute;
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
i add css and script in my page, for which i trying add comment section, that way (treeListScript.js and treeListStyle.css):
<head>
...
<script type="text/javascript" src="http://localhost/testapp/lib/others/treeList/treeListScript.js"></script>
<link rel="stylesheet" href="http://localhost/testapp/lib/others/treeList/treeListStyle.css">
...
</head>
<body>
...
<div id='commentsTree'></div>
...
</body>
i create my web page this way:
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
line windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments); creates comment section.
So, what i am doing wrong, what i mus do for my unfold fucntional works correct on my web page? If something unclear, ask, i try explain.
I solve problem by myself. Reason is i just incorrect add event handler to the .caretelements, i add it as script in head section, but i need to add it after i generate comment section, this way:
//creating new HTML page +++
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
//creating new HTML page ---
//creating comment section +++
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
//creating comment section ---
//adding event handler +++
var toggler = windowTask.document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
//adding event handler ---
now everything works fine. If anyone spend some time for my question, thx.
I want to display information in div with img element which i'm accessing to database through php. I am associating onmouseover event with each element and passing this and some parameters as arguments but as I mouse over on image, div show at top left of browser and does not show beside image.
I have also tried with remove this and the result is same old one.
code for image element
$row = mysqli_fetch_array($result);
$firstname = $row['firstname'];
$lastname = $row['lastname'];
$image = $row['image'];
$phone = $row['phone'];
$email = $row['email'];
$realtorData = $firstname.'|'.$lastname.'|'.$phone.'|'.$email.'|';
echo "<img src='/../../Realtors/$image'onmouseover='showRealtorInfo(this,\"".$realtorData."\" );' onmouseout='hideRealtorInfo();'>";
javaScript code
function showRealtorInfo(element, realtorInfo)
{
var realtorArray = realtorInfo.split('|');
var firstname = realtorArray[0];
var lastname = realtorArray[1];
var phone = realtorArray[2];
var email = realtorArray[3];
var realtorInfoDiv = document.getElementById('realtorinfo');
var myHTML = "<p><b>" + firstname + " " + lastname + "</b><br /><br />";
myHTML += "Phone: " + phone + "<br />";
myHTML += "Email: " + email + "<br />";
realtorInfoDiv.innerHTML = myHTML;
x = element.offsetLeft;
y = element.offsetTop;
//alert(x);
realtorInfoDiv.style.left = y + 100;
realtorInfoDiv.style.top = x + 550;
realtorInfoDiv.style.visibility = 'visible';
}
css code for div element
#realtorinfo{
position: absolute;
left: 10px;
top: 10px;
width: 200px;
height: 150px;
padding: 5px;
background-color: yellow;
visibility: hidden;
float: left;
}
You have not mentioned "px" in the follow LOC.
realtorInfoDiv.style.left = y + 100;
realtorInfoDiv.style.top = x + 550;
This should work:
realtorInfoDiv.style.left = y + 100 + "px";
realtorInfoDiv.style.top = x + 550 + "px";
This the page I'm working on:
http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html
When you click on a shaded area the chart associated with the area pops up. What I'm trying to figure out is how to get the "Next PSA" link at the bottom to advance the chart in the popup to the next PSA every time you click it. I've figured out how to get it to advance by one PSA, but can't get it past that one. You'll see if you click on the link.
I have a function (called replace) that replaces the image source for the chart with a link to the next PSA number up. However, I can't figure out how to get it to increment. I tried PSA++ and PSA=PSA1 but neither of them work.
Here's my code:
<title>DEV PSA ERC Map DEV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function overlay(a) {
PSA = a.id;
var numeric = a.id.replace('GB', '');
PSAnum = Number(numeric)
PSA1 = PSAnum + 1;
nextPSA = ('0' + PSA1).slice(-2);
var overlayContent = '';
overlayContent += '<div id="overlay">';
overlayContent += '<div>';
var imgsrce = '';
imgsrce += 'Charts/WebCharts/GB';
imgsrce += numeric;
imgsrce += '/ERCGraph.PNG';
overlayContent += '<img id="chartimage" src="';
overlayContent += imgsrce;
overlayContent += '" />';
overlayContent += '<br /><b><h1> Close</b></h1>';
overlayContent += '<b><h1> Next PSA</b></h1>';
overlayContent += '</div>';
overlayContent += '</div>';
$("#overlay").replaceWith(overlayContent);
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if (el.style.visibility == "visible") {
//el.style.visibility="hidden";
}
} //end of overlay function
function replace(a) {
image = document.getElementById('chartimage');
console.log(image.src);
console.log(PSA);
image.src = 'Charts/WebCharts/GB';
image.src += nextPSA;
image.src += '/ERCGraph.PNG';
PSA++;
console.log(PSA);
} //end of replace function
$('.overlay-bg').click(function() {
closePopup();
});
function closePopup() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
}
$(function() {
$.get("getDate.php", function(data) {
document.getElementById("timestamp").innerHTML = "<b>RAWS observations updated on " + data + "</b>";
});
});
var file;
file = 'GB_PSAdata_Real.js';
$.getJSON(file, function(events) {
var gbname = Object.keys(events);
var divContent = '';
divContent += '<div id="map">';
divContent += '<map name="mapmap">';
for (i = 0; i < gbname.length; i++) {
var PSA = (gbname[i]);
JSONcoords = events[PSA][0].Coords;
JSONcoordString = JSONcoords.toString();
divContent += '<area id="' + PSA + '" href="#" shape="poly" coords="';
divContent += JSONcoordString;
divContent += '" onclick="overlay(this)">';
// console.log(divContent)
}
divContent += '</map>';
divContent += '<img src="GetPSAavg.php" width="826" height="1005" usemap="#mapmap" />';
divContent += '</div>';
$("#map").replaceWith(divContent);
//$("#overlay").replaceWith(overlayContent);
;
})
</script>
</head>
<div id="overlay">
</div>
<body>
<div id="header">
<img src="PSlogo.png" style="height:75px">
<img src="GBlogo.png" style="height:75px">
<span><b>Great Basin ERC Percentiles</b> *Experimental*</span>
</div>
<div id="main">
<div id="map"></div>
<div id="timestamp">RAWS Observations Updated</div>
<div id="legend">
<img src="LegendFull2.png" id="legendIMG">
</div>
</div>
</body>
</html>
You need to move the code that increments the number into the replace() function, so it gets executed each time replace() is called. Currently it is executed only once when the overlay() function is called.
First, explicitly declare a global variable (outside of any function):
var currentPSANum = null;
Place this line inside the overlay() function:
currentPSANum = Number(a.id.replace('GB',''));
Then use the following for the replace() function:
function replace(a) {
currentPSANum++;
var image = document.getElementById('chartimage');
image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}
I have a Site that was built with some scripts from codelifter.com it is a very old site and I need to make one little edit. I did not create the site i am just wondering why the JavaScript popup wont close. If you click on CA you get a coming soon but if you click on TX it opens a popup that will not close.
My question is what line of code do i need to change to get that to close?
Is the issue with the below code?
Thanks
var strGoToUrl = "";
function ShowPopup(strUrl) {
var str = '<table cellspacing="1" cellpadding="2" style="background:black"><tr>';
str += '<td style="background:#ffeccc" width="460">';
str += '<table cellspacing="0" cellpadding="2" width="100%"><tr>';
str += '<td align="right">Close</td>';
str += '</tr><tr>';
str += '<td align="center">';
str += 'TODAY- ASA members can get medical insurance quotes and buy quality, affordable ';
str += 'medical insurance group plans through Benefit Consultants Northwest (BCNW).<br/><br/>';
str += 'Click here for Quotes, Medical plan information and plan selections.<br/>';
str += '<img src="images/bcnw_logo3.gif" width="186" height="60" border="0" /><br/>';
str += 'Automotive Industry Health Insurance Trust (A-HIT) association medical plans ';
str += 'are not currently available in this state.<br/><br/>';
str += '</td></tr></table></td></tr></table>';
strGoToUrl = strUrl;
alert(strGoToUrl);
if (document.getElementById) {
var elem = document.getElementById("popupDiv");
elem.innerHTML = str;
elem.style.display = "block";
ShowRectangularDynamicDropShadow(elem, "#333333", 5);
}
}
function GoToUrl() {
alert(strGoToUrl);
window.location = strGoToUrl;
}
function HidePopup() {
if (document.getElementById) {
var elem = document.getElementById("popupDiv");
HideRectangularDynamicDropShadow(elem);
elem.style.display = "none";
elem.innerhtml = "";
}
}
Try this... Not tested but should work...
<div id="popupDiv">
//Rest of the code
<div id="shadow"></div>
</div>
function ShowPopup(strUrl) {
//rest of the code
shadowDiv = document.getElementById("shadow").style.display = 'block';
ShowRectangularDynamicDropShadow(shadowDiv, "#333333", 5);
//rest of the code
}
function HidePopup() {
if (document.getElementById) {
var elem = document.getElementById("popupDiv");
shadowDiv = document.getElementById("shadow");
HideRectangularDynamicDropShadow(shadowDiv);
elem.style.display = "none";
shadowDiv.style.display = "none";
elem.innerhtml = "";
}
}