jQuery UI Widgets Forums Dialogs and Notifications Window jqxWindow didn't show when clicking the triggering image

This topic contains 5 replies, has 2 voices, and was last updated by  ivailo 5 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • pvegetah
    Participant

    I’ve posted this concern yesterday in StackOverflow but there’s no reply regarding concern. I’ve create table which display the Transmittal#, Transmittal Date, Sender Name, Department, Invoice#, Document Type, Vendor Name, and a remarks. Under my remarks there’s a image icon which was the icon image trigger to view the jqxWindow. The window content and window header of the jqxWindow was visible on my table that it shouldn’t be display without clicking the icon image under Remarks. See my pic. below

    Here’s my code:

    <?php
                include('connection.php');
    
                $sql = "SELECT en.transid, en.transdate, CONCAT(userlist.lname, ', ', userlist.fname, ' ', userlist.mname) AS sender_name,
                        userlist.<code>department</code>, en.document_number, doctype.document_type, doctype.document_description, vendor.<code>vendor_name</code>, en.<code>remarks</code>
                        FROM tbl_encode_transmittal en
                        LEFT JOIN tbl_vendor vendor ON vendor.<code>vendor_id</code> =  en.vendor_id
                        LEFT JOIN tbl_doctype doctype ON doctype.<code>doc_id</code> = en.doctype_id
                        LEFT JOIN tbl_userlist userlist ON userlist.userid = en.sender_id
                        LEFT JOIN tbl_userlist userlist1 ON userlist1.userid = en.<code>receiver_id</code>
                        WHERE userlist1.<code>userid</code> = '".$_SESSION['userid']."'";
    
                $rs = mysql_query($sql) or die(mysql_error());
    
                while($row = mysql_fetch_array($rs)){
                    echo "<tr>";
                    echo "<tbody id=\"myTable\">";
                    echo "<td><h6>" . $row['transid'] . "</h6></td>";
                    echo "<td><h6>" . $row['transdate'] . "</h6></td>";
                    echo "<td><h6>" . $row['sender_name'] . "</h6></td>";
                    echo "<td><h6>" . $row['department']. "</h6></td>";
                    echo "<td><h6>" . $row['document_number'] . "</h6></td>";
                    echo "<td><h6>" . $row['document_type'] . " " . $row['document_description'] . "</h5></td>";
                    echo "<td width=\"50\"><h6>" . $row['vendor_name'] . "</h6></td>";?>
                    <td style="text-align:center; padding-top:10;"><a href="#" id="remarksBtn"><i class="fa fa-info-circle fa-lg"></i></a></td>
    
                    <!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
                    <!--/////////                                Remarks Window Function                                     ////////// -->
                    <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
                    <div id="window_remarks">
                        <div id="windowHeader">
                            <span>
                                Remarks
                            </span>
                        </div>
                        <div id="windowContent">
                        <?php
                            echo $row['remarks'];
                        ?>
                        </div>
                    </div>  <!-- End Remarks Window Function -->
                    <div class= "clear"></div>
    
                <?php } ?>

    Here’s also the code of my jqxWindow:

    $(document).ready(function(){
    	$('#remarksBtn').click(function(){
    		$('#window_remarks').jqxWindow('open');
    		$('#window_remarks').jqxWindow('draggable', true);
    		$('#window_remarks').jqxWindow('resizable', false);
    	});
    	$('#window_remarks').jqxWindow({
    		autoOpen: false,
    		position: {x: 250, y: 100},
    		showCollapseButton: false,
    		maxHeight: 400,
    		maxWidth: 700,
    		minHeight: 10,
    		minWidth: 10,
    		height: 100,
    		width: 350
    	});
    });

    ivailo
    Participant

    Hi pvegetah,

    The problem is that you generates multiple elements with the same id. Id must be unique. In your case better use class selector.
    <a href="#" class="remarksBtn"><i class="fa fa-info-circle fa-lg"></i></a>
    ….

    $('.remarksBtn').click(function(){
    		.....
    	});

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    pvegetah
    Participant

    Hello ivailo,

    Hmmm.. So you suggest a looping function inside class”remarksBtn” and adding a incremented number if multiple elements.

    Is it possible to create loop inside the class selector?

    Thank you.
    pvegetah


    ivailo
    Participant

    Hi pvegetah,

    Here is a demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    pvegetah
    Participant

    I have an answer with this I must insert the unique variable like transid just like this code below.

    <a href="#" class="remarksBtn-<?php echo $row['transid']; ?>"><i class="fa fa-info-circle fa-lg"></i></a>

    and I doing this logic in Window <div></div> inside the while loop, I also make a while loop in script code. But the jqxWindow Function will not execute. is there an error everytime I include the jqxWindow <div></div> inside the while loop to generate a multiple window?


    ivailo
    Participant

    Hi pvegetah,

    You can use remarksBtn class and add unique ids/class names if you want to add different info in your window.
    <a href="#" class="remarksBtn remarksBtn-<?php echo $row['transid']; ?>"><i class="fa fa-info-circle fa-lg"></i></a>
    In this case the same window will be opened and you can change it’s content according to the unique class name.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.