Use jquery ui dialog instead of windows alert window.

Hello experts.
I need to replace the windows alert box with the jquery ui dialog box.
Here is the code from expert:senthurpandian on this page:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_25885051.html

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

My Page...

<script>

        var timerID = null;
        var timerRunning = false;
        var delay = 10 * 1000; // Time interval 10 * = sec

        function StopTheClock()
        {
                if(timerRunning)
                {
                        clearTimeout(timerID);
                }
                timerRunning = false;
        }

        function StartTheTimer()
        {
                timerRunning = true;
                timerID = setTimeout("AjaxTimeOut()", delay);
        }

        function AjaxTimeOut()
        {
                StopTheClock();
                $.ajax({
                        type: 'GET',
                        url: 'ajaxpage.html', 
                        /*dataType: 'xml', */
                        success: function(xml){
                                $(xml).find('Article').each(function() {
                                        var Article = $(this);
                                        var User = Article.find('User').text();
                                        var ArticleName = Article.find('ArticleName').text();
                                        var ArticleContent = Article.find('ArticleContent').text();
                                        if(User != "")
                                        {
                                                // You can use UI to display in a pop-up
                                                alert("The user - " + User + " has added an article named - " + ArticleName + " with the below content:" + "\n" + ArticleContent);
                                        }
                                });                 
                        }
                });

                StartTheTimer();
        }

        StartTheTimer();

</script>

Open in new window

LVL 2
PanosAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
Hi Again!

I have used jquery-ui-1.7.2..

Place the code in
jquery-ui-1.7.2.custom\development-bundle\demos\dialog

for testing.

Regards.
See you tomorrow.
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Dialog - Default functionality</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
	<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$.ui.dialog.defaults.bgiframe = true;
	/*$(function() {
		$("#dialog").dialog();
	});*/
	</script>
</head>
<body>

<div class="demo">

<div id="dialog" title="Basic dialog">
	
</div>
</div><!-- End demo-description -->

</body>
</html>

<script>

        var timerID = null;
        var timerRunning = false;
        var delay = 2000; // Time interval 10 * = sec

        function StopTheClock()
        {
                if(timerRunning)
                {
                        clearTimeout(timerID);
                }
                timerRunning = false;
        }

        function StartTheTimer()
        {
                timerRunning = true;
                timerID = setTimeout("AjaxTimeOut()", delay);
        }

        function AjaxTimeOut()
        {
                StopTheClock();
                $.ajax({
                        type: 'GET',
                        url: 'ajaxpage.html', 
                        /*dataType: 'xml', */
                        success: function(xml){
                                $(xml).find('Article').each(function() {
                                        var Article = $(this);
                                        var User = Article.find('User').text();
                                        var ArticleName = Article.find('ArticleName').text();
                                        var ArticleContent = Article.find('ArticleContent').text();
                                        if(User != "")
                                        {
                                                // You can use UI to display in a pop-up
                                                //alert("The user - " + User + " has added an article named - " + ArticleName + " with the below content:" + "\n" + ArticleContent);
												$("#dialog").attr("title", ArticleName + " by " + User)
												document.getElementById("dialog").innerHTML = ArticleContent;
												$("#dialog").dialog();
                                        }
                                });                 
                        }
                });

                StartTheTimer();
        }

        StartTheTimer();

</script>

Open in new window

PanosAuthor Commented:
Hi.
Have you made any changes to the code?
it is opening the dialog window only after the first ajax call.
May be you will able to answer tomorrow.I will wait...

Also please let the pop up window open only if there is a value for artikel.
StealthyDevCommented:
Hi,

Try with the code attached !

Cheers.


<!doctype html>
<html lang="en">
<head>
        <title>jQuery UI Dialog - Default functionality</title>
        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../../ui/ui.core.js"></script>
        <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
        <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
        <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
        <script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <script type="text/javascript">
        $.ui.dialog.defaults.bgiframe = true;
        /*$(function() {
                $("#dialog").dialog();
        });*/
        </script>
</head>
<body>

<div class="demo">

<div id="dialog" title=""></div>
</div><!-- End demo-description -->

</body>
</html>

