Open ajax jstree results in popup window - javascript

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?

Related

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

Select2 Plugin not eliminating options based on input

I am trying to work with the Select2 plugin in conjunction with the CodeIgniter framework. After a lot of effort, I managed to get it to work with AJAX data. However, now it has a weird problem. Even after typing in the entire name, the plugin does not eliminate the irrelevant options that do not match with the search term.
The below screenshot depicts this.
http://i.imgur.com/MfLcuf6.jpg?1
The Firebug console looks like this:
http://i.imgur.com/Qvko6mX.jpg
Below is my the Javascript code as well as the code for my controller
Javascript:
$("#mentor-typeahead").select2({
width: "100%",
placeholder: "Enter a mentor name",
maximumSelectionSize: 5,
minimumInputLength: 2,
multiple: true,
ajax: {
url: 'get_mentor_multi_list',
quietMillis: 500,
cache: true,
dataType: 'json',
results: function (data) {
return { results: data };
}
}
});
Controller
function get_mentor_multi_list($query = null)
{
$answer = array(array('id'=>1, 'text'=>'Inigo Montoya'),
array('id'=>2, 'text'=>'Zoey Deschanel'),
array('id'=>3, 'text'=>'Harry Potter'),
array('id'=>4, 'text'=>'Nicole Scherzinger'),
array('id'=>5, 'text'=>'Xerxes Mistry'),
array('id'=>6, 'text'=>'Tom Marvollo Riddle'),
array('id'=>7, 'text'=>'Light Yagami'),
array('id'=>8, 'text'=>'Vic Mackey'),
array('id'=>9, 'text'=>'Clark Kent'));
echo json_encode($answer);
}
I am utterly confused as to what could be causing the problem. I also tried the solution listed here link but to no avail. Any help would be appreciated.
Changed the AJAX call parameters on request but the output remains the same...
$("#mentor-typeahead").select2({
width: "100%",
placeholder: "Enter a mentor name",
maximumSelectionSize: 5,
minimumInputLength: 2,
multiple: true,
ajax: {
url: 'get_mentor_multi_list',
quietMillis: 200,
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10
};
},
results: function (data, page) {
return data;
}
}
You're missing a data function in the ajax part. See Loading Remote Data and Infinite Scroll with Remote Data in the documentation.
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 100,
data: function (term, page) { // page is the one-based page number tracked by Select2
return {
q: term, //search term
page_limit: 10, // page size
page: page, // page number
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
};
},
results: function (data, page) {
var more = (page * 10) < data.total; // whether or not there are more results available
// notice we return the value of more so Select2 knows if more results can be loaded
return {results: data.movies, more: more};
}
}
You're not using the ajax function correctly. It's doing exactly what it's supposed to do and that is to display all of the data returned from your get_mentor_multi_list() function.
In order to do this correctly, your ajax call needs to include a data attribute that includes parameters to be sent to your get_mentor_multi_list() function. get_mentor_multi_list() will then return only the results that your user is looking for.
If the data in get_mentor_multi_list() is static (i.e. not read from any database), you should consider adding it to the data attribute like in the Loading Array Data example here.
Finally, I was able to resolve the problem by myself. The problem lay in the fact that I was using CodeIgniter. Hence whatever variables that were supposed to be passed through the data attribute of the AJAX call weren't actually being passed to the controller.
I resolved this by changing the Javascript code to the following:
JavaScript
$('#mentor-typeahead').select2({
width: "100%",
placeholder: "Enter a mentor name",
maximumSelectionSize: 5,
minimumInputLength: 2,
multiple: true,
ajax: {
url: 'get_mentor_multi_list',
quietMillis: 200,
dataType: 'json',
data: function (term, page) {
return {
searchq: term // set the search term by the user as 'searchq' for convenient access
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
And the controller code to look something like the following:
function get_mentor_multi_list()
{
// model code
$query = trim($_GET['searchq']); // get the search term typed by the user and trim whitespace
if(!empty($query))
{
// retrieve data from database
}
else
{
$answer = array('id' => 0, 'text' => 'No results found');
}
echo json_encode($answer);
}

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.

How can i open a pdf in a popup window with an Ajax call?

So I need to be able to open a pdf that is generated, by a server-side script, based on the html that I send it. The html is a huge string. I was thinking using ajax with widow.open but I can't seem to wrap my head around how.
$.ajax({
type: "POST",
url: "/pdf",
data: {input:html},
success: function(msg) {
window.open(msg)
},
error: function(msg) {
}
});
I thought this would work, but it did not.
You can use a jQuery PDF Viewer plugin. For example, using jsPDF you'll write something like this:
$.ajax({
type : "POST",
url : "/pdf",
data : {
input : html
},
success : function (msg) {
var pdf = new jsPDF();
pdf.text(20, 20, msg);
pdf.output('datauri');
},
error : function (msg) {}
});

Jquery Load particular Div

I am using jQuery UI Modal. I have created common function to create modal dialog.
Below is the code
function createDialogWithClose(sourceDivId, url, targetDivId)
{
var dialog = jQuery(sourceDivId).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
close:function(event,ui){
jQuery(targetDivId).load(url + " " +targetDivId);
}
});
}
Now inside the dialog, I am perfoming some operation which need to reflect in the parent page.
So on close I have written to load that div. which on request set parameter in init() method and on loading it displays new result.
But problem is div get inside the div
Any other way to obtain above steps?
A good way to use $.ajax request
function createDialogWithClose(sourceDivId, url, targetDivId)
{
var dialog = jQuery(sourceDivId).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
close:function(event,ui){
$.ajax({
url: url,
type: "POST",
data: "",
cache: true,
success: function(response){
$("#targetDivId").html(response);
}
});
}
});
}

Categories