We Keep Coding

Capturing events in ajax modal

Okay, so on this project I have kind of a complicated set up. This is a Phaser 3 game. I load all of my scripts in the header of the html file. window.onload calls App.start(), which configures and loads Phaser and the scenes. In my title scene class, I make an ajax call and retrieve an html template which is then displayed in a modal. I cannot seem to handle events within the generated modal to work.
I've tried:
$('#loginForm').on('submit', (event) => {
event.preventDefault();
let values = $('#loginForm').serialize();
console.log(values);
}
and
$(document).on('submit', '#loginForm', (event) => {
event.preventDefault();
let values = $('#loginForm').serialize();
console.log(values);
}
as well as trying to bind to the actual submit button. With everything I've tried, the page reloads, and processes the form as a get submission (values are appended to the URL). I should note that neither the action not method of the form have been set; only the id.
What can I do to capture the submit event?
EDIT: Adding code
App.js
let App = function() {};
App.prototype.start = () => {
let scenes = [];
scenes.push(Loading);
scenes.push(Title);
scenes.push(Start);
let config = {
type: Phaser.AUTO,
width: 900,
height: 600,
parent: 'gameDiv',
scene: scenes
};
let game = new Phaser.Game(config);
...
};
Title.js (current testing)
class Title extends Phaser.Scene {
constructor(){
super({key: 'Title'});
}
preload(){}
create(){
let _t = this;
let btnLogin = this.add.sprite(300, 350, 'login');
let btnRegister = this.add.sprite(570, 350, 'register');
let logoText = this.add.bitmapText(80, 100, 'Lombardic', 'Dragon Court', 108);
btnLogin.setInteractive();
btnRegister.setInteractive();
btnLogin.on("pointerdown", (pointer) => {
DC.templateCall('user', 'mode=login_tpl', () => {
DC.templateFormHandler('loginForm', (event) => {
event.preventDefault();
let loginData = $("#loginForm").serialize();
console.log(loginData);
/*
modal.close();
Ajax.call('user', params, (result) => {
if(result.status){
_t.scene.start('Start', { fr: result.data.first_run, hc: result.data.has_char });
}else{
DC.modal('LoginError', '<div>'+result.error+'</div>', () => {});
}
});
*/
});
});
});
}
}
templateFormHandler function:
templateFormHandler: (id, callback) => {
$("#"+id).on("submit", callback);
}

I still can't find a legitimate reason for the code above not to work, but as a workaround, I've simply moved the handlers to the template file itself, and all works fine. A matter of scope somehow, I suppose.

DialogBox to show when you click a button with JavaScript

I'm having problem connecting my Dialog box with a clickable button. I want to show a dialogbox when I click a button but unfortunately, I can't do the function very well. This is my code, I know its really bad and I need some idea or a hand:
define: function () {
var dialog = new Ext.LayoutDialog('test', {
modal: true;
height: 500;
width: 500;)
};
var button = new Ext.Button("btn", {
text: "検索実行",
handler: this.showdialog.createDelegate(this)
});
}
},

I think, when creating an Ext.LayoutDialog, the id that will be used should be taken from a div tag then you'll simply add the method, addButton, so that the layoutdialog will have buttons. Don't use semicolons when adding configurations to the layoutdialog, you'll only use commas then the last config should no longer have a comma. Visit this link to know more about ext >> http://dev.sencha.com/deploy/ext-1.1.1/docs/ :)
var sample = Class.create();
sample.prototype = {
initialize: function () {
this.define();
}
define: function () {
var createDialog = function () {
var dialog = new Ext.LayoutDialog('test', {
modal: true,
height: 500,
width: 500,
center: {
autoscroll: true
}
});
button = dialog.addButton({ text: "検索実行" });
button.on('click', function() {
//name of the dialog that you want to display
showdialog.show();
});
var layout = dialog.getLayout();
layout.beginUpdate();
var center = layout.getRegion('center');
center.add(new Ext.ContentPanel("test", { titlebar: false }));
layout.endUpdate();
}
}
}

Issue with getting value from $.ajax inside a $.when

Hey guys I have the following code:
function runATF(){
var urlatf = '/pcg/ATF/updateATF_window.php';
var tagatf = $("#insider_dialog");
var promise1 = showUrlInDialogATF(urlatf);
var promise2 = sendUpdateATFwindow();
$.when(promise1, promise2).done(function(data1, data2) {
tagatf.html(data1[0]).dialog({
width: '100%',
modal: true
}).dialog('open');
//$('.updaterATF_outerbody').text(data2[0].atfName),
//$('.updaterATF_outerbody').text(data2[0].atfAmount)
//console.log(data2[1]);
alert(data2[0].text(atfName));
alert(data2[0].text(atfAmount));
});
}
The part I need you to look at it the alert(data2[0].text(atfName)); and the alert(data2[0].text(atfAmount)); My problem is I can't seem to get the values?
Let me show you the 2 functions that are ran:
First this one just sends a url and returns....
function showUrlInDialogATF(urlatf)
{
return $.ajax({
url: urlatf
});
}
The second one returns the two data values that are created in a document.ready (I have tested them and they do hold values, it's only when I try and get it into the $.when statement).....
function sendUpdateATFwindow()
{
return $.ajax({
data: {
'atfName': atf_name.val(),
'atfAmount': atf_amount.val()
}
});
}
Let me know if you need anything else, thank you
David
Oh here is the first statement that begins everything:
$(document).ready(function () {
$(".atf-submit").click(function () {
atf_name = $(this).parent().parent().find(".user_table");
atf_amount = $(this).parent().parent().find(".user_atf");
runATF();
});
});
Note: I am using the Jquery UI dialog opener, I already have one open so I am making another one open. I don't know if this will effect anything? I would assume not because the functions and values are different names.
UPDATE:
Okay I want to show the first code that opens the first dialog window up:
$(document).ready(function () {
$("#ATF").click(function () {
runATF();
});
});
function runATF(){
var urlATF = '/pcg/ATF/atf_layout.php';
showUrlInDialogATF(urlATF);
}
function showUrlInDialogATF(urlATF)
{
var tag = $("#dialog-container");
$.ajax({
url: urlATF,
success: function(data) {
tag.html(data).dialog
({
width: '100%',
modal: true
}).dialog('open');
}
});
}
Than the other code runs - I will re post here:
$(document).ready(function () {
$(".atf-submit").click(function () {
atf_name = $(this).parent().parent().find(".user_table");
atf_amount = $(this).parent().parent().find(".user_atf");
runATFinsider();
});
});
function runATFinsider(){
var urlatfinsider = '/pcg/ATF/updateATF_window.php';
var tagatfinsider = $("#insider_dialog");
var promise1 = showUrlInDialogATFinsider(urlatfinsider);
var promise2 = sendUpdateATFwindow();
$.when(promise1, promise2).done(function(data1, data2) {
tagatfinsider.html(data1[0]).dialog({
width: '100%',
modal: true
}).dialog('open');
//$('.updaterATF_outerbody').text(data2[0].atfName),
//$('.updaterATF_outerbody').text(data2[0].atfAmount)
console.log(data2[1]);
alert(data2[0].text(atfName));
});
}
function showUrlInDialogATFinsider(urlatfinsider)
{
return $.ajax({
url: urlatfinsider
});
}
function sendUpdateATFwindow()
{
return $.ajax({
data: {
'atfName': atf_name.val(),
'atfAmount': atf_amount.val()
}
});
}
Also I try to do a console.log(data2) and it just gives me, [0] = abunch of html? , [1] = success, [2] = object
UPDATE:
Here is an example of what it I should be getting in the data2[0]...
alert(atf_name.val()); = bob
alert(atf_amount.val()); = 0

Is it possible to extend prompt() object in JAVASCRIPT

To make sure the question more clear,
I want to re-implement the prompt object in JAVASCRIPT because i want to get two variables from the user at the same time.
If it is possible to extend, re-implement or override this object, please tell me how. If not, do you have better solutions?
Thanks.

You should use something like http://jqueryui.com/demos/dialog/#modal-form
You will need to split your javascript where you have your dialog
So if you had
function getAndUseUserInfo() {
bla1();
bla2();
var x = prompt("Gimme something for bla 3","");
if (x) bla3(x); // this will not be executed until user closes prompt
}
you now need
function getUserInfo() {
bla1();
bla2();
var x = "";
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"OK": function() { x = $("#someIdFromtheForm").val(); $(this).dialog("close");}
"CANCEL": function() { $(this).dialog("close");}
}
close: function() {
if (x) bla3(x);
}
});
}
Or if you insist to override the built-in function you can do something like this (which currently gives an error since I am not using an html page):
var orgPrompt = window.prompt;
var varone, vartwo;
function saveVars(doc) {
varone = doc.getElementById("x").value;
vartwo = doc.getElementById("y").value
return [varone,vartwo];
}
window.prompt=function(one,two) {
var html = '<center><br><br>'+one+':<input type=text id=x><br>'+two+':<input type=text id=y><br><input type=button value=OK onclick=\'window.returnValue=window.dialogArguments.saveVars(document);window.close()\'/>';
var res = showModalDialog('javascript:"'+html+'"',window,"dialogWidth:100px;dialogHeight:100px");
}
x = prompt('first name','last name')
alert(x)

