jquery-based function to "close" an
not working

Question

In my webapplication, I have the follow pair of function, which open and close a tag , simulating a pop-up windows:

<script>
    function load_page(url){
        $('#results').css("display", "block");
        $('#content').load(url);
    }
    function close(){
        $('#results').css("display", "none");
        $('#content').empty();
    }
    </script>

The first one is working perfectly, but the second don't. I set this function to be called from here:

<div align="right"><button type="button" class="btn btn-lg btn-danger" onclick="close()">Fechar</button></div>

If I replace this code by that other one (without use of the jquery), the method works:

function close() {
      document.getElementById("results").style.display = 'none';
      document.getElementById("content").innerHTML=' ';
  }

Is there any way to do this with jquery?

ps.: this code act on this :

<div class="panel panel-default" id="results">
            <div class="panel-heading">
              <h1 class="panel-title">Panel title</h1>
              <div align="right"><button type="button" class="btn btn-lg btn-danger" onclick="close()">Fechar</button></div>
            </div>
            <div class="panel-body" id="content">
              Panel content
            </div>
          </div>

You can also verify that the selectors have matches ex: `$('#results').length` — sabof, Mar 06 '14 at 23:10
And it does nothing? Neither hides the div nor empties the content? — Oscar Paz, Mar 06 '14 at 23:10
I don't know how it works for you if you don't use jQuery, but the problem is probably that [`document` already has a property with name `close`](https://developer.mozilla.org/en-US/docs/Web/API/document.close), and that's the one which is being called in your inline event handler. If you rename the function (e.g. `xclose`) it works fine: http://jsbin.com/zunodako/1/edit?html,js,output. [One of the reasons not to use inline event handlers](http://stackoverflow.com/a/21975639/218196). — Felix Kling, Mar 06 '14 at 23:11
ok, I rename the function and now it's working. Happens that i really don't had tried the vesion without jquery with the name close(). Sorry about that, but at least this experience serves to me and others (who find this question) pay more atention about this in the future. thanks for the help, anyway. — Kleber Mota, Mar 06 '14 at 23:54

score 1 · Accepted Answer · edited May 23 '17 at 10:26

The reason why your code doesn't work is because the inline event handler doesn't actually call the close function you defined.

Inside the event handler close refers to document.close, because the properties of the document is put in the scope of the event handler. And you can easily test this by use

onclick="console.log(close === document.close);"

as the handler. This is one of the reason why not to use inline event handlers.

Solutions:

Don't use inline event handlers, there are two other ways to bind event handlers.
Rename the function to something that is not a property of document: http://jsbin.com/zunodako/1/edit?html,js,output.
Explicitly refer to the function via window.close. However this might not work either because window also has a close property, which might not be writable.

Since you also admitted that you didn't run the non-jQuery version, it really has nothing to with using jQuery or not.

jquery-based function to "close" an not working

1 Answers1

jquery-based function to "close" an
not working