I want to Display a pop-up box when a user opens a contact whose first name is a palindrome and whose last name is a semordnilap in vtiger crm .
If you want to open popup on edit view or detail view you can use Jqueryconfirm library.
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
Write jQuery functions on the event by using the functions which are shown in documentations as per your requirement.
Related
Currently I have following JavaScript in my filter.tpl file. This has hidden the refined search button and filters product on checkbox click. But It loads the whole page on a check box click. I want to implement AJAX loader so that only the page loads partially.
<script type="text/javascript"><!--
$(document).ready(function() {
$('#button-filter').hide();
$('input[name^=\'filter\']').on('change', function() {
filter = [];
$('input[name^=\'filter\']:checked').each(function(element) {
filter.push(this.value);
});
location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
});
//--></script>
I'm currently working on a rendering in Sitecore 7.2 (MVC) that will show a jwPlayer given a link to a video (either in the Media Library or from an external source, like YouTube). When I add the rendering (with a valid data source) through Presentation Details in the Content Editor everything looks fine, and works perfectly. The trouble that I'm running into right now, though, is that when I try to do the same thing from the Page Editor (with the exact same rendering and data source), nothing is showing up in that placeholder at all.
The part of the rendering that deals with the video is as follows:
#if (Model.VideoLink != null && Model.Image != null)
{
var vidid = Guid.NewGuid().ToString();
<div class="article-video-module">
<p class="video-placeholder-text">#Html.Raw(Model.Heading)</p>
<div id="#vidid">Loading the player...</div>
<script type="text/javascript">
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
</script>
</div>
#Editable(a => Model.Description)
}
Other things that might help:
When I comment out everything in the <script> tag above the rendering shows up perfectly.
A reference to jwplayer.js is found on the page (that was my first thought)
Console errors in Javascript:
No suitable players found and fallback enabled on jwplayer.js
Uncaught TypeError: undefined is not a function on jwplayer("#vidid").setup({ and on jwplayer('videodiv-#vidid').onPlay(function () { from above.
How can I get jwPlayer and Page Editor to work nicely with each other?
The issue is that when you add a component through Page Editor, the script is fired before the div <div id="#vidid"> element is added to DOM. Don't ask me why...
The solution is really simple: wrap your javascript code with if condition, checking if the div is already there:
<script type="text/javascript">
if (document.getElementById("#vidid")) {
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
}
</script>
There is also another issue with your code - Guid can start with number, and this is not a valid id for html elements. You should change your code to:
var vidid = "jwp-" + Guid.NewGuid().ToString();
I wouldn't rule out a conflict with the version of JQuery that the Page Editor uses - this usually messes stuff up. There's a good post here on to overcome the issues.
http://jrodsmitty.github.io/blog/2014/11/12/resolving-jquery-conflicts-in-page-editor/
I am trying to integrate zurb reveal with form into react component. So far next code properly displays modal form:
ModalForm = React.createClass({
handleSubmit: function(attrs) {
this.props.onSubmit(attrs);
return false;
},
render: function(){
return(
<div>
Add new
<div id="formModal" className="reveal-modal" data-reveal>
<h4>Add something new</h4>
<Form onSubmit={this.handleSubmit} />
<a className="close-reveal-modal">×</a>
</div>
</div>
);
}
});
The Form component is pretty standard:
Form = React.createClass({
handleSubmit: function() {
var body = this.refs.body.getDOMNode().value.trim();
if (!body) {
return false;
}
this.props.onSubmit({body: body});
this.refs.body.getDOMNode().value = '';
return false;
},
render: function(){
return(
<form onSubmit={this.handleSubmit}>
<textarea name="body" placeholder="Say something..." ref="body" />
<input type="submit" value="Send" className="button" />
</form>
);
}
});
Problem: When I render form component within modal form component and enter something into form input then I see in console exception Uncaught object. This is a stack:
Uncaught object
invariant
ReactMount.findComponentRoot
ReactMount.findReactNodeByID
getNode
...
If I just render form component directly in the parent component then everything works. Could anybody help please?
In short, you're doing this wrong and this is not a bug in react.
If you use any kind of plugin that modifies the react component's dom nodes then it's going to break things in one way or another.
What you should be doing instead is using react itself, and complementary css, to position the component in the way you'd like for your modal dialog.
I would suggest creating a component that uses react's statics component property to define a couple of functions wrapping renderComponent to give you a nice clean function call to show or hide a react dialog. Here's a cut down example of something I've used in the past. NB: It does use jQuery but you could replace the jQ with standard js api calls to things like elementById and etc if you don't want the jQuery code.
window.MyDialog = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
content: React.PropTypes.string.isRequired
},
statics: {
// open a dialog with props object as props
open: function(props) {
var $anchor = $('#dialog-anchor');
if (!$anchor.length) {
$anchor = $('<div></div>')
.prop('id', 'dialog-anchor');
.appendTo('body');
}
return React.renderComponent(
MyDialog(props),
$anchor.get(0)
);
},
// close a dialog
close: function() {
React.unmountComponentAtNode($('#dialog-anchor').get(0));
}
},
// when dialog opens, add a keyup event handler to body
componentDidMount: function() {
$('body').on('keyup.myDialog', this.globalKeyupHandler);
},
// when dialog closes, clean up the bound keyup event handler on body
componentWillUnmount: function() {
$('body').off('keyup.myDialog');
},
// handles keyup events on body
globalKeyupHandler: function(e) {
if (e.keyCode == 27) { // ESC key
// close the dialog
this.statics.close();
}
},
// Extremely basic dialog dom layout - use your own
render: function() {
<div className="dialog">
<div className="title-bar">
<div className="title">{this.props.title}</div>
<a href="#" className="close" onClick={this.closeHandler}>
</div>
</div>
<div className="content">
{this.props.content}
</div>
</div>
}
});
You then open a dialog by calling:
MyDialog.open({title: 'Dialog Title', content: 'My dialog content'});
And close it with
MyDialog.close()
The dialog always attaches to a new dom node directly under body with id 'dialog-anchor'. If you open a dialog when one is already open, it will simply update the dom based on new props (or not if they're the same).
Of course passing the content of the dialog as a props argument isn't particularly useful. I usually extend below to either parse markdown -> html for the content or get some html via an ajax request inside the component when supplying a url as a prop instead.
I know the above code isn't exactly what you were looking for but I don't think there's a good way to make a dom-modifying plugin work with react. You can never assume that the dom representation of the react component is static and therefore it can't be manipulated by a 3rd party plugin successfully. I honestly think if you want to use react in this way you should re-evaluate why you're using the framework.
That said, I think the code above is a great starting point for a dialog in which all manipulation occurs inside the component, which afterall is what reactjs is all about!
NB: code was written very quickly from memory and not actually tested in it's current form so sorry if there are some minor syntax errors or something.
Here is how to do what Mike did, but using a zf reveal modal:
var Dialog = React.createClass({
statics: {
open: function(){
this.$dialog = $('#my-dialog');
if (!this.$dialog.length) {
this.$dialog = $('<div id="my-dialog" class="reveal-modal" data-reveal role="dialog"></div>')
.appendTo('body');
}
this.$dialog.foundation('reveal', 'open');
return React.render(
<Dialog close={this.close.bind(this)}/>,
this.$dialog[0]
);
},
close: function(){
if(!this.$dialog || !this.$dialog.length) {
return;
}
React.unmountComponentAtNode(this.$dialog[0]);
this.$dialog.foundation('reveal', 'close');
},
},
render : function() {
return (
<div>
<h1>This gets rendered into the modal</h1>
<a href="#" className="button" onClick={this.props.close}>Close</a>
</div>
);
}
});
I can't seem to find a simple way to set the title on a popup add and edit form launched from the kendoui grid, when it is created using a custom template. When I tried the following example, both Add and Edit operations had "Edit" in the title bar of the popup:
Markup:
<script id="popup-editor" type="text/x-kendo-template">
<p>
<label>Name:<input name="name" /></label>
</p>
<p>
<label>Age: <input data-role="numerictextbox" name="age" /></label>
</p>
</script>
<div id="grid"></div>
JavaScript:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: { id: "id" }
}
},
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
},
toolbar: [{ name: 'create', text: 'Add' }]
});
Fiddle demonstrating the issue: http://jsfiddle.net/codeowl/XN5rM/1/
The issue is that when you press the Add or Edit buttons, the title bar in the popup says: "Edit". I want it to say Add when you press the Add button and Edit when you press the Edit button.
Thank you for your time,
Regards,
Scott
If you want a simple solution, add code to the edit event of the grid to check to see if the model being created when edit is called is a new one or an existing one and set the text accordingly:
...
edit: function (e) {
//add a title
if (e.model.isNew()) {
$(".k-window-title").text("Add");
} else {
$(".k-window-title").text("Edit");
}
}
...
Hope this helps...
If the only thing that you need to do is add a title, you should use:
editable : {
mode : "popup",
window : {
title: "Edición",
}
},
You don't need to define a template unless you need to define something else.
Your modified Fiddle here : http://jsfiddle.net/OnaBai/XN5rM/2/
I had been through most of the conflict-resolving codes online [jquery.noConflict()] etc. And had tried using joomla plugin : jquery easy to try and do resolve it. None of it works for me. Here is the problem:
The top menu of the joomla website uses jquery to display the content, while the sidebar is just joomla's positioning of the menu elements.
With jquery.noConflict():
The top menu would work. The sidebar menu will not be clickable. [Only right-click and open in new tab then it will display the content]
If I had jQuery codes removed all together:
The top menu will, of course, fail to work. The sidebar menu will then be clickable.
So it is either top menu or the sidebar that would work, exclusively. Any suggestion?
My jQuery codes are as follows, in case I did something wrong. >< - currently using jquery easy plugin to :
<script type="text/javascript">
//<![CDATA[
jQuery(window).load(function(){
jQuery('#link1').click(function(e){
jQuery('#exposeMask, #csmf1').fadeIn('slow');
});
jQuery('#link2').click(function(e){
jQuery('#exposeMask, #csmf2').fadeIn('slow');
});
jQuery('#link3').click(function(e){
jQuery('#exposeMask, #csmf3').fadeIn('slow');
});
jQuery('#link4').click(function(e){
jQuery('#exposeMask, #csmf4').fadeIn('slow');
});
jQuery('#closebtn1').click(function(e){
jQuery('#exposeMask, #csmf1').fadeOut('slow');
});
jQuery('#closebtn2').click(function(e){
jQuery('#exposeMask, #csmf2').fadeOut('slow');
});
jQuery('#closebtn3').click(function(e){
jQuery('#exposeMask, #csmf3').fadeOut('slow');
});
jQuery('#closebtn4').click(function(e){
jQuery('#exposeMask, #csmf4').fadeOut('slow');
});
checkTab();
});//]]>
function switchContent(obj) {
obj = (!obj) ? 'tab1' : obj;
var contentDivs = document.getElementsByTagName('div');
for (i=0; i<contentDivs.length; i++) {
if (contentDivs[i].id && contentDivs[i].id.indexOf('tab') !== -1) {
contentDivs[i].className = 'hide';
}
}
document.getElementById(obj).className = '';
jQuery(".current").removeClass("active");
jQuery(".current").removeClass("current");
}
function checkTab() {
jQuery('a').each(function() {
jQuery(this).click(function() {
tab = jQuery(this).attr('href').split('#');
switchContent(tab[1]);
jQuery(this).parent('li').addClass('active');
jQuery(this).parent('li').addClass('current');
return false;
});
});
}
</script>
Thanks in advance!
Check the checkTab() function.
It is applied to each link and may interfere with other links in the sidebar. Maybe make this function less generic so it only applies to links in your top menu.