You can have them separate the two different values using a delimiter.
var result = prompt('enter two values seperated by a comma').split(',');
alert('first value: ' + result[0]);
alert('second value: ' + result[1]);
DEMO

You can redefine most things in javascript, including the window prompt, alert and confirm methods, but it would probably be a better idea to define the method and call it instead of the native object. Define 'prompter','alerter' or 'confirmer' methods, for example.

Javascript passing variable from function to function

How do i pass var rating and var itervalue into my window.location.replace? i get new rating variable from function updateRating() and when i click hireraccept, it assigns a new itervalue variable which i wish to pass them both into the "proceed" button into the window.location.replace url. any idea?
<script type="text/javascript">
$(document).ready(function(){
var rating = 0;
var itervalue = 0;
$(".hireraccept").click(function(){
$('.jRating').jRating();
$("#dialog-rate").dialog("open");
var itervalue = $(this).attr("value");
return false
});
$("#dialog-rate").dialog({
autoOpen: false,
resizable: false,
height: 200,
width: 200,
modal: true,
buttons: {
"Proceed": function(){
window.location.replace("{{ domain_url }}/workroom/accept/" + itervalue +"/" + rating);
$(this).dialog("close");
}
}
});
});
</script>
<script type="text/javascript">
function updateRating(rate,proceed){
goodtogo = proceed;
rating = rate;
}
</script>

You have your iterval declared globally, but then redeclare it locally. Remove the var declaration from your click handler and it will overwrite the global value, which you can then use in your dialog opening options.
// edit
Change this
var itervalue = $(this).attr("value");
to this, and that should work
itervalue = $(this).attr("value");