如何将javascript函数绑定到bootstrap模式 [英] How do I bind javascript function to bootstrap modal

问题描述

我有一个模态，我想用它来显示用户信息，它通常被称为按钮点击，如下所示

 <！ -    管理员模式   - >   
 <   div     class   = < span class =code-keyword> modal fade    id   =  adminModal    tabindex   =   -  1   角色  =  dialog    aria-labelledby   =  myModalLabel    aria-hidden   =  true >  
 <   div     class   = 模态对话框 >  
 <   div     class   =  modal-content >  
 <   div     class   =  modal -body >  
 <  按钮    type   = 按钮    class   =  close    data-dismiss   =  modal    aria-hidden   =  true > ×<   / button  >  
 < span class =code-keyword><   br     /  >  
 <   div     class   =   Imodalcont >  
 <   div     class   =  form-group >  
  <   div     class   =  thumbnail Iwidth >  
 <   img     id   =  adminImg    src   =      alt   = 护照 >  
 <   / div  >  
 <   / div  >  
 <   div     class   = < span class =code-keyword> form-group >  
 <   div     class   =  Iwidth >  <   label     id   =  adname    class   =  control-label > 以色列Eruoghene Asha <   / label  >  <   / div  < span class =code-keyword>>  
 <   div     class   =  Iwidth >  <   label     id   =  adqual    class   =  control-label  >  B.Sc <   / label  >  <   / div  >  
 <   div     class   =  Iwidth >  <   label     id   =  adpos    class   =  control-label  > 所有者<   / label  >  <   / div  >  
 <   / div  >  
 <   / div  >  
 <   div     class   =  Imodalcont >  
 <   div    类  = 表格 - group >  
 <  标签    class   =  control-label > 个人资料<   / label  >  
 <   label     id   =  adprofile    class   =  control-label label-font-weight > 这里<   / label  >  
 <   / div  >  
 <   / div  >  
 <   / div  >  
 <   div     class   = 模态页脚 >  
 <  按钮    id   =   nxt    type   = 按钮    class   =  btn mybtn-link    onclick   =  next（） >  next>> <   / button  >  
 <   / div  >  
 <   / div  >  <！ -     /.modal-content    - >   
 <   / div  >  <！ -     /.modal dialog    - >   
 <   / div  >  <！ -    < span class =code-comment> /.modal    - >   

按此按钮调用模态

 <  按钮    id   =  admod   < span class =code-attribute> class   =  btn btn-default < span class =code-attribute>  类型  = 提交 < span class =code-attribute>   onclick   =  next（） > 查看信息<   / button  >  

我尝试了什么：



这是我的javascript代码

此数据来自onsuccess调用一个初始的ajax请求如图所示

 $ .ajax（{
 type：  POST，
 url：  / Ministry / getSchlBase，
 data：{  schl名称：schnm}，
成功： function （custs）{ //  这是我想要在模态上显示的所有数据的地方 
 
 
  //  单击下一个按钮时 
（' ＃admod'）。click（ function  next（）{ //  我将此功能设置为上面按钮的onclick事件 
  //  < span class =code-comment>添加第一个管理员信息。只要点击上面的按钮，这就是我想要的模态上的第一个信息 
  var  admin1 = custs [ 1 ]; 
  var  name = admin1.split（'  '）[ 1 ] +    + admin1.split（' '）[ 2 ] +   + admin1.split（' '）[ 3 ]; 
} ， function  next（）{
  //  添加第二个管理员信息。这是我想要在点击下一个按钮后显示的第二个管理员信息 
  var  admin2 = custs [ 2 ]; 
  var  name = admin2.split（' ''）[ 1 ] +   + admin2.split（' '）[ 2 ] +   + admin2.split（' '）[ 3 ]; 
 $（' ＃adname'）。text（name）; 
 $（' ＃adprofile'）。text（admin2.split（' '）[ 4 ]）; 
 $（' ＃adpos'）。text（admin2.split（' '）[ 5 ]）; 
 $（' ＃adminImg'）。attr（'  src'，admin2.split（' '）[ 6 ]）; 
 $（' ＃adqual'）。text（admin2.split（'  '）[ 7 ]）; 
}， function  next（）{
  //  添加第三个管理员信息。这是我想要填充的第三个信息 
  var  admin3 = custs [ 3  ]。 
  var  name = admin3.split（'  '）[ 1 ] +    + admin3.split（' '）[ 2 ] +   + admin3.split（' '）[ 3 ]; 
 $ （' ＃adname'）。text（name）; 
 $（ ＃adprofile'）。text（admin3.split（'' '）[ 4 ]）; 
 $（' ＃adpos'）。text（admin3.split（' '）[ 5 ]）; 
 $（' ＃adminImg'）。attr（'   src'，admin3.split（'  '）[ 6 ]）; 
 $（' ＃adqual'）。text（admin3.split（' '）[ 7 ]）; 
 count =  1 ; 
}）; 
}，
错误： function （错误）{
 alert（错误）; 
} 
}）; 

