Dojo dialog - how to save contents of dialog - javascript

I am new to dojo and I have been following the tutorials mentioned here
http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html
I am not sure how to capture the data entered in dialog
<script type="text/javascript">
require(["dojo/ready", "dijit/Dialog", "dijit/form/Button"],
function(ready, Dialog, Button){
ready(function(){
var myDialog = new Dialog({
title: "Add",
style: "width: 600px"
});
var myButton = new Button({
onClick: function(){
myDialog.set("content", getDialog());
myDialog.show();
}
}, "progbutton");
});
});
function getDialog(){
return document.getElementById('add-link-dialog-container').innerHTML;
}
</script>
Html:
<div id="add-link-dialog-container" style="display:none;">
<div>
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name" value="Test"/></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"/></td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button dojoType="dijit.form.Button" type="submit" id="ok">Add</button>
<button dojoType="dijit.form.Button" type="button" id="cancel">Cancel</button>
</div>
</div>
</div>
<button id="progbutton" type="button">Add New</button>
The dialog does pop up. But how do I capture the data entered in the fields?
Is there any better way to do this?

If the dialog is being opened, then you should be able to use the dijit/registry module to retrieve your form fields (and thus, also your values/data).
For example:
require([ "dijit/registry" ], function(registry) {
registry.byId("ok").on("click", function() {
registry.byId("address").get("value"); // Will return the "address" value
});
});
The question of course is, when do you add the onClick event handler to your button. You have to wait until the dialog is loaded until you can add an event handler to it. Good thing, the dijit/Dialog has an event called onLoad which we can use.
For example:
myDialog.on("load", function() {
registry.byId("ok").on("click", function() {
registry.byId("address").get("value"); // Will return the "address" value
});
});
However, if you're interesting in submitting all form data, you should take a look at the dijit/form/Form widget which allows you to get/set the form values, validate the form and submit it as well.

Related

Onclick function of button can not work in form.javascript jquery

In my code, onclick function of addDvcPeople() works fine without form.
But once form added, the onclick function of addDvcPeople() works fail.
Here is the code without form which works fine:
<div class="dvcOnShlv" id="dvcOnShlv">
<!--<form action="modify_idc_addDVC.php?act=add&table=IDC" method="POST">-->
<table border="1px" cellspacing="0" id="staTable">
<tr>
<h2 align="center">IDCtable</h2>
</tr>
<tr>
<td style="width:15%" id="addDvcWorker">engineer<br /><input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="addpeople"></td>
</tr>
</table>
<!--</form>-->
</div>
My addDvcPeople() code is:
<script>
function addDvcPeople()
{
alert("test");
}
</script>
Once "form" sentence is added, function addDvcPeople() did nothing.
I don't know why.Who can help me ?
The main problem that you have is that you have given your button the same ID as your function name. You need to ensure that these are different, or your function will always come through as undefined:
function addDvcPeople() {
alert("test");
}
<form>
<input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="Button">
</form>
Here this is shown working with a different ID:
function addDvcPeople() {
alert("test");
}
<form>
<input type="button" id="addDvcPeopleID" onclick="addDvcPeople()" value="Button">
</form>
A secondary problem you'll encounter is that form submission has a default behaviour of actually submitting a form, even without a submit input, meaning that your form will disappear after the button is clicked:
function addDvcPeople() {
alert("test");
}
<form>
<button onclick="addDvcPeople()">Button</button>
</form>
To resolve this, you need to override the default form submission by passing through the event:
function addDvcPeople(event) {
event.preventDefault();
alert("test");
}
<form>
<button onclick="addDvcPeople(event)">Button</button>
</form>
Note that in the above example, the page does not refresh, and the alert appears.
Hope this helps! :)
You just do not set the duplicate id and function name

How to dynamically create objects on the fly with click of a button

