SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    external JS vs in page code - oh God!

    this is WEIRD guys
    it seems I can't use an external js
    I try to include the external JS with this code (consider that the js file is in the same folder of the page)
    Code:
    <script type="text/javascript" src="functions.js"></script>
    well, long story short, it doesn't work
    if I use this code it works perfectly
    Code:
    <script type="text/javascript">
    function confirmDelete(url)
    {
      answer = confirm("Are you sure you want to delete the image? (This cannot be undone).");
      if(answer)
      {
        window.location = url;
    	}
    }
    </script>
    the code is pasted straight from the JS file, no edits or what, nor to the HTML where the JS is called
    I really don't understand
    I | T | E

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neither work since neither of them are ever called.

  3. #3
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    Neither work since neither of them are ever called.
    as you can see in my post
    the code is pasted straight from the JS file, no edits or what, nor to the HTML where the JS is called
    this function is called in the HTML page
    I | T | E

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you paste more of the HTML for us? Maybe give us a link to a demo page?

    Dave

  5. #5
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have it online but here's the HTML link that goes with it

    <a href="javascript: confirmDelete('account.php?deleteimage=mTScF4s9WDx6')">Delete</a>

    it has not been edited so it works as is (only in the second case)
    consider that everything works perfectly if the javascript is in the page so I think I do something wrong linking to the external javascript but I can't see what.
    if I use the external file, the confirm box doesn't pop up when I click the link (and absolutely nothing happens)
    I | T | E

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as i tested it works fine you should check if some other JS file or something else is making the problem...

    But dont test it with href="" try this:

    <a href="javascript:;" onClick="confirmDelete('account.php?deleteimage=mTScF4s9WDx6')">Delete</a>

    i read article somewhere about why you shouldn't use javascipt: but can't find it now sorry.
    NOTELAY.COM - Have a nice noty day
    ETA CONSULTING

  7. #7
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the tip psokarovski
    anyway I don't have any other javascript file or anything that can cause problems, and it still doesn't work for me :|
    did you test it both with the code in the page and with an external file?
    I | T | E

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    you didn't include any of the HTML into the external Javascript file by mistake did you?

    function.js should contain the following code:

    Code:
    function confirmDelete(url)
    {
      answer = confirm("Are you sure you want to delete the image? (This cannot be undone).");
      if(answer)
      {
        window.location = url;
    	}
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have it online but here's the HTML link that goes with it
    You need to post the complete contents of a .htm page and the complete contents of a .js file. The files should be as small as possible and still demonstrate the problem.

    To post the complete contents of a file, open it, click on it to give it focus, hold down the Ctrl key and hit the key with 'A' on it(which will select everything) and then with the Ctrl key still held down hit the 'C' key(which will copy everything to your clipboard, then paste it into the sitepoint reply box--and put sitepoint code tags around it.

  10. #10
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok guys, I think I've posted everything that is useful to understand what's happening, keeping it short, anyway here's the full code
    this is functions.js
    Code:
    function verifypw(form) {
    pw1 = form.pass1.value;
    pw2 = form.pass2.value;
    agreeterms = form.agree.checked;
    if (pw1 != pw2) {
    alert ("The two passwords you entered don't match.")
    return false;
    }
    else if (agreeterms == false))
    {
      alert ("You didn't agree to the Terms of Use.");
      return false;
    }
    else return true;
    }
    
    function confirmDelete(url)
    {
      answer = confirm("Are you sure you want to delete the image? (This cannot be undone).");
      if(answer)
      {
        window.location = url;
    	}
    }
    and this is the HTML page "account.php" (edited following what psokarovski said, but this makes no difference for you to see the files structure)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>To be decided</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="blah blah" />
    <meta name="copyright" content="blah blah" />
    <meta name="keywords" content="blah blah" />
    <meta name="description" content="blah blah" />
    <script type="text/javascript" src="functions.js"></script>
    <link href="css/blue.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
    
        <div class="logo"><img src="images/logo_blue.gif" alt="logo" /></div>
        <div class="topnav">Welcome Testuser | <a href="account.php">My Account</a> | <a href="upload.php">Upload</a> | <a href="logout.php">Logout</a> | <a href="faq.php">FAQ</a></div>
      </div>
    
      <div id="pagebody">
        <div id="headerad"><div class="banner"><img src="images/728x90.gif" alt="logo" /></div></div>
        
        <div id="contentwrapper">
          <div id="contentwide"><div class="pagination"></div><div id="gallery"><div class="imageboxwrapper"><div class="imagebox"><a href="display.php?image=9bRnLNDQK4AP"><img src="t/thumb_9bRnLNDQK4AP.jpg" alt="alttext" /></a><br/><a href="display.php?image=9bRnLNDQK4AP">View image</a><br/><a href="javascript:;" onClick="confirmDelete('account.php?deleteimage=9bRnLNDQK4AP')">Delete</a></div></div></div>
      </div>
    </div>
    </body>
    </html>
    I | T | E

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    else if (agreeterms == false))
    What browser are you testing your code in? The Firefox js console can be very helpful:
    Code:
    Error: syntax error
    Source File: file:///c:/My&#37;20Documents/html/functions.js
    Line: 12, Column: 30
    Source Code:
    	else if (agreeterms == false))
    -------------------------------------^

  12. #12
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in firefox but...wow!
    I had never used firefox's error console, I'll absolutely use it from now on!

    thank you very very much 7stud
    I | T | E

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the firebug is very very good for developers and designers it is debuger for firefox you will find it on firefox extensions site
    NOTELAY.COM - Have a nice noty day
    ETA CONSULTING

  14. #14
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you
    PS: the onClick link you suggested doesn't validate at w3 validator
    if you want your code to be valid you have to the way I did it
    I don't know the advantages of the way you suggested but, if you want it valid...
    I | T | E

  15. #15
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i read article somewhere about why you shouldn't use javascipt: but can't find it now sorry.
    Code:
    <a href="javascript: confirmDelete('account.php?deleteimage=mTScF4s9WDx6')">Delete</a>
    PS: the onClick link you suggested doesn't validate at w3 validator
    if you want your code to be valid you have to the way I did it
    If you are using "javascript:" on your webpages, they are poorly designed. With your link, what happens if a person's browser doesn't have js enabled? The answer is: your link will be dead. What is a person without js to do? Leave and never come back? You should do something like this instead:

    Code:
    <a 
    href="noJS.php"
    onclick="confirmDelete('account.php?deleteimage=mTScF4s9WDx6')">
    Delete
    </a>
    Then have confirmDelete() return false to cancel the click. That way people that do have js won't have noJS.php load in their browser.

  16. #16
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still having that problem?
    Might want to look into your server's mime types??
    AFrieze

  17. #17
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no thanks AFrieze, 7stud found the problem

    7stud you're right and I hadn't considered those that have JS disabled
    I have chosen to implement it with another page where the user has to confirm that he wants to delete the image, no js at all because the option you proposed wouldn't validate and I want to keep it valid

    thank you all guys for your help
    I | T | E

  18. #18
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no js at all because the option you proposed wouldn't validate and I want to keep it valid
    You should be able to look at that link and know right away that it's valid xhtml. Let's examine its components. First, it has an href attribute. If the xhtml specification did not allow links to have href attributes, links wouldn't be very effective. Second, it has an onclick event handler. If xhtml prevented html elements from having javascript event handlers, then the xhtml specification would be a "long suicide note", and thus you would have never heard of xhtml.

  19. #19
    SitePoint Zealot Fed's Avatar
    Join Date
    Jun 2005
    Location
    Italy
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to validate it and got some kind of "there's no onClick attribute here"
    you know those messages given where you put the element in the wrong place
    I imagine it would probably validate if it was a <form> tag, but it seems that you can't put an onClick handler in an <a> tag
    I | T | E

  20. #20
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I imagine it would probably validate if it was a <form> tag, but it seems that you can't put an onClick handler in an <a> tag
    Are you able to put an onClick event handler in any html element and get it to validate?

    I tried to validate it and got some kind of "there's no onClick attribute here"
    To write valid xhtml, you have to know at least a little bit about the specification, or you need to be good at interpreting the validator's error messages. If your strategy is: if the validator gives me an error, then I will delete the lines with the error, you aren't going to be very successful writing xhtml and javascript.

    Luckily, the validator's error messages are quite good, and it actually says:
    there is no attribute "onClick".
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •