jQuery UI dialog not working on 2nd page of pagination of struts2

I have a list of users in a table, I am showing only 10 users at a time using the tablesorter pager (pagination) plugin https://www.websparrow.org/struts/pagination-in-struts2-using-jquery-datatable
I have one column in table with dialog open option. This dialog open button is visible only on first page and not on second page of pagination. Second page shown only "loading... show".
I am not that good in java script so need your help to show dialog button on next page of pagination.
Please find code provided below

<sj:head jqueryui="true" jquerytheme="start" compressed='false'/> 

<style type="text/css">@import url(css/main.css) !important;</style>

<style type="text/css">

select {

    width:200px;

}</style>

<link href="/HospitalCare/css/table.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="/HospitalCare/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="/HospitalCare/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="/HospitalCare/layout/scripts/jquery.dataTables.min.js"></script>

<script language="JavaScript">

$(document).ready(function() {

     $('#mytbl').dataTable();

});



 </script>



 </head>

<body>



<%@include file="menu.jsp" %>

<div class="myRow1" align="center">

    <div style="margin-top: 10px; margin-left: 20px;">

        <table class="table table-hover table-bordered" id="mytbl">

            <thead>

                <tr class="success" style="color: #f5f5f5;">

                    <th>First Name </th>

                    <th>Middle Name</th>

                    <th>Last Name</th>

                    <th>Birth Date </th>

                    <th>Email Id</th>

                    <th>Marrital Status </th>

                    <th>Gender </th>

                    <th>Mobile No</th>

                    <th>Blood Group</th>

                    <th>Verified</th>

                    <th>Show Details</th>

                </tr>

            </thead>

            <s:iterator value="userList">

                <tr>

                    <td>

                        <s:property value="firstName"/>

                    </td>

                    <td>

                        <s:property value="middleName" />

                    </td>

                    <td>

                        <s:property value="lastName" />

                    </td>

                    <td>

                        <s:property value="birthday" />

                    </td>

                    <td>

                        <s:property value="emailId" />

                    </td>

                    <td>

                        <s:property value="marritalSttus" />

                    </td>

                    <td>

                        <s:property value="gender" />

                    </td>

                    <td>

                        <s:property value="mobileNo" />

                    </td>

                    <td>

                        <s:property value="bloodGroup" />

                    </td>

                    <td>

                        <s:property value="verified" />

                    </td>

                    <td>

                        <sj:dialog width="950" height="600" autoOpen="false" modal="true" id="%{get("userId")}" href="showVisitHistoryTab?userId=%{userId}" openTopics="%{userId}_2" title="Visit Details">

                                <img id="indicator" src="/HospitalCare/images/indicator.gif" alt="Loading..."/>

                          </sj:dialog>

                          <sj:a onClickTopics="%{userId}_2" openDialog="%{get("userId")}" button="true" buttonIcon="ui-icon-newwin" >

                          <s:property value="%{getText('label.button.show.bill')}"/>

                          </sj:a>

                    </td>

                </tr>

            </s:iterator>

        </table>

    </div>

</div>

</body>

</html>

asked Nov 21 '18 at 3:36

user1907867

add a comment |

<sj:head jqueryui="true" jquerytheme="start" compressed='false'/> 

<style type="text/css">@import url(css/main.css) !important;</style>

<style type="text/css">

select {

    width:200px;

}</style>

<link href="/HospitalCare/css/table.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="/HospitalCare/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="/HospitalCare/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="/HospitalCare/layout/scripts/jquery.dataTables.min.js"></script>

<script language="JavaScript">

$(document).ready(function() {

     $('#mytbl').dataTable();

});



 </script>



 </head>

<body>



<%@include file="menu.jsp" %>

<div class="myRow1" align="center">

    <div style="margin-top: 10px; margin-left: 20px;">

        <table class="table table-hover table-bordered" id="mytbl">

            <thead>

                <tr class="success" style="color: #f5f5f5;">

                    <th>First Name </th>

                    <th>Middle Name</th>

                    <th>Last Name</th>

                    <th>Birth Date </th>

                    <th>Email Id</th>

                    <th>Marrital Status </th>

                    <th>Gender </th>

                    <th>Mobile No</th>

                    <th>Blood Group</th>

                    <th>Verified</th>

                    <th>Show Details</th>

                </tr>

            </thead>

            <s:iterator value="userList">

                <tr>

                    <td>

                        <s:property value="firstName"/>

                    </td>

                    <td>

                        <s:property value="middleName" />

                    </td>

                    <td>

                        <s:property value="lastName" />

                    </td>

                    <td>

                        <s:property value="birthday" />

                    </td>

                    <td>

                        <s:property value="emailId" />

                    </td>

                    <td>

                        <s:property value="marritalSttus" />

                    </td>

                    <td>

                        <s:property value="gender" />

                    </td>

                    <td>

                        <s:property value="mobileNo" />

                    </td>

                    <td>

                        <s:property value="bloodGroup" />

                    </td>

                    <td>

                        <s:property value="verified" />

                    </td>

                    <td>

                        <sj:dialog width="950" height="600" autoOpen="false" modal="true" id="%{get("userId")}" href="showVisitHistoryTab?userId=%{userId}" openTopics="%{userId}_2" title="Visit Details">

                                <img id="indicator" src="/HospitalCare/images/indicator.gif" alt="Loading..."/>

                          </sj:dialog>

                          <sj:a onClickTopics="%{userId}_2" openDialog="%{get("userId")}" button="true" buttonIcon="ui-icon-newwin" >

                          <s:property value="%{getText('label.button.show.bill')}"/>

                          </sj:a>

                    </td>

                </tr>

            </s:iterator>

        </table>

    </div>

</div>

</body>

</html>

