Develop Reference

Change Background Of Div Once Contact Form 7 Is Submitted

So I'm trying to add a class to the container (.right-side-product-page) and the h2 on a contact 7 form. Here's a link:
https://nameplicity.com/domains/miningaid/
The goal is to change the class so the blue background and gray background become white, but only after an offer is submitted.
I've tried to add CSS and JavaScript, but can't seem to get anything working. Here is the code I've tried to use in the "Additional Settings" section under the Contact Form 7 plugin:
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '19533' == event.detail.contactFormId ) {
var theDropDown = document.querySelector(".right-side-product-page");
theDropDown.classList.add("MyClass");
}, false );
Could anyone provide direction as to what I'm doing wrong?

There's an error in your code: you're missing one curly bracket in there.
Try this:
<script>
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '19533' == event.detail.contactFormId ) {
var theDropDown = document.querySelector(".right-side-product-page");
theDropDown.classList.add("MyClass");
}
}, false );
</script>

Aside from the error which was mentioned above, you can further complete your solution based on the class added to the wpcp7-response-output block, upon successfully sending the message, the wpcf7-mail-sent-ok class is added. Knowing this, we can utilize these classes with a check, here's an example:
$( document ).ready(function() {
var outputBlock = $(".wpcf7-response-output");
var theDropDown = document.querySelector(".right-side-product-page");
$( ".wpcf7-submit" ).click(function() {
//Start an interval check after submit has been clicked
var intervalCheck = setInterval(function () {
if (outputBlock.hasClass("wpcf7-mail-sent-ok")) {
// The form has been submitted successfully, set the class to the block to change color
theDropDown.classList.add("MyClass");
// Stop running the interval checker after class has been added
clearInterval(intervalCheck);
}
},1000);
});
});

Try:
document.querySelector('.wpcf7-form').addEventListener('submit', function (ev) {
if(this['_wpcf7'].value == '19533') {
document.querySelector(".right-side-product-page").classList.add("MyClass");
}
});
or
document.querySelector('.wpcf7-form').addEventListener('wpcf7submit', function (ev) {
if(this['_wpcf7'].value == '19533') {
document.querySelector(".right-side-product-page").classList.add("MyClass");
}
}, false);
One of them should work. I believe the issue is that the event wpcf7submit you're listening to does not exist on document. It exists on document.querySelector('.wpcf7-form').

Got it!
Had to put it right under the submit button and encase it in tags. Thank you everyone for your help!!!

Kendo Grid Filter on specific column : how to customize?

I have filter on the specific column in Kendo grid and i would like to modify this column like on the image below:
I tried to do by setting on the column config by this way:
// ADD DATE PICKER FOR COLUMNS CREATION TIME
if(value.filterable.cell.dataTextField == "creationTime") {
//preparedGridColumnItem.AllowFiltering = false,
preparedGridColumnItem.format = "{0:dd.MM.yyyy}";
preparedGridColumnItem.filterable = {
ui: function (element) {
element.kendoDatePicker({
format: "dd.MM.yyyy"
});
},
cell: {
operator: "eq",
showOperators: false, // HIDE FILTER MENU
template: function (arg) {
arg.element.kendoDatePicker({
format: "dd.MM.yyyy",
change: function (e){
console.log("Change :: " + kendo.toString(this.value(), 'd'));
var timestamp = moment(this.value()).unix();
console.log(timestamp);
}
});
}
}
}
}
But without luck.
I would like to have dropdown boxes not editable with predefined value to search.
How can i do it please?
I tried to find any working solution in documentation.
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
But without the luck.
Many thanks for any advice.
Edit:
Filter is looking like this:

Here you go:
filterMenuInit: function(e) {
if (e.field == "date") {
var sels = e.container.find("select");
var sel1 = $(sels[0]).data("kendoDropDownList");
var sel2 = $(sels[2]).data("kendoDropDownList");
sel1.select(3);
sel1.enable(false);
sel2.select(5);
sel2.enable(false);
}
}
Fiddle. This doc helped me.
e.container refers to the filter widget. With it you can play around freely. Note that the event is just called once, at the initialization of the filter widget, and not at each open/close.
Updated code for columnMenu:
Just change the filterMenuInit to columnMenuInit.
Fiddle.
Update 2:
I have added the following code to the columnMenuInit event:
var dates = $(e.container).find('[data-role="datepicker"]');
$(dates[0]).data("kendoDatePicker").unbind("change");
$(dates[1]).data("kendoDatePicker").unbind("change");
Fiddle. I just unbind the default change event of the datepickers, avoiding changing the dropdowns.

Get the html element of the selected event in kendo scheduler

I was wondering how can I get in the html element with ".k-event" class, contains selected event in function binded to edit event of the Scheduler?
$("#src-ap-01-scheduler").kendoScheduler({
date: new Date(),
allDaySlot: false,
editable: {
template: $("#scr-ap-01-editor").html()
},
edit: function(e){
// i have tried these
// e.currentTarget
// e.container.closest("k-event")
}
})
I've logged the (e) on the function but I have no idea how to get the .k-event element from inside of the function. I hope you guys have some idea to get this element, any advice would be appreciated, thanks.

To get selected event element put this code in function triggered on edit:
edit: function(e){
var uid = e.container.attr('data-uid');
var element = e.sender.element.find('div.k-event[data-uid="' + uid + '"]');
}
Greetings.

The above answer doesn't work in Kendo UI v2015.1.318, and here's my quick solution for this issue.
edit: function(e) {
if (e.event.YOUR_EVENT_CONDITION) {
// Allow the user to edit this event!
} else {
e.preventDefault();
var element = e.sender.element.find('div.k-event[data-uid="'+e.event.uid+'"]');
if (element)
$(element).notify("You can't modify a completed event.", {className: "error", placement: "top", autoHideDelay: 3000});
else
$.notify("You can't modify a completed event.", "error");
}
}
I'm using notify.js to display a popup message right on the selected event UI only if it exists. Please visit the following link for notify.js.
http://notifyjs.com/

