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
Related
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/
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 jquery tab as given bellow. Clicking on each tab it make a AJAX call according to its href url. Problem is AJAX call is not SEO friendly. How i can make it SEO friendly? How to do a postback on each tab click and keep current tab as selected after postback. Also how to update url on each tab click i mean if user click on [SPECIFICATION] tab, after post back url should look like www.domnainname/cardetails/specification
I AM USING ASP.NET MVC 4.0.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function ($) {
$('#example').tabs();
});
</script>
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>Overview</li>
<li>Specifications</li>
<li>Exterior</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" title="tabs-4" >Interior</a></li>
<li>Dimensions</li>
<li>Feature</li>
<li>Instrument Panel</li>
</ul>
<div id="tabs-1" style="width: 698px;">
This is Tab one
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
</div>
Thanks,
#Paul
Based on what you are trying to do I would suggest the following:
Replace href="/Your/links/address" with href="#corresponding-panel"
Add a 'data-link' attribute to house your url
Subscribe to tab's select event
$(".tabs").tabs({select:function(ui, event){
if(!$(event.panel).hasClass('loaded')){
var linkURL = $(ui.currentTarget).attr('data-link');
//Ajax load has happend
if(linkURL != undefined){
//USE the 'linkURL' variable in place of '/echo/json'
$.ajax({
url: "/echo/json" ,
success:function(data){
$(event.panel).addClass('loaded').html("<h1>Some ajax content loaded from " + $(ui.currentTarget).attr('data-link') );
}
});
}
} }});
Here is the JSFiddle example
I have this jquery-ui form:
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
$(function() {
$("#chat-form").dialog({
autoOpen: false,
height: 300,
width: 550,
modal: false,
buttons: {
Submit: function() {
socket.emit('send_fics_cmd', chat.val());
chat.val('');
}
}
});
</script>
</head>
<body>
<div id="chat-form" title="FICS Console">
<div id="chat-window" class="text ui-widget-content ui-corner-all"></div>
<form>
<fieldset>
<input type="text" name="chat" id="chat" value="" class="text ui-widget-content ui-corner-all" />
<input type="text" style="display:none" />
</fieldset>
</form>
</div>
</body>
</html>
A node.js/socket.io server listens on localhost:8080 for emissions on the socket object.
What I don't understand is this: Without the rather nonsensical line
<input type="text" style="display:none" />
right below the input textbox with id="chat", the form is submitted via GET whenever I hit the Return/Enter key. The Submit handler is not executed. This happens even though the Submit button doesn't have focus, which altogether is highly undesireable behaviour.
When this line is present, however, the Submit handler is executed on hitting the Return/Enter key only when it has focus, which is what I want.
It does not work with type="hidden", by the way, so the display:none is only make the additional input disappear in the view.
Is this a bug in jquery-ui or does it somehow make sense?
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.