We Keep Coding

How to use div.load properly when calling for a partial view in another controller?

So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button

Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.

Magnific popup does not work on second page of Datatables

I have created a datatables and add an image column into datatables. When i click image, i would like to image open at popup. It is work on for first page of datatable, however when i passed to second page, it doesn't work. Also i put alert() to test second page event and alert() works, but popup does not.
Please check my snippets: https://jsfiddle.net/f08qdeq2/20/
How can i solve this problem, any ideas? Thank You
$(document).ready(function() {
var table = $('#datatable').dataTable({
aLengthMenu: [
[1, 2],
[1, 2]
],
iDisplayLength: 1
});
});
$(this.document).ready(function() {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
});
});
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
//$('.image-popup-no-margins').magnificPopup({
//Some Working code here
//});
})

You should use fnDrawCallback for initialize your popup. try this...
$(document).ready(function() {
var table = $('#datatable').dataTable({
aLengthMenu: [
[1, 2],
[1, 2]
],
iDisplayLength: 1,
"fnDrawCallback": function () {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
});
}
});
});
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
})
Result : https://jsfiddle.net/cmedina/f08qdeq2/21/

just adding this will work for normal click event, based on this you can do anything with model(pop-up).
$(document).on('click', '.image-popup', function() {
alert('You Clicked Image');
})

Open the Results of Autocomplete in Fancybox

I have the following autocomplete searchbox code
$("#searchbox").autocomplete({
source: function(request,response) {
$.ajax({
type: "POST",
dataType: "json",
data: { term: request.term },
url: "/Settings/Find?searchString="+request.term,
success: function(data) {
response($.map(data,function(item) {
return { label: item.Name ,value: item.Type, ID: item.ID};
}
))
}
})
},
messages: {
noResults: "No Results",results: "Results"
},
select: function(e, ui) {
window.location.assign('/Item/Details/'+ui.item.ID);
}
},
});
When the user clicks on the autocompleted items, I redirect them to the detail page of the item using this
window.location.assign('/Item/Details/'+item.ID);
Now, I want to display the details of the item in a fancybox without redirect the user to another page. So when the user clicks on the autocompleted results, a fancybox opens up with the details of the selected item.
Here is the fancybox code That i would like to call.
$('.fancyboxdisplay').fancybox({
fitToView: false,
autoSize: false,
closeClick: false,
width: '550px',
height:'680px',
padding: 15,
closeBtn:true,
'afterClose': function() {
window.location.reload();
},
});
I looked everywhere for a possible solution but i can't figure it out. Can you please help !
Thanks

Within your select setting, try replacing window.location.assign by the fancybox script like :
select: function (e, ui) {
// window.location.assign('/Item/Details/' + ui.item.ID);
$.fancybox({
href: '/Item/Details/' + ui.item.ID,
type: "iframe",
fitToView: false,
autoSize: false,
closeClick: false,
width: 550,
height: 680,
padding: 15,
closeBtn: true,
afterClose: function () {
window.location.reload();
}
});
}
It's assumed you have previously loaded fancybox js and css files

Passing xhr data to rubaxa fileapi

I am using this api for file upload and need to pass some data dynamically when onFilePrepare event is fired but it is not sending that data to url. Please suggest as I have to add 1 new data param b from onFilePrepare event, which is not avaiable during initially since fileapi is being called from nested ajax setup
https://github.com/RubaXa/jquery.fileapi
CODE :
$('#multiupload').fileapi({
url: "url",
data: ({'a':'A'}),
clearOnComplete: true,
multiple: true,
elements: {
ctrl: { upload: '.js-upload' },
emptyQueue: { hide: '.js-upload' },
list: '.js-files',
name: '.js-name',
size: '.js-size',
file: {
tpl: '.js-file-tpl',
preview: {
el: '.b-thumb__preview',
width: 80,
height: 80
},
upload: { show: '.progress', hide: '.b-thumb__rotate' },
complete: { hide: '.progress' },
progress: '.progress .bar'
}
},
onFilePrepare : function(evt,ui) {
//pass more data dynamically
ui.xhr.options.data = { 'a':'A','b':'B'};
console.log(ui.xhr.options);
},
onComplete : function (evt, ui) {
//read ajax data returned
var data = JSON.parse(ui.xhr.response);
console.log(ui.xhr.options);
}
});

With latest Rubaxa library, this works by doing as below -
Thanks to rubaXa for helping in git
Changes in onFilePrepare
$('#multiupload').fileapi({
url: "url",
data: ({'a':'A'}),
clearOnComplete: true,
multiple: true,
elements: {
ctrl: { upload: '.js-upload' },
emptyQueue: { hide: '.js-upload' },
list: '.js-files',
name: '.js-name',
size: '.js-size',
file: {
tpl: '.js-file-tpl',
preview: {
el: '.b-thumb__preview',
width: 80,
height: 80
},
upload: { show: '.progress', hide: '.b-thumb__rotate' },
complete: { hide: '.progress' },
progress: '.progress .bar'
}
},
onFilePrepare : function(evt,ui) {
//pass more data dynamically
ui.options.data.b = 'B';
},
onComplete : function (evt, ui) {
//read ajax data returned
var data = JSON.parse(ui.xhr.response);
console.log(ui.xhr.options);
}
});

