I am developing an application using the java Stripes framework along with dojo. The customer wants the edit details form to display in a pop-up type window (a lightbox). The form has two pages. The first page is the form where the user can edit the details. The second page is a confirmation page that shows the old value vs. the new value, so they have a chance to confirm their changes.
I have the dialog showing up, and it looks great.
The issue I have is that when I click "continue" the dialog closes, and the results are displayed in the main window instead of within the dialog.
I need for the results to be rendered within the dialog.
Here is the code I have so far:
<div data-dojo-id="editDetails" data-dojo-type="dijit/Dialog" title="Edit Position Details" data-dojo-props="draggable:false, closable:false" href="urlToForm"></div>
<button class="buttons" title="Edit Details" tabindex="53" onclick="editDetails.show();" >Edit Details</button>
Then, here is the form page that is displayed in the dialog:
<stripes:form action="/action/editConfirmation">
<!--form fields here -->
<stripes:submit name="" class="buttons" title="Continue" tabindex="13">Continue</stripes:submit>
</stripes:form>
When the user clicks the submit button on the form, the action resolution needs to be displayed within the editDetails dijit.Dialog div.
I have been able to get this to work with iframes. I want to avoid iframes because they would not resize the dialog with the contents properly.
If there is a way to resize the dialog when content in the iframe changes, then I would allow the use of iframes.
It's possible to load multiple pages in a dijit/Dialog yes, by using the href property.
An example, let's say you have a page which contains a form, for example:
This is the first page with content
<button data-dojo-type="dijit/form/Button" id="myBtn2">Click me</button>
Then you can do something like this in your code:
var dialog = new Dialog({
href: 'page1.html'
});
dialog.show();
This will open a dialog with your first page. To switch pages by clicking the button on page 1, you can create your event handlers after the load event finishes:
dialog.on("load", function() {
registry.byId("myBtn2").on("click", function() {
dialog.set('href', 'page2.html');
});
});
This will set the href property of the dialog to the second page once the button is clicked.
An example of this can be found here: http://plnkr.co/edit/jxDnjoffC6s2KaXm1AAq?p=preview
Related
I have a bootstrap dialog button, when clicked navigates t a certain url page. That page has certain elements ( for ex) that is conditionally shown depending from where it was navigated from. In short im trying to use an existing template to show/hide and add button, depending on the 'where' navigation.
For Ex: On click of the button from the dialog message,
$("#alert-proceed-button").on("click", function(){
window.location.href= '#accounts/admin';
}
it navigates to a url containing the following <div>:
<div id="account">
<button class="save-changes">Save changes</button>
</div>
and that url contains the following on that page. now when i navigate from elsewhere, i'd like to show the <button class="save-changes">Save changes</button>button, however when i navigate from the dialog message (i.e. <button id="alert-proceed-button"/>, i'd like to hide the 'Save Changes' button and append/add a new 'Add Service' button in its place:
<div id="account">
<button class="add-service">Add Service</button>
</div>
Is this possible? Any ideas on how this can be done??
Thanks!
You can send both on the page and set the css display attribute of one to be hidden. Then you can use jQuery to switch that. You can check the event object to see if where it came from, so it only switches them when it originates from the alert-proceed-button.
function toggleSave () {
$('.save-changes').attr('display', 'none')
$('.add-service').attr('display', 'block')
}
Assuming you already have a listener on the click event for links on your page add this line:
if (e.target.id === 'alert-proceed-button) {
togglesave()
}
I am using JQuery Mobile to load some content from a different page into an iframe in a popup and displaying that iframe content within that popup on my initial page.
My popup link is as follows:
<a href="#popupBasic" data-rel="popup" data-transition="pop" data-position-to="window">
My popup is defined as follows:
<div data-role="popup" id="popupBasic" data-overlay-theme="a" data-dismissible="false">
Close
</div>
As you can see it has a close button.
I open my popup when a list item in a listview is tapped as follows:
$('#myList').delegate('li', 'tap', function () {
var index = $(this).index();
$("#popupBasic #memberFrame").remove();
$("#popupBasic").append( '<iframe src="/myPage?id=' + index + '" height="400px;" width="100%;" id="memberFrame"></iframe>' );
});
As you can see this loads the page with a specific id based on the index, the popup opens and this content gets loaded in the iframe within the popup.
On my iframe content there is a button and a count, when the button is pressed the page refreshes and the count should be increased. This is done by the server. However while I can see the count is getting increased and the page looks it gets refreshed it appears the content within the iframe is getting cached or something as when the page refreshes the old count is there.
Two things to add to this:
1: If I then manually refresh the iFrame by right clicking on it and selecting the refresh frame option it works OK
2:The popup has a close button on it and when I click this the first time it doesn't close the popup, instead it looks like it refreshes the iframe content and this time the count is correct. Then pressing the close a second time actually closes the popup
The experience in #2 I find very odd and I was wondering if anyone could help point out why this might be occurring?
I'm building a simple PHP app that will hopefully allow a document path to be inserted into a form field from a popup.
In my form there is a button that will open a javascript popup box. This box loads a list of documents. I would like to have a link or button next to each document that when pressed in the popup window, inserts the file path into the parent page's form field.
Is this even possible? If so, I assume this has to be done through javascript. Unfortunately, I'm not very versed in JS and as such I'm having a hard time finding a solution.
Easiest way to do this (at least for me) is with jQuery:
Parent page html:
<a href='#' id='pop'>Popup</a>
<input id='path'></input>
<div id='popup'></div>
<script src='jquery.js'></script>
<script>
$('#pop').click(function(){
$.get('load_form.php',function(data){
$('#popup').html(data);
});
});
$('#popup').on("click","a",function(){
var path=$(this).href();
$('#path').val(path);
return false;
});
</script>
The child page that generates the popup should have anchor tags with href to the document you want to call.
I am using Joomla 2.5 with Mootools and a plugin (Chronoforms) to create a tabbed form.Right now I have a dropdown menu that is loading some data from the DB via PHP. I have a button that I wish could load some values depending on the value of the dropdown, so I tried:
window.addEvent('domready', function() {
$('province_aw').addEvent('change', function() {
document.getElementById('link1').href = "index.php?option=com_chronoforms&chronoform=listSpecific-3&id_province="+index+"&id_ch="+b;
});
});
with this button
<a class="jcepopup" id="link1" href="javascript:void(0);" rel="{handler:'iframe'}"> <input type='button' name='prueba' id='prueba' value='...' /> </a>
The dropdown is actually changing the value of the links HREF, but it keeps opening a blank iframe everytime I click on it.
The dropdown already works, it changes the button and if you right click to open the link in a new tab/window it works good.
Your problem is elsewhere, not in the code you posted. I suggest checking your jQuery script, in my console its not complete, it ends in the middle of a function, looks like a broken file. Check also the jcemediabox-popup-iframe, check for versions and opening it with simple content for debugging.
I am working on jsp's, I have two jsp one in configDb.jsp, in that I have written code to retrieve the values from database and display it. In this whereas I have option like newconnection.. its a popup window. When I click on that it opens popupwindow and taken the values and store them in a database, but in my parent page I am not able to display those values. After I click on the ok button in popup window, I have to refresh the parent page, then I am able to see the values which I have created few seconds back by the new connection page. Could anyone please help me out?
You can include this in your HTML for the popup window.
<script type="text/javascript">
function proceed(){
opener.location.reload(true);
self.close();
}
</script>
<form onsubmit="proceed()">
...
</form>
Actually you can obtain the answer by googling "javascript refresh parent page from popup" and you will see stackoverflow's answer :)
A better alternative without the need of refreshing the parent page can be achieved by adding a submit button listener and perform a DOM action to insert the new element with new content. This can be easily done by Javascript.