CODEWITHSUNDEEP
javascriptjqueryhtml
kimi Tanaka
kimi Tanaka

Reputation: 119

How to store user-entered data from ui-modal-dialog with onclick button

Now I am getting stuck with how to show "Keyword saved." with #note of CSS using modal-dialog in the code. Ui-modal-dialog is working, I have yes and no icons.

Now I want to replace button=onclick the function "updatekeyword()" with clicking "yes" in ui-modal-dialog and update the keyword. While I wrote other parts basically, I didn't write the part the function "updatekeyword()".

So I don't know what the function is. It seems that I should know what the function "updatekeyword()" actually is consulting with reading other questions. Basically, I am getting lost with what kind of information I need the next now.

The code is the following.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- CSS -->
    <link type="text/css" rel="stylesheet" href="css/style.css" media="all">
    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <style>
        #note {
            position: fixed;
            z-index: 101;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(4, 115, 184, 0.9);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 2.5;
            overflow: hidden;
            display: none;
        }
    </style>
    <!-- JS -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/newsTicker.js"></script>
    <script type="text/javascript" src="jsapi/keyword.js"></script>
    <script type="text/javascript" src="jsapi/utils.min.js"></script>
</head>

<body>
    <div>
        <div id="note">
            Keyword saved.
        </div>
        <div class=btn_Grp>
            <button onclick="upadateKeyword()">apple</button>
        </div>
        <div id="dialog">Dialog Content</div>
        <style>
            .myTitleClass .ui-dialog-title {
                white-space: normal;
            }

            .myTitleClass .ui-dialog-titlebar {
                background: rgba(4, 115, 184, 0.9);
                color: #fff;
                font-size: 16px;
                height: 40px;
            }
        </style>

        <head>
            <meta charset="utf-8">
            <title>dialog demo</title>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        </head>

        <body>
            <button id="opener">Register Keyword</button>
            <script>  
                $("#dialog").dialog({
                    autoOpen: false,
                    　　height: 300,
                    width: 1000,
                    dialogClass: 'myTitleClass',
                    modal: true,
                    closeOnEscape: false,
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                    },
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");

                        }
                        , "No": function () {
                            $(this).dialog("close");


                        }
                    }
                });
                $("#opener").click(function () {
                    $("#dialog").dialog("open");
                });
            </script>
        </body>
    </div>
    </div>
</body>

</html>

Upvotes: 3

Views: 1021

Answers (1)

Colin
Colin

Reputation: 361

This answer is an attempt to describe the general areas of learning you'd need to engage in to accomplish what you'd like to do. You have two options depending on what your application is trying to achieve: client-side storage, or server side storage.

CLIENT-SIDE STORAGE

The simplest approach is to use the browser's built-in data storage options: cookies and localStorage. You would access both of these using Javsacript. You can find plenty of online resources for how to use these but here are some things you might want to consider when deciding which to use.

Cookies: These have been around forever and are supported in all browsers. They come with the ability to set an "expire time" so they can automatically delete themselves after a period of time. They can also be restricted to being accessible only over SSL or only in certain directories.

LocalStorage: This is a "newer" technology but since it's supported in IE8+ you're pretty much clear to use it freely these days. It's a much more straightforward approach to information storage using key/value pairs. You can store much more data in localStorage (typically 5MB) than you can in cookies.

By default, browsers will accept requests to store cookies and localStorage but note that users can change their settings to refuse these requests. (You should test for this.) More details on Cookies and localStorage and sessionStorage: What is the difference between localStorage, sessionStorage, session and cookies?

SERVER-SIDE STORAGE

This type of solution is much more work than the above, but is also more likely to be what you're looking for if you want a robust solution that allows users to connect from their different browsers and different devices (phone, desktop, laptop) and still see their stored data.

You will need to use a server-side programming environment (PHP, Python, .Net, Java) which will manage the request from either the HTML or directly from Javascript (using an AJAX request). From the code's perspective, the two requests can look almost identical; Both are usually managing an "POST" request from the user's browser.

Any request that comes in should have all values tested to make sure they are what they are expected to be (e.g., not too short or long, restricted to integers, text-strings that don't contain HTML, especially no Javascript).

Once the request is received and validated, the information must be stored. This is best done by using database library (like PDO for PHP) to make sure you are protecting your database from "SQL Injection" and other attacks by hackers.

Setting up database tables to be used by your application can be done directly in your code but is more often managed using a separate database management program. (e.g., A popular, free and web-based DBM tool for MySQL is phpMyAdmin.)

Further complicating this Server-Side Storage approach is your need to make sure that the browser that is requesting the data from your application is the real owner of that data. This typically involves creating a login/password authentication system before giving out the data you've got stored. This is a non-trivial task and would involve learning about session management, password salts and hashes. (Most people don't write their own authentication system, but doing so is a great learning experience.)

UPDATE

Here's a JSFiddle integrating the jQuery-UI dialog with a localStorage example. https://jsfiddle.net/ColiniloC/6zho31oj/

The key areas are the changes to the open and buttons routines:

open: function (event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui).hide();

    var keyword = localStorage.getItem('keyword');
    $('#new_keyword').val( keyword ).focus();
},
buttons: {
    'Save': function () {
        $(this).dialog('close');

        var new_keyword = $('#new_keyword').val();
        // Input validation goes here!
        localStorage.setItem('keyword', new_keyword );
        show_note( "Your keyword has been updated to '" + new_keyword + "'" );
    }
    , 'Cancel': function () {
        $(this).dialog('close');
    }
}

Upvotes: 2

Related Questions