So i have a simple modal pop up that is triggered by a click of a table row:
<script type="text/javascript">
$(function () {
$("#customerTable tbody tr").click(function (event) {
var cellObject = $(event.currentTarget.cells[0]);
var clientID = cellObject[0].id;
var clientName = cellObject[0].innerHTML;
var partialHeadding = document.getElementById('clientName').innerHTML = clientName;
$.ajax({
type: "POST",
url: "/Clients/ClientDetails/",
data: { clientID },
success: function (response) {
$("#partialClientModal").find(".modal-body").html(response);
$("#partialClientModal").modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
As you can see the on click opens a modal and populates it with a partial view. In the partial view i am using bootstrap toggle (changes check boxes to toggles) and for that it needs the CSS and the Script. It all works as expected when i first open it or if i close it using a submit button.
If i close it with a modal close button or click anywhere outside the modal to make it disappear, my toggle button converts back to a basic check box (so the CSS or the Script goes missing).
If i reload the page - we are back in business... Any advice as to where i should even start looking at this?
Related
I've created an angular directive for a tinyMce where on setup I add 2 handlers: for a blur event to hide a toolbar and for a click event to show it. Also I've created another directive where I have a textarea and a button. On button click I want a toolbar disappear and some action occur.
<body ng-app="MyApp">
<div ng-controller="MyCntrl">
<my-directive></my-directive>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyCntrl", function ($scope) {
}).directive("myDirective", function ( $compile) {
return {
restrict: 'E',
link: function (scope, elem) {
scope.click = function () {
console.log("click");
};
},
template: "<textarea data-tm ></textarea><button ng-click='click()' style='width:200px; height: 74px;' id='btn'>click</button>"
}
}).directive("tm", function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function() {
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
});
}
}
});
</script>
Link to the code
If I click inside of a textarea and then on a button the following happens:
when the button's height is relatively small, for example 20px, only blur event occurs, but when the height is relatively big let's say 120px both blur and click events occur.
Could you tell me why is that? My guess is that in the first case the button is overlapped by something but I cannot find but what.
Thanks
Update: It seems like a problem with tinyMCE. I've remove angular and created just a tinyMce editor and a button underneath. The same problem: doesn't work when a button is too small and works either if a button is enough big or placed above the editor.
<script type="text/javascript">
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
function myFunction() {
console.log("click");
}
</script>
<textarea></textarea>
<button onclick="myFunction()" style="height:100px;">click</button>
Plunker
Try setting a little timeout, so the button will stay in it's position during the click event:
$timeout(function() { ed.theme.panel.find("toolbar").hide() }, 100);
See this plunker
When we click on the button a toolbar becomes hidden and the button moves up so when the mouse released it's not over the same object. Mousedown event could be used to solve the problem.
First of all I looked trough a lot of same questions on stack. My problem is as follows:
I'm working on a school project to make a card game (ginrummy)
In this web application (mvc 4) I want to move cards to sets (right side) and I want to do this with ajax.
added a picture to clearify.
The ajax perfectly triggers the controller and perfectly bring over the data I put through.
In firebug I checked the response and it even added a card to the right correct set
The problem is when the ajax is done, it doesn't trigger the succes function neither it updates the page.
Note: This is my first time I work with ajax.
The complete function returns OK status.
Now the code:
View:
var GameId = #Model.Id
$(function () {
$(".droppable").droppable({
drop: function (event, ui) {
var id = ui.draggable.find("a").attr("data-CardId");
var location = droppableId = $(this).attr("id");
$.ajax({
type: "POST",
url: '#Url.Action("ChangeCardLocation")',
data: { 'id': GameId, 'cardId': id, 'location': location },
succes: function () {
alert('wow');
},
complete:function (){
}
});
}
});
});
Controller:
public ActionResult ChangeCardLocation(int id, int cardId, Location location)
{
var game = db.Games.Find(id);
var card = db.Cards.Find(cardId);
game.ChangeCardLocationTo(card, location);
db.SaveChanges();
game.Info = game.GetInfo(id);
if (game.GameState == GameState.playerOneLayOn || game.GameState == GameState.playerTwoLayOn)
{
return View("LastTurn", game);
}
else
{
return View("Details", game);
}
}
Any suggestions on what is going wrong?
I'm a student and it is for a school project!
#comment:
When I did this:
error: function(xhr, error){
console.log(error);
console.log(xhr);
},
I noticed it didn't get triggerd.
After that I tried the same in complete:
complete:function (xhr, error){
console.log(error);
console.log(xhr);
}
The result was
succes
object that returned readystate 4
I misspelled success thats in the first part it wasn't working. But my next question is how do make it updating the contents of the page that the ajax call is getting back.
I am trying myself offcourse now. In the data succes is getting is my whole page delivered as I want to have it.
Is it because you have misspelt "success"?
$.ajax({
type: "POST",
url: '#Url.Action("ChangeCardLocation")',
data: { 'id': GameId, 'cardId': id, 'location': location },
success: function () {
alert('wow');
},
complete:function (){
}
});
I have a strange problem and i m not able to understand why it is happening.
I called a page - Remarks(say) by jquery ajax on row click of grid viw. Then i binded that page (coming in response) into a div - dvRemarks(say). This div is opening in a popup.
Pop-up window is only opening first time, which is working fine. But when i click second time, data is coming in response, But this time popup is not opening. Problem is with popup only but i don't understand why it is ?
When i again refresh the page, it again opens up Ist time only.
Below is jquery :-
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
Below is the function which i am calling on click :-
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').html(response);
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
And below is the div - dvRemarks in which i am binding response
<div id="dvRemarks1" runat="server" style="display: none;" title="Enter Remarks">
<div id="dvRemarks" runat="server">
</div>
</div>
Thanks.
Not sure on this but give a try to below one.
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true, //Calling destroy on close function might help
close: function() {
$(this).dialog("destroy");
}
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
give a try changing ajax call to
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').empty().html(response); //empty function may be of some help here
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
I have Fullcalendar opening in iframe. I have a script from dyn-web.com on parent page that resizes Iframe and this works fine most of the time:
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
When I open the calendar initially it resizes fine, but when I select another month that has a longer page render, it will not resize.
How can I invoke the resize on the parent window?
This is the start of my calendar but I cannot figure out the syntax to dynamically call resize. I have played with the height parameter, but it needs to be dynamic:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events!');
}
},
You need to do something like this:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events! ');
}
},
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
The viewDisplay handler is called every time the month/week/day view is changed. You can also use the windowResize handler to capture an event fired after the resize has actually taken place.
I have a jQuery autoselect box displaying the correct data. Now I would like to fire an ASP.NET MVC 3 controller when an item is selected. The controller should then redirect to a View. Here's my jQuery autocomplete code (I'm sure something is missing in the 2nd Ajax call, but I haven't found it yet):
<script type="text/javascript">
$(function () {
$("#Client").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Entity/GetClientAutoComplete', type: 'POST', dataType: 'json',
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
})
},
minLength: 1,
select: function (event, ui) {
$.ajax({
url: 'Entity/GetApplicationsByName/' + ui.item.value, type: 'POST'
})
}
});
});
</script>
And here's the controller I'm trying to call:
public ActionResult GetApplicationsByName(string id)
{
ViewBag.Client = id;
var apps = _service.GetDashboardByName(id);
return View("Dashboard", apps.ToList());
}
When I watch the Ajax call fire in Firebug, I see the correct URL configuration, but nothing else happens. It's acting as though it wants to load something rather than send something. I'm confused. Thank you for any guidance.
Well you sent an id by POST to the GetApplicationsByName controller and the controller is sending back the view.
If you want redirection, you can use the following:
select: function (event, ui) {
window.location.href = 'Entity/GetApplicationsByName/' + ui.item.value;
}