Using JavaScript with Wicket's ModalWindow

So here's the scenario: I've opened a ModalWindow and displayed multiple Panels in it by clicking on a button - now I need to apply some JavaScript specifically to one of those Panels. How can I accomplish this?

I attempted to add a Behavior to my Panel:

add(new AbstractBehavior() {
            private static final long serialVersionUID = 1L;

            @Override
            public void renderHead(IHeaderResponse response) {
                String js = "function myFunction(parameter) {  alert('asdasd1'); }";
                response.renderJavascript(js, null);
                response.renderOnDomReadyJavascript("$(document).ready(function() { alert('test2'); myFunction("+paramsFromWicket+") }); ");
            }
        });

Unfortunately, it seems like it's not working as expected :(

javascriptajaxwicket

Answer №1

Apologies for the confusion earlier, but I managed to find a solution. The key was using AbstractAjaxBehavior in my implementation.

add(new AbstractAjaxBehavior() {
            private static final long serialVersionUID = 1L;
            @Override
            public void onRequest() {
            }
            @Override
            public void renderHead(IHeaderResponse response) {
                String js = "function customFunction(param) { alert('Hello World'); } $(document).ready(function() { customFunction(" paramFromWicket + "); });";
                response.renderOnDomReadyJavascript(js);
            }
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Should noImplicitAny be enabled for functions that are wrapped with useCallback?

React's useCallback function wraps around another function and returns the same type as its input. Here is the TypeScript type definition: function useCallback<T extends (...args: any[]) => any>( callback: T, deps: DependencyList, ): T; ...

javascriptreactjstypescript

Locate every occurrence of the word 'ancient' on a webpage and substitute each one with 'modern' by utilizing a javascript bookmarklet

Is there a way to replace every occurrence of the word 'old' with 'new' on a webpage using a JS bookmarklet or greasemonkey script? I'm open to using jQuery or other frameworks if needed, as I've heard there are ways to incorp ...

javascriptscriptinggreasemonkeybookmarkletreplace

What is the best way to adjust the opacity of a view when a SELECT option is changed?

While it may be tempting to take a shortcut and ignore MVC principles, I am determined to learn how to work harmoniously with Angular. I have been struggling with seemingly trivial issues, such as this one. My goal is for div#thisShouldFade to smoothly fa ...

javascriptangularjscss-animations

Tips for dynamically updating an HTML value with Javascript

Summary of My Issue: This involves PHP, JS, Smarty, and HTML <form name="todaydeal" method="post"> <span id="fix_addonval"></span> <input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offe ...

phpjavascripthtml

Error: The class constructor "Scene" cannot be executed without using the keyword 'new'. Located at line 391 in the file: "physi.js" in the directory: "threejs/libs"

I have been utilizing the Physijs library with an older version of three.js and everything was functioning perfectly. However, upon downloading the latest version of three.js, I encountered issues even when attempting to add a simple plane mesh to the scen ...

javascriptthree.jsphysijsammo.js

Tips for retrieving a variable from a $.getJSON function

My question is similar to this one: How can I return a variable from a $.getJSON function I have come across several duplicates on Stack Overflow, but none of them provided a satisfactory answer. I understand that $.getJSON runs asynchronously, and I hav ...

javascriptjqueryajaxjsonasynchronous

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

javascripthtmlcss

What is the best way to reveal a CFDIV that is filled with dynamic content using AJAX binding?

I have a set of CFSELECT elements that populate a text input field: <cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" /> <cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" /> <cfselect id="theOther" na ...

ajaxcoldfusionuser-interface

The pagination links in my CakePHP application are unresponsive when using Ajax

I am currently working on implementing pagination in a table filled with data retrieved via Ajax. The table structure I am dealing with is as follows: <div class="portlet box green Report index"> <div class="portlet-title"> <di ...

phpajaxcakephppagination

Tips for automatically sending data back to the server every two seconds using ASP.NET Web Form

My Textbox looks like this : <asp:TextBox runat="server" ID="Text1"></asp:TextBox> I need my Textbox to send data back to the server every two seconds using setInterval in JavaScript. ...

javascriptjqueryasp.nettextbox

Using JavaScript values retrieved from a database to dynamically adjust the options in the second dropdown menu based on the selection made in the

I am currently working on a feature that involves populating two dropdown menus with values from a database. The idea is that when an option is selected in the first dropdown, the second dropdown should dynamically display relevant values based on that s ...

javascripthtml

JavaScript Advanced Filtering techniques

I'm currently working on implementing a more advanced filtering system using JavaScript. The challenge I'm facing is when users select multiple checkboxes, I want the results to only display items that are tagged with all of the selected checkbox ...

javascriptjqueryhtml

Encountering the error message ".ajax is not a function" when trying to submit a single input using jQuery and Ajax

While attempting to create a span element for submitting input data to the server, I encountered an error in the Firebug console stating: "TypeError: $(...).siblings(...).children(...).ajax is not a function"... I am unsure of what might be causing the is ...

jqueryajax

The comparison between local variables and data can result in a significant drop in performance

My current project involves VueJS and Cesium, but I'm facing a performance issue with a significant drop in frame rate. While I have identified the problem area, I am unsure of why this is happening and how to resolve it. export default { name: ...

javascriptvue.jsthiscesiumjsscoping

Watching a specific property amongst various objects using VueJS deep watcher

Issue at Hand In my scenario, I have an array named "products" that consists of multiple objects. Each object within the product array includes a property called "price". My goal is to monitor any changes in this particular property for each product. This ...

javascriptvue.jsvuejs2watch

The button click event is failing to trigger the jQuery script

Attempting to retrieve selected data from a table using Bootstrap and jQuery. After selecting checkboxes and clicking the "Add to Cart" button, I need to get the chosen data from the table. Here is a snippet of my code: <!DOCTYPE html PUBLIC "-//W3C ...

javascriptjqueryhtmltwitter-bootstrap

Exploring the functionality of private methods within controllers and the ready-to-use template from sidewaffle

Trying to navigate the complexities of testing an Angular app has left me feeling bewildered. It seems like there are conflicting recommendations that I'm trying to reconcile. Following John Papa's style guide, I've been using Sidewaffle tem ...

javascriptangularjsunit-testing

What is the best way to make my script submit two forms consecutively?

On my website, I have two pages, each with a form. When you submit the first form on the first page, you are redirected to the second page with the second form. How can I submit both forms using a single Greasemonkey script? Here is a step-by-step guide: ...

javascriptajaxgreasemonkey

Preventing unauthorized access to PHP files by restricting calls to only those initiated by the website, and not through methods like Inspect Element

I have numerous php files responsible for updating my database, but I only want them to function when called in my code (typically through ajax). Currently, entering the URL of a php file directly causes the database to update. Additionally, if I insert a ...

phpjquerymysqlajaxmysqli