Bootstrap application wizard content disappears - javascript

I'm using https://github.com/amoffat/bootstrap-application-wizard/ to create a application wizard.
I want to open a wizard based on which button is pressed.
So, i have used the following code:
$(".button").on('click',function(){
var id= $(this).data('btnid');
$("#wizard"+id).wizard().show();
});
But when I click on button -> close modal -> reopen the modal, the wizard content disappears, it just shows an empty wizard.

This can be resolved by storing the references somewhere and using the reference to call show() method of the wizard.

Related

Oracle APEX 5 - modal region not opening after page submit

OK, here's my situation. I have modal region with a chart. There are checkboxes corresponding to each line on the chart. I want the end user to be able to click a checkbox and have the corresponding line on the chart appear/disappear. Here's where I am:
User opens page two
There is a button "open chart" at the top of the page
When that is pressed, chart opens
User hits a checkbox, the page is submitted with a dynamic action
The modal region disappears
When I open the modal region back up, the line has indeed disappeared like it was supposed to.
My problem is number 5 above. I need that modal region to stay open after the dynamic action on the checkbox submits the page.
So far, I have tried another action (under the submit page on checkbox change action) that opens the modal region. But, that isn't working. Any help is greatly appreciated.
If you used the wizard to build the page then it's likely that when you submit the page the close dialog process is being triggered. In that case, to stop that from happening either delete the process or put a condition on it (request contained in value) and select the buttons you want to close it.
Found my answer. The solution was to forget about the modal region and make a modal page. Now, when I check/uncheck a box, I can call a dynamic action to resubmit the modal page without it disappearing. Thank you for your help!

Multiple level of jQuery Dialog

I am trying to implement multiple level of jQuery Dialog with modal behavior. I have main page which open up first dialog box from where second dialog box can be open all both should be modal box.
First issue is I am getting error on fiddle when clicking main page link and second its not creating dialog as required.
Fiddle
A bunch of things going on:
In the jsFiddle, you need to add jQuery UI and a theme as external resources. Selecting just the jQuery library is not enough. jQuery UI Dialog is part of the jQuery UI library, not part of the jQuery core library.
Since your click events are on <a> tags, you need to cancel their default behaviour. Make a click handler for your <a> tags, and cancel the default behaviour first before doing anything else:
Gold
$("#clickForGold").on("click", function(e) {
e.preventDefault(); <--- this stops the link from navigating
//now do other stuff
});
Set up your dialogs at page load, and then open them when you need to. Use the autoOpen:false parameter to keep them from opening when the page loads. Open them as follows:
$("dialog-id").dialog("open");
Don't open a modal over a modal. It's extremely poor for usability. Close the first one before opening the second one:
function clickForSecond() {
$("dialog-id-first").dialog("close");
$("dialog-id-second").dialog("open");
}
A working example:
https://jsfiddle.net/5ucat3f7/1/

AngularJS Clicking on Add button should display a new popup page by hiding the parent page

I am working on a project which uses AngularJS/Breeze framework using HotTowel Template.
I have a requirement where, in a parent.html page I have a button/link as "Add" and on click of this button, I need to display a popup page by hiding the parent page(i.e.parent.html).
Add page will have input controls and Save button where user will enter the details in the respective control and on click of Save button data from input controls will be saved to the database table.
I am new to this AngularJS style coding, please advise me or provide me a link on how I should implement the display a child popup page by hiding the parent page(i.e.parent.html) as explained above.
From what I understood from your question is that you need to use modals.
You can try using angular ui modals
This creates a pop up by fading the primary page. You can create input controls and save buttons in the modal

Open Modal from Modal

I'm using twitter-bootstrap and am using the Modal JS plugin. I have a modal which is open and want to open another modal from the original modal that is open.
The reasoning, is the user can select an option from the dropdown list. If the item they want to select isn't in the list, they can click a button and add a new one.
I've tried to hide the original modal, then show the new one, but I get stuck with just showing the backdrop. When I try and open them together, the backdrop gets dark (since I've now placed another backdrop on top of the one already existing and I can still see the original modal.
Ideally I could open a modal, then open another just as easy as doing it today with one modal.
My problem was the 2nd modal was inside the file of the first, so when I hid the first, I couldn't show the 2nd one (which is why I was left with just the backdrop). I ended up just calling modal.('hide') on the first modal, then modal('show') on the 2nd.

Popup form using asp.net and javascript

Hi I am new for web development. I have an application which consists of a button. On clicking the button a popup window should appear which consists of 2 fields and a button. On clicking button in Popup window 2 fields in popup has to be saved in to database. How to implement this using ASP.NET and javascript ?
Try even this one...
http://www.scriptiny.com/2009/05/javascript-popup-box/
I suggest you try this...
JQueryUI Pop Dialog
First you need to add jquery library in your page then on the next line add the library for the jqueryui
It's very easy...

Categories