CodeIgniter Forums

Full Version: Jquery UI modal show not working
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello Everyone,

New to this forum and new to codeigniter. Facing following issue.

I have a view definition file which contain a link to show personal info as given below.

Code:
<div><a href="javascript:show_contact_info();">Show contact info</a></div>

THen I have the javascript function as follows:

Code:
function show_contact_info()
{
$("#emplinfo_div").modal('show');
}

Now here is the modal definition.
Code:
<div class="modal fade" id="emplinfo_div"  role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
CONTACT INFORMATION OF <?php echo $firstname." ".$lastname;?>
<div class="col-md-12 ">
<div  class="col-md-12 row" style="margin-top:10px;">
<b>Email</b> : <?php echo $email;?>
</div>
<div  class="col-md-12 row" style="margin-top:10px;">
<div class="col-md-3 row"><b>Address</b>:</div>
<div class="col-md-9"><?php echo $address1.", ".$address2."<br />".$city.", ".$state."<br />".
$country." - ".$pincode;?></div>
</div>
<div  class="col-md-12 row" style="margin-top:10px;">
<b>Contact phone</b> : <?php echo $phone;?>
</div>
<div id="txt001"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
OK
</button>
</div>
</div>
</div


Please help

Regards,
Vijay
Hello,

Can somebody answer please..

Project held up on this.

Thanks and regards,
Vijay
This isn't a CodeIgniter related question, i.m.o.
It's about Javascript and/or jQuery UI.

A few steps you need to check:
Do you load jQuery and jQuery UI correctly?
Do you have a $(document).ready() section to handle jQuery events?

If you replace
Code:
$("#emplinfo_div").modal('show');

by
Code:
alert("You clicked the link to open a popup!");

Does that work?
Here is how to do it using Bootstrap Modal.

Bootstrap Modal
Perhaps you can refer to this website in creating modal with javascript : https://www.w3schools.com/bootstrap/boot..._modal.asp
(01-10-2019, 11:58 PM)Wouter60 Wrote: [ -> ]This isn't a CodeIgniter related question, i.m.o.
It's about Javascript and/or jQuery UI.

A few steps you need to check:
Do you load jQuery and jQuery UI correctly?
Do you have a $(document).ready() section to handle jQuery events?

If you replace
Code:
$("#emplinfo_div").modal('show');

by
Code:
alert("You clicked the link to open a popup!");

Does that work?

Yes it work when I put alert there. It is going to the function. In fact, the window seems to display something but nothing is shown and the control is passed on to the non-displayed div. I need to click somewhere to get back to original screen. Really weird.
(01-10-2019, 11:58 PM)Wouter60 Wrote: [ -> ]This isn't a CodeIgniter related question, i.m.o.
It's about Javascript and/or jQuery UI.

A few steps you need to check:
Do you load jQuery and jQuery UI correctly?
Do you have a $(document).ready() section to handle jQuery events?

If you replace
Code:
$("#emplinfo_div").modal('show');

by
Code:
alert("You clicked the link to open a popup!");

Does that work?

To clear the issue, the above modal window is in another view of codeigniter which display the base page with other info. The link is given to click to show only that info in a modal window.
A modal should be at the bottom of html file.

Here are a couple of links to a more friendly bootstrap dialog (modal)

bootstrap-dialog

Examples
If you are using mozilla firefox please use right click then choose "inspect element". In console section if you have an error will show up.