Datatables I can't call an onclick event after I paginate?

I am using http://datatables.net/
The demo table on their homepage resembles pretty much the exact same thing that i'm using (pagination, specifically), except each row has an area to click:
<%= Post.title %>
This link opens a jquery UI modal dialog which displays some information which is ajax requested.
Part 1 (solved), see part 2 below
I'm trying to run an onclick event which works normally on page one, but as soon as i go to page 2 (or any others) it stops working. I checked the source to make sure it wasnt doing anything funny in all the code is infact there (all the rows, even the ones hidden by the pagination)
Any ideas?
$(function() {
$('#dialog').dialog({
autoOpen: false,
resizable: false,
maxHeight: 600,
width: 650,
modal: true,
beforeClose: function close() {
$('#dialog').html('');
}
});
$('.show-post').click(function() {
clickLink(this);
return false;
});
});
Thanks to those who answered my question! I fixed that issue.
Part 2
my next 'issue' id like to get to work is... I'm using the left and right arrow keys to allow them to 'scan' to the next or previous row, and display the information. This is as opposed to closing it and then having to click the next one.
I'd like to make it so when you get to the bottom of page one, or top of page two, hidding next/previous respectively will automatically load that page, go to the top (or bottom), then open that dialog for that row on the other page.
heres my click function (i know its kind of probably not structured the best... im new to jquery)
$(document).ready(function() {
oTable = $('#posts').dataTable({
"bJQueryUI": true,
"iDisplayLength": 400,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]]
});
$(this).keydown(function(e) {
var id = $("#dialog").attr("data-id");
currentPost = $("#posts tr[data-id=" + id + "]");
if (e.keyCode == 39 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).blur()
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var next = currentPost.next().find(".show-post");
clickLink(next);
} else if (e.keyCode == 37 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var prev = currentPost.prev().find(".show-post");
clickLink(prev)
}
});
});
heres the actual click function
function clickLink(src) {
var post = $(src);
var id = $(post).parent().parent().attr('data-id');
/* Set background for current line */
$(post).parent().parent().find("td.sorting_1").addClass("current");
$(post).parent().parent().addClass("current");
$('#dialog').attr("data-id", id);
$('#dialog').load('/show-post/' + id, function() {
$.ajax({
type: "POST",
url: "/checkstatus/" + id,
dataType: "html",
error: function(data){
$("#dialog").fadeOut("fast", function() {
$("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow");
});
}
});
/* Set Visited */
$(post).parent().parent().removeClass("visited").addClass("visited");
$('#dialog').dialog({
title: post.html(),
beforeClose: function close() {
$(post).parent().parent().find("td.sorting_1").removeClass("current");
$(post).parent().parent().removeClass("current");
},
buttons: {
"Email 1": function() {
$.ajax({
type: "POST",
url: "/get-email/" + id + "/" + "1",
dataType: "html",
success: function(data) {
window.location.href = data + "&subject=" + post.html();
}
});
},
}
});
$('#dialog').dialog('open');
});
return false;
};

The example on the link you provided appears to be adding/removing DOM elements, meaning that elements on subsequent pages probably are not in the DOM on page load. Have you tried using event delegation?
$(<root element>).delegate('.show-post', 'click', function() {
clickLink(this);
return false;
});
Where <root element> can be document but should be set to an ancestor element that is always in the DOM.
.delegate():
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Source: http://api.jquery.com/delegate
UPDATE
Note that .delegate() is an alias of .on() now, so if you're using jQuery 1.7+ I would just use .on() right from the get-go. Almost the same syntax except the selector and event are swapped: $(<root element>).on('click', '.show-post', function() { ... });
Source: Thanks Greg Pettit, Excellent Comment

Below Code is working Perfectly. When you click the pagination button 'drawCallback' class Call some function after table load.
$("#YourTableID").dataTable({
bJQueryUI: false,
bFilter: false,
bSearchable: false,
bInfo: false,
bAutoWidth: false,
bDestroy: true,
"oLanguage": {
"sEmptyTable": "No Records Found"
},
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength": 5,
aaData: arrv,
aoColumns: [{
sTitle: "Select",
orderable: false,
className: 'select-checkbox',
targets: 0
},
{
sTitle: "Course name"
}, {
sTitle: "Level"
}, {
sTitle: "Study Mode"
}, {
sTitle: "Entry Year"
}, {
sTitle: "Point of Entry"
}, {
sTitle: "Awarding qualification"
}],
drawCallback: function () {
//Some function...
},
select: {
style: 'os',
background: 'color:gray',
selector: 'td:first-child'
},
order: [[1, 'asc']],
});

As #scrappedcola pointed out in the comments, your click handler is lost after pagination. There is a drawCallback function for DataTables you can implement which will fire after the table is "re-drawn" (hence drawCallback). Here is an example:
$('#someId').DataTable({
lengthMenu: [ 25, 50, 100, 200 ],
order: [[ 0, 'asc' ]],
processing: true,
serverSide: true,
stateSave: true,
responsive: true,
bDestroy: true,
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
],
drawCallback: function() {
var api = this.api();
api.$('#someBtnId').click(function() {
// do some click handler stuff
});
}
});