请问我该如何处理。



任何回复都将不胜感激。谢谢

解决方案

.ajax（{
type： POST，
url： / Ministry / getSchlBase，
data：{ schlName ：schnm}，
成功ss： function （custs）{ // 这是哪里我希望在模态上显示的所有数据都已获得


// 点击下一个按钮时
（' ＃admod' ）.click（ function next（）{ // i将此函数设置为上面按钮的onclick事件
// 添加第一个管理员信息。只要点击上面的按钮，这就是我想要的模态上的第一个信息
var admin1 = custs [ 1 ];
var name = admin1.split（' '）[ 1 ] + + admin1.split（' '）[ 2 ] + + admin1.split（' '）[ 3 ];
} ， function next（）{
// 添加第二个管理员信息。这是我想要在点击下一个按钮后显示的第二个管理员信息
var admin2 = custs [ 2 ];
var name = admin2.split（' ''）[ 1 ] + + admin2.split（' '）[ 2 ] + + admin2.split（' '）[ 3 ];

< blockquote>（' ＃adname'）。text（name）;

（' ＃adprofile'）。text（admin2.split（' '）[ 4 ]）;

hi, i have a modal that i want to use to show user info and its normally called on button click as shown below

<!-- Admin Modal -->
            <div class="modal fade" id="adminModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
                            <br />
                            <div class="Imodalcont">
                                <div class="form-group">
                                    <div class="thumbnail Iwidth">
                                        <img id="adminImg" src="" alt="passport">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="Iwidth"><label id="adname" class="control-label">Israel Eruoghene Asha</label></div>
                                    <div class="Iwidth"><label id="adqual" class="control-label">B.Sc</label></div>
                                    <div class="Iwidth"><label id="adpos" class="control-label">Proprietor</label></div>
                                </div>
                            </div>
                            <div class="Imodalcont">
                                <div class="form-group">
                                    <label class="control-label">Profile</label>
                                    <label id="adprofile" class="control-label label-font-weight">sth here</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="nxt" type="button" class="btn mybtn-link" onclick="next()">next >></button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal dialog-->
            </div><!-- /.modal -->

that modal is called by this button click

<button id="admod" class="btn btn-default" type="submit" onclick="next()">View Info</button>

What I have tried:

here's my javascript code
this data is gotten in the onsuccess call of an initial ajax request as shown

$.ajax({
            type: "POST",
            url: "/Ministry/getSchlBase",
            data: { "schlName": schnm},
            success: function (custs) { // this is where all the data i want to show on the modal is gotten


                //When next button is clicked
                ('#admod').click(function next() {//i set this function to the onclick event of the button above
                        //adding first admin info. This is the first info i want on the modal as soon as the button above is clicked
                        var admin1 = custs[1];
                        var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3];
                },function next(){
                        //adding second admin info. this is the second admin info i want shown after a next button is clicked
                        var admin2 = custs[2];
                        var name = admin2.split('"')[1] + " " + admin2.split('"')[2] + " " + admin2.split('"')[3];
                        $('#adname').text(name);
                        $('#adprofile').text(admin2.split('"')[4]);
                        $('#adpos').text(admin2.split('"')[5]);
                        $('#adminImg').attr('src', admin2.split('"')[6]);
                        $('#adqual').text(admin2.split('"')[7]);
                },function next(){
                        //adding third admin info. this is the third info i want populated 
                        var admin3 = custs[3];
                        var name = admin3.split('"')[1] + " " + admin3.split('"')[2] + " " + admin3.split('"')[3];
                        $('#adname').text(name);
                        $('#adprofile').text(admin3.split('"')[4]);
                        $('#adpos').text(admin3.split('"')[5]);
                        $('#adminImg').attr('src', admin3.split('"')[6]);
                        $('#adqual').text(admin3.split('"')[7]);
                        count = 1;
                });
            },
            error: function (error) {
               alert(error);
            }
        });

please how do i go about it.

any response would be appreciated. Thanks

解决方案

.ajax({ type: "POST", url: "/Ministry/getSchlBase", data: { "schlName": schnm}, success: function (custs) { // this is where all the data i want to show on the modal is gotten //When next button is clicked ('#admod').click(function next() {//i set this function to the onclick event of the button above //adding first admin info. This is the first info i want on the modal as soon as the button above is clicked var admin1 = custs[1]; var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3]; },function next(){ //adding second admin info. this is the second admin info i want shown after a next button is clicked var admin2 = custs[2]; var name = admin2.split('"')[1] + " " + admin2.split('"')[2] + " " + admin2.split('"')[3];

('#adname').text(name);

('#adprofile').text(admin2.split('"')[4]);

这篇关于如何将javascript函数绑定到bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！