Converting Span to Input

I am developing web app, I have such a requirement that whenever user click on text inside span i need convert it into input field and on blur i need to convert it back to span again. So i am using following script in one of my jsp page.
Java Script:
<script type="text/javascript">
function covertSpan(id){
$('#'+id).click(function() {
var input = $("<input>", { val: $(this).text(),
type: "text" });
$(this).replaceWith(input);
input.select();
});
$('input').live('blur', function () {
var span=$("<span>", {text:$(this).val()});
$(this).replaceWith(span);
});
}
JSP Code:
<span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span>
Now my problem is, everything works fine only for the first time. I mean whenever i click on the text inside span for the first time it converts into input field and again onblur it coverts back from input field to normal text. But if try once again to do so it won't work. Whats wrong with above script?

Would be good to change your dom structure to something like this (note that the span and the input are side by side and within a shared parent .inputSwitch
<div class="inputSwitch">
First Name: <span>John</span><input />
</div>
<div class="inputSwitch">
Last Name: <span>Doe</span><input />
</div>
Then we can do our JS like this, it will support selecting all on focus and tabbing to get to the next/previous span/input: http://jsfiddle.net/x33gz6z9/
var $inputSwitches = $(".inputSwitch"),
$inputs = $inputSwitches.find("input"),
$spans = $inputSwitches.find("span");
$spans.on("click", function() {
var $this = $(this);
$this.hide().siblings("input").show().focus().select();
}).each( function() {
var $this = $(this);
$this.text($this.siblings("input").val());
});
$inputs.on("blur", function() {
var $this = $(this);
$this.hide().siblings("span").text($this.val()).show();
}).on('keydown', function(e) {
if (e.which == 9) {
e.preventDefault();
if (e.shiftKey) {
$(this).blur().parent().prevAll($inputSwitches).first().find($spans).click();
} else {
$(this).blur().parent().nextAll($inputSwitches).first().find($spans).click();
}
}
}).hide();

I understand you think that element replacement is a nice thing, however, I would use a prompt to get the text. Why? It is a lot easier and actually a bit prettier for the user as well. If you are curious on how to do it, I show you.
html:
<span class='editable'>foobar</span>
js:
$(function()
{
$('span.editable').click(function()
{
var span = $(this);
var text = span.text();
var new_text = prompt("Change value", text);
if (new_text != null)
span.text(new_text);
});
});
http://jsfiddle.net/qJxhV/1/

First, you need to change your click handler to use live() as well. You should take note, though, that live() has been deprecated for quite a while now. You should be using on() in both cases instead.
Secondly, when you replace the input with the span, you don't give the element an id. Therefore, the element no longer matches the selector for your click handler.
Personally, I would take a different (and simpler) approach completely. I would have both the span and in the input in my markup side by side. One would be hidden while the other is shown. This would give you less chance to make mistakes when trying to recreate DOM elements and improve performance since you won't constantly be adding/removing elements from the DOM.

A more generic version of smerny's excellent answer with id's can be made by slightly altering two lines:
$input.attr("ID", "loadNum"); becomes $input.attr("ID", $(this).attr("ID")); -- this way, it simply takes the current id, and keeps it, whatever it is.
Similarly,
$span.attr("ID", "loadNum"); becomes $span.attr("ID", $(this).attr("ID"));
This simply allows the functions to be applied to any div. With two similar lines added, both id and class work fine. See example.

I have done little change in code, By using this input type cant be blank, it will back to its real value.
var switchToInput = function () {
var $input = $("<input>", {
val: $(this).text(),
type: "text",
rel : jQuery(this).text(),
});
$input.addClass("loadNum");
$(this).replaceWith($input);
$input.on("blur", switchToSpan);
$input.select();
};
var switchToSpan = function () {
if(jQuery(this).val()){
var $text = jQuery(this).val();
} else {
var $text = jQuery(this).attr('rel');
}
var $span = $("<span>", {
text: $text,
});
$span.addClass("loadNum");
$(this).replaceWith($span);
$span.on("click", switchToInput);
}
$(".loadNum").on("click", switchToInput);
jsFiddle:- https://jsfiddle.net/svsp3wqL/

edit page with ckeditor

I am building a feature similar to the page customization feature of pagemodo.com. The user has to click on a label(div) in a HTML page and a CKEDITOR will load in a separate div with the label text.
Now, the ckeditor is loading with the label text but the "KeyUp" event of CKEDITOR is not firing. Only if the "KeyUp" event fires, I would be able to call another function "readAsTyped" to change the text in the label simultaneously.
You can see the working copy here http://graffiti-media.co/testing/rashmi/custom/
$(document).ready(function() {
$('.editable').click(function(){
$(this).children().each(function(index, domEle) {
createEditor($(domEle).text(), domEle);
});
});
});
var editor, html = '';
function createEditor(text1, domEle)
{
// Create a new editor inside the <div id="editor">, setting its value to html
var config = {};
ckeditor_instance = CKEDITOR.appendTo( 'editor', config, text1 );
var abc=ckeditor_instance.name;
ckeditor_instance.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
readAsTyped($('#cke_editor2'),$(domEle));
//on focus
}
);
});
});
}
function readAsTyped(obj, label) {
var typedVal = obj.val();
// set the value of characters into the label
$(label).html(typedVal);
}
Any help would be greatly appreciated.

Do you mean something like this?
http://alfonsoml.blogspot.com.es/2012/05/recipe-live-preview-of-ckeditor.html