PDA

View Full Version : Getting basic alerts to work



kdnyegaard
1 Aug 2007, 4:46 PM
I can get the ' Ext.MessageBox.alert' to work on our servers using the examples msg-box.js but I can't get it to work by calling it as a function. I am trying to get it to function as a replacement for the standard javascript alert function (no based on a button click), but so far it is a no go.

These are my includes:

<link rel="stylesheet" type="text/css" href="/js/resources/css/xtheme-vista.css" /><!-- LIBS -->
<script type="text/javascript" src="/js/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="/js/ext-all.js"></script>

<script language="javascript" src="/js/examples/dialog/msg-box.js"></script>

This all checks out.


I have tried this:
<script language="javascript">
function alert1(){
Ext.MessageBox.alert('Status', 'Changes saved successfully.');
};
</script>


and then calling alert1. No go.

I have tried including this in msg-box.js:


function alert1(){
Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
};

and then calling alert1. No go.


I have a feeling this is REALLY simple. What am i doing wrong?

Thanks!

evant
1 Aug 2007, 4:59 PM
Post an example page somewhere?

cluettr
1 Aug 2007, 5:26 PM
I would think it has to do with your includes... probably a bad path. If you're sure it's not the path... try and bring this up in Firefox with Firbug up... you should be able to your js being loaded in the 'Net' tab.

brian.moeskau
1 Aug 2007, 8:47 PM
The real question that you have not answered is where are you calling your alert function from? If you do this, you will get an error:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Page</title>
<script type="text/javascript" src="../_src/1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../_src/1.1/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../_src/1.0/resources/css/ext-all.css">
<script>
function alert1(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
};
alert1();
</script>
</head>
<body>

</body>
<script>
</script>
</html>


The reason? Because at the point at which your function is called, the DOM has not finished loading and the document.body object does not yet exist. This is important in this example since MessageBox internally creates a BasicDialog and appends it to the document.body, which in this case, does not exist and this code blows up.

This version of your code will work as expected:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Page</title>
<script type="text/javascript" src="../_src/1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../_src/1.1/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../_src/1.0/resources/css/ext-all.css">
<script>
function alert1(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
};
</script>
</head>
<body>

</body>
<script>
alert1();
</script>
</html>


However, the other lesson here is NOT to do this, and instead to use the Ext.onReady function. This will guarantee that your code does not execute until the DOM is fully loaded. Combined with some of the OO principles that you'll learn as you study Ext more (like avoid global functions!), you should end up with something more like this:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Page</title>
<script type="text/javascript" src="../_src/1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../_src/1.1/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../_src/1.0/resources/css/ext-all.css">
<script>
var Example = {
init : function(){
this.alert();
},

alert : function(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
}
};
Ext.onReady(Example.init, Example);
</script>
</head>
<body>

</body>
</html>

kdnyegaard
2 Aug 2007, 12:00 PM
Thanks! That was helpful. I have two questions related to this though:

1: Unlike a normal alert, the following code blows right by the alert box and goes straight to the location.href:

<script>
var Example = {
init : function(){
this.alert();
},

alert : function(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
}
};
Ext.onReady(Example.init, Example);
location.href='/index.htm';
</script>

I have a sneaking suspicion that I need to add code in response to a button click?

2. Using the example above, how do you pass a variable to the alert function to display?

I tried this, but no cigar:

var Example = {
init : function(){
this.alert();
},

alert : function(title, msg){
Ext.Msg.alert(title, msg);
}
};
Ext.onReady(Example.init, Example ('Alert','File Saved');
</script>


Thanks for you help!

fay
2 Aug 2007, 12:32 PM
Execution will continue at the line after the call to Ext.Msg.alert(). Take a look at http://extjs.com/deploy/ext-1.1/docs/output/Ext.MessageBox.html for more info.

1. Use the fn param:


Ext.MessageBox.show({
title: 'Status',
msg: 'Changes saved successfully.',
buttons: Ext.MessageBox.OK,
modal: true,
fn: function(){
location.href = 'http://www.google.com';
}
});

2. Your init() is calling alert() with no params. You can change the signature of your init() to take the title and msg:


var Example = {
init : function(title, msg){
this.alert(title, msg);
},

alert : function(title, msg){
Ext.Msg.alert(title, msg);
}
};
Ext.onReady(Example.init('Alert','File Saved'), Example);

kdnyegaard
2 Aug 2007, 5:29 PM
That's much better!

Now I only have one issue left: the location.href is not firing. If have tried the following:

<script>
Ext.MessageBox.show({
title: 'Status',
msg: 'Changes saved successfully.',
buttons: Ext.MessageBox.OK,
modal: true,
fn: function(){
history.go(-1);
}
});
</script>



<script>

var Example = {
init : function(title, msg){
this.alert(title, msg);
},

alert : function(title, msg){
Ext.Msg.alert(title, msg);
if (btn == 'ok'){

fn: function(){
location.href = 'http://www.google.com'; }
} }
};

Ext.onReady(Example.init('Alert','Saved'), Example);
</script>

Neither takes me anywhere. Any clues?

And thanks for the help. I really appreciate it :)