Why is not working fancybox after check validation in c#?
fancybox is call after use PageMethods.ValidacionIsAdmin(onSuccessValidacionIsAdmin); if it is valid the return of database executed in:
[WebMethod]
public static DeleteAccountResult ValidacionIsAdmin()
{
DeleteAccountResult res = new DeleteAccountResult();
... // Query to database with ok results
res.ok = true;
return res;
}
The ajax call in client to validate it is:
jQuery(".delete a").click(function () {
function onSuccessValidacionIsAdmin(data) {
if (data.ok == true) {
jQuery("#<%= divError.ClientID %>").hide();
jQuery(".delete a").fancybox({
content: jQuery('#eliminar-cuenta').html(),
modal: false,
showCloseButton: false,
onComplete: function () {
jQuery("input[type=checkbox]").uniform()
jQuery('#privacidad').fancybox({
enableEscapeButton: false,
hideOnOverlayClick: false,
showCloseButton: true,
onComplete: function () {
jQuery('#fancybox-close').off().on('click', function (e) {
e.preventDefault();
jQuery(".delete a").click();
});
}
});
}
});
}
else {
jQuery("#<%= divError.ClientID %>").show();
jQuery("#lblError")[0].innerHTML = data.strError;
}
}
PageMethods.ValidacionIsAdmin(onSuccessValidacionIsAdmin);
});
The Behaviour is look like after to push the link which open fancybox don't open it, looks like it "refresh" the web and I push the same link and then it is working...
I readed fancy doesn't work after an ajax call (in my case the c# validation)
My question is: why it happens?
After some hours of investigation, I got the solution. It is curious, in all propierties ineas to write content: ... I replaced as: 'content': ...
I added the property 'type':'html'
After do that the fancybox was working.
jQuery(".delete a").fancybox({
'content': jQuery('#eliminar-cuenta').html(),
'type': 'html',
'modal': false,
'showCloseButton': false,
'onComplete': function () {
jQuery("input[type=checkbox]").uniform()
jQuery('#privacidad').fancybox({
enableEscapeButton: false,
hideOnOverlayClick: false,
showCloseButton: true,
onComplete: function () {
jQuery('#fancybox-close').off().on('click', function (e) {
e.preventDefault();
jQuery(".delete a").click();
});
}
});
}
});
Related
I came across an issue with passing values to jQuery where I want to pass the value from a textbox.
Here is the .cshtml:
#Html.TextBoxFor(m => m.OrderNumber, new { #class = "form-control", id = "orderNumber" })
My script:
function maintenance_tapped(e) {
var data = $('#orderNumber').val();
$("#SapPopUp")
.dialog({
width: 600,
height: 420,
model: true,
buttons: {
"OK": function() {
$.ajax({
url: '#Url.Action("RetrieveOrder", "Home")',
data: data,
type: "POST"
}).done(function() {
$(this).dialog("close");
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
Code in my controller:
[HttpPost]
public async Task<ActionResult> RetrieveOrder(string number)
{
if (_sapHelper == null)
{
_sapHelper = new Helper();
}
return View();
}
My issue is that if I put a breakpoint in the RetrieveOrder function and I check the value of number i get null.
Then if go into Chrome->inspect element->Console and type $('#orderNumber').val(), I get the value I entered into the textbox.
It also seems like its not passing the value into the function.
Try this
dataType :'json',
data: {number: data},
Fixed this thanks to Aleksander Matic and Rob Lang.
Soloution
function maintenance_tapped(e) {
//var data = $('#orderNumber').val(); <------- Remove from here
$("#SapPopUp")
.dialog({
width: 600,
height: 420,
model: true,
buttons: {
"OK": function() {
var data = $('#orderNumber').val(); //<--------- Place here
$.ajax({
url: '#Url.Action("RetrieveOrder", "Home")',
data: data,
type: "POST",
dataType :'json', //<-------- Added
data: {number: data}, //<-------- Added
}).done(function() {
$(this).dialog("close");
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
You can have the value in a javascript object and match the key to your action's parameter name.
This should work.
$.ajax({
url: '#Url.Action("RetrieveOrder", "Home")',
data: {
number: $('#orderNumber').val()
},
type: "POST"
}).done(function() {
$(this).dialog("close");
});
Also, I see you are returning a viewresult from the action method, but not using that in your ajax method call's done/success event handler. What is the point of doing that?
I want to run ASPX page in ASP page.
So I use ajaxSubmit and print to "target div" get from ASPX page like this:
var data = new FormData();
data.append("email", $("#EMAIL").val());
data.append("pass", $("#PASS").val());
data.append("store", $("#STORE").val());
if ($("#STORE").val()!="" && $("#EMAIL").val()!="" && $("#PASS").val()!="") {
e.preventDefault();
$(this).ajaxSubmit({
data: $(this).serialize(),
target: "#formres",
async: true,
global: false,
cache: false,
beforeSubmit: function () {
},
success: function () {
if($("#yu").val()!="yes")
{
setTimeout(function(){
window.location.href = $("#yu").val();
},2000);
}
},
resetForm: false
});
But anything display before process ends.
I think it must be something like "Response.Buffer=false" or "flush()" at jquery too.(I use "cache: false," for this purpose)
I set Reponse.Buffer =false at asp and aspx page.
But it still not working. Could anyone help me?
I'm trying to use Select2 in Razor in ASP.NET MVC. But I can't get work.
$(document).ready(function () {
$(".genreOptions").select2({
tags: true,
ajax: {
url: 'http://localhost:65148/NewProfile/Genres',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
var newData = [];
$.each(data, function (index, item) {
newData.push({
id: item.Id, //id part present in data
text: item.Genre //string to be displayed
});
});
return { results: newData };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1
});
#Html.DropDownListFor(x => x.BandProfile.Genres, Enumerable.Empty<SelectListItem>(), new { #class="genreOptions", multiple = "multiple", style ="width: 100%;"} )
The searching for tags works fine. But when I post the form, the count of the input field Is 0. How can I capture the data from the input form?
#Bryan I build up a javascript array and pass it with ajax to the server. Seems to work ok for my purposes. Perhaps you could try that. The selectors I put below will be different than what you need but here is the general idea...
On Click
$('#submitButton').click(function () {
fillHiddenInput();
var dataToSend = $('#hiddenInput').val();
//Submit the form with ajax or however you want to get dataToSend to server
});
FillHiddenInput function...
var fillHiddenInput = function () {
$('#hiddenInput').val("");
var stuff = [];
$('.ms-selection .ms-list li ul').children('li').each(function (){
if ($(this).hasClass('ms-selected'))
{
stuff.push($(this).children('span').text());
}
});
$('#hiddenInput').val(stuff);
}
Hi I am struggling to display my jtable. It only displays when I step through the javascript with the debugger.
$("body").on("click", "#tabRole", function () {
document.getElementById("1").className = "inactive";
document.getElementById("2").className = "active";
$('#Admin-details').load('../Admin/ADRoleAdmin');
jTableRoles();
});
This method loads ADRoleAdmin as a partial view into a div. Then jTableRoles() should load the jtable into a div (jTableRoles) inside ADRoleAdmin:
var jTableRoles = function () {
$(function () {
debugger;
$('#jTableRoles').jtable({
paging: true,
pageSize: 20,
sorting: true,
title: 'Roles',
onRowEdit: function (event, data) {
UpdateRoleDetails(data.records.RoleId, data.records.RoleName);
},
actions: {
listAction: '../Admin/GetRoles',
updateAction: 'dummy'
},
toolbar: {
items: [{
icon: '../Content/images/Misc/Add icon.png',
text: 'Create New',
click: function () {
UpdateRoleDetails(0, '');
}
}]
},
fields: {
Id: {
key: true,
list: false
},
Name: {
title: 'Role name',
},
Description: {
title: 'Role description',
sorting: false
}
}
});
$('#jTableRoles').jtable('load');
});
}
Please tell me what I am doing wrong or what I can do different to make it work.
Looping through the steps takes extra time.
It looks like the load of ADRoleAdmin is not finished on the moment the jTable is loaded.
Try to start the jtable after a certain timeout to check.
Preferably load the ADRoleAdmin an on it's postback load the jTable
I have main view and open a dialog by using the jquery dialog like below.
function ShowDialog() {
dialog = $('#reassign').dialog({
autoOpen: false,
height: 500,
width: 700,
modal: true,
open: function () {
$('#reassign').load('/ItemsList/Reassign');
}
});
dialog.dialog("open");
}
The content of the dialog is in a PartialView. I have a button on that dialog and I want to call another action to load a list of users. This how I call the action method. But its not getting fired.
$('#searchUser').click(function () {
var search = $('#search').val();
alert(search);
$.ajax({
ur1: '#(Url.Action("Users", "WorkItemsList"))',
type: 'POST',
success: function(result) {
alert(result);
}
});
});
Am I missing something?