I'm having a problem with my jquery modal its not closing correctly in internet explorer but works fine in chrome.
JS is not my strong subject so cant work it out. Here the code I'm using to open the modal and the close script
jQuery(function ($) {
var login = {
message: null,
init: function () {
$('#login').click(function (e) {
e.preventDefault();
// load the contact form using ajax
$.get("../_Includes/login.php", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%",],
overlayId: 'login-overlay',
containerId: 'login-container',
onOpen: login.open,
onShow: login.show,
onClose: login.close
});
});
});
},
open: function (dialog) {
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#login-container').animate({
height: h
}, function () {
$('#login-container form').fadeIn(200, function () {
});
});
});
});
});
},
show: function (dialog) {
$('#loginForm').on('submit', function (e) {
e.preventDefault();$('input[type=submit]', this).attr('disabled', 'disabled');
var username = $("#username").val();
var password = $("#password").val();
var url = "../_Scripts/login.php";
if (!username) {
$('input[type=submit]', this).removeAttr('disabled');
$("#loginReply").html('<img src="../_Images/round_error.png" alt="Error" width="31" height="30" /> Please enter your Username.').show().fadeOut(6000);
return false;
}
else if (!password) {
$('input[type=submit]', this).removeAttr('disabled');
$("#loginReply").html('<img src="../_Images/round_error.png" alt="Error" width="31" height="30" /> Please enter your Password.').show().fadeOut(6000);
return false;
}
else {
$('input[type=submit]', this).removeAttr('disabled');
$.post(url, $('#loginForm').serialize(), function (data) {
if(data.status == true){
window.location = data.action;
} else{
$("#loginReply").html(data.action).show().fadeOut(10000);
$("#username").val('');
$("#password").val('');
$("#loginProcessGif").hide();
}
});
}
});
},
close: function (dialog) {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
},
};
login.init();
});
Can anyone shed some light on this????
Thanks
Related
I made a live chat script and when the user sends a message it should show a notification, although it does show the notification it does not show the body of the notification. Here is my code:
$(document).ready(function () {
function askNotificationPermission() {
function handlePermission(permission) {
if(Notification.permission === 'denied' || Notification.permission === 'default') {
alert("You denied notification access");
} else {
}
}
if (!('Notification' in window)) {
console.log("This browser does not support notifications.");
} else {
if(checkNotificationPromise()) {
Notification.requestPermission()
.then((permission) => {
handlePermission(permission);
})
} else {
Notification.requestPermission(function(permission) {
handlePermission(permission);
});
}
}
}
function checkNotificationPromise() {
try {
Notification.requestPermission().then();
} catch(e) {
return false;
}
return true;
}
$("#submitmsg").click(function () {
var clientmsg = $("#usermsg").val();
$.post("post.php", { text: clientmsg });
$("#usermsg").val("");
var img = "../../images/icon.png";
var notofication = new Notification("Chat", { body: clientmsg, icon: img });
return false;
});
function loadLog() {
var oldscrollHeight = $("#chatbox")[0].scrollHeight - 20;
$.ajax({
url: "log.html",
cache: false,
success: function(html) {
$("#chatbox").html(html);
var newscrollHeight = $("#chatbox")[0].scrollHeight - 20;
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');
}
}
});
}
setInterval(loadLog, 200);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" autocomplete="off" id="usermsg" placeholder="Type something..."/> <button id="submitmsg">Send</button>
It does show the notification but does not show the body of notification, any help is appreciated.
I am using Bootstrap Modal Js. However, whenever the modal pops up , I am getting this error
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Also, in one page I am getting the erorr below when the modal launches using
if (auth=="False"){
setTimeout(function(){
if ($('#registerModal').hasClass('show')){
}else{
$('.register-btn').trigger('click');
}
}, 25000);
}
Error:
jquery.validate.unobtrusive.min.js:5 Uncaught TypeError: Cannot set property 'unobtrusive' of undefined
at jquery.validate.unobtrusive.min.js:5
at jquery.validate.unobtrusive.min.js:5
Here is the js
/*
django-bootstrap-modal-forms
version : 2.0.1
Copyright (c) 2020 Uros Trstenjak
https://github.com/trco/django-bootstrap-modal-forms
*/
(function ($) {
// Open modal & load the form at formURL to the modalContent element
var modalForm = function (settings) {
$(settings.modalID).find(settings.modalContent).load(settings.formURL, function () {
settings.asyncSettings=true;
settings.async = true;
$(settings.modalID).modal("show");
$(settings.modalForm).attr("action", settings.formURL);
addEventHandlers(settings);
});
};
var addEventHandlers = function (settings) {
// submitBtn click handler
$(settings.submitBtn).on("click", function (event) {
isFormValid(settings, submitForm);
});
// Modal close handler
$(settings.modalID).on("hidden.bs.modal", function (event) {
$(settings.modalForm).remove();
});
};
// Check if form.is_valid() & either show errors or submit it via callback
var isFormValid = function (settings, callback) {
$.ajax({
type: $(settings.modalForm).attr("method"),
url: $(settings.modalForm).attr("action"),
data: new FormData($(settings.modalForm)[0]),
contentType: false,
processData: false,
beforeSend: function () {
$(settings.submitBtn).prop("disabled", true);
},
success: function (response) {
if ($(response).find(settings.errorClass).length > 0) {
// Form is not valid, update it with errors
$(settings.modalID).find(settings.modalContent).html(response);
$(settings.modalForm).attr("action", settings.formURL);
// Reinstantiate handlers
addEventHandlers(settings);
} else {
// Form is valid, submit it
callback(settings);
}
}
});
};
// Submit form callback function
var submitForm = function (settings) {
if (!settings.asyncUpdate) {
$(settings.modalForm).submit();
} else {
var asyncSettingsValid = validateAsyncSettings(settings.asyncSettings);
var asyncSettings = settings.asyncSettings;
if (asyncSettingsValid) {
var formdata = new FormData($(settings.modalForm)[0]);
// Add asyncUpdate and check for it in save method of CreateUpdateAjaxMixin
formdata.append("asyncUpdate", "True");
$.ajax({
type: $(settings.modalForm).attr("method"),
url: $(settings.modalForm).attr("action"),
data: formdata,
contentType: false,
processData: false,
success: function (response) {
var body = $("body");
if (body.length === 0) {
console.error("django-bootstrap-modal-forms: <body> element missing in your html.");
}
body.prepend(asyncSettings.successMessage);
// Update page without refresh
$.ajax({
type: "GET",
url: asyncSettings.dataUrl,
dataType: "json",
success: function (response) {
// Update page
$(asyncSettings.dataElementId).html(response[asyncSettings.dataKey]);
// Add modalForm to trigger element after async page update
if (asyncSettings.addModalFormFunction) {
asyncSettings.addModalFormFunction();
}
if (asyncSettings.closeOnSubmit) {
$(settings.modalID).modal("hide");
} else {
// Reload form
$(settings.modalID).find(settings.modalContent).load(settings.formURL, function () {
$(settings.modalForm).attr("action", settings.formURL);
addEventHandlers(settings);
});
}
}
});
}
});
}
}
};
var validateAsyncSettings = function (settings) {
var missingSettings = [];
if (!settings.successMessage) {
missingSettings.push("successMessage");
console.error("django-bootstrap-modal-forms: 'successMessage' in asyncSettings is missing.");
}
if (!settings.dataUrl) {
missingSettings.push("dataUrl");
console.error("django-bootstrap-modal-forms: 'dataUrl' in asyncSettings is missing.");
}
if (!settings.dataElementId) {
missingSettings.push("dataElementId");
console.error("django-bootstrap-modal-forms: 'dataElementId' in asyncSettings is missing.");
}
if (!settings.dataKey) {
missingSettings.push("dataKey");
console.error("django-bootstrap-modal-forms: 'dataKey' in asyncSettings is missing.");
}
if (!settings.addModalFormFunction) {
missingSettings.push("addModalFormFunction");
console.error("django-bootstrap-modal-forms: 'addModalFormFunction' in asyncSettings is missing.");
}
if (missingSettings.length > 0) {
return false;
}
return true;
};
$.fn.modalForm = function (options) {
// Default settings
var defaults = {
modalID: "#modal",
modalContent: ".modal-content",
modalForm: ".modal-content form",
formURL: null,
errorClass: ".invalid",
submitBtn: ".submit-btn",
asyncUpdate: true,
asyncSettings: {
closeOnSubmit: false,
successMessage: null,
dataUrl: null,
dataElementId: null,
dataKey: null,
addModalFormFunction: null
}
};
// Extend default settings with provided options
var settings = $.extend(defaults, options);
this.each(function () {
// Add click event handler to the element with attached modalForm
$(this).click(function (event) {
// Instantiate new form in modal
modalForm(settings);
});
});
return this;
};
}(jQuery));
Okay, what I have here is a Ajax delete record. I've tried to add jquery dialog-confirm instead of using javascript confirm. The delete function works but the problem is the animation of deleting row was not working.
Here's what I have right now. http://jsfiddle.net/altaire/YJC44/
Any help will appreciate. Thanks!
Php
while($row = $result->fetch_assoc()){
echo'<tr class="records">';
echo'<td>'.$i++.'</td>
<td align="center"><img src="images/del.png" border="0" width="10" height="10" title="Delete"></td>
<tr>;
Jquery/Ajax
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".records").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow", function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
You have to add a js as "//code.jquery.com/ui/1.11.0/jquery-ui.js". see below demo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500},5000);
});
</script>
</head>
<body>
<div id="effect"style="border:1px solid red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Try this
$('a[name="'+del_id+'"]').parents(".records")...
instead of $(this).parents(".records")...
You are trying to animate the $("#dialog") if you use $(this).
DEMO : http://jsfiddle.net/yeyene/YJC44/1/
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
//alert(del_id);
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {
// $(this).parents(".records")
$('a[name="'+del_id+'"]').parents(".records")
.css({'background': '#fbc7c7'})
.animate({
opacity: 0
}, 1000, function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
Never used jquery modals before and I can't quite get this to work. Any suggestions?
I'm getting "undefined is not a function" for "$('#dialog').dialog({"
Here's my HTML:
<div id="dialog" title="Enter your Email Address">Please enter your email address</div>
Here's my JS:
$(".input").click(function() {
console.log("Notify Me");
var emailAdd = $(".form").val();
if (emailAdd.length <5) {
$(function(){
// jQuery UI Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
$(location).attr('href',$(this).dialog('option', 'anchor'));
return true;
},
"No": function() {
$(this).dialog("close");
return false;
}
}
});
$('.closebutton').click(function(){
$('#dialog').dialog('option', 'anchor', $(this).attr('href'));
$('#dialog').dialog('open');
return false;
});
});
} else {
Some function
}
Try like
$(function(){
$(".input").click(function() {
console.log("Notify Me");
var emailAdd = $(".form").val();
if (emailAdd.length <5) {
$( "#dialog" ).dialog();
}
});
});
Working Fiddle
DEMO
$(document).ready(function ()
{
$("#btnShowSimple").click(function (e)
{
ShowDialog(false);
e.preventDefault();
});
$("#btnShowModal").click(function (e)
{
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e)
{
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
My view I want to check file if it bigger than 500 kb give for example alert()
<img src="#Model.Value" width="95" height="80" id="down-load" data-id="#Model.Key" data upload="#Url.Action("AddPreview", "Images")" />
(function ($) {
$("[data-id]").each(function () {
var $this = $(this);
$($this).upload({
name: 'attachments',
action: $this.data("upload"),
enctype: 'multipart/form-data',
params: {},
autoSubmit: true,
onSubmit: function () { },
onSelect: function () {
var size = $('#down-load')[0].files[0].size;//do not work
},
onComplete: function (e) {
if (e.charAt(0) != '[') {
$.fn.showUserActionNotification(e, true);
return;
}
var data = JSON.parse(e);
if (data[0].Error) {
$.fn.showUserActionNotification(data[0].Error, true);
}
else if (data[0].Preview) {
$this.attr("src", data[0].Preview);
}
}
});
$this.parent().find("input").css("cursor", "pointer");
});
})(jQuery);
I want to get size on function onSelect to check it on big
Is any body can help me?
I have done function
var imageSize = function (e) {
return $.map(e.files, function (file) {
var name = file.name;
var size = file.size;
if (size > 512000) {
var alert = $(".valid-size-goods").text(name + ": " + (size / 1024).toFixed(2) + " kb");
alert.dialog({
title: alert.attr("dlgTitle"),
modal: true,
resizable: false,
buttons: [{ text: alert.attr("btn"), click: function () { $(this).dialog("close"); } }]
}); return false;
}
return true;
});
};
and put it to onSelect:imageSize(e)