Question

我正在使用PLSQL Dynamic Content创建响应式布局。从动态渲染的区域中，我想使用动态区域中的参数从每个列表项中调用模态对话。我只能为没有参数的第一个列表项调用模式对话。我想在每个带有参数的列表项上调用模式对话。这是我的代码

DECLARE
--Pkg Template
CURSOR PKG IS SELECT 
      A.N001 PKG_ID,A.C001 PKG_ARB_NAME,A.C002 PKG_ENG_NAME,A.C003 PKG_DURATION,A.N002 NO_OF_MEALS,A.C004 ADD_FRI,A.C005 ADD_SAT,A.C006 ADD_BREAKFAST,A.C007 IS_PUBLIC
FROM APEX_COLLECTIONS  A 
WHERE     A.COLLECTION_NAME = 'TEMPLATE_PACKAGE';

--Template Weeks
CURSOR WEEK IS
SELECT  B.n001 WEEK_ID,B.c001 WEEK_NAME
FROM APEX_COLLECTIONS  B 
WHERE B.COLLECTION_NAME = 'TEMPLATE_WEEKS';
-- Template days

CURSOR DAYS  (p_week NUMBER) IS 
SELECT c.N001 DAY_ID,C.C001 WEEK_DAY 
FROM APEX_COLLECTIONS C WHERE C.COLLECTION_NAME = 'TEMPLATE_DAYS'  AND C.N002 = p_week;

-- Template Meals
CURSOR MEALS (p_day NUMBER,p_week NUMBER) IS
SELECT D.N001 MEAL_ID,D.C001 MEAL_NAME 
FROM APEX_COLLECTIONS  D  WHERE D.COLLECTION_NAME = 'TEMPLATE_MEALS' AND D.N002 = p_day AND D.N003 = p_week;

CURSOR TOTALS (p_week_id NUMBER,p_day_id NUMBER) IS
SELECT A.N001 WEEK_ID,A.N002 DAY_ID,SUM (CARBO_RATIO)CARBO_RATIO ,SUM(FAT_RATIO) FAT_RATIO,SUM(CAL_RATIO) CAL_RATIO, 
        SUM(PROTEIN_RATIO) PROTEIN_RATIO
FROM APEX_COLLECTIONS A,SOURCE_WEIGHTS B
WHERE COLLECTION_NAME = 'TEMPLATE_ADD_MEALS'
  AND A.N001 = p_week_id
  AND A.N002 = p_day_id 
    AND TO_NUMBER(A.C002) = B.WEIGHT_ID
GROUP BY    A.N001,A.N002
    ;

l_url varchar2(2000);
l_app number := v('APP_ID');
l_session number := v('APP_SESSION');

l_cnt NUMBER := 1;

begin

htp.p('<html>');
htp.p('<head>');

htp.p('

<style>
.body{
  margin: 0px;
  padding: 0px;

}
.menu{
  display: flex;
  flex-wrap: wrap;
  padding:0px;
 background: #ffffff;

}
.menu li {
    display: flex;
    flex-direction: column;
    width:  0vw;
    height: 20;
    justify-content: left;
    align-items: center;
    background: #ffffff;
    margin: 1px auto;
}
.menu li i{
  font-size:24px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;  
  border: gray 1px solid;
  border-radius:50%;
  margin-bottom:12px;
  cursor:pointer;
  background: #ffffff;

} 

.div {

border: 1px solid #D3D3D3;
  background-color: #EEEEEE;
  width: 100%;
  height: auto;
  text-align: center;
  border-collapse: collapse;

}
span {
  white-space: pre;
}

 @media only screen and (max-width: 1250px) {   
    .menu li {   
    width: 100px !important;
    height: 100px !important;
    }
}
</style>'
     );
htp.p('</head>');
htp.p('<body>');


FOR i IN WEEK LOOP
  htp.p('<h3>'||i.WEEK_NAME||'</h3>'); 
  FOR j IN DAYS (i.WEEK_ID) LOOP    
    htp.p('<div class="div">');
    htp.p('<h3>'||j.WEEK_DAY||'</h3>');
    htp.p('<ul class=menu>');
    FOR k IN MEALS (j.DAY_ID,i.WEEK_ID)  LOOP   
     -- :P18_MODAL := 'modal';
            htp.p('<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id="modal"></i>
                            </a>
                            <span>'||k.MEAL_NAME||'</span>
                        </li>');


    END LOOP;

        htp.p('</ul>');
    htp.p('</div>');
  END LOOP;
END LOOP;

    htp.p('</body>');
    htp.p('</html>');


END;

模式对话仅在第一项上打开，因为我通过为每个列表项传递静态ID modal通过jquery选择器进行调用。我想将动态ID传递给带有参数的jquery选择器到对话框。

从动态区域使用javascript将参数传递给模式对话

0 个答案: