locked
Objects from database to fill list RRS feed

  • Question

  • User1151703306 posted

    Hello all,

    I'm doing a school project where we are making a cinema booking.

    One of the criteria of the program is to display all the movies in a database in a list.

    I know this might be a really simple question, but I need a pointer in the right direction.

    How do I make an object of a movie which contains only Name of the movie?

    How do I use this data to fill a list?

    We are writing the program in a client/server based architecture using JSON and C#.

    MySQL database used.

    Please tell me if you need further elaboration or detail.

    Thanks in advance.

    Here is my code for creating the movies in the database, I am unsure how to create a movie object from same database, to be used in my code.

    This code not reply with error but the first box is empty.

        protected string GetJsonData()
        {
            List<Movie> listOfMovies = new List<Movie>();
    
            string query = "SELECT * FROM dotableMovie ORDER BY Movie DESC LIMIT 50;";
            string constr = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;
            using (MySqlConnection con = new MySqlConnection(constr))
            {
                using (MySqlCommand cmd = new MySqlCommand(query))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    using (MySqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            Movie item = new Movie();
                            item.MovieName = sdr["Movie"].ToString();
                            listOfMovies.Add(item);
                        }
                    }
                }
                con.Close();
    
                List<Movie> someList = (from item in listOfMovies
                                        select new Movie { MovieName = item.MovieName }).ToList<Movie>();
    
                JavaScriptSerializer jsSer = new JavaScriptSerializer();
                string str = jsSer.Serialize(someList);
                return str;
            }
        }
    
        public class Movie
        {
            public string MovieName { get; set; }
    
            public override string ToString()
            {
                return string.Format("[name={0}]\n", MovieName);
            }
        }
    
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
        <script src="DDScript.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                //Get data and fill first box
                var $json = <% =GetJsonData() %>;
                pageload($json);
            });
        </script>
    
        <form id="form1" runat="server">
            <div class="ContainerCenter">
                <table>
                    <tr>
                        <td>List Movie</td>
                    </tr>
                </table>
                <div id="list1" class="connectedSortable">
                    </div>
                </div>
            </div>
        </form>
    function pageload($json) 
    {            
        $("#list1").empty().addItems($json);
            
        $("#list1, #list2").sortable({
            connectWith: ".connectedSortable",
            beforeStop: function(event, ui) { 
                ui.helper.removeClass("selectedItem"); 
                ui.helper.die();   
            },
            change: function(event, ui) {  //for issue solving                    
                var placeHolder = ui.helper.children(".ui-sortable-placeholder");
                if(placeHolder){
                    placeHolder.detach().appendTo(ui.helper.parent());
                }
            },
            start: function(event, ui) { 
                if(ui.helper){
                    var cnt = ui.helper.parent().children(".selectedItem:not(.ui-sortable-placeholder)").length;
                    if(cnt > 1)
                    {
                        var parent = ui.helper.parent();
                        var childs = parent.children("div.selectedItem:not(.ui-sortable-placeholder)");
                        $.each(childs, function(index, child) {
                            child = $(child);
                            if(ui.helper.attr('id') != child.attr('id'))
                            { 
                                child = child.detach();
                                child.appendTo(ui.helper);
                                child.css("margin","0px").css("padding","0px"); //addClass not working
                            }
                        });
                    }
                }
             },
            stop: function(event, ui) {  
                //console.log(ui.helper);
                if(ui.item){
                    var cnt = $(ui.item[0]).children("div").length;
                    if(cnt > 0)
                    {
                        //ui.helper is null
                        var dropItem = $(ui.item[0]);
                        $.each(dropItem.children("div"), function(index, child) {                                                               
                                child = $(child).detach();
                                child.insertAfter(dropItem);
                                child.removeClass("selectedItem");
                                child.css("margin","").css("padding","");
                        });
                    }
                }
             }
        }).disableSelection();
    
        //click color handling
       $("#list1>div, #list2>div").live("click",function(e){
       if(!e.ctrlKey)
       {
           $(this).parent().children().removeClass("selectedItem"); 
       }
       $(this).toggleClass("selectedItem"); 
       });           
    }
      
    //custom jq function/plugin : used instead of template plugin
    $.fn.addItems = function(data) {
    return this.each(function() {
    	var parent = this;
    	$.each(data, function(index, itemData) {
    		$("<div>")
           .text(itemData.name)
           .attr("id", "div"+itemData.id)
           .appendTo(parent); 
    	});
    });
    };
    
    //finally create json
    var json;
    function CreateJson()
    {
        json = "[";
        $.each( $("#list2>div"), function(index, div) {
            var $div = $(div);
            if(index>0) json += ",";
            json += '{"id":' + $div.attr('id').replace("div","");
            json += ',"name":"' + $div.text() + '"}';
        });
        json = json + "]";
        $("#hidJsonHolder").val(json);
        return json;
    }

    DDScript.js

    Monday, May 4, 2020 6:08 PM

Answers

  • User-1330468790 posted

    Hi Golia,

      

    I tried your codes and found that the problem was located in a custom function "$.fn.addItems = function(data)".

      

    I assume that you already stored the data in database correctly and the data fetching worked as well.

    That way, I suggest you modify this custom function so that the value will be assigned to selected "div" correctly.

      

    More details, you could refer to below modification.

    //custom jq function/plugin : used instead of template plugin
            $.fn.addItems = function (data) {
                return this.each(function () {
                    var parent = this;
                    console.log(parent);
                    $.each(data, function (index, itemData) {
                        console.log(itemData); 
                        var div = $("<div>");
                        div.text(itemData.MovieName);
                        div.attr("id", "div" + itemData.id)
                            .appendTo(parent);
                            
                            
                    });
                });
            };

    I didn't modify your codes too much since the design should be changed gradually and you have to understand the reason and then you will be able to change the code from your side.

    Reason:

    If you add console.log() function as I listed in the codes, you will find that the data are as below. The simulation of the data contains four Movie instances. Therefore, you will be unable to get a property named "name" from the variable "itemData". Regarding "id", you could see that the Object does not contain a property called "id" so that you will find the ids are "divundefined" if you check ids of the children divs you appended to the parent div.

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 5, 2020 5:51 AM