Need help about javascript

[lnakuma]

Im fairly new to javascript.

I am trying to write a function that would create a div element inside the html without much of success.

here is my javascript function

function deleteBlogEntryLayer ( value, url ) {
  var msg;
  var msgcontent;
  if ( !document.getElementById('confirmDeleteBlog') ) {
    msg = document.createElement('div');
    msg.id = 'confirmDeleteBlog';
    msgcontent = document.createElement('div');
    msgcontent.id = 'confirmDeleteBlogContent';
    document.body.appendChild(msg);
    msg.appendChild(msgcontent);
    msg.className = "popLayer";
    msgcontent.className = "popLayerContent";
  } else {
    msg = document.getElementById('confirmDeleteBlog');
    msgcontent = document.getElementById('confirmDeleteBlogContent');
  }
  msgcontent.innerHTML = "<h1>Are you sure you want to delete this blog?</h1><br /><a href = \"javascript:void(0);\" onclick = \"deleteBlogEntry('"+ value +"')\" style = \"margin-right: 30px; font-size: 14px; color: #0000ff;\">Yes</a><a href = \"javascript:void(0);\" onclick = \"closeModalWindow('comfirmDeleteBlog');\" style = \"font-size: 14px; color: #0000ff;\">No</a>";
  openModalWindow('confirmDeleteBlog');
  msg.style.display = 'block';
  msg.focus();
}

css style poplayer and poplayerContent are in the mass css script file.
openModalWindow is a function that I know it works because I've used this function in other page.

function openModalWindow(value) {
  var div = $(value);
  var bgDiv = $('modalBackgroundDiv');

  var docDim = Element.getDimensions(document.body);
  //get the size of the window and calculate where the box should be placed
  var wDim = getBrowserWindowSize();
  var dDim = Element.getDimensions(div);
  // locate position of center window
  div.style.top = ((wDim.height - dDim.height*2) / 2) + 'px';
  div.style.left = ((wDim.width - dDim.width) / 2) + 'px';
  // set up background div, cover whole page instead of just the browser screen
  if (docDim.height > wDim.height) {
    wDim.height = docDim.height;
  }
  bgDiv.style.width = wDim.width + 'px';
  bgDiv.style.height = wDim.height + 'px';

  Element.show(div);
  Element.show(bgDiv);
}
function closeModalWindow(value) {
  Element.hide(value);
  Element.hide('modalBackgroundDiv');
}
function getBrowserWindowSize() {
  var winW = 630, winH = 460;
  // brower compatibility
  if (parseInt(navigator.appVersion)>3) {
    if (navigator.appName=="Netscape") {
      winW = window.innerWidth;
      winH = window.innerHeight;
    }
    if (navigator.appName.indexOf("Microsoft")!=-1) {
      winW = document.body.offsetWidth;
      winH = document.body.offsetHeight;
    }
  }
  var rval = {
    width: winW,
    height: winH
  };
  return rval;
}

and lastly, $('modalBackgroundDiv') is a div pre-defined in html

<div id = "modalBackgroundDiv" class = "modalPopupTransparent" style = "display: none;"></div>

I used a <a href onclick> to call deleteBlogEntryLayer function, only the pre-defined div layer modalBackgroundDiv poped up, and the div I created in javascript did not show at all.


Can someone point out what was wrong?

thx

[taha116]

sorry that i cant help you but here is a bump*

I see your fairly new to the forums so id like to make sure you understand this for your own benefit :
Dont be disappointed if you don't get help right away, there are allot of talented people on these forums. One of them is bound to read this and help out, just sit back and find something to kill time with, or work on something else you need to meanwhile.

[lnakuma]

Thx for the advise.
I won't be disappointed if I did not get help right the way, and I'm sure I will be helped later some time when others have time either to sit down to read my post or to find problems of my code.

as far as your suggestion, that's what I am doing right now. put a javascript alert message at where my problem is, and move on to other part.

writing a brand new blog application takes time and I don't expect to finish it fast.


again, thanks for your help and concern.

[vol7ron]

do you have a link to your page that you are testing?

[lnakuma]

The original page is at http://medicineshield.akuma.x10hosti...iew.all&user=0
but it requires register and actually post a blog.

So I upload a set of pages really fast at http://medicineshield.akuma.x10hosting.com/test/ with manor changes(get rid all the php code and html forms).

It apparently shows a different bug than what happened in my original. but of course it is still wrong somewhere.

both have different problems but both are not right.



I appreciate the help.

[misson]

Use Firebug (2) with Firefox, Safari 4's built-in debugger or Visual Web Developer Express with IE (Opera's dragonfly is still in development) to debug JS.

After viewing and clicking the links, the test page will log two errors in the browser's error console. For Safari:

ReferenceError: Can't find variable: $                                                                            ajax.js:3
TypeError: Result of expression 'Element.hide' [undefined] is not a function.                      ajax.js:24

Neither "$" nor "Element.hide" are defined as part of JS or the DOM. I'm guessing you're using Prototype, so you need to include prototype.js in the test page.

[lnakuma]

I found out my problems.

first, msg.className should be 2 css classes instead of one.

and the other problem is simply a typo..

closeModalWindow('comfirmDeleteBlog');

who would spell confirm "comfirm"? jesus..... lol




btw: had firebug but never used it. now i see i should...

[misson]

and the other problem is simply a typo..

It's amazing how many bugs are caused by typos. Even with modern IDEs' code colorers, auto-indentation, auto-completion and name checkers, they still happen. For instance, no IDE I know of could have caught your typo.

btw: had firebug but never used it. now i see i should...

Firebug is frickin' awesome.

[subasis]

Firebug is a very powerful tool when it comes to finding and solving errors in javascript code.
To deal the errors of JavaScript code check the following reference.
http://www.w3resource.com/web-develo...-tutorials.php

[misson]

@subasis: don't revive dead threads. This one is almost two years old.

Don't spam. I see all your posts are promotions for that website. You've been reported.