How do I bind javascript function to bootstrap modal

Question

0.00/5 (No votes)

See more:

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

HTML

<!-- 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

HTML

<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

JavaScript

$.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

Posted 14-Aug-16 8:18am

EasyHero

Updated 20-Aug-16 6:12am

Add a Solution

2 solutions

Solution 1

Hi,

Regarding the js code:

JavaScript

$('#admod').click(function next() { //note the missing $ before ('#admod')

Also are you sure the syntax with ".click(function next() {" is correct?

If you you want to click the button automatically

JavaScript

$('#admod').trigger('click');

Posted 14-Aug-16 10:33am

P_Z

Comments

EasyHero 17-Aug-16 13:55pm

i think the syntax is wrong. even after adding the $ sign, it didn't work.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

EasyHero · Accepted Answer · 2016-08-20T06:12:00

ok, i solved it after hours of searching. when the initial button is clicked, i did this

JavaScript

$('[data-target="#adminModal"]').click(function (e) {
var count = 1;
                //adding first admin info
                e.preventDefault();
                var admin1 = custs[count];//this calls the first admin as determined by variable count above
                ++count;
                var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3];
                $('#adminModal #adname').text(name);
                $('#adminModal #adprofile').text(admin1.split('"')[4]);
                $('#adminModal #adpos').text(admin1.split('"')[5]);
                $('#adminModal #adminImg').attr('src', admin1.split('"')[6]);
                $('#adminModal #adqual').text(admin1.split('"')[7]);
                jquery("#adminModal").modal('show');
                return count;
            });

then when the next button is clicked,

JavaScript

$('#nxt').click(function (e) {
                $(this).find('label, img').trigger('reset');//this resets the admin modal
                //adding first admin info

                e.preventDefault();
                var admin1 = custs[count];
                //++count;
                var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3];
                $('#adminModal #adname').text(name);
                $('#adminModal #adprofile').text(admin1.split('"')[4]);
                $('#adminModal #adpos').text(admin1.split('"')[5]);
                $('#adminModal #adminImg').attr('src', admin1.split('"')[6]);
                $('#adminModal #adqual').text(admin1.split('"')[7]);
                if (count == 3)
                {
                    count = 1;
                    return count;
                }
                else {
                    ++count;
                    return count;
                }
                jquery("#adminModal").modal('show');
            });