I'm displaying an image on my mvc application. The user can click the image and it triggers an ajax call that uses a method on my controller. I would like to display my context menu on ajax success (when user left clicks the image) relative to the position of the image but it's not showing my context menu. Can someone tell me what I'm doing wrong?
This is what I have
<script type="text/javascript">
$(document).ready(function () {
$(".audiobtn").click(function () {
$.ajax({
type: "POST",
url: "/Controller/action",
data: data to pass,
async: false,
cache: false,
success: function () {
$(".audiobtn").mousedown(function (e) {
if (e.button == 0)
{
$("#ContextMenu").css('left', e.pageX + 5);
$("#ContextMenu").css('top', e.pageY + 5);
$("#ContextMenu").fadeIn(100);
}
});
},
error: function (error) {
alert(error);
console.log(error);
}
});
})
$('#ContextMenu').click(function () {
});
})
</script>
<div id="ContextMenu">
Save
</div>
I would also like to hide the context menu if the user click anywhere else in the page or if the user clicks 'Save' in the context menu
Thank you
Related
I have a kendo dialog which I want to populate with a partial view but it's sort of not working.
I want to populate the dialog with the click of a button, so here's my code so far
<div id="dialog"></div>
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var dialog = $("#dialog");
console.log("objId", dataItem.OBJECTID1)
$.ajax({
url: '#Url.Action("SavePartial", "SettlementContract")',
data: {
id: dataItem.OBJECTID1
},
success: function (result) {
if (result != null) {
dialog.html(result);
dialog.data("kendoDialog").open();
}
}
});
}
I tried removing the if condition inside the success, just in case but it's not working either. It returns the partial view, but not inside the kendo dialog, the dialog doesn't even open. What am I doing wrong?
We do this in our application and this is how we have set it up (I updated it to use your controller/actions/ids) - this is using the ASP.NET Core MVC wrappers:
#(Html.Kendo().Window()
.Name("dialog")
.Content("loading...")
.Draggable()
.Actions(actions => actions.Maximize().Close())
.Resizable()
.Modal(true)
.Visible(false)
.Events(e => e.Refresh("onDialogWindowRefresh"))
)
<script>
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
let win = $("#dialog").data("kendoWindow");
win.refresh({
url: "/SettlementContract/SavePartial/",
data: {
id: dataItem.OBJECTID1
}
});
}
function onDialogWindowRefresh(e) {
e.sender.center().open();
}
</script>
I have some tabs (jQuery UI tabs) in the "index.php" of a page. This page not only shows content, but also retrieves the $_GET variable to show some other content below the tabs.
The problem is how to tell jQuery UI that the href (attr of the clicked ) is a value for the key "href" that has to send (GET) to the current index.php page, called in JS has window.location.pathname (I can't use PHP generated JavaScript).
The code is this, and i'm out of options for how to make things work.
jQuery('#front-tab').tabs({
spinner: "Loading...",
select: '#tab-one',
cache: true,
fx: { height: 'toggle', opacity: 'toggle' },
url: window.location.pathname,
ajaxOptions: {
type: 'get',
success: function(){alert('Sucess');},
error: function(){alert('I HAZ FAIL');};
},
dataType: 'html'
}
});
The HTML:
<div id="front-tab">
<ul>
<li><span>Home</span></li>
<li><span>Tab Content 1</span></li>
<li><span>Tab Content 2</span></li>
<li><span>Tab Content 3</span></li>
<li><span>Tab Content 4</span></li>
</ul>
<div id="tab-home">
content...
</div>
</div>
Yep, this gets me full of "I HAZ FAIL" every time I try to load other tabs. The first tab is inline HTML, but the rest is Ajax. url: window.location.pathname doesn't seems to work or point to the right direction. Well, I don't know if that does what I am looking for.
function initTabs(elementHref) {
jQuery('#front-tab').tabs({
spinner: "Loading...",
select: '#tab-one',
cache: true,
fx: { height: 'toggle', opacity: 'toggle' },
url: elementHref,
ajaxOptions: {
type: 'get',
success: function(){alert('Sucess');},
error: function(){alert('I HAZ FAIL');};
},
dataType: 'html'
}
});
}
jQuery('yourLink').on('click', function() {
initTabs(jQuery(this).attr('href'));
});
Well, after noting the inflexibility of jQuery UI Tabs I had to replicate the action on my own. Better yet, few lines of code compared to two plugins.
front_tab.click(function(e) {
// Content parent
tab_content = $('#tab-content');
// other variables
var tab_visible = tab_content.children('div.visible'),
span = $(this).children('span'),
span_value = span.html(),
value = $(this).attr('href'),
// This gets our target div (if exists)
target = tab_content.children(value);
// There is no anchor
e.preventDefault();
// Don't do nothing if we are animating or "ajaxing"
if (tab_content.children().is(':animated') || is_ajaxing) { return; };
// Put the "selected" style to the clicked tab
if (!$(this).hasClass('selected')) {
front_tab.removeClass('selected');
$(this).addClass('selected');
}
// If is target div, call it
if (target.length > 0) {
is_ajaxing = true;
span.html('Loading...');
tab_content.children().removeAttr('class');
tab_visible.slideUp('slow', 'swing', function(){
// Some timeout to slow down the animation
setTimeout(function() {
target.attr('class', 'visible').slideDown('slow');
if (value = '#tpopular') { update_postbox(); }
is_ajaxing = false;
span.html(span_value)
}, 400);
});
// So, the target div doesn't exists. We have to call it.
} else {
is_ajaxing = true;
span.html('Cargando...');
$.get(
window.location.pathname,
{ href : value },
function(data) {
tab_visible.slideUp('slow', 'swing', function(){
setTimeout(function() {
tab_content.children().removeAttr('class');
tab_content
.append(unescape(data))
.children(value)
.css('display', 'none')
.attr('class', 'visible')
.slideDown('slow');
if (value = '#tpopular') { update_postbox(); }
is_ajaxing = false;
span.html(span_value)
}, 800);
});
},
'html');
}
});
The next problem is to make a nice error warning, but that is the solution.
I have built a jquery dialog to show a partial view for entering data.
I have built the action link:
#Html.ActionLink("Add New Service Provider", "PartialNewCust", "Customer", null, new { #class = "addServiceProviderLink" })
I have the controller action:
public ActionResult PartialNewCust()
{
return PartialView();
}
And the div / jQuery code:
<div id="AddServiceProvDialog" title="Add Service Provider"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".addServiceProviderLink").button();
$('#AddServiceProvDialog').dialog(
{
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons:
{
"Add": function () {
$("#addProviderForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".addServiceProviderLink").click(function () {
linkObj = $(this);
var dialogDiv = $('#AddServiceProvDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#addProviderForm");
// Unbind existing validation
$form.unbind();
$form.data("validator", null);
// Check document for changes
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog('open');
return false;
});
});
});
The partial view renders fine but opens a new page and does not come up as a modal dialog.
What am I doing wrong.
On a side note: my autocomplete code is also not working by my jQuery datetime picker is...
$(document).ready(function()
{
$(".date").datepicker();
}
);
$(document).ready(function () {
$("#CustByName").autocomplete(
{
source: function (request, response) {
$.ajax(
{
url: "/Cases/FindByName", type: "GET", dataType: "json",
data: { searchText: request.term, maxResults: 10 },
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.CustomerName,
value: item.CustomerName,
id: item.CustomerID
}
})
);
}
});
},
minLength: 3
});
});
My guess is that you misplaced the return false statement in the button's click handler, thus the default behavior is not prevented as you expect, and the link is simply followed:
$(".addServiceProviderLink").click(function () {
...
$.get(viewUrl, function (data) {
dialogDiv.html(data);
...
dialogDiv.dialog('open');
// this return statement should be in the "click" handler,
// not in success callback of the .get() method !
return false;
});
});
Your code should then be:
$(".addServiceProviderLink").click(function () {
...
$.get(viewUrl, function (data) {
...
});
// return here to prevent default click behavior
return false;
});
I know this is a common problem. I've been looking at the various solutions proposed on this site and elsewhere but cannot hit upon something that works in my situation.
Here is my script:
$(function () {
$('a.editPersonLink').live("click", function (event) {
loadDialog(this, event, '#personList');
$.validator.unobtrusive.parse('#editPersonContainer');
});
$(".deleteButton").live("click", function(e) {
e.preventDefault();
var $btn = $(this);
var $msg = $(this).attr("title");
confirmDelete($msg,
function() {
deleteRow($btn, $target);
});
});
});
function loadDialog(tag, event, target) {
event.preventDefault();
var $loading = $('<img src="../../Content/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon">');
var $url = $(tag).attr('href');
var $title = $(tag).attr('title');
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
,title: $title
,width: 800
,modal: true
,minHeight: 200
,show: 'slide'
,hide: 'clip'
});
$dialog.dialog( "option", "buttons", {
"Save": function () {
var dlg = $(this);
$.ajax({
url: $url,
type: 'POST',
data: $("#formData").serialize(),
success: function (response) {
$(target).html(response);
dlg.dialog('close');
dlg.empty();
$("#ajaxResult").hide().html('Record saved').fadeIn(300, function () {
var e = this;
setTimeout(function () { $(e).fadeOut(400); }, 2500);
});
},
error: function (xhr) {
if (xhr.status == 400)
dlg.html(xhr.responseText, xhr.status); /* display validation errors in edit dialog */
else
displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */
}
});
},
"Cancel": function() {
$(this).dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
};
Right up near the top I am trying to cause the form to recognise the validation from the partial view on the dialog via the statement:
$.validator.unobtrusive.parse('#editPersonContainer');
editPersonContainer is the name of the div containing the data in the partial view loaded into the dialog.
The bottom line is that the validation is not recognised. Am I making the call to validator.unobtrusive.parse in the wrong place, or am I missing something else here?
I ended up changing my script to use the techniques described here
Validation now works on my jQuery UI dialogs.
Hi I came up to your question as I was looking for the same.
I include this before the ajax call to validate on client side:
if (ModelState.IsValid) {}
I make an article with the full project on
Validation client/Server JqueryUI Dialog
I think the problem is with jQuery, i don't know for sure.
Let me explain the situation.
Screenshot 1
I fill in the partialView and click on submit.
The submit is a jQuery event handler with the following code:
_CreateOrEdit.cshtml
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
});
$(window).bind('drilldown', function () {
$(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
//get the form
var f = $("#CreateOrEditSubmit");
//get the action
var action = f.attr("action");
//get the serialized data
var serializedForm = f.serialize();
$.post(action, serializedForm, function (data) {
$("#main-content").html(data);
});
return false;
});
</script>
This all works fine on the first-run.
Then when i submit the form when it is invalid (Screenshot 1),
[HttpPost]
public ActionResult Create(Client client)
{
if (ModelState.IsValid)
{
context.Clients.Add(client);
context.SaveChanges();
return RedirectToAction("Index");
}
return PartialView(client);
}
Then it tries to redisplay the same form again (Controller Client, Action Create), but something isn't triggered right (Screenshot 2). The layout is wrong (buttons still hidden), the tabs aren't working (javascript), ...
Worst of all, i don't get any error in Firebug, Chrome Console, ...
Does anyone have an idea what could be the problem, because i really haven't got a clue what's happening. It seems to me that nothing has changed, but it did :s
Fyi, an equivalant for the post function is :
var request = $.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data) {
$("#main-content").html(data);
},
dataType: 'HTML'
});
request.done(function (msg) {
$("#log").html(msg);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
Before submit, everything loads fine
After submit, same form is called. jQuery isn't working anymore and form is getting bricked (i think this is "side" behaviour from the jQuery breaking)
Edit: (on request)
Here is the partialView in full
_CreateOrEdit.cshtml doesn't contain any javascript for now, the result is the same, so i only posted Create.cshtml.
Create.shtml
#model BillingSoftwareOnline.Domain.Entities.Client
<div class="container_12 clearfix leading">
<div class="grid_12">
#using (Html.BeginForm("Create", "Client", FormMethod.Post, new { #class="form has-validation", id="CreateOrEditSubmit"}))
{
#Html.Partial("_CreateOrEdit", Model)
<div class="form-action clearfix">
<button class="button" type="submit">
OK</button>
<button class="button" type="reset">
Reset</button>
</div>
}
</div>
</div>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.itextclear.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.uniform.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.tools.min.js")"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
});
$(window).bind('drilldown', function () {
$(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
//get the form
var f = $("#CreateOrEditSubmit");
//get the action
var action = f.attr("action");
//get the serialized data
var serializedForm = f.serialize();
// $.post(action, serializedForm, function (data) {
// $("#main-content").html(data);
// });
var request = $.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data) {
$("#main-content").html(data);
},
dataType: 'HTML'
});
return false;
request.done(function (msg) {
alert(msg);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
</script>
Since this markup is returned as a partial, you need to reinitialize your javascript.
This is hacky, but try putting your script in the partial view, instead of _CreateOrEdit.cshtml, and see if that works.
Update
After seeing the cshtml, it looks like it is not working because $(document).ready() has already executed, before the ajax load. Try this instead:
$(function () {
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
$(window).bind('drilldown', function () {
$(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
//get the form
var f = $("#CreateOrEditSubmit");
//get the action
var action = f.attr("action");
//get the serialized data
var serializedForm = f.serialize();
// $.post(action, serializedForm, function (data) {
// $("#main-content").html(data);
// });
var request = $.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data) {
$("#main-content").html(data);
},
dataType: 'HTML'
});
return false;
request.done(function (msg) {
alert(msg);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
});
Add the following instructions to the end of your ajax callback, so that the styling is applied after the form has been injected to the DOM:
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
$(".tabs > ul").tabs("section > section");