I'm trying to create 2 rows of 6 rectangles (considered to be one object).
I also want to add a plus button, so that when the user clicks on either end, a new set of rectangles appear above or below the original ones. (depending on which plus button they click on)
So I am trying to achieve the following:
What I have tried/found so far:
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
//$self.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="repeatable">
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat">Add Another</button>
</div>
<input type="submit" value="Submit" />
</form>
The above example only works for forms. Does anyone know how I can go about making this work for what I want?
I modified your code to allow add to top, or add below.
I edited your event listener to check whether the button has a specific class. If so, either add above or below. It also listens to "body" click, because new DOM elements won't have event listeners attached:
$("body").on('click', ".repeat", function (e) { //other stuff here}
Also, changed your HTML so it wasn't dependent on "form", you could swap out the element types as long as the classes remain.
$(function () {
$("body").on('click', ".repeat", function (e) {
e.preventDefault();
var $self = $(this);
var $parent = $self.parent();
if($self.hasClass("add-bottom")){
$parent.after($parent.clone());
} else {
$parent.before($parent.clone());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="repeatable">
<button class="repeat add-top">Add above</button>
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat add-bottom">Add below</button>
</div>
</div>

My ajax script will run once correctly but it wont run again

So I seem to be having some issues with my code. Now I have just started learning AJAX and jquery so I am very new at it. They way the the site works is:
When a user clicks the Login button a form will appear under the button where they enter a username and password. When the user clicks login my ajax script will handle logging them in and refreshing their avatar so they know they are logged in. Then when they want to log out they click logout and it logs them out no problem.
The problem I am having is once I have run through the login/logout process I am unable to get the form to show up again without refreshing the page.
I hope I made sense =/ Here is the code I have:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/jscript"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'loginsystem/login.php',
data: $('form').serialize(),
success: function () {
$("#loginForm").slideUp('slow');
$("#playerFace").load('ajaxPHPScripts/getUserAvatar-100px.php');
$("#loginLogout").load('ajaxPHPScripts/loginLogoutButton.php');
}
});
e.preventDefault();
});
});
function doSomething() {
$.ajax({
type: 'get',
url: 'loginsystem/logout.php',
success: function () {
$("#playerFace").load('ajaxPHPScripts/getUserAvatar-100px.php');
$("#loginLogout").load('ajaxPHPScripts/loginLogoutButton.php');
}
});
}
$(document).ready(function(){
$("#loginForm").hide();
$("#loginbtn").click(function(){
$("#loginForm").slideToggle('slow');
});
});
$(document).ready(function() {
$("#removeLoginForm").click(function(){
$("#loginForm").slideUp('slow');
});
});
</script>
Now for the html:
<div id="sidebar">
<div id="sidebarinner">
<div id="sidebarInnerInner">
<div id="playerAvatar">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:100px;" id="playerFace"><img src="https://minotar.net/avatar/steve/100"></td>
<td style="text-align:center;"><?php ServerPing(); //pings to see if server is online?></td>
</tr>
</table>
</div>
<div id="joinAndLog">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align:center; height:100%;">
<tr>
<td style="width:50%;" id="loginLogout"><?php LoginOrLogout(); ?></td>
<td style="width:50%;"><?php SignupOrManageAcc(); ?></td>
</tr>
</table>
</div>
<div id="loginForm">
<form class="sideForm" id="testform" style="text-align:center; margin-bottom:10px;">
<input type="text" id="name" name="username" value="" placeholder="Username..."/>
<br />
<input type="password" id="pass" name="password" value="" placeholder="Password..."/>
<br />
<input id="submit" type="submit" name="submit" value="Login" style="width:25%; cursor:pointer;" />
<input type="reset" name="" value="Cancle" id="removeLoginForm" style="width:25%; cursor:pointer;" />
<br />
<!--a href="#" style="padding:0px; margin:0px;">Forgot Password</a-->
</form>
</div>
</div>
If you're loading content dynamically, then you need to either rebind the static event handlers to the object in the dynamically loaded content or you need to use delegated event handlers that will still work on the dynamically loaded content. The delegated event handlers are the more elegant solution.
A delegated event handler would look like this:
$('#sidebar').on('submit', '#loginForm', function() {...});
Ideally, you'd put an id (I suggested "loginForm" in my code example on the specific login form and use that instead of "form" for the target selector so you know the event handler targets only the correct form.
Using delegated event handling that is bound to a parent element that is not dynamically created/destroyed, but a select that targets the specific dynamic content inside that static parent allows you to keep the event handler in force even if the target content is destroyed and then reloaded.
You need to bind the newly loaded form the same way you did the first form.
So, after you load in the new HTML, you need to run something like this again:
$('form').on('submit', function (e) {
$.ajax({
///// snip /////
});
e.preventDefault();
});
Since this inside function is repeated, you might as well define it outside.
I.e.
var onFormSubmit = function (e) {
$.ajax({
///// snip /////
});
e.preventDefault();
}
Now to bind the form to that function, you simply do:
$('form').on('submit', onFormSubmit);
Updated code:
$(document).ready(function(){
$("#loginForm").hide();
$("#loginbtn").on('click',function(){ // use .on() method
$("#loginForm").slideToggle('slow');
});
});
$(document).ready(function() {
$("#removeLoginForm").on('click',(function(){ // use .on() method
$("#loginForm").slideUp('slow');
});
});

why do these two lines of jquery knock off the event handler for another jquery element

I have a jquery event handler for an element w/ID = submitButton. The code works fine -- but if I click on another button w/ID = yeahTotallyButton then the jquery event handler for the submitButton stops working. No errors show in the console -- but the handler for #submitButton stops firing. The debugger does not stop at breakpoints for submitButton once I have clicked the yeahTotallyButton.
In debugging so far, I have noticed that by commenting out two lines in the event handler for the yeahTotallyButton (indicated in the code below) then the submit button works even after I click the yeahTotallyButton. So basically something in these two lines of code is breaking the submitButton handler. Why is this? How can I fix this? I need to do the things that these two lines of code do in my final website.
<body>
<div id='header'>
</div>
<div id='captchaPanel'>
<div id='top'>
<div id='fillerTop'>
</div>
<div id='captcha'>
<img id='captchaText' src='cryptographp.inc.php'> </img>
</div>
</div>
<div id='bottom'>
<div id='left'>
<p id='answerprompt'>Answer: </p>
<input id="answerBox" type="text" name="firstname">
</div>
<div id='right'>
<table id='buttonTable'>
<tr>
<td><img id='recycleButton' src="images/buttons_recycle.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_audio.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_question.png" ></td>
</tr>
</table>
<div id='logo'>
<img src="images/smallLogo.png">
</div>
</div>
<div id='introButtons'>
<button id='yeahTotallyButton' type="submit" class="button">Yeah, totally. I am cool person.</button>
<button id='imARobotButton' type="submit" class="button">No, I can't come. I'm a robot.</button>
</div>
</div>
</div>
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Submit"/>
</div>
</body>
Here is the script:
$(document).ready(function () {
$("#submitButton").click(function(event) {
$.ajax({
url: 'getRejection.php',
success: function(data) { alert(data) }
});
$('#captchaPanel').animate({ opacity: 1}, 200);
$("#captchaText").attr('src', 'cryptographp.inc.php');
alert(event.target.id);
});
$("#imARobotButton").click(function(){
alert("thanks for being honest");
location.reload();
});
$("#yeahTotallyButton").click(function(){
$("#introButtons").css('visibility','hidden');
//when these two lines are commented out,
//then the submit button works even after
// I click the yeahTotallyButton
//$("#captchaPanel").css('visibility','visible');
// $("#bottom").css('visibility','visible');
$("#top").css('visibility','visible');
$("#left").css('visibility','visible');
$("#right").css('visibility','visible');
$("#captchaPanel").fadeIn("fast");
$("#captchaText").attr('src', 'cryptographp.inc.php');
$("#top").attr('border-radius', '4px');
});
$("#recycleButton").click(function(){
$("#captchaText").attr('src', 'cryptographp.inc.php');
});
});
My guess is that you somehow end up having more than one element with id set to submitButton, and the button you're checking the click on is not the first in this list. For example, in this scenario...
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Alert Submit" />
<input id='submitButton' type="submit" class="button" value="Alertless Submit" />
</div>
$('#submitButton').click(function() { alert(42); });
... while clicking the first button shows that alert, clicking on the second does nothing.
You can easily patch it by adjusting the selector:
$('[id=submitButton]').click(function() { ... });
Fiddle. But obviously, that'll only mask the real problem: in no circumstances you'd have more than one element with a specific ID in DOM.
The handlers for the yeahTotallyButton were making the captchaPanel element bigger, so that it hung over the submit button -- even though the submitButton was visible. So when you clicked on the submitButton jQuery was not getting the event somehow. Carefully resizing the catpchaPanel solved the problem.

2 buttons one has extra features

I have two different buttons. Both of which when clicked runs the JQuery function 'ShowCommentBox'
However when the second button is clicked I want to load an additional JQuery function along 'SHowCommentBox' - the additional function allowing extra options on screen.
<input id="SubmitCommentsForBOQ" type="button" value="Comments" onclick="ShowCommentBox('<%: item.ItemCode %>'')" />
Above is the second button I want to also run the
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
});
, which makes the extra features visible...how can I do this?
Thank you for any replies
Below is the original JQuery: which loads a dialogue box
function ShowCommentBox(itemIdentifier, labourOrPlant, desc) {
id = itemIdentifier;
LabouringOrPlanting = labourOrPlant;
description = desc;
Function.DisplayBox(itemIdentifier);
$("#LabourOrPlantDialog").dialog({ modal: true });
}
and my other code:
<div id="LabourOrPlantDialog" title="Comments" style="display:none;">
<table class="detailstable FadeOutOnEdit">
<tr>
<th>Item</th>
</tr>
<tr>
<td id="Item"></td>
</tr>
</table>
<br />
<textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30"
maxlength="2000"> </textarea>
<input id="SubmitComment" type="button" value="Submit"
onclick="SubmitButton()" />
<br />
<div id="hiddenBox">
<input type="text" name="BoqTextBox" id="BoqTextBox" value="7.15" />
</div>
</div>
It's best to separate behavior from markup. You can solve both problems using an HTML data- attribute.
First embed the data in the HTML:
<input id="SubmitCommentsForBOQ" type="button" value="Comments"
data-item-code="<%: item.ItemCode %>" />
Instead of onclick, bind the event handler using jQuery only, and perform all the actions you need at once:
$("#SubmitCommentsForBOQ").click(function () {
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
Multiple handlers will execute in the order in which they are bound, so you could also do something like this:
// happens first, but only for this specific button
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
});
// happens for all buttons
$("input[data-item-code]").click(function () {
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});

Categories

Resources