We Keep Coding

Loading html inside sweet alert?

Here is my code for callling Swal:
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "{{ asset('media/photos/loaderspin.gif') }}",
showConfirmButton: false,
allowOutsideClick: false
});
$.ajax({
type: 'POST',
url: '/' + target,
data: {
data: true
},
success: function(response) {
window.swal({
type: 'info',
width: 900,
padding: '3em',
html: response,
showCloseButton: true,
focusConfirm: false,
});
},
error: function(response) {
}
});
Basically I'm making an ajax request that does a return view('index', compact('data')); in the controller.
The html that I'm trying to load inside Swal has a <script src="my-file.js"></script> inside it, but it does not get loaded when Swal is fired, so no events get fired when I click inside.
I've tried looking in the docs but I can't find anything. How will I get swal to load that file?

I was able to solve this by adding this line inside the success block:
$.getScript('my-file.js')

Why does my jquery modal stop working after full page ajax load?

Ive discovered that I have an issue with the jQuery dialog (using jquery 1.3 , pretty old but I cannot update it).
When I do
var request = $.ajax({
url: "${Request.context}/info/" + userId,
success: function(response) {
$("#userInfo").html(response);
}
});
$("#divUserInfo").dialog('open');
}
where
$('#divUserInfo').dialog({
width: 700,
height: 250,
autoOpen: false,
modal: true,
title: "User Info",
resizable: false
});
The dialog itself works fine, opens everytime when it has no content or when I do $("#userInfo").html("any string possible");
But when I load the entire page of the ajax response, I see no error on my console but I cannot re-open the dialog. Is there any way I can avoid that happening? should I reload the DOM or something similar? or extract the body of the response?

You need to re-initialize dialog plugin after replacing DOM with ajax response, so that it works for updated DOM elements as well
Try this:
var request = $.ajax({
url: "${Request.context}/info/" + userId,
success: function(response) {
$("#userInfo").html(response);
$('#divUserInfo').dialog({
width: 700,
height: 250,
autoOpen: false,
modal: true,
title: "User Info",
resizable: false
});
}
});

Maplacejs is duplicating controls when updated

I am using a jQuery plugin called Maplacejs (https://maplacejs.com/) to make Google Maps manipulation easier for me (I am new with this subject).
I first create a variable to set (initialize) Maplace:
var maplace = new Maplace({
map_div: '#mappanel',
controls_type: 'dropdown',
controls_title: 'Select a point:',
controls_position: google.maps.ControlPosition.TOP_LEFT
});
Then I create a function to load the locations in Maplace using ajax, when a certain date is selected in a dropdown menu:
function loadMap() {
$.ajax({
url: 'includes/ajax_getmap.php',
type: 'POST',
cache: false,
timeout: 5000,
data: { date: $('#dateselect').val() },
dataType: 'json',
success: function(data) {
maplace.SetLocations(data.locations, true);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown)
}
});
}
Here is an example of the locations array loaded with ajax:
{"locations":[
{"lat":52.1,"lon":11.3,"title":"Title 1","html":"<h3>Content 1</h3>","zoom":8},
{"lat":51.2,"lon":22.2,"title":"Title 2","html":"<h3>Content 2</h3>","zoom":8},
{"lat":49.4,"lon":35.9,"title":"Title 3","html":"<h3>Content 3</h3>","zoom":8},
{"lat":47.8,"lon":15.6,"title":"Title 4","html":"<h3>Content D2</h3>","zoom":8}
]}
And here is the code used to "call" the function (list of dates):
$('#dateselect').selectmenu({
style: 'dropdown',
change: function(event, data) {
loadMap();
}
});
The problem is: everytime this function is called, controls get duplicated in the map. Here is an example image after I call the function 3 times:
I already tried to create the maplace variable inside the ajax "sucess" event, and even set the variable to "null" or "undefined", but without sucess :(
Please, can you help me?

For whom have the same problem, it was an issue and was fixed by latest version 0.2.8 (March 2017). Download last version here.

Uncaught TypeError: Object function (a,b) - Javascript

I am receiving the following error in Chrome's Console while using a modal overlay jquery plugin called "Fallr."
Object function (a,b){return new e.fn.init(a,b,h)} has no method 'fallr'
It cites line 43 of another .js file that I have that leverages the Fallr framework, and the several lines before, during, and after this line are below. Line 43 is the first instance of $.fallr('show', {
$.ajax({
type: "POST",
url: "insert.php",
data: dataString,
dataType: 'json',
success: function(output) {
if (output.return_val === 1) {
$.fallr('show', {
buttons: {},
content: '<h4>Yay!</h4><p>Your link has successfully been shared.</p>',
position: 'center',
autoclose: 3000,
icon: 'check'
});
} else {
$.fallr('show', {
buttons: {},
content: '<h4>Oops!</h4><p>Your link was not posted.</p>',
position: 'center',
autoclose: 3000,
icon: 'error'
});
}
}
});
return false;
});
});​
​
How can I fix this error? It is causing chronological issues with all of the buttons on my page, whereby the Fallr method stops firing for one or two buttons once certain other buttons are pressed.

Open ajax jstree results in popup window

Ok, so I spent a lot of time getting jstree to open in a dialog box upon a successful ajax call. Now they want a popup window instead. Seems like it should be easy, but my window gives a 404 error. I'm using Grails, btw. Here's the current code (re-typing, so forgive any syntax errors):
$.ajax({
type: 'POST',
url: 'resultsView/viewAsdf'
traditional: true,
data: {
documentID: contentID
},
success: function (data) {
var data1 = {'data':data}
var $genericDialog = $("#genericDialog");
$genericDialog.jstree({
"html_data": data1
[snip]
}),
$genericDialog.dialog({
title: "ASDF"
modal: true,
height: 700,
width: 450,
buttons: {
"OK": function() {$genericDialog.dialog("close");}
}
});
}
});
So now my question is how do I substitute a window for what's currently the dialog box? What would the url of the window be, since I've already called the url in the ajax method?