navigate inside a jQuery modal dialog - javascript

I got a question. I'm using the jQuery modal dialog plugin to let user input some data that will be saved in a database. My dialog can actually have two states which users can choose from by selecting a radio button inside the dialog box. The problem I'm having is that I lose some of the styles on my dialog box when the user selects a radio button. Also, how do I make it so that when the user saves the input data on the dialog box, after the dialog has closed, I want to load the new data live on the current page (with without the user having to refresh the page to see the changes).
Any idea?

As suggested by the other guys, you should give us some code for your first question.
For your second question, The jQuery Modal Dialog plugin picks up a div from the DOM and converts it to the modal dialog. So all the controls which are available inside the modal dialog can be access with normal jQuery.
Also, you can assign a function to be executed when the OK or Cancel buttons are clicked inside the modal dialog. Have a look here:http://jqueryui.com/demos/dialog/#option-buttons
So what you can do is, when the "OK" button is clicked, your function will pickup all the values which are inside the controls on the modal dialog and assign them to the controls on the current page.
Hope this helps.

Related

close two modals at same time (modal inside a modal)

I have a View/Edit button in my angular application which shows the details of user in a modal when clicked In modal it has Save and delete buttons. When they click on delete button the user will be deleted. Before they delete, I want to show a delete confirmation.
So, I'm showing the delete confirmation modal inside the first modal.
Now, I want to dismiss the two modals when they click on final delete button. I tried using
data-dismiss= "modal" so that the modal closes automatically, but this is closing only the second modal which is above the first modal. How would I close both modals at a time?
And also I feel that this is not a good idea to have 2 modals like this. Is there any alternative to this?
Thanks!
Please let me know if any code or more information is needed

Bootstrap Modal closing when any modal inside is closed

I am using basic bootstrap modal inside which there is a summernote text area. Problem is when I click on the insert picture button in summernote, it again opens a modal to choose the picture, but if I click on the modal close button of the summernote picture modal without choosing the picture, it closes the main modal too.
I don't want to close the main modal when modal close of the picture modal is clicked. Any help would be appreciated....
Check that these modals do not share the same id attribute
Also check that they do not share the same name attribute
you can give them separate names manually (like numbers: modal1)
you can also name them automatically with your server-side language when creating them, or with JavaScript upon load, but remember to reference these names correctly in the references, buttons & functions that close them.
#argon 's solution didn't work for me.
But I found this solution (provided here):
('#HtmlContent').summernote( {
dialogsInBody: true,
});

Drag and Drop to pop up add new modal form with pre-filled?

I want to add a new functionality to my Spring web application. I have an add new button on the home page and clicking it will pop up a modal with form to allow people to input something and submit. What I want is to allow dragging some text and dropover mouse on the add button, then the form modal displayed with one of the input field filled with the text dragged. Any solution on this?
For the modal, I suggest you use bootstrap modals
You need to be more specific as to from the "some text" you want to drag and drop will come from.
HTML5's drag and drop has some easy javascript to get you started

jQuery magnific-popup submit button

Is it possible to make an extra button on the jquery magnific-popup component, with the functionality to close the dialog?
I'm using the component to add a description to a photo, therefor I'll need a submit button that will add the description via ajax to the photo (this happens already) but the dialog isn't closing...
After reading the doc closely you can do it like:
$.magnificPopup.close(); // Close popup that is currently opened (shorthand)
$('.element-with-popup').magnificPopup('close'); // Will closethe popup

How can I create a modal dialog with a text and a listbox with javascript

Since I am new in javascript my question is how can I create a modal dialog using javascript. In this modal dialog I want to have 3 controls. An editbox, a textbox and a listbox. The user enters value in the edit box and if there are more than one result i want to display it in the listbox. Then the user selects one from the listbox and pressing the OK button the dialog returns the selected value.
I 've been trying to find a sample code to do this with no luck. Can anyone help?
I would recommend a javascript library like dhtmlx (or jQuery, I haven't tried that).
http://dhtmlx.com/docs/products/dhtmlxWindows/index.shtml
With dhtmls you can define custom modal windows by javascript!

Categories

Resources