Currently i'm working on flowplayer with nimble streaming , i'm returning Url from handler.
By setting up src to handler is successfully redirect to handler but flowplayer is not able to setting up return output of handler(i.e. handler is returning m3u8 URL)..below is the example code
<div>
<input type="button" id="Test" value="click" />
</div><br />
<div>
<input type="button" id="Test2" value="click2" />
</div><br />
<script>
$(function () {
var api = flowplayer("#player", {
splash: true,
embed: { skin: "//releases.flowplayer.org/7.0.2/skin/skin.css" },
ratio: 9 / 16,
seekable: true,
clip: {
live: false,
autoplay: false,
sources: [
{
type: "application/x-mpegurl",
src: "http://xx.xx.xx.xx:8081/videos/fast.mp4/playlist.m3u8"
}
]
},
onload: function () {
alert("player loaded.");
},
})
$("#Test").click(function () {
flowplayer().load("http://xx.xx.xx.xx:8086/vod/edge/camera2/profile16/camera2_profile16_2017-03-02_055323.mp4/playlist.m3u8");
})
$("#Test2").click(function () {
flowplayer().load("http://xx.xx.xx.xx:8081/ProxyDemo/ReverseProxy.ashx");
})
})
</script>
Related
I've been trying to make something like an infinite scroll work but with no success. And after searching a lot around the web i'm asking the question myself.
About the code,
In the masterPage.Master i've put:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
On another page in the code behind i have a method like this that is going to be called by the script:
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static List<agendaList> GetEvents(int startAt, int howMany)
{
...
return eventsListNew.OrderByDescending(p => p.data).Skip(startAt).Take(howMany).ToList<agendaList>();
}
In the page i added the script:
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height()-$(window).height()) {
GetEvents();
}
});
});
function GetEvents() {
var howMany = 10;
var startAt = $(".mason_script").size();
console.log(startAt);
PageMethods.GetEvents(startAt, howMany);
}
function OnGetPostsComplete(Events) {
for (var i = 0; i < Events.length; i++) {
$("#list_eventos_content").last().append("<ul>"+
Events[i].title + "</h2><p>" +
Events[i].data + "</p></div>" + "</ul>");
}
}
</script>
It says PageMethods is not defined!
Specifically in the console i get:
Uncaught ReferenceError: PageMethods is not defined
I tryed using the ajax method but with no success either:
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var howMany = 10;
var startAt = $(".mason_script").size();
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
//GetEvents();
console.log(startAt);
$.ajax({
type: "POST",
//async: true,
url: "default.aspx/GetEvents",
//url: '<%= ResolveUrl("ConsultaPedidos.aspx/GetClients") %>',
//data: {startAt:startAt,howMany:howMany},
data: JSON.stringify({ startAt: startAt, howMany: howMany }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert("success"); },
error: function () {alert("it was not a success");}
});
}
});
});
</script>
I think the website is already ajax enabled because it's done with visual studio 2010 and i think i have all the necessary bins (i even added System.Web.Extensions.dll to project)
I don't know if this helps to find the problem, but inside the source code after the body element i have the following:
<body id="body" class="home">
<div>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDDxYCHgVjbGFzcwUEaG9tZRYCAgEPZBYIAgQPFgIeB1Zpc2libGVoZAIFD2QWBAIDDxYCHwFoZAIFDxYCHwFoZAIIDxYCHwFoZAIJD2QWAmYPFgIfAWhkZHECEx2bRG9W3HRdtf7e7U4T5JxcYTUIOFqhiAfLIgzr" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=eTLIdTUaKcPvbbHq3uBMJMuE5EuUKGo_QXsf5WdWsog2Gpmfy9qkIK_-y74XUCFlxJFADxQgAgshTA379vvKJGJvi4Ikqiv1yEvS7hpyqVc1&t=635918767619348548" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=qkRHwPohnv0qxNzn-8f9Xk8Z0dBG23n8MDuOOCYf4anPCmyRNRWeCNNgCauDnRlVqW5NKLUOVIfNjW56x6pHNSKmtX7CBH7SpCqDvmzy-NHrCoITbgWSVLGcKILzzGQ1Qlpwpc9IIxnLVQ51v9Kz9DCgKlPHgukhQEeDMmKkQtiLHT1xZPJVocodYa8aG11L0&t=40eb3b32" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Falha ao carregar estrutura ASP.NET Ajax do lado do cliente.');
//]]>
</script>
<script src="/ScriptResource.axd?d=gU20UmsqL_uPpdXkHzmyFnlCqFiRG-TM2_Qv0ZALZUtlYUJwYdUdoCXOyXFrEkZWVT92wbL9D1m0HngfHHZW6U8GVV-j6jTKDIjQ4UrIHIXmsJyijp8fEm7m7Qeq-8buVg1yHzCv2Zqt_ktAHum363tvYlDt3B2fmD8Q3YF2jvkK8HbizNFHmiEcaIil3BlR0&t=40eb3b32" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAALKL6JprTutrB5uCf6KA5FA2RsWv7CsEAlbyK1tt2kzFFESTmnJ8bzYWS2HmzbItmQmobFjEmOUyk9VeVTmAEW9" />
</div>
<input type="hidden" name="ctl00$hidMenu" id="hidMenu" value="menu_home" />
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>
Only then comes the rest of the page and the script that calls the PageMethod.
Thanks
I have a page with a form per "Order". Each "Order" has multiple "items". Also, each form has an anchor tag "Mark as Shipped" that does a jQuery Ajax post. This post will mark "Order" as shipped and return the orderID to the view. On success of post I remove the form associated to the "Order" that was just marked shipped. This is all working great. Here is where the problems start. When I click "Mark as Shipped" for the second "Order" in the list, the ViewModel is passed to the controller as null. I do notice that the orderID is still being picked up by my js code on click of the anchor tag. Any suggestions would be greatly appreciated! I'm pulling my hair out here.
Here is my javascript:
<script type="text/javascript">
$(function () {
$(".MarkAsShipped").click(function () {
var valid = true;
var orderNumber = $(this).attr("data-id");
var formID = "#" + orderNumber;
if (valid) {
$.ajax({
url: "/NeedsShipped/MarkAsShipped",
type: "POST",
data: $(formID).serialize(),
success: function (data, textStatus, jqXHR) {
// remove the form for this order
$(formID).remove();
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
});
});
Each form has a list of items in it. Here is the part of my view that creates the forms.
if (#Model.Count() > 1)
{
for (int i = 0; i < Model.Count(); i++)
{
using (Html.BeginForm(null, null, FormMethod.Post, new { id = #Model[i].OrderID, name = #Model[i].OrderID }))
{
<br />
<div class="roundedDivVendor">
<div id="contactInfo" style="float:left; padding-left:5px; border-right:thin solid black; width:300px;">
<span style="font-weight:bold;">Order Number: </span>
#Model[i].OrderID<br />
<span style="font-weight:bold;">Ship To:</span><br />
#Model[i].FirstName.ToString()<span> </span>#Model[i].LastName.ToString()
<br />
#Model[i].Address1
#Html.HiddenFor(m => m[i].OrderID)
<br /><br />
</div>
<div id="itemsToShip" style="padding-left:20px;">
<span style="font-weight:bold; padding-left:5px;">Items to Ship: </span><span style="padding-left:450px;">
Mark as Shipped</span><br />
#for (int x = 0; x < #Model[i].OrderItems.Count(); x++)
{
#Html.HiddenFor(m => #Model[i].OrderItems[x].OrderProductsID)
#Html.CheckBoxFor(m => #Model[i].OrderItems[x].isShipped)
#Model[i].OrderItems[x].ShortDescription
<br />
}
</div>
<div style="clear:left;"></div>
</div>
<br />
}
}
In the controller I return OrderID as Json:
return Json(order.OrderID, JsonRequestBehavior.AllowGet);
I am very new to both JQuery and Asp.net MVC 3 (C#), so I apologize if this is trivial. I have an MVC partial view (Index.cshtml) that has a list of tasks. These tasks are contained within indivudal divs that I have in a list style layout. I have a button called "add task" that opens a dialog. This dialog will save the added task to the database via an AJAX Json call to the controller.
This is where I am having trouble - after the dialog closes I would like the list of tasks to reload with the task i just added. I have found examples where the entire page is reloaded, and I found examples where the controller is supposed to return a rendered view. My problem is that the dialog is being opened from the partial I want to reload. Is there a way to accomplish what I am trying to do.
Index.cshtml
#model IEnumerable<TaskManagementApplication.Models.Project>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="ProjectAccordionWrapper">
#foreach (var item in Model)
{
<div class="ProjectWrapper">
<h3>#item.Name</h3>
<div class="column">
<button class="createTaskButton" id="#item.ProjectID">Create New Task</button>
#foreach(var task in item.Tasks) {
var buttonClass = "taskID" + task.TaskID;
<div class="portlet">
<div class="portlet-header">#task.TaskName</div>
<div class="portlet-content">#task.TaskDescription</div>
<button class="editTaskButton" id="#task.TaskID">Edit Task</button>
</div>
}
</div>
</div>
}
</div>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="TaskName">Task Name</label>
<input type="text" name="TaskName" id="name" class="text ui-widget-content ui-corner-all" />
<label for="TaskDescription">Task Description</label>
<input type="text" name="TaskDescription" id="description" value="" class="text ui-widget-content ui-corner-all" />
<input type="hidden" name="TaskID" id="ID" />
<input type="hidden" name="ProjectID" id="ProjectID" />
</fieldset>
</form>
</div>
Partial Javascript
function GetTask(id) {
if (id.length > 0) {
$.ajax({
url: '/Project/GetTaskFromID',
type: "POST",
data: { "id": id },
success: PopulateDialogFields,
error: HandleError
});
}
}
function PopulateDialogFields(data) {
$("#name").val(data.TaskName);
$("#description").val(data.TaskDescription);
$("#ID").val(data.TaskID);
}
function HandleError(data) {
alert(data.error);
var foo = data;
}
function SaveTask() {
var taskName = $("#name").val();
var taskDescription = $("#description").val();
var id = $("#ID").val();
var projectID = $("#ProjectID").val();
if (id.length > 0) {
$.ajax({
url: '/Project/SaveTask',
type: "POST",
data: { "taskName": taskName, "taskDescription": taskDescription, "taskID": id }
});
}
else {
$.ajax({
url: '/Project/SaveTask',
type: "POST",
data: { "taskName": taskName, "taskDescription": taskDescription, "projectID": projectID }
});
}
}
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"OK": function () {
SaveTask();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
window.location.reload(true);
},
open: function () {
var id = $(this).data("id");
var projectID = $(this).data("projectID");
$("#ProjectID").val(projectID);
var button = $("#" + id);
GetTask(id);
}
});
$(".editTaskButton")
.button()
.click(function () {
$("#dialog-form").data('id', this.id).dialog("open");
});
$(".createTaskButton")
.button()
.click(function () {
$("#dialog-form").data('projectID', this.id).dialog("open");
});
I am relatively new to jQuery and ASP.NET MVC as well, however, here's what first comes to mind.
In order to maintain the AJAX-y aspect of the page, I suggest that you create a method that handles a POST which returns a JSON formatted set of TaskManagementApplication.Models.Project. This method can optionally return filtered results.
The markup would look like this,
<div id="ProjectAccordionWrapper">
<div id="ProjectWrapperTemplate" class="ProjectWrapper" style="display: none;">
<h3 id="itemName"></h3>
<div class="column">
<button class="createTaskButton" id="itemProjectID">Create New Task</button>
<div id="portletTemplate" class="portlet">
<div class="portlet-header" id="taskName"></div>
<div class="portlet-content" id="taskDescription"></div>
<button class="editTaskButton" id="taskID">Edit Task</button>
</div>
</div>
</div>
</div>
Next, you would have jQuery clone the ProjectWrapperTemplate element, and set all of the corresponding fields.
$(function () {
$.ajax({
url: '/Project/GetTasks',
type: "POST",
data: { }
}).done(function (data) {
data.forEach(function (element) {
AppendProjectWrapper(element);
});
});
function AppendProjectWrapper(data) {
var projectAccordionWrapper = $('#ProjectAccordionWrapper');
var projectWrapper = $('#ProjectWrapperTemplate').clone(true, true);
projectWrapper.id = nothing; // remove the id, so as to not have duplicates
projectWrapper.style.display = nothing; // remove the style "display: none"
var itemName = projectWrapper.children('#itemName'); // h3
itemName.id = nothing;
itemName.text(data.ItemName);
var itemProjectID = projectWrapper.children('#itemProjectID'); // button Create New Task
itemProjectID.id = data.ItemProjectID;
var portletTemplate = projectWrapper.children('#portletTemplate'); // div
data.Tasks.forEach(function (element) {
var portlet = portletTemplate.clone();
portlet.id = nothing;
var taskName = portlet.children('#taskName');
taskName.id = nothing;
taskName.text(element.TaskName);
var taskDescription = portlet.children('#taskDescription');
taskDescription.id = nothing;
taskDescription.text(element.TaskDescription);
var editTaskButton = portlet.children('#taskID');
editTaskButton.id = element.TaskID;
portlet.appendTo(projectWrapper);
});
portletTemplate.remove(); // remove the portlet template element
projectWrapper.appendTo(projectAccordionWrapper);
}
}
Finally, have '/Project/SaveTask' return a JSON formatted TaskManagementApplication.Models.Project of the currently saved task.
$.ajax({
url: '/Project/SaveTask',
type: "POST",
data: { "taskName": taskName, "taskDescription": taskDescription, "taskID": id }
}).done(function (data) {
AppendProjectWrapper(data);
});
The return data for '/Project/GetTasks' should look as follows:
[
{
ItemName: '#item.Name',
ItemProjectID: '#item.ProjectID',
Tasks: [
TaskName: '#task.TaskName',
TaskDescription: '#task.TaskDescription',
TaskID: '#task.TaskID'
]
}
]
The return data from '/Project/SaveTask' should follow the same format, except or the outer-most array.
Please note that a lot of this code is untested.
It may be easiest to refactor the list into another action+view. Then, you can call this in both the original Index.cshtml view, and via the .load() method in jQuery. So, assuming this:
Projects controller
[HttpGet]
[ChildActionOnly]
public ActionResult Tasks(int id)
{
// create the appropriate model object as an IEnumerable of your Task type
return View(model);
}
Tasks.cshtml
#foreach(var task in Model) {
var buttonClass = "taskID" + task.TaskID;
<div class="portlet">
<div class="portlet-header">#task.TaskName</div>
<div class="portlet-content">#task.TaskDescription</div>
<button class="editTaskButton" id="#task.TaskID">Edit Task</button>
</div>
}
You would adjust Index.cshtml like so:
#model IEnumerable<TaskManagementApplication.Models.Project>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="ProjectAccordionWrapper">
#foreach (var item in Model)
{
<div class="ProjectWrapper">
<h3>#item.Name</h3>
<div class="column">
<button class="createTaskButton" id="#item.ProjectID">Create New Task</button>
<div id="tasks-#item.ProjectID">
#Html.Action("Tasks", "Project", new { id = item.ProjectID })
</div>
</div>
</div>
}
</div>
//... the rest of the view
And finally,
// this should happen inside the callback of your .ajax() method
$('#tasks-'+projectID).load('/project/tasks/'+ projectID);
I am trying to create an alert as described in this site http://needim.github.com/noty/
and here is the code
<head runat="server">
<title>Test</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<link rel="stylesheet" type="text/css" href="buttons.css" />
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<body>
<div class="container">
<div id="customContainer">
</div>
</div>
<script type="text/javascript">
function generate(type, layout) {
var n = noty({
theme: 'defaultTheme',
text: 'Do you want to continue?',
buttons: [
{
addClass: 'btn btn-primary',
text: 'Ok',
onClick: function ($noty) {
// this = button element
// $noty = $noty element
$noty.close();
noty(
{
text: 'Record deleted !',
type: 'success',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(true); },
onClose: function () { },
afterClose: function () { }
}
});
}
},
{
addClass: 'btn btn-danger',
text: 'Cancel',
onClick: function ($noty) {
$noty.close();
noty(
{
text: 'Record not deleted !',
type: 'warning',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(false); },
onClose: function () { },
afterClose: function () { }
}
});
}
}
]
});
}
function TakeValue(result) {
if (result == true) {
document.getElementById("Hidden1").value = "true";
alert(document.getElementById("Hidden1").value);
} else {
document.getElementById("Hidden1").value = "false";
alert(document.getElementById("Hidden1").value);
}
}
function generateAll() {
generate('information', 'top');
}
</script>
<form id="form" runat="server">
<input id="Hidden1" type="hidden" value="false"/>
<asp:Button ID="Button2" runat="server" Text="Press" OnClientClick="return generateAll();" />
<input id="Button1" type="button" value="button" onclick="return generateAll();" />
</form>
</body>
I have placed two buttons ,one is HTML button while the other is of asp:Button,
The whole scenario just works fine when I use the HTML button ,but the page is not displaying the similar behavior in case of asp:Button click, I have placed a test function in JavaScript to test the OnClientClick event of the asp:Button and that worked fine,but I don't know why this alert is not getting called, I think there is some problem with the Noty JS.
Kindly give feed back
thanks.
As jbabey said in the comments:
an asp:button will cause a postback when clicked by default. you need to return false from the onclientclick, right now you are returning undefined since generateAll has no return.
Since you're using jQuery, I'd go one step further and not directly set the click attribute. Instead, set it using jQuery:
<script>
$(document).ready(function() {
$('#Button1').click(generateAll);
});
...
function generateAll(e) {
generate('information', 'top');
// This will prevent the default action of submitting the form.
e.preventDefault();
}
</script>
Could you please add UseSubmitBehavior="false" attribute to the asp:button.
<asp:Button ID="Button2" runat="server" Text="Press" UseSubmitBehavior="false" OnClientClick="return generateAll();" />
I hope this will resolve your issue. Please let me know whether it helped you or not.
I am developing .NET MVC3 application in which I am using jquery dialog to display some text msg and text area together in pop up with OK Cancel button which is in a div "divForSentToCaseCommentLable". I am calling this dialog on button click "sentToCase".
chtml
<div id="divForSentToCaseComment">
<div id="divForSentToCaseCommentLable" style="display: none">
<b>
#Html.Raw("You are about to send the Alert to the Case Management queue and will be unable to make any further edits.")
<br />
#Html.Raw("Would you like to continue?")
</b>
<br />
#Html.Raw("Reason for status change:")
<br />
</div>
<div id="divShowCommentForStatusNDuedateChange" style="display: none">
#Html.TextArea("StatusDueDateChangeComment", new { #id = "StatusDueDateChangeComment", #name = "StatusDueDateChangeComment", String.Empty, #class = "text-box multi-line", #maxlength = "8000", #onkeypress = "return ImposeMaxLength(this,8000)", #onpaste = "return MaxLengthPaste(this,8000)" })
<div id="StatusCommentValidateMessage" style="display: none" />
</div>
</div>
JQuery
$("#sentToCase").click(function () {
if (isChanged && !isSubmit) {
var conf = confirm("The changes you made have not been saved. \nWould you like to continue?");
if (!conf) {
return false;
}
}
window.onbeforeunload = null;
$("#StatusDueDateChangeComment").val('');
$("#StatusCommentValidateMessage").hide();
$("#divShowCommentForStatusNDuedateChange").show();
$("#divForSentToCaseCommentLable").show();
$('#divForSentToCaseComment').dialog({
autoOpen: false,
resizable: true,
width: 415,
height: 300,
modal: true,
fontsize: 10,
title: 'Reason for send to case',
buttons: {
"Ok": function () {
// var sendToCaseAnswer = confirm("You are about to send the Alert to Cases and will be unable to make any further edits. Would you like to continue?");
// if (sendToCaseAnswer) {
var reasonForClear = $("#StatusDueDateChangeComment").val();
var incidentId = $("#IncidentID").val();
if (validateSatusComment(reasonForClear, "SentToCase")) {
$.blockUI({ message: '<h2><img src="../../Content/images/spinner.gif" />Loading ...</h2>' });
$.ajax({
type: "GET",
data: { incidentId: incidentId, reasonForClear: reasonForClear },
//url: '/Bamplus/AlertAndCaseManager/Alert/SendToCaseStatus',
url: sendToCaseStatusJsonUrl,
dataType: "json",
cache: false,
contentType: "application/json",
success: function (data) {
if (data.redirectTo != null) {
window.location = data.redirectTo;
$.unblockUI({ fadeOut: 200 });
} else {
$('#Messages').show(400);
$("#Messages").html(data.Html);
$.unblockUI({ fadeOut: 200 });
}
},
error: function () {
$.unblockUI({ fadeOut: 200 });
}
});
// }
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
}
}, open: function () {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').removeClass().addClass("Button");
$('.ui-dialog-buttonpane').find('button:contains("Ok")').removeClass().addClass("Button");
}
});
$("#divForSentToCaseComment").dialog("open");
return false;
});
There is another button "watching" which is calling "divShowCommentForStatusNDuedateChange" div in dialog box to display only text area with Ok Cancel button
JQuery:
$("#watching").click(function () {
if (isChanged && !isSubmit) {
var conf = confirm("The changes you made have not been saved. \nWould you like to continue?");
if (!conf) {
return false;
}
}
window.onbeforeunload = null;
$('#divShowCommentForStatusNDuedateChange').dialog({
autoOpen: false,
resizable: false,
width: 350,
height: 220,
modal: true,
fontsize: 10,
title: 'Reason for status change',
buttons: {
"Ok": function () {
var reasonForClear = $("#StatusDueDateChangeComment").val();
var incidentId = $("#IncidentID").val();
if (validateSatusComment(reasonForClear, "Watching")) {
$.blockUI({ message: '<h2><img src="../../Content/images/spinner.gif" />Loading ...</h2>' });
$.ajax({
type: "GET",
data: { incidentId: incidentId, reasonForClear: reasonForClear },
//url: '/Bamplus/AlertAndCaseManager/Alert/WatchingStatus',
url: watchingStatusJsonUrl,
dataType: "json",
cache: false,
contentType: "application/json",
success: function (result) {
if (result.redirectTo != null) {
window.location = result.redirectTo;
$.unblockUI({ fadeOut: 200 });
} else {
$('#Messages').show(400);
$("#Messages").html(result.Html);
$.unblockUI({ fadeOut: 200 });
}
},
error: function () {
$.unblockUI({ fadeOut: 200 });
}
});
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').removeClass().addClass("Button");
$('.ui-dialog-buttonpane').find('button:contains("Ok")').removeClass().addClass("Button");
}
});
$("#StatusDueDateChangeComment").val('');
$("#StatusCommentValidateMessage").hide();
$("#divShowCommentForStatusNDuedateChange").dialog("open");
return false;
});
Problem-
scenario 1:
on page load I click on "watching" button to display "watching pop-up" with only
text area and "OK Cancel button", which is perfect.
Then I press "Cancel button" from "watching pop-up" which will hide "watching pop-up"
Now I go for "sentToCase" button from main page to display "sentToCase pop-up" with text message and text area.
I found that text area is not rendering in "sentToCase pop-up", I can only see text message in "sentToCase pop-up".
scenario 2:
On first page load if I directly click on "sentToCase" button then, "sentToCase pop-up" correctly renders text message and text area with "OK cancel button" which is correct.
I found solution for this problem by referring this post
jquery ui dialog box removes <div> after closing
The problem here is that you have your dialogs nested. The way jQuery dialog works is that it assumes all dialogs must be exclusive. Do not nest your dialogs, and you should be ok.
after separating div's existing code works fine. I done it like this
<div id="divForSentToCaseComment">
<div id="divForSentToCaseCommentLable" style="display: none">
<b>
#Html.Raw("You are about to send the Alert to the Case Management queue and will be unable to make any further edits.")
<br />
#Html.Raw("Would you like to continue?")
</b>
<br />
#Html.Raw("Reason for status change:")
<br />
</div>
<div id="divShowCommentForStatusNDuedateChangeSendToCase" style="display: none">
#Html.TextArea("StatusDueDateChangeComment", new { #id = "StatusDueDateChangeCommentSendTocase", #name = "StatusDueDateChangeComment", String.Empty, #class = "text-box multi-line", #maxlength = "8000", #onkeypress = "return ImposeMaxLength(this,8000)", #onpaste = "return MaxLengthPaste(this,8000)" })
<div id="StatusCommentValidateMessageSendToCase" style="display: none" />
</div>
</div>
<div id="divShowCommentForStatusNDuedateChange" style="display: none">
#Html.TextArea("StatusDueDateChangeComment", new { #id = "StatusDueDateChangeComment", #name = "StatusDueDateChangeComment", String.Empty, #class = "text-box multi-line", #maxlength = "8000", #onkeypress = "return ImposeMaxLength(this,8000)", #onpaste = "return MaxLengthPaste(this,8000)" })
<div id="StatusCommentValidateMessage" style="display: none" />
</div>
but because of separate divs I need to do some extra efforts on validation an all.
Thank you