I have created this partial view as a pop-up to enable the user to edit the date and save. Kendo date picker fails on Edge browser. All the date fields turn blank when opened in this particular browser(when date picker already has a date assigned to it).Works fine in all the other browsers like Chrome, Mozilla and IE. Kendo UI version is v2013.3.1119.
Can you please suggest any fix?
<script type="text/javascript">
// This method opens the popup window.
function EditMiscDates() {
$('#edit-dca-misc-dates-div').kendoWindow({
width: "1100px",
title: "Milestone Dates",
actions: ["Close"],
draggable: false,
modal: true,
resizable: false,
activate: function () {
// set focus to the first control
$("#mcd-code-check-scheduled").focus();
}
});
// Center the window and open it
$('#edit-dca-misc-dates-div').data("kendoWindow").center();
$('#edit-dca-misc-dates-div').data("kendoWindow").open();
}
function OnMiscDatesSuccess(data) {
//console.log('OnMiscDatesSuccess called.');
// If the service returned with an error message, show the message to the user
if (!data.IsValid) {
console.log("Error (" + data.Messages + ")");
// Allow the user to retry
EnableMiscDatesClose(true); // let them close the window
$("#error-text-misc-dates").html("An error occurred: " + data.Messages);
$("#error-text-misc-dates").show();
return;
}
// The method successfully executed so we can close the popup window and reload the main page.
CloseMiscDatesPopup();
// Redirect back to the Index page to reload the data
window.location = '#Url.Action("Index", "Dca", new { id = Model.OrderId })';
}
// This method allows us to enable or disable the close button on the main window
function EnableMiscDatesClose(enable) {
$('#edit-dca-misc-dates-div').parent().find(".k-window-action").css("visibility", (enable ? "" : "hidden"));
}
// Handle the user clicking the cancel button
function CloseMiscDatesPopup() {
EnableMiscDatesClose(true);
$("#error-text-misc-dates").hide(); // Hide error message (if exists)
$('#edit-dca-misc-dates-div').data('kendoWindow').close();
}
function GetMiscDatesJson() {
// Note: Something prepends "step_" to the front of every id (with the odd exception of the Kendo controls). So I have to
// manually make the ajax call to submit the form (or it can't match the field names with the model parameters)
var orderId = $("#step_mcd-order-id").val();
var mcdCodeCheckScheduled = $("#mcd-code-check-scheduled").data("kendoDatePicker").value();
mcdCodeCheckScheduled = kendo.toString(mcdCodeCheckScheduled, "MM/dd/yyyy");
var o = {
OrderId: orderId,
CodeCheckScheduled: mcdCodeCheckScheduled
};
return o;
}
// This method validates the data entered by the user.
// If it is invalid, it shows a detailed error message; otherwise it submits the form via ajax
function ValidateAndSubmitMiscDates() {
var d = GetMiscDatesJson();
var s = JSON.stringify(d);
console.log(s);
// Submit the form via ajax
$.ajax({
type: 'POST',
url: '#Url.Action("SaveConversionMiscDates", "Dca")',
dataType: 'json',
data: s,
contentType: 'application/json; charset=utf-8',
success: function (data) {
console.log('success!');
OnMiscDatesSuccess(data);
},
error: function (xhr, status, error) {
console.log('error!');
EnableMiscDatesClose(true); // let them close the window
$("#error-text-misc-dates").html("An error occurred: " + error);
$("#error-text-misc-dates").show();
}
});
}
</script>
<div id='edit-dca-misc-dates-div' style='display:none'>
<div class="k-block k-error-colored" id="error-text-misc-dates" style="display: none"></div>
<div class="mcd-label">Scheduled</div>
#Html.Kendo().DatePicker().Name("mcd-code-check-scheduled").Value(Model.CodeCheckScheduled)
</div>
<div style="padding-top:6px;text-align:right">
<button class="k-button" onclick="ValidateAndSubmitMiscDates()">Save</button>
Cancel
</div>
Fixed in the latest build: 2015.2.902.545
Related
I have a working UI Auto complete with jQuery. I wanted to change the way it worked. Instead of a new browser tab opening with the user selects a value from the list I wanted the user to first pick a value then click a search button to trigger the event.
It works but if you perform a search and then a second search it will trigger the previous URL and new URL at the same time. Also if you perform a search then click the search button without typing anything into the search input it triggers the previous search. Weird right? I'll add my code but I think a codepen example will help clarify what I mean.
The other issue I was having is I am trying to set up a custom alert if the value typed is not in the array but I get the invalid error message no matter what I type. I added that as well in the code. It is one of the if statements.
JS
var mySource = [
{
value: "Google",
url: "http://www.google.com"
},
{
value: "Yahoo",
url: "https://www.yahoo.com"
},
{
value: "Hotmail",
url: "https://hotmail.com"
},
{
value: "Reddit",
url: "https://www.reddit.com"
}
];
//Logic for ui-autocomplete
$(document).ready(function() {
$("input.autocomplete").autocomplete({
minLength: 2,
source: function(req, resp) {
var q = req.term;
var myResponse = [];
$.each(mySource, function(key, item) {
if (item.value.toLowerCase().indexOf(q) === 0) {
myResponse.push(item);
}
if (item.value.toUpperCase().indexOf(q) === 0) {
myResponse.push(item);
}
//Add if statement here to determine if what the user inputs is in the
// array
//and if not in the array give an error to #textAlert.
//Example
if (item.value.indexOf(q) != myResponse) {
$('#alertText').text("Invalid Search");
} else {
return false;
}
});
resp(myResponse);
},
select: function(event, ui) {
$('#appSearchBtn').one("click", function() {
window.open(ui.item.url);
$('#appsearch').val('');
return false;
});
}
});
});
//Input and ui text clears when clicked into
$(document).ready(function() {
var input = document.querySelector('#appsearch');
var ui = document.querySelector(".ui-helper-hidden-accessible");
input.onclick = function() {
input.value = '';
ui.textContent = '';
};
});
HTML
<p id="alertText"></p>
<div class="input-group">
<input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
<span class="input-group-btn">
<button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
</span>
</div>
Here is a Code pen https://codepen.io/FrontN_Dev/pen/MEmMRz so you can see how it works. I also added how it should work and what the bugs are.
9/29/17 #0732
I resolved the issue with the event firing the same URL over and over but I still need help with the custom invalid search message that appears for every search even if the value is in the array.
I have a page that will make an external call on a button click, and then update the button to reflect success. The ajax calls work properly, however I am having difficulty trying to manipulate the text of the button when there are many on the page.
It is easy enough to match using $(".sabPauRes.ui-btn-text").text("Updated"); when it's the only item on the page, but I am not sure how to point to it using $(this) when I am using the each function. I read a bit about 'closest', but it doesn't seem to accomplish what I want (or I'm just doing it wrong).
Code sample below!
$(document).ready(function(){
$('.sabPauRes').each(function() {
$(this).click(function(event) {
event.preventDefault();
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: onSuccess
})
})
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
})
function onSuccess(data)
{
// validate the result of the ajax call, update text, change button methods as needed
if (data == "Success") {
// PROBLEM -- how do I use $this to match a class that is nested within it?
$(this).closest(".ui-btn-text").text("Updated");
} else {
alert("Failed: " + data);
}
$("#resultLog").html("Result: " + data);
}
})
})
html
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible">
<h3>This is an item</h3>
<p>
Resume Download
<div id="resultLog"></div>
</p>
</div>
</div>
</body>
Found the answer within Change button text jquery mobile
If you assign $(this) to a variable, then you can reference it in the .text() function as shown below:
$(document).ready(function(){
$('.sabPauRes').each(function() {
$this = $(this);
$(this).click(function(event) {
event.preventDefault();
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: onSuccess
})
})
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
})
function onSuccess(data)
{
// validate the result of the ajax call, update text, change button methods as needed
if (data == "Success") {
alert(data);
$(".ui-btn-text",$this).text("Updated");
} else {
alert("Failed: " + data);
}
$("#resultLog").html("Result: " + data);
}
})
})
First things first. Please stop using jquery ready handler when working with jQuery Mobile. Give your page an id and use pageinit() event instead.
pageinit = DOM ready
One of the first things people learn in jQuery is to use the
$(document).ready() function for executing DOM-specific code as soon
as the DOM is ready (which often occurs long before the onload event).
However, in jQuery Mobile site and apps, pages are requested and
injected into the same DOM as the user navigates, so the DOM ready
event is not as useful, as it only executes for the first page. To
execute code whenever a new page is loaded and created in jQuery
Mobile, you can bind to the pageinit event.
You can save a ref to the clicked button and use it in success and error handlers like this:
$(document).on("pageinit", "#page1", function(){
$(document).on("click", "a.sabPauRes", function(event){
event.preventDefault();
//Save a ref to the clicked button
$this = $(this);
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: function (data){
// validate the result of the ajax call, update text, change button methods as needed
if (data == "Success") {
$this.find(".ui-btn-text").text("Updated");
} else {
$this.find(".ui-btn-text").text("Failed");
}
$("#resultLog").html("Result: " + data);
},
error: function(jqXHR, textStatus, errorThrown) {
$this.find(".ui-btn-text").text("Error");
$("#resultLog").html("Error Calling: " + $this.attr("href") + "<br />HTTP Code: " + jqXHR.status + " " + jqXHR.statusText);
}
})
});
});
Here is jsFiddle
I am developing an MVC4 mobile app that uses several forms which are loaded into a section on the layout via ajax. I've got jQuery mobile set with Ajax turned off so I can manage the Ajax myself. Most of the forms work fine, the load and submit via ajax as they should. However, so far there is one form that refuses to fire the form submit and submit the form via ajax like the rest. First, the form is loaded when a user clicks to add a contact and this works fine:
// Handle the add contact button click
$('#btnAddNewContact').on('click', function (e) {
e.preventDefault();
// Make sure a location was selected first.
var locationID = $('#cboLocation').val();
if (locationID.length === 0) {
//$('#alertTitle').text('REQUIRED');
$('#alertMsg').html("<p>A Contact must be associated with a Location.</p><p>Please select or add a Location first.</p>");
$('#alertDialogDisplay').click();
} else {
SaveOpportunityFormState();
$.cookie('cmdLocationId', locationID, { path: '/' });
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'GET',
cache: false,
success: function (response, status, XMLHttpRequest) {
$('section.ui-content-Override').html(response);
// Refresh the page to apply jQuery Mobile styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
},
complete: function () {
$.cookie('cmdPreviousPage', '/Opportunity/Add', { path: '/' });
AddContactLoad();
ShowSearchHeader(false);
$.mobile.loading('hide');
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
Notice that after successfully loading the form the AddContactLoad() function is fired. This works fine and here is that code:
function AddContactLoad() {
$('#contactVM_Phone').mask('(999) 999-9999? x99999');
$('#frmAddContact').on('submit', function (e) {
e.preventDefault();
if ($(this).valid()) {
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'POST',
cache: false,
data: $(this).serialize(),
success: function (response, status, XMLHttpRequest) {
if (!response) { // Success
ReturnToAddOpportunity();
} else { // Invalid Form
$('section.ui-content-Override').html(response);
// Force jQuery Mobile to apply styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
AddContactLoad();
$.mobile.loading('hide');
}
},
complete: function () {
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
$('#btnCancel').on('click', function (e) {
e.preventDefault();
// See where add contact was called from.
var previousPage = $.cookie('cmdPreviousPage');
if (previousPage.indexOf("Detail") >= 0) {
ReturnToOpportunityDetails();
} else {
ReturnToAddOpportunity();
}
return false;
});
}
If I click the cancel button, that code is fired so I know this is working too. Here is my form code:
#using (Html.BeginForm("Add", "Contact", FormMethod.Post, new { #id = "frmAddContact" }))
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
-- Form Fields Here --
<div class="savecancel" >
<input type="submit" value="Save" data-mini="true", data-theme="b", data-inline="true" />
Cancel
</div>
}
As you can see the form is named frmAddContact and that is what the AddContactLoad() function is attaching the submit event to. To save my sole I cannot figure out why the form does not submit via the ajax post like every other form in the app. Am I missing some kind of initialization, I just don't know. If anyone can please help I'd really appreciate it!!
As it turns out, I had created a custom unobtrusive Ajax validator for a phone number then copied and pasted it to do the same with a zip code. Unfortunately in the process I forgot to rename a variable and thus an error was occurring in the validation script which caused the problem. In the mean time, if you're reading this, you might take a note of the code here and how to inject HTML into a page via Ajax and jQuery mobile. I've never found this in a book or on the web and it contains some very useful methodology and syntax. On the form submit the reason I'm checking for the empty response is I just return null from the controller to validate the form was valid and the save worked in which case I send them to a different HTML injection i.e. that page they originally came from. If null is not returned I inject that page with the HTML containing the original form and error markup so the user can make corrections then resubmit. I'm also calling a form load method that attaches handlers to the HTML once it's injected into the main page. Hope this helps somebody!
When I add category in controller action I return JSON object:
return Json(new { categoryName = category.Name, isPrimary = isPrim ? "1" : "-1", categoryId = categoryId }, JsonRequestBehavior.AllowGet);
In JS handler function I add item on page:
...
var totalLink = "<li style='color: #bbbbbb;'>" + result.categoryName + "<a class='removeCategoryButton' href='#lnk#'>remove</a></li>";
var lnk = '#Url.Action("RemoveCategoryFromLocation", "Location", new{locationId = Model.Location.TicketId, categoryId=-1})';
totalLink = totalLink.replace('#lnk#', lnk);
totalLink = totalLink.replace('-1', result.categoryId);
$('#otherCategories').append(totalLink);
...
When I click on remove link I call the following function:
$(function () {
$('.removeCategoryButton').click(function (event) {
event.preventDefault();
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function (result) {
if(result.categoryName == 1) {
$(this).closest('li').remove();
}
}
});
return false;
});
});
But I get the following error:
This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.
This error happens only when I add item and want to remove it as soon after add on page. If I refresh page and click on remove link it works without problem.
Just to note when I get the error from above category is removed, so call works it just from some reason pop this error.
You seem to be adding the remove links dynamically and yet you have subscribed to the .click event handler only once when the DOM is ready. So make sure you do it in a lively manner. But since the .live() method is deprecated, depending on the jQuery version that you are using you should use either .delegate() or the .on() methods.
So with the latest version of jQuery it is recommended to use .on():
$(document).on(events, selector, data, handler);
$(document).on('click', '.removeCategoryButton', function () {
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function (result) {
if(result.categoryName == 1) {
$(this).closest('li').remove();
}
}
});
return false;
});
Notice that you no longer need to wrap this in a document.ready callback.
I have a hyper link at the footer of the page which open a form in the jquery Dialog we call it as M1.Than i enter all the information and click on "create " which creates a user. while creating a new user i show small modal( "we call it as M2") saying " Please wait ..some message"
Now my problem is iam not able to display the ("M2")modal saying " Please wait ..some message" while i keeep on creating a new user everytime when i stay on("M1").
first time it is coming ("M1") and next time it doesnot display again .How ever when closing iam destroying and removing the dialog. (It is due to other issue)
here is Code.
<div id="m2" style="visibility:hidden">
<img src="spinningwheel" border="0" align="middle" hspace="20" vspace="5"/> Creating USER...
</div>
$(document).ready(function() {
displaydialog();
});
function displaydialog(){
$('#m2').dialog({
autoOpen: false,
height: 100,
width: 250,
modal: true,
close: function() {
$(this).dialog('destroy');
$(this).remove();
}
});
}
$("#btncreate").click(function (){
$("#m2").removeAttr('style');
displaydialog();
$("#m2").dialog('open');
//get a json request based on data if suceess
if(success){
$("#m2").dialog('close');
}else{
$("#m2").dialog('close');
}
});
#Derby,
$(document).ready(function() {
displaydialog();
});
function displaydialog(){
$('#m2').dialog({
autoOpen: false,
height: 100,
width: 250,
modal: true,
/* close: function() { // No need to Destroy the dialog
$(this).dialog('destroy');
$(this).remove();
}*/
});
}
$("#btncreate").click(function (){
// $("#m2").removeAttr('style');
// displaydialog();
$("#m2").dialog('open');
//get a json request based on data if suceess
// if you are using ajax post, try to close this box as part of response handler ( success/error).
jQuery.ajax({
data : {somekey : somevalue},
datatype: 'json',
error : function(jqXHR, textStatus, errorThrown) {
$("#m2").dialog('close');
},
success : function(data, textStatus, jqXHR) {
$("#m2").dialog('close');
},
type : 'GET',
url : 'dummyURL'
});
/* if(success){
$("#m2").dialog('close');
}else{
$("#m2").dialog('close');
} */
});
You don't have to destroy and create M2 dialog everytime. just call displaydialog() once on document ready, and then just use open and close on the dialog. You are not seeing the dialog because, dialog(close) would be called just after calling your ajax get request ( in case you are using async : true). So, close M2 dialog on success/error from the ajax request.
If you re using ajax to retrieve the new data, the browser will renderize the web again (not loading, renderize it) so you wont have anymore the dom ready. Try to call displaydialog and then open it. It will work. Anyway, there's a better way to do that, i think your problem is logic. But that solution will work.