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.
Related
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
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.
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!
What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp
you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/
To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!
HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m
You will not be able to do this with alert, but you should take a look at how to create modal windows.
I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.