Jquery modal not working second time

Question

I am developing one application using codeigniter. In this application got a problem that modal window is not opening second time.

In detail .

I have form(view) which contains two select box and search button. User will select the options then click on search button it will display a paginated result . I am using ajax to get the result. The pagination is also based on ajax. On this table result user can edit or update any of the records. Here comes the issue. I am displaying the update form inside a modal window. Inside that modal window I have to do some jquery validations. For that I am including jquery library. The moment when I hit on the edit button for the first time, the modal window is showing and second time it is throwing an error

Uncaught TypeError: Object [object Object] has no method 'modal'

If I removed the jquery library from the modal window then it is working fine.

The code which I am using on this is

My first view

 <script src="<?php print base_url()?>js/dboard.js" type="text/javascript"></script>       
 <script type="text/javascript" src="<?php print base_url()?>js/jquery.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 <script type="text/javascript">
    $(document).ready(function(){               
       $('#view_all').bind("click",function(e){
            var pubid = $('#pub').val();            
            var magid = $('#mag').val();
            var limit = 0; 
            $.post('../user/ajax_view_all',{p_id:pubid,m_id:magid,l:limit},function (data){     
        $('#result_table').html(data);
            });
            //Load pagination on ajax click
            $(document).on("click",".pagination a",function(event){
              var url = $(this).attr("href"); 
              var limit = url.substring(url.lastIndexOf('/') + 1);
              jQuery('.pagination a').removeClass('active');                    
                    $.post($(this).attr('href'),{p_id:pubid,m_id:magid,l:limit},function (data){                                            
                $('#result_table').html(data);
            });                         
             return false; 
            });

                //Open update form in modal window
            $(document).on("click",".btn-setting",function(e){
             edit_id = 2;
             $("div[id='myModal']").modal();
             $.post('../user/update_publishing_modal',{ed_id:edit_id},function(data){
              $('.modal-body').html(data);
            });
            e.preventDefault();
            return false;
            });             

        });
      });        
    </script>

Modal form in the same page.

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Update Schedule</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
 </div>
</div>

please tell what is the issue with this. How can I include the jquery library inside the modal window.

Why are you loading two different instances of jQuery on the same page? — Vishal, Oct 08 '13 at 05:08
@Vishal sorry I am novice in jquery. please tell me which two instance you are talking about. — Anish, Oct 08 '13 at 05:16
`` `` - I guess both will load jQuery to your site.. try removing one of those. — Vishal, Oct 08 '13 at 05:17
thanks . I am using both versions of jquery in my application — Anish, Oct 08 '13 at 05:19
OK but than you should use the `noConflict` mode to avoid object conflict of either version; see this http://stackoverflow.com/q/1566595 — Vishal, Oct 08 '13 at 05:23

score 0 · Answer 1 · answered Oct 08 '13 at 05:00

0

I see a minor issue with misplaced braces, not sure if it can cause this issue: you need to replace :

        });             
        }
    });
  });

with :

        });
    });
});

at the end of the script.

answered Oct 08 '13 at 05:00

Vishal

1,236
1
9
16

Jquery modal not working second time

1 Answers1