Posts

Showing posts from June, 2017

Javascript: Redirect to Another Page

Redirect to Another Page With Javascript // window.location window.location.replace('http://www.example.com') window.location.assign('http://www.example.com') window.location.href = 'http://www.example.com' document.location.href = '/path' // window.history window.history.back() window.history.go(-1) // window.navigate; ONLY for old versions of Internet Explorer window.navigate('top.jsp') Redirect to Another Page With JQuery $(location).attr('href','http://www.example.com') $(window).attr('location','http://www.example.com') $(location).prop('href', 'http://www.example.com')

jQuery: Check Element Visibility

For a single element, it is very easy to check if an element is hidden or visible: $(element).is(":visible"); $(element).is(":hidden"); To match all elements, use the ff: $('element:hidden'); $('element:visible') You can also check the CSS display property: if ( $(selector).css('display') == 'none' ) { // is hidden } else { // is visible }

jQuery: Open Bootstrap Modal on Form Submit

This simple snippet shows how to open Bootstrap Modal on form submission using jQuery. Bootstrap has provided functions you can use to manually manipulate the modal. $('#myModal').modal('toggle'); $('#myModal').modal('show'); $('#myModal').modal('hide'); Here is an example form <form action="/process" onsubmit="openModal()" id="myForm"> Call the function manually function openModal(){ $('#myModal').modal('show'); return false; } Using the jQuery  Event Listener $('#myForm').on('submit', function(e){ $('#myModal').modal('show'); }); See Demo in CodePen See the Pen Bootstrap Modal on Form Submit by Hana Piers ( @hanapiers ) on CodePen .

jQuery: Disable Closing of Modal in Bootstrap

Bootstrap's Modal default behavior is that it closes when you click outside the window. To disable it, Bootstrap, provided simple solution: With jQuery You can initialize the modal settings backdrop property to "static" $('#myModal').modal({ backdrop: 'static', keyboard: false }); You may noticed that we also set keyboard property to false. This is to disable the use of ESC button to close the modal. Though I would recommend this only as alternative. It is still preferred to use HTML and Bootstrap has just made it possible. Use backdrop data attribute According to Boostrap, if you set data-backdrop to "static", this will disable the modal from closing. <a data-controls-modal="#yourId" data-backdrop="static" data-keyboard="false" href="#">