asked Nov 21 '18 at 3:36

user1907867

add a comment |

<sj:head jqueryui="true" jquerytheme="start" compressed='false'/> 

<style type="text/css">@import url(css/main.css) !important;</style>

<style type="text/css">

select {

    width:200px;

}</style>

<link href="/HospitalCare/css/table.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="/HospitalCare/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="/HospitalCare/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="/HospitalCare/layout/scripts/jquery.dataTables.min.js"></script>

<script language="JavaScript">

$(document).ready(function() {

     $('#mytbl').dataTable();

});



 </script>



 </head>

<body>



<%@include file="menu.jsp" %>

<div class="myRow1" align="center">

    <div style="margin-top: 10px; margin-left: 20px;">

        <table class="table table-hover table-bordered" id="mytbl">

            <thead>

                <tr class="success" style="color: #f5f5f5;">

                    <th>First Name </th>

                    <th>Middle Name</th>

                    <th>Last Name</th>

                    <th>Birth Date </th>

                    <th>Email Id</th>

                    <th>Marrital Status </th>

                    <th>Gender </th>

                    <th>Mobile No</th>

                    <th>Blood Group</th>

                    <th>Verified</th>

                    <th>Show Details</th>

                </tr>

            </thead>

            <s:iterator value="userList">

                <tr>

                    <td>

                        <s:property value="firstName"/>

                    </td>

                    <td>

                        <s:property value="middleName" />

                    </td>

                    <td>

                        <s:property value="lastName" />

                    </td>

                    <td>

                        <s:property value="birthday" />

                    </td>

                    <td>

                        <s:property value="emailId" />

                    </td>

                    <td>

                        <s:property value="marritalSttus" />

                    </td>

                    <td>

                        <s:property value="gender" />

                    </td>

                    <td>

                        <s:property value="mobileNo" />

                    </td>

                    <td>

                        <s:property value="bloodGroup" />

                    </td>

                    <td>

                        <s:property value="verified" />

                    </td>

                    <td>

                        <sj:dialog width="950" height="600" autoOpen="false" modal="true" id="%{get("userId")}" href="showVisitHistoryTab?userId=%{userId}" openTopics="%{userId}_2" title="Visit Details">

                                <img id="indicator" src="/HospitalCare/images/indicator.gif" alt="Loading..."/>

                          </sj:dialog>

                          <sj:a onClickTopics="%{userId}_2" openDialog="%{get("userId")}" button="true" buttonIcon="ui-icon-newwin" >

                          <s:property value="%{getText('label.button.show.bill')}"/>

                          </sj:a>

                    </td>

                </tr>

            </s:iterator>

        </table>

    </div>

</div>

</body>

</html>

asked Nov 21 '18 at 3:36

user1907867

<sj:head jqueryui="true" jquerytheme="start" compressed='false'/> 

<style type="text/css">@import url(css/main.css) !important;</style>

<style type="text/css">

select {

    width:200px;

}</style>

<link href="/HospitalCare/css/table.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="/HospitalCare/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="/HospitalCare/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="/HospitalCare/layout/scripts/jquery.dataTables.min.js"></script>

<script language="JavaScript">

$(document).ready(function() {

     $('#mytbl').dataTable();

});



 </script>



 </head>

<body>



<%@include file="menu.jsp" %>

<div class="myRow1" align="center">

    <div style="margin-top: 10px; margin-left: 20px;">

        <table class="table table-hover table-bordered" id="mytbl">

            <thead>

                <tr class="success" style="color: #f5f5f5;">

                    <th>First Name </th>

                    <th>Middle Name</th>

                    <th>Last Name</th>

                    <th>Birth Date </th>

                    <th>Email Id</th>

                    <th>Marrital Status </th>

                    <th>Gender </th>

                    <th>Mobile No</th>

                    <th>Blood Group</th>

                    <th>Verified</th>

                    <th>Show Details</th>

                </tr>

            </thead>

            <s:iterator value="userList">

                <tr>

                    <td>

                        <s:property value="firstName"/>

                    </td>

                    <td>

                        <s:property value="middleName" />

                    </td>

                    <td>

                        <s:property value="lastName" />

                    </td>

                    <td>

                        <s:property value="birthday" />

                    </td>

                    <td>

                        <s:property value="emailId" />

                    </td>

                    <td>

                        <s:property value="marritalSttus" />

                    </td>

                    <td>

                        <s:property value="gender" />

                    </td>

                    <td>

                        <s:property value="mobileNo" />

                    </td>

                    <td>

                        <s:property value="bloodGroup" />

                    </td>

                    <td>

                        <s:property value="verified" />

                    </td>

                    <td>

                        <sj:dialog width="950" height="600" autoOpen="false" modal="true" id="%{get("userId")}" href="showVisitHistoryTab?userId=%{userId}" openTopics="%{userId}_2" title="Visit Details">

                                <img id="indicator" src="/HospitalCare/images/indicator.gif" alt="Loading..."/>

                          </sj:dialog>

                          <sj:a onClickTopics="%{userId}_2" openDialog="%{get("userId")}" button="true" buttonIcon="ui-icon-newwin" >

                          <s:property value="%{getText('label.button.show.bill')}"/>

                          </sj:a>

                    </td>

                </tr>

            </s:iterator>

        </table>

    </div>

</div>

</body>

</html>

javascript jquery jquery-ui jquery-plugins struts2

asked Nov 21 '18 at 3:36

user1907867

asked Nov 21 '18 at 3:36

user1907867

asked Nov 21 '18 at 3:36

user1907867

asked Nov 21 '18 at 3:36

user1907867

asked Nov 21 '18 at 3:36

user1907867

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404911%2fjquery-ui-dialog-not-working-on-2nd-page-of-pagination-of-struts2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk