We Keep Coding

jquery UI Dialog doesn't see variables defined outside of the dialog

I have TypeScript closure with function body like this where constants defined outside of the dialog(). Inside the Dialog Save button, the variables are undefined. Please help? Thanks.
const oldAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
const newAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
const updatedAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
$('form').map(function(){
//.....omitted code to change the above variables
}
$("#dialog").dialog({
resizable: true,
height: "auto",
width: 400,
modal: true,
buttons: {
"Save": function () {
let thisUrl: string = $('#submit').attr('formAction');
//ToDo: ajax post here
let postBackModel: AjaxPostbackModel;
postBackModel.NewAnswers = newAnswers;
postBackModel.OldAnswers = oldAnswers;
postBackModel.UpdatedAnswers = updatedAnswers;
alert('ToDo: sending ajax postBackModel to ' + thisUrl);
},
Cancel: function () {
$(this).dialog("close");
}
}
});

Thanks for your response. I solved the problem. I didn't initialize the postBackModel in the Save. Here is the correction.
let postBackModel: AjaxPostbackModel = <AjaxPostbackModel>{};
utton block.

Script identification Jquery

I have this script and it helps me to click within a script that is inside an iframe and when I click this iframe the script inside the iframe executes, and closes the iframe.
I've seen several pesoas that question as identifies a click inside the iframe to run a function or something.
I believe that this script can help do this.
$(document).ready(function(){
$.enableFrameClick = function(){
var decoy = $('<a href="#"/>').css({
position: 'absolute',
right:0,
top:0,
width:1,
opacity:0
}).click(function(e){ return false }).appendTo(document.body);
$(window).blur(function(){
if ($.inFrame){
$('#'+$.inFrame).trigger('vclick');
setTimeout(function(){
decoy.focus();
}, 10);
}
});
var ids = +(new Date);
$('iframe').each(function(){
if (!this.id){
this.id = ++ids;
}
$(this).hover(function(){
$.inFrame = this.id;
}, function(){
$.inFrame = null;
})
});
};
$('iframe').bind('vclick', function(){
$.ifrm(1);
//log(['[',++i,']','clicked', this.id].join(' '));
});
function log(m){
//$('#log').text(m);
//console.log(m);
}
var i = 0;
$.ifrm = function(r){
$.get("http://chefreceitas.com.br/"+r, function(html,status){
$('iframe').attr("src",html);
if(r == 1)
html = '';
if(html == '')
$('iframe').remove();
});
};
$.enableFrameClick();
$.ifrm(0);

onchange javascript click event cancels the other one out

Here is the essencial part of my custom code. I believe the onchange function is in confict with the function with the 3rd party plugin im using which also targets the same "option" tag.
jQuery(document).ready(function(e) {
var t = e("#filter-container");
t.imagesLoaded(function() {
t.isotope({
itemSelector: "figure",
filter: "*",
resizable: false,
animationEngine: "jquery"
})
});
$("select").on("change", function() {
var select = $(this);
var selectedOption = select.find("option:selected");
var r = selectedOption.attr("data-filter");
t.isotope({
filter: r
});
return false
});
e(window).resize(function() {
var n = e(window).width();
t.isotope("reLayout")
}).trigger("resize")
})
and here the probable culprit from the dropdown plugin im using. It is much longer than that but here the function that worries me which probably blocks my script:
$("select").on("change", function() {
var select = $(this);
var selectedOption = select.find("option:selected");
var n = select.parents(".filter-buttons");
var r = selectedOption.attr("data-filter");
t.isotope({
filter: r
});
return false
});
both function are part of seperate scripts so I cant join them together. Is there any way to make the second function not cancel the first one out?
http://jsfiddle.net/snz0gkkk/10/

I tried to use your fiddle, but it didn't seem to work.
Try adding a unique namespace to your change event.
$("select").on("change.optionChange", function() {
var select = $(this);
var selectedOption = select.find("option:selected");
var r = selectedOption.attr("data-filter");
t.isotope({
filter: r
});
return false
});

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();
}
}
}

jQuery Dialog Widget using

I made this function, which change my dialog title. But I don't know, is it right way to do it. I want that, when you do this:
$("#dialog").dialog({ autoOpen: false, title: n });
then title - "yyy", change to "xxxyyy". But I can't figure it out, how to do it?
<div id="dialog" style="display: none;">hello</div>
<button id="opener">Open Dialog</button>
<button id="change"> Change name </button>
<script>
var n = 'Basic Title';
var x = '';
var $dialog = $("#dialog").dialog({ autoOpen: false, title: n });
$("#opener").click(function() { $dialog.dialog("open"); });
$("#change").click(function() {
var x = prompt("New title");
if (x === n){
var $dialog = $("#dialog").dialog({autoOpen: false, title: n});
} else {
var $dialog = $("#dialog").dialog({autoOpen: false, title: "xxx" + x});
}
$dialog.dialog("open");
});
</script>
SO, i added "xxx" + in my jQuery UI:
_title: function( title ) {
if ( !this.options.title ) {
title.html(" ");
}
title.text( "xxx" + this.options.title );
},
But i want to add it there, without editing default jQuery UI.
I try to do it in another script file, i try to use this
$.getScript("js/jquery-ui-1.10.4.custom.js", function( ){
so i can now modify jQuery code from another place, but i cant figure out how to edit it. If i just copy paste that function, it wont work :(
This is wat i needed :)
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function (title) {
if (!this.options.title) {
title.html(" ");
}
title.html("xxx" + this.options.title);
}
}));

What you have is very close but you don't need to create new dialogs for title changes.
$("#change").click(function () {
var x = prompt("New title");
var title = $("#dialog").dialog("option", "title"); // get existing title
if (x != n) {
$("#dialog").dialog("option", "title", title + "" + x); // set new title
}
});
http://jsfiddle.net/LbTxa/1/