3

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>
Colin
  • 351
  • 6
  • 16
kimi Tanaka
  • 119
  • 2
  • 12
  • 1
    Your next steps would be to decide how you want to store the "keyword" the user entered. It seems likely you will want to store it in a database (though you could use cookies or localStorage). You'll likely want to learn a server-side language (e.g., PHP) and a database (e.g., MySQL). You can use javascript/ajax to send your "update" request to PHP or you can "Post" the data using an HTML `
    `. (If I've understood you correctly: yes, this is a long road.) NOTE: Your HTML should not have extra `` and `` tags. Only the outer tags are allowed.
     – Colin Nov 25 '17 at 14:10
  • @Colin Thanks for the answer! So, do you think I also need to prepare the content of PHP and MySQL file using server-side? Without preparing PHP and MySQL file and doing my side (client side), I need to prepare cookies or localStorage in an HTML file? I think your explanation is correct. I will try accordingly. – kimi Tanaka Nov 26 '17 at 03:01
  • 1
    I'm making *guesses* based on the most common needs, but: Your next steps could actually be very simple (cookies only) if all you wanted to do is, say, show the user their name when they visit your site. But this is quite limited because browser-storage (cookies, localStorage) only works on the browser the user is currently using. If you need a login/password system so users can get to their "keyword" from *any* browser then you need both server-side development (e.g., PHP/MySQL) and client-side cookies (likely "session cookies") to connect the user with their account. Does this help at all? – Colin Nov 26 '17 at 13:37
  • @Colin Thanks a lot! I started checking HTML local storage like this. http://jsfiddle.net/Benjol/HMEVd/ I am not sure if I fully understand what you explained though, at least I can start working on again. That's enough for me. I don't know how to give you a bounty for the comment. – kimi Tanaka Nov 26 '17 at 14:02
  • Now that I'm sure I understand what you're looking I'm writing up a more complete answer that might be useful for others as well and will post it in a bit. Thanks! – Colin Nov 26 '17 at 16:18
  • Hi Kimi, Is it okay with you if I made some edits to your question to help make the answer more related to the question? Would you agree this is a better title "How do I store user-entered data for reuse on a web page?" I was thinking about removing the code and details about ui-modal-dialog, as I don't think this is relevant to what you really needed to know. Let me know if it's okay and I'll proceed. – Colin Nov 26 '17 at 17:18
  • @Colin I need to adjust ui-modal-dialog to customize dialog pop-up. After clicking “save” on the dialog, I want to update the keyword I stored. I think I can do that with HTML local storage. Is it ok? Anyway, thanks for the answer. That’s what I needed, too! – kimi Tanaka Nov 26 '17 at 22:06
  • 1
    Yes, I think you're on the right path. See updated answer for demo fiddle. – Colin Nov 27 '17 at 13:17

1 Answers1

2

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');
    }
}
Colin
  • 351
  • 6
  • 16
  • Thank you for your taking time. It's perfect. I really appreciate it! I think it will take a bit more time to understand your explanation completely though, I will definitely try it! – kimi Tanaka Nov 27 '17 at 13:41