asked on

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:https://www.experts-exchange.com/questions/25885051/Insert-query-and-pop-up-window-to-logged-in-users.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

StealthyDev

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

Panos

ASKER

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.

StealthyDev

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

Panos

ASKER

welcome back
it is opening only once
i have also an error:$("#dialog").close is not a function

Panos

ASKER

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?

SOLUTION

StealthyDev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

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.

ASKER CERTIFIED SOLUTION

StealthyDev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

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

StealthyDev

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.

Panos

ASKER

Thank you senthurpandian.
i will close that question and if i will have any problem .....see you again

Panos

ASKER

Thank you very much.
regards
panos

StealthyDev

What about your point#3? Have you started any thread?

Panos

ASKER

Hi
Sorry i had to leave because of a date with my doctor.
Here is the link to the new question:
https://www.experts-exchange.com/questions/25905726/Jquery-ui-dialog-window.html?fromWizard=true