jqxWindow didn't show when clicking the triggering image

[pvegetahParticipant]

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
	});
});

[ivailoParticipant]

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

[pvegetahParticipant]

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

[ivailoParticipant]

Hi pvegetah,

Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[pvegetahParticipant]

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?

[ivailoParticipant]

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

[Author]

Posts