I know that I can create a dialog.
I know that I can create a form.
Is it possible to combine the two and make myself a dialogbox which makes a post to the same page?
A jQuery UI dialog display a div and its content as a dialog.
So if your div contains a <form> element it will displayed fine.
Code:
<div id="dialog">
<form id="t2eForm" action="#">
<p>
<input type="text" id="t2e_w" name="t2eWrite" />
</p>
</form>
</div>
jQuery(document).ready(function () {
jQuery("div#dialog").dialog({title: 'Demo'});
});
Demo: http://jsfiddle.net/NdhkL/
Related
I'm using Jquery mobile, and I have a input form with clear text button.
ex) <input type="text" name="" id="" value="" data-clear-btn="true" />
Then What about the Textarea tag ?
<textarea name="" cols="" rows="" data-clear-btn="true"></textarea>
This does not working.
Is there any way to solve this problem ?
data-clear-btn is only for textinput, not for textareas.
If you want a similar function, you must create a button near the text area, and clear that programically on button click, setting val('') to the textarea.
<textarea id="myTextarea" name="" cols="" rows=""></textarea>
<a id="clrTextarea" data-role="button" href="#" onclick="clearTextarea()">Clear</a>
<script>
function clearTextarea(){
$("#myTextarea").val('');
}
</script>
If you want the same efect than data-clear-btn in textinputs, you must hide the button when the textarea is empty, and show it when the textarea has data, with an onChange event over the textarea. Also you can put the button over a textarea's corner using css, and make it translucent when the mouse is not over it, with a hover tag in the css.
HTML:
<div data-role="page">
<div data-role="content">
<input type="text" />
<a data-role="button" href="#">Click to Change Input's Value</a>
</div>
</div>
jQuery Script:
$('a').bind('click', function () {
$('input').val('');
});
Is there a way to use some pageinit event for a popup, in order to populate an input box with an email address from the main page?
So in my html, I have 1 page declared as data-role="page" and one popup declared as data-role="popup". In the "page" I have an input containing an email address, and a button that calls the popup. In the popup I have some text, another input text and 2 buttons. This input box must be populated with the contents of the main page input box value. How can I achieve that? Is there some pageinit event for popups too?
So here is my main page declaration (pg_main)
<div data-role="page" id="pg_main">
<input type="email" name="emailadr" is="emailadr" value="" />
<input id="sendemail" class="emailclass" type="button" name />
</div>
and now the popup (sendm)
<div data-role="popup" id="sendm" class="ui-content">
<h3>Send the email</h3>
<p> Confirm email address below</p>
<input type="email" name="adresa" id="adresa" value="" />
<input type="button" id="emailok" value="Send" />
<input type="button" id="emailno" value="Give up" />
</div>
Of course I have some code that fills the input in pg_main with a valid email address, but that is not my issue.
In my script, I call the popup like this:
$(document.body).on('click','.emailclass', function(){
$('#sendm').popup("open");
});
How can I fill the $('#adresa') from popup sendm with the value of $('#emailadr') from page pg_main?
Thank you
What you need is this code:
$("#sendm").on("popupafteropen", function( event, ui ) {
$('#adresa').val($('#emailadr').val());
});
It will be executed when popup is opened. Event used here is called popupafteropen and you can find more about it in an official documentation.
Working example made form your code: http://jsfiddle.net/Gajotres/Q5KSV/
I am using bPopup to load a form in an overlay. The form is basically in a that is loaded hidden in the page, and by clicking a button on the page, the overlay shows up on top with the form in it.
I was using this code in another page before and it worked fine but wanted to go the overlay route as I felt the user experience was better.
So what happens is:
The overlay loads perfectly, all fields are visible, but the submit button doesn't do anything.
Using firebug, I looked at the code of the overlay and realized that my opening and closing tags are gone from the div.
I check and they are present in the when hidden.. so I'm guessing something happens with bPopup as I load the overlay.
I couldn't find anything in the regard and turn to the community.
Thanks
here is a sample of the code:
The div in the page I load:
<div id="fileuploadbox">
<div id="fileupload_div" class="contentcontainer">
<div class="headings alt">
<h2>Upload a file</h2>
</div>
<div class="contentbox">
<form action="**mycontroller**" method="post" enctype="multipart/form-data">
<p><span class='label'>File:</span><input type="file" name="file" value="" id="uploader" size="34" /></p>
<p><span class='label'>Description:</span><input type="text" name="description" value="" id="smallbox2" class="inputbox" maxlength="250" /></p>
<p><span class='label'> </span><input type="submit" name="" value="Upload file" class="btn" />
</form>
</div> <!-- content box -->
</div> <!-- contentcontainer -->
</div> <!-- fileuploadbox -->
The Button it self:
<a href="#" class="fileuploadpop">
<div id="fileuploadpop">
Upload a file
</div>
</a>
The Javascript:
<script language="javascript">
$(document).ready(function(){
$("a.fileuploadpop").bind('click', function(){
$("#fileuploadbox").bPopup();
return false
});
});
</script>
The code you provided works fine in my mac Firefox and Chrome with bPopup. The submit button works!
May be something to do with your btn class which I have not defined or you might try putting this in a bare-bone page to test with bPopup first to track and resolve any other conflict.
Scenario:
Using jquery form plugin . The form appears in a dialog, created with jquery UI. After clicking submit a success message appears on the form. What I would like to do is to have the dialog fade out after the success message appears.
Problem:
I'm unclear how to structure the code to close on success and where to put the code.
In the following I attempted to add a "success function" to the script that is triggered on clicking the submission of the form as follows:
$(document).ready(function() {
var options = {
target : '#output1',
url: 'comments.php',
clearForm: 'true',
success: function {
$dialog.dialog('close');
}
};
// bind 'myForm' and provide a simple callback function
$('#brokenLinks').ajaxForm(options);
return false;
});
However, this breaks the script and clicking the submission button causes the php script with success message to load in the window, as opposed to the desired behavior of staying on the form page.
Can anyone point me to examples of how to fade out a dialog after form submission, or suggest how this needs to be architected.
Thanks.
Additional Code
FORM
</p>
<p>
<input name="nowhere" value="linknowhere" type="radio">Link is
broken and doesn't go anywhere
</p>
<p>
<input name="wrong_url" value="linktowrongurl" type="radio">Link
goes to an unexpected destination
</p>
<p>
<input name="other" value="linkother" type="radio">Other -
Please explain in the description box below
</p>
<em>Description</em>
<p>Please add as much descripton as you can about the problem you
noticed</p>
<textarea class="tagged" name="description" id="area" cols="50" rows="10" title="Please add as much description as you can."></textarea>
<p>
Page Address: <br> <input name="url" value="" id="targetURL" size="100" title="Page Address" type="text">
</p>
<p>
Browser<input name="browser" value="Firefox" type="text">
</p>
<p>
Operating System<input name="operating_system" value="MacOSX" type="text">
</p>
<p>
<input name="submit" id="button" value="Submit" type="submit">
</p>
</fieldset>
</form>
<!-- server response -->
<h2 class="testColor">Output Response</h2>
<div id="output1" class="testColor">
</div>
<!--End broken links FORM-->
Dialog Generating Script
$(document).ready(function() {
$('#target a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 700,
height: 800,
modal: true,
open: function (event,ui) {
$("input[name='url']").val(pageAddress);
}
});
$link.click(function() {
$dialog.dialog('open');
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
return false;
});
});
});
Host Page
<!-- Checks for presence of cookie. If present sets a php flag to indicate that cookie is present. This flag is read into Javascript in another script -->
<script type="text/javascript">
var readerStatus="tester";
if (readerStatus=="tester") {
$(function() {
$( "#dialog" ).dialog();
});
};
</script><!-- If tester flag is set then show the feedback button -->
<script type="text/javascript">
var pageAddress="http://localhost/Formdev/rc2feedbackform/page3_blogpage1.php";
</script><!-- Reads the url of the page and stores it as a Javascript variable -->
</head>
<body>
<div id="dialog" title="Feedback Button">
<div title="Feedback Form">
<p id='target'><a href="feedbackform.php" title='Feedback Form' >Click Here For Feedback Form</a></p>
<p class="notes">This form is dragable and resizable</p>
</div>
</div><!-- This is the text for the tester button -->
<!--------------------------------------------------------------------------->
<!-- Start The Page Display -->
<h1>Page 1 Of The Blog</h1>
<p class="blueborder textColor">This page simulates the page on the blog where testers will land. A button appears on this page with the title feedback form. Click on the button and the feedback form will appear. You can then complete the form. When you are done click on the submit button. If the forms is successfully recorded you will see a message telling you its been recoreded. </p>
</body>
You have to submit the form using ajax to prevent the new page from loading. then use the callback in the ajax function to perform the .fadeout() on the div/form
edit: i misunderstood the question. can probably help if you show the function called when the submit/login button is clicked
.I have a div tag that is also divided into two divs. here is the code:
<div>
<div id="search">
<form id="try" method="post">
Batch: <input id="batch" name="batch" type="text"/>Dept: <input id="dept" name="dept" type="text"><input type="submit"/>
</div>
<div id="receiver">
</div>
</div>
I have placed a search option in the div named "search" using post method. what i want to do is that when i click the submit button the page to receive the values will appear on the div named "receiver".
is this possible? if it is, please help..
The ways you have for this are:
1 - The simplest - instead of a div - use an IFrame like this
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
</div>
<iframe name="receiver" id="receiver"></iframe>
</div>
The disadvantage in this case is that the search-result that come in this case from url-to-server-page - is a complete and independent HTML page that is nested in your search page.
It is not effected by styles of the parent page, and the communication between them for JavaScript operations is rather combersome.
2 - with some JavaScript skills you can use AJAX.
There are many libraries on the net that can help you do it in very few lines of code.
jQuery is the simplest, although it's the one I like least...
http://jquery.com/
3 - use a full round-trip
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>
</div>
You want what's called "AJAX." There are a number of libraries available, such as Google Web Toolkit or jQuery to accomplish what you want.
Can you clarify? Is this a php page and you are posting to self or are you looking to use ajax to populate the div?
If it is php and you post to self then you can simply check if the post has been made inside that div :
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>