Wicket Adding a draggable DialogBox with user defined tetarea, textbox and button - javascript

I am pretty new to Apache Wicket. I was able to get a home page, a form accepting inputs and then final success page where all accepted inputs are displayed. When this success page loads, there is a button. I would like to show a draggable dialog box with a textbox or a text area with when the button is clicked. I was trying to execute the JQuery extensions for wicket. But not able to get it on to my success page. It always complains for wicket id or component not exist and errors related based on what has been written on the java code or added to the markup html file. Here is the code to call the draggable dialogbox i created..Yes I wrote the wicket:extend for subclass. Still very confusing to me..please help.
This code is inside the AjaxButton Click...
HomePanel homepanel = new HomePanel("homepanel");
homepanel.setOutputMarkupId(true);
homepanel.setOutputMarkupPlaceholderTag(true); //tried removing it
homepanel.getMarkupId(true); //just for trial i put here
homepanel.setVisible(true);
add(homepanel);
homepanel.setVisible(true);
target.add(homepanel);
In the markup I have homepanel included.
Using apache wicket version 8.x
What am I do do. I am tapped out and no other way as my search also returns same thing .. any help.. thanks for the same.

Related

Run a Shortcode from a Button in Visual Composer - Wordpress

This should be a fairly obvious thing to be able to do. I have a plugin that has a modal newsletter signup form. I am very happy with the plugin and it has a number of options for the way it launches (after x seconds, when user reaches bottom of screen etc) it also has a manual launch option which gives me these following codes.
My theme uses Visual Composer. I want to launch the popup manually when a site user clicks a button on the homepage. I thought this would be simple but apparently not. The options I have with the standard VC button is shown below; I have tried numerous options of adding classes to the button but I cannot add a shortcode or class to any of the fields to launch the modal. I know there is a javascript onClick function but I'm not very good with Javascript. There must be a simple way to click a button and open a modal, maybe I am overlooking something completely obvious.
OK after reading back my question I thought about adding a custom css class to the button field Extra Class Name and it works. I thought that the extra class name here was for styling the button itself and did not realise that this would also trigger the pop-up as well. Guess I should have checked that first.

How to hide a container when a button is clicked and make a form appear?

So I'm trying to make a store for computers and I'm making a webshop for it, but I ran into a problem.
Now I have a container, and I want it to hide it's content when i click a button, and then a form needs to appear with name, email and a textrea for what they want to buy..
but if they click anywhere on page, other then the button I want to bring the old content back!
I'm building this in a program called Wakanda Studios, i don't know if this helps, but I'm sure someone will find my answer.
Quick note: I don't have any code yet, other then my container!
Try this, it is written in jQuery so you will have to add jQuery to your page by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> in the document head and then adding the following code at the end of your page...
$(document).ready(function(){
$("#button-id").click(function(){
$("#container-id").hide();
$("#form-id").show();
});
$(document).click(function(){
$("#container-id").show();
$("#form-id").hide();
});
});
All you will have to now is add the ID attribute to the button which starts everything off, the container, and the form.
If you are using the WAF framework of Wakanda and Studio, you would select your button, go to the events tab and add an on click event.
This will stub in a wrapper for the code to execute on click.
To hide a container, you need the container id. Using this you create a Wakanda reference to the widget and use the "hide()" method.
$$('yourContainerId').hide();
JQuery would work as well.

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Social buttons and changing attributes using EmberJS

I'm trying to have two social buttons (facebook & twitter) on my website using EmberJS. I'm binding the URL of those buttons to an attribute url (for example).
The problem is that the attribute url is changing, and the buttons are not reloading.
I did a spin-off of this article on the EmberJS: http://emberjs.com/guides/cookbook/helpers_and_components/creating_reusable_social_share_buttons/
Updated to the last EmberJS version (1.3.1), and added a "change text" button. Try changing the text for the text button, and you'll see that the button is not reloading.
Link to the jsbin: http://emberjs.jsbin.com/izOtIYi/1/edit (watch the console too)
I think it's because Twitter is messing with the Metamorph system. How can I bypass this? I'm sure someone faced this before.
The strangest thing is that it's working well with facebook like button.
Thanks !
The issue is that when you load the twitter widget it parses the <a> and then replaces it with an <iframe>. So even when you update the text property it doesnt reload the button.
One way to work around it would be to rerender the view when the text changes this would cause the iframe to be removed and a new a tag to be added.
I fixed up the jsbin to update the button when the text changes http://emberjs.jsbin.com/izOtIYi/8/edit
I got put the logic which rerenders the button into the component to make it more reusable.
The button will flash whenever the text is changed because its actually removing the existing button and creating a new button each time the text changes.

Foundation 3 - customForms checkbox`es/radio buttons don't work when loaded dynamically

I'm working with Foundation 3.
And I'm having a problem with custom forms and javascript. I use reveal plugin for login and signup forms. if I load forms statically into HTML everything works fine. But if I load them dynamically (lets say ajax), check boxes and radio buttons don't work. Even after reviel I call "$.foundation.customForms.appendCustomMarkup". What should I do? I really like those custom checkboxes and radio buttons. How could I use them with dynamically loaded HTML?
I know this was asked a long time ago -- but incase anyone else comes across it, here's how you do it:
Let's say the container that your ajax is loaded in is <div id="myModal"></div>
After, your content is loaded, you've got to fire $('#myModal).foundation('forms');

Categories

Resources