I'm a complete beginner regarding the Full Calendar, so apologies for a possible simple question.
I am trying to revert a drop from an External Event. If I use the revertFunc(), the event snaps back to it's original position in the list but the event is still on the calendar until it is refreshed. Ideally I would like it to disappear as soon as the dialog box is closed. This is the code
drop: function(date, jsEvent, ui, resourceId)
{
var tag = $(this).data('event').tag;
var eventDate = $(this).data('event').projectDate;
var calDate = date.format();
if (tag == PSTag)
{
if(eventDate != calDate)
{
alert('You must drop the event on the correct date');
revertFunc();
return;
}
var eventObjectId = $(this).data('event').schWork;
}
if (tag == WOTag)
{
var eventObjectId = $(this).data('event').workorder;
}
var title = $(this).data('event').title;
alert(tag);
updateCalendarEvent(eventObjectId, date.format(), resourceId, tag, title);
if (tag != PHTag)
{
$(this).remove();
}
setupDraggableEvents();
}
Many thanks for any assistance
Related
How do I track via GTM if certain element have impressions? Let say I would like to know how many times this element have been seen?
<div class="box"><div> class"text"><span>Text</span</div</div>
You could create a custom JavaScript variable to check if an element with the .box class exists.
Something like:
if(document.getElementsByClassName("box")){
return true;
} else {
return false;
}
You can then use this in your trigger (eg. your custom variable > equals > true).
You can track impressions with one custom HTML tag and a custom event trigger. You need to attach an event listener to a function that checks if the element is visible on the page:
<script>
var hasDeals = document.getElementsByClassName('box').length;
var element = document.getElementsByClassName('box')[0];
var elVisible = false;
var eventPushed = false;
if(hasDeals>0) {
document.addEventListener("scroll", function() {{isScrolledIntoView(element);}} );
}
function isScrolledIntoView(el) {
if(!elVisible) {
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
elVisible = isVisible;
return isVisible;
} else if(!eventPushed) {
dataLayer.push({'event': 'dealVisible'});
eventPushed = true;
}
}
</script>
From there on you just need to create the trigger and use it as you wish.
You can find more explanations about how this script works and how to edit it for other scenarios here: Tracking Elements Impression with Google Tag Manager
I have a group of links that I call fancybox on with the arrows enabled so that the user can click next and prev. Each link is decorated with the iframe class and href='/editdata.aspx'. I would to remove the arrows and pass in the current index so that the editdata.aspx save button can say "save and next" until it reaches the last link, which will then say "save and close".
From editdata.aspx I use
var numLinks = $(".link-items", parent.document.body).children("a.iframe").size();
This gives me the total number of links. I just need to know the current link that is being displayed to the user so that I can update the save button text.
Here is a sample of my code in editdata.aspx:
// change the save button to save and next if fancybox is loading multiple links
if (parent.$.fancybox) {
var links = $(".links", parent.document.body);
if (links && links.length > 0) {
var numlinks = $(links).children("a.popup").size();
var index = getParameterByName('index');
if (index == numlinks ) {
// this element is the last item to display so change the "save and next" to "save and close"
$("#btnSave").val("Save & Close");
$("#btnSave").click(function () {
parent.$.fancybox.close();
});
}
else {
$("#btnSave").val("Save & Next");
$("#btnSave").click(function () {
parent.$.fancybox.next();
});
}
}
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
How can I achieve this?
Thats easy for v2 -
jQuery(".fancybox").fancybox({
beforeLoad : function() {
this.href = this.href + '?index=' + this.index;
}
});
I wanna get client side event for Row double click in Infragistics ultragrid control.
A server side event handler "OnDblClick" is available, but I hope there is some way in client side also.
Thanks for any help.
This is our working code for CellClickEvents:
<igtbl:UltraWebGrid ID="ultGridScenario">
<DisplayLayout>
<ClientSideEvents DblClickHandler="ultGridScenario_CellDblClick" CellClickHandler="ultGridScenario_CellClickHandler"></ClientSideEvents >
</DisplayLayout>
</igtbl:UltraWebGrid>
added the dblclick handler attribute and value as an example.
function ultGridScenario_CellClickHandler(gridName, CellID, button) {
if (button == 0) {
var grid = igtbl_getGridById(ultGridScenario.ClientID);
var row = igtbl_getRowById(CellID);
var rowID = row.Id;
var rowIndex = rowID.substr(rowID.lastIndexOf("_") + 1, rowID.length - rowID.lastIndexOf("_"));
var cellIndex = CellID.substr(CellID.lastIndexOf("_") + 1, CellID.length - CellID.lastIndexOf("_"));
if (cellIndex == 0) {
return false;
}
else {
if (rowIndex == 7) {
ShowScenarioComments(gridName, cellIndex);
}
else {
return false;
}
}
}
}
Also when I ask VS2010 for intelli-sense for the ClientSideEvents Tag, I get a long list of events.
Using Infragistics4 10.2.20102.1011
Some additional Reference:
http://blogs.infragistics.com/forums/p/43398/238276.aspx
I have four controls in a page with update panel. Initially mouse focus is set to first control. When I partially post back the page to server the focus automatically moves to first control from the last focused control from the control I have tabbed down to. Is there any way to maintain the last focus?
Take a look at Restoring Lost Focus in the Update Panel with Auto Post-Back Controls:
The basic idea behind the solution is to save the ID of the control
with input focus before the update panel is updated and set input
focus back to that control after the update panel is updated.
I come with the following JavaScript which restores the lost focus in
the update panel.
var lastFocusedControlId = "";
function focusHandler(e) {
document.activeElement = e.originalTarget;
}
function appInit() {
if (typeof(window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof(document.activeElement) === "undefined"
? "" : document.activeElement.id;
}
function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof(focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}
function pageLoadedHandler(sender, args) {
if (typeof(lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
I find this more elegant:
(function(){
var focusElement;
function restoreFocus(){
if(focusElement){
if(focusElement.id){
$('#'+focusElement.id).focus();
} else {
$(focusElement).focus();
}
}
}
$(document).ready(function () {
$(document).on('focusin', function(objectData){
focusElement = objectData.currentTarget.activeElement;
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(restoreFocus);
});
})();
Scenario: I have a standard dropdown list and when the value in that dropdownlist changes I want to update another dropdownlist that exists in a tinyMCE control.
Currently it does what I want when I open the page (i.e. the first time)...
function changeParent() {
}
tinymce.create('tinymce.plugins.MoePlugin', {
createControl: function(n, cm) {
switch (n) {
case 'mylistbox':
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts',
onselect: function(v) {
tinyMCE.execCommand("mceInsertContent",false,v);
}
});
<% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET
yourobject = '<%= insert %>'; // This is JS AND .NET
mlb.add(yourobject, yourobject); // This is JavaScript
<% } %>
// Return the new listbox instance
return mlb;
}
return null;
}
});
<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%>
I am thinking the way to accomplish this (in the ChangeParentFunction) is to call a controller action to get a new list, then grab the 'mylistbox' object and reassign it, but am unsure how to put it all together.
As far as updating the TinyMCE listbox goes, you can try using a tinymce.ui.NativeListBox instead of the standard tinymce.ui.ListBox. You can do this by setting the last argument to cm.createListBox to tinymce.ui.NativeListBox. This way, you'll have a regular old <select> that you can update as you normally would.
The downside is that it looks like you'll need to manually hook up your own onchange listener since NativeListBox maintains its own list of items internally.
EDIT:
I played around a bit with this last night and here's what I've come up with.
First, here's how to use a native list box and wire up our own onChange handler, the TinyMCE way:
// Create a NativeListBox so we can easily modify the contents of the list.
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
As far as updating the list box at runtime, your idea of calling a controller action to get the new items is sound; I'm not familiar with ASP.NET, so I can't really help you there.
The ID of the <select> that TinyMCE creates takes the form editorId_controlId, where in your case controlId is "mylistbox". Firebug in Firefox is the easiest way to find the ID of the <select> :)
Here's the test button I added to my page to check if the above code was working:
<script type="text/javascript">
function doFoo() {
// Change "myEditor" below to the ID of your TinyMCE instance.
var insertsElem = document.getElementById("myEditor_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
optElem.value = "1";
optElem.text = "Foo";
insertsElem.add(optElem, null);
optElem = document.createElement("option");
optElem.value = "2";
optElem.text = "Bar";
insertsElem.add(optElem, null);
}
</script>
<button onclick="doFoo();">FOO</button>
Hope this helps, or at least gets you started.
Step 1 - Provide a JsonResult in your controller
public JsonResult GetInserts(int containerId)
{
//some code to get list of inserts here
List<string> somedata = doSomeStuff();
return Json(somedata);
}
Step 2 - Create javascript function to get Json results
function getInserts() {
var params = {};
params.containerId = $("#184").val();
$.getJSON("GetInserts", params, updateInserts);
};
updateInserts = function(data) {
var insertsElem = document.getElementById("183_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
for (var item in data) {
optElem = document.createElement("option");
optElem.value = item;
optElem.text = data[item];
try {
insertsElem.add(optElem, null); // standards compliant browsers
}
catch(ex) {
insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list)
}
}
};
Step 3 - Create NativeListBox (code above provided by ZoogieZork above)
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
//populate inserts on listbox create
getInserts();