JavaScript JS Script being (seemingly) ignored in .jsp (Netbeans)

I'm trying to make a .jsp where, by clicking a button, the page opens a modal dialog with some stuff. I'm also using jQuery. I'm new to this, so, to test if jQuery was working, I first tried a kind of "Hello World" like this:

<head>
    <link rel="stylesheet" type="text/css" target='_blank' href="css/bibliopdf.css">
    <link rel="stylesheet" target='_blank' href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

</head>
<script>
    function myFunction() {
        $("#h01").text("Hello jQuery");
    }

    $(document).ready(myFunction);
</script>

And, in the body part, just at the beginning I have a:

<h1 id="h01"></h1>

Now, if I try running this project on Netbeans, the "Hello jQuery" appears just as expected. Which means jQuery is being recognized just fine.

But the problem begins when I elaborate on things, trying to make a button to open a modal dialog. The function I made then becomes:

<script>
    function myFunction() {
        $("#h01").text("Hello jQuery");

        var diag;
        diag = $("#idNovoDialog").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Adicionar",
                "Cancelar",
            }
        });

        $("#idNovo").button().on( "click", function() {
            diag.dialog("open");
        });
    }

    $(document).ready(myFunction);
</script>

And the .jsp now has:

<div id="idNovoDialog">
        Some stuff
    </div>

And a button:

<input type="button" value="NOVO" style="width:180px;" id="idNovo"/>

So, if I try running this, it acts as if the script was never there to begin with. Not only does the dialog part not work, but the "Hello jQuery" part also stops working. Since it worked before, I believe there's a mistake somewhere in the javascript code, but I really couldn't find it.

Could anyone tell what I'm doing wrong?

Answer:1

The issue is how you are defining the buttons of the dialog options:

        buttons: {
            "Adicionar",
            "Cancelar",
        }

Per the JQuery UI docs, when you set it to an object, the keys are the names of the buttons, and the values are the functions called when the buttons are clicked.

        buttons: {
            "Adicionar": function() {
                // Action here
            },
            "Cancelar": function() {
                // Action here
            }
        }

Working JSFiddle: http://jsfiddle.net/ynr4b64g/ JQuery UI Buttons Docs: http://api.jqueryui.com/dialog/#option-buttons

Answer:2

Understanding angular's promises

I'm learning Angular but having troubles to understand a point. I want to get data from my server. I used this code (from angular's doc) : this.myFunction = new function() { var uri = this....

I'm learning Angular but having troubles to understand a point. I want to get data from my server. I used this code (from angular's doc) : this.myFunction = new function() { var uri = this....

  1. understanding angular momentum
  2. understanding angular.json
  3. understanding angular modules
  4. understanding angularjs
  5. understanding angular observables
  6. understanding angular routing
  7. understanding angular 8
  8. understanding angular lifecycle hooks
  9. understanding angular dependency injection
  10. understanding angular project structure
  11. understanding angular components
  12. understanding angular directives
  13. understanding angular error messages
  14. understanding angular services
  15. understanding angular change detection
  16. understanding angularjs digest life-cycle
  17. understanding angular architecture
  18. understanding angular source code
  19. understanding angular reactive forms

Using Jquery to drag and drop, get value from dropped div

I am using Jquery to making drag and drop. My short javascript to make an item to drag is: $(".draggable").draggable(); My short javascript to make a dropable area is: $("#droppable").droppable(); ...

I am using Jquery to making drag and drop. My short javascript to make an item to drag is: $(".draggable").draggable(); My short javascript to make a dropable area is: $("#droppable").droppable(); ...

  1. drag using jquery

Understanding when Meteor recomputes my template helper

I'm trying to wrap my head around Meteor's reactivity. I understand it re-renders a page when a reactive data source that's being referenced in a template changes. I also understand what constitutes a ...

I'm trying to wrap my head around Meteor's reactivity. I understand it re-renders a page when a reactive data source that's being referenced in a template changes. I also understand what constitutes a ...

  1. understanding meteor shower

Angular data-binding not working with Jade

I wrote this test code just to check if Angular is working with Jade. layout.jade doctype html html head title #{title} link(rel='stylesheet', href='/stylesheets/style.css') body(ng-app='...

I wrote this test code just to check if Angular is working with Jade. layout.jade doctype html html head title #{title} link(rel='stylesheet', href='/stylesheets/style.css') body(ng-app='...

  1. angular data binding types
  2. angular data binding example
  3. angular data binding not working
  4. angular data binding input
  5. angular data binding between components
  6. angular data binding not updating
  7. angular data binding radio buttons
  8. angular data binding cheat sheet
  9. angular data binding array
  10. angular data binding ngmodel
  11. angular data binding with function
  12. angular data binding observable
  13. angular data binding interview questions
  14. angular data binding object
  15. angular data binding input text
  16. angular data binding vs interpolation
  17. angular data binding from api
  18. angular data binding form
  19. angular data binding async
  20. angular data binding vs property binding