<script>

        var timerID = null;
        var timerRunning = false;
        var delay = 2 * 60 * 1000; // Time interval mins * sec * mili-sec (change mins only)

        function StopTheClock()
        {
                if(timerRunning)
                {
                        clearTimeout(timerID);
                }
                timerRunning = false;
        }

        function StartTheTimer()
        {
                timerRunning = true;
                timerID = setTimeout("AjaxTimeOut()", delay);
        }

		var popUpMessage = document.getElementById("dialog");

        function AjaxTimeOut()
        {
                StopTheClock();
				popUpMessage.innerHTML = "";
                $.ajax({
                        type: 'GET',
                        url: 'ajaxpage.html', 
                        /*dataType: 'xml', */
                        success: function(xml){
							$(xml).find('Article').each(function() {
								var Article = $(this);
								var User = Article.find('User').text();
								var ArticleName = Article.find('ArticleName').text();
								var ArticleContent = Article.find('ArticleContent').text();
								
								if(User != "")
								{
									// You can use UI to display in a pop-up
									//alert("The user - " + User + " has added an article named - " + ArticleName + " with the below content:" + "\n" + ArticleContent);
									if(popUpMessage.innerHTML != "") popUpMessage.innerHTML += "<hr><br>";
									popUpMessage.innerHTML += "Article by " + User + " - " + ArticleName + "<br><p>" + ArticleContent + "</p>";
								}
							});   
                        }
                });

				$("#dialog").attr("title", "* Article Updates.");
				$("#dialog").dialog();

                StartTheTimer();
        }

        AjaxTimeOut();
		$("#dialog").close();

</script>

Open in new window

HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

PanosAuthor Commented:
welcome back
it is opening only once
i have also an error:$("#dialog").close is not a function
PanosAuthor Commented:
Something else.
I use jquery ui dialog to show a content of a cfm page after clicking on the dialog_link  like this:
// Dialog Link
             $('#dialog_link').click(function(){
               $('#dialogkm').dialog('open');
               $('#dialogkm').load("../Includes/calculator/MLKMCalculator.cfm");
                   return false;
                });
could you use something like this in your code to load directly the page in the dialog box?
StealthyDevCommented:
For post #30847117, find the code attached.

Sorry, i dont understand what you are asking me reg. the cfm file?



default.html
PanosAuthor Commented:
Hi senthurpandian.
First i want to thank you because your last code is working.

Ii don't want to open the window if the ArticleContent is ""(if nothing new is there).The call should be done but if my result of recordcount in ajapage is 0 i don't want to open the window.(i hope you did understand).

For my last comment i will give you another link to a  question with more details and using this last solution.
StealthyDevCommented:
Dialogue will be displayed only when an article is there.
Also, you can get the count in noOfArticles.



default.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
Your last code is working fine.

If i will get it work with xml it will be all fine.
If i don't get it work i have to make a new question.
That what you did not understand in my comment #30847906 was that i'm using jquery dialog to open another cfm page using the code below.So i was wondering if you could do something similar to this calling that page like you did in your example.

Please answer me so that i can put this as a new question
<script type="text/javascript">
$(function(){
        // Dialog                       
        $('#dialogkm').dialog({
                autoOpen: false,
				bgiframe:true,
				modal:true,
                width: 400,
                height: 240,
				modal: true,
              //  open: function(event, ui) {initialize();}, // this will load google map in the dialog window
                buttons: {
                        "OK": function() { 
						       
                                $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                                $(this).dialog("close"); 
                        } 
                }
        }); 
          // Dialog Link
             $('#dialog_link').click(function(){
               $('#dialogkm').dialog('open');
			   $("#loader2").show();
               $('#dialogkm').load("../Includes/calculator/MLKMCalculator.cfm");
			   $("#loader2").hide();// Add line for load data
                   return false;
                });
 });
</script> 

Open in new window

StealthyDevCommented:
What do i need to answer?

#1. Yes, try to create an XML file as attached in the previous thread.
#2. If you are unable to create XML, ping me back.
#3. I guess, cfm page will also be rendered as HTML, if so, it is possible to load in JQueryUI.

Cheers.

PanosAuthor Commented:
Thank you senthurpandian.
i will close that question and if i will have any problem .....see you again
PanosAuthor Commented:
Thank you very much.
regards
panos
StealthyDevCommented:
What about your point#3? Have you started any thread?
PanosAuthor Commented:
Hi
Sorry i had to leave because of a date with my doctor.
Here is the link to the new question:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_25905726.html?fromWizard=true
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Programming Theory

From novice to tech pro — start learning today.