jQWidgets Forums

Tagged: 

This topic contains 1 reply, has 1 voice, and was last updated by  hsnvv 11 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jqxWindow Posts
  • jqxWindow #56182

    hsnvv
    Participant

    Hello.
    I am sorry that I’ve opened this topic in this section, because I could not open new topic in “jqxWindow”.

    I’ve some issues with initContent function in jqxWindow. Maybe I’m doing something wrong, and hope you’ll help to solve it.
    So. I have main page, there is a <div> inside, where I load my page.

    <div id="splitter" style="margin-left: 3px;">
                <div id="menucontent">
                    <div style="border: none;" id='jqxTree'>
                        <%=menuHTLM%>
                    </div>
                </div>
                <div id="ContentPanel" style="overflow:auto;">
    
                </div>
            </div>

    Also I’ve included all my js files in this main page. On click to any menu from jqxTree, I load new jqxGrid page into “ContentPanel” div.
    My jqxGrid page:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>X</title>
            
            <script type="text/javascript">
                $(document).ready(function() {
                   initReporterOpenReqListPage("1", "18"); // 1 - waiting orders, 18 - reporter access 
                });
            </script>
            
        </head>
        <body class='default'>
        <div id='jqxWidget'>
            <fieldset  style="margin-left: 5px;margin-right: 5px;margin-top: 40px;">
                <legend style="margin-left: 10px; font-size: 14px; font-weight: bolder; color: gray">
                    X
                </legend>
                <label id='tooltip' style="height: 2px;width: 2px;margin-top: 10px;"></label>
                <div id="jqxgridReporter" style="margin-left: 10px;margin-top: 40px;"></div>
            </fieldset>
        </div>
    </body>
    </html>

    I implement rowdoubleclick event of this jqxGrid as follow:

    $('#jqxgridReporter').on('rowdoubleclick', function(event) {
            var args = event.args;
            var row = args.rowindex;
            var historyId = dataAdapter.records[row].history_id;
            var reqId = $('#jqxgridReporter').jqxGrid('getcellvalue', row, "id");
            var url = "client/reporter/request_in_details.jsp";
    
            if (request_type == "1") {
                url = "client/reporter/forward_page.jsp";
            }
            else if (request_type == "4") {
                url = "client/reporter/running_request_details.jsp";
            }
    
            $.ajax({
                url: url,
                async: false,
                type: 'GET',
                dataType: 'html',
                data: {
                    reqId: reqId,
                    historyId: historyId,
                    check: 0,
                    tip: 2
                },
                success: function(result) {
                    $("#ContentPanel").html("<div style='margin: 5px;'>" + result + "</div>");
                }
            });
        });

    And inside of the ajax result page, there is a jqxWindow, clients can write notes on orders.
    My order details page window div content:

    <div id="it_manager_to_reporter_chatWindow_reporter_side">
                        <div>
                            <b style="margin-left: 20px"> Notes </b>
                        </div>
                        <div style="background-color: whitesmoke">
                            <div>
                                <div id='manager_to_reporter_chat_notes_div_reporter_side' style="background-color: white; padding-left: 5px; padding-right: 5px; overflow-x: hidden; overflow-y: auto; word-wrap: break-word; width: 390px;height: 230px;margin-left: 10px;margin-right: 5px;margin-top: 5px;margin-bottom: 20px;border: 1px solid #CFCFCF">
    
                                </div>
                                <div>
                                    <input maxlength="450" style="margin-left: 13px;margin-right: 20px; padding: 5px" type="text" id="manager_to_reporter_chat_input_reporter_side"/>
                                    <input type="button" id="manager_to_reporter_chat_submit_reporter_side" value="Submit" style="margin-right: 20px" />
                                </div>
                            </div>
    
                        </div>
                    </div>
    
    <script type="text/javascript">
                        $(document).ready(function() {
                           initManagerToReporterChatWindowReporterSide(18);
                           initReporterToReportExecutorSubmitWindow(<%=reqId%>, 18);
                        });
                    </script>

    And initManagerToReporterChatWindowReporterSide function is in external file, which was loaded into main page.
    the function content:

    function initManagerToReporterChatWindowReporterSide(inboxMenuAccessId) {
    
        var requestId = $('#reqId').val();
    
        $("#manager_to_reporter_chat_input_reporter_side").jqxInput({
            placeHolder: "Note",
            height: 20,
            width: 270,
            minLength: 1,
            theme: theme
        });
    
        $('#it_manager_to_reporter_chatWindow_reporter_side').jqxWindow({
            maxHeight: 350,
            maxWidth: 450,
            minHeight: 300,
            minWidth: 400,
            height: 330,
            width: 430,
            theme: theme,
            resizable: false,
            isModal: true,
            modalOpacity: 0.3,
            autoOpen: false,
            okButton: $('#manager_to_reporter_chat_submit_reporter_side'),
            initContent: function() {
                $('#manager_to_reporter_chat_submit_reporter_side').jqxButton({
                    theme: theme,
                    width: '70px'
                });
    
                $('#manager_to_reporter_chat_submit_reporter_side').on('click', function(event) {
                    var commentText = $('#manager_to_reporter_chat_input_reporter_side').val();
    
                    if (commentText != null && commentText.trim() != '' && requestId != '-1') {
                        $.ajax({
                            url: 'client/reporter/it_reporter_note_operations.jsp',
                            dataType: 'text',
                            type: 'POST',
                            data: {
                                request_id: (requestId != null && requestId != '') ? requestId : "-1",
                                comment: commentText,
                                access_id: inboxMenuAccessId,
                                operation_type: "2"
                            }
                        });
                    }
    
                });
            }
        });
    
        $("#jqxManagerToReporterChatButton_reporter_side").jqxButton({
            width: '25',
            theme: theme
        });
    
        $("#jqxManagerToReporterChatButton_reporter_side").on('click', function() {
    
            $.ajax({
                url: 'client/reporter/it_reporter_note_operations.jsp',
                type: 'GET',
                data: {
                    request_id: requestId,
                    operation_type: "1"
                },
                beforeSend: function() {
                    $('#manager_to_reporter_chat_input_reporter_side').val('');
                    $('#manager_to_reporter_chat_notes_div_reporter_side').html('');
                },
                success: function(result) {
                    $('#manager_to_reporter_chat_notes_div_reporter_side').html(result);
                },
                complete: function() {
                    $('#it_manager_to_reporter_chatWindow_reporter_side').jqxWindow('open');
                }
            });
        });
    }

    When I double click on the jqxGrid row, I load the details page via ajax, where I send the id of the row. there is a button on details page, when client clicks on it, the jqxWindow is opened and client can write note for this order.

    The problem is: addNote button inside of jqxWindow only adds notes to the first order, which was opened by double click on jqxGrid. It seems that initContent runs only first time. And all notes for the next any order will be added to the first order, which was opened by double click. how can I pass any argument to initContent and dynamically do operations depending on passed argument value?

    jqxWindow #56184

    hsnvv
    Participant

    I’ve solved it, just removing “var requestId = $(‘#reqId’).val();” from function body and adding it into click event in initContent.

    Thank you 🙂

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.