Jquery UI modal show not working

Jquery UI modal show not working - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Jquery UI modal show not working (/showthread.php?tid=72601)

Jquery UI modal show not working - vijaynair - 01-10-2019

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

RE: Jquery UI modal show not working - vijaynair - 01-10-2019

Hello,

Can somebody answer please..

Project held up on this.

Thanks and regards,
Vijay

RE: Jquery UI modal show not working - Wouter60 - 01-10-2019

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');

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

Does that work?

RE: Jquery UI modal show not working - InsiteFX - 01-11-2019

Here is how to do it using Bootstrap Modal.

Bootstrap Modal

RE: Jquery UI modal show not working - justinmkl94 - 01-12-2019

Perhaps you can refer to this website in creating modal with javascript : https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

RE: Jquery UI modal show not working - vijaynair - 01-13-2019

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

RE: Jquery UI modal show not working - vijaynair - 01-13-2019

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

RE: Jquery UI modal show not working - InsiteFX - 01-13-2019

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

RE: Jquery UI modal show not working - Codehoster - 08-24-2019

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.