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

up vote
0
down vote

favorite

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 at 3:36

user1907867

add a comment |

up vote
0
down vote

favorite

<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 at 3:36

user1907867

add a comment |

up vote
0
down vote

favorite

<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 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 at 3:36

user1907867

asked Nov 21 at 3:36

user1907867

asked Nov 21 at 3:36

user1907867

asked Nov 21 at 3:36

user1907867

asked Nov 21 at 3:36

user1907867

add a comment |

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',
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

active

oldest

votes

draft saved

draft discarded

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

搜尋此網誌

Htykuut