I am trying to add a dropdown in a node and want to be able to create and remove the nodes. I am able to do that but whenever i create/remove a node the dropdown values that i have selected are removed from where the node is created or removed. I am using select2 for dropdown if that helps.
below is the link for demonstration
https://www.arsallodhi.com/jstree/index.html
thanks in advance
I think redraw method is called which does removes the values. So i tried to catch it but couldnt.
<html>
<head>
<style>
.jstree-default .jstree-node, .jstree-leaf {
min-height: 35px !important;
}
.jstree-open .jstree-node {
padding-top: 15px !important;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
</head>
<body>
<div id="jstreee">
<ul>
<li class="jstree-open">
Organization
</li>
</ul>
</div>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
function formatDropdown1(option) {
if (option.id) {
return option.text;
} else {
return '';
}
};
function addTagValueClass() {
$('.tag').select2({
placeholder: '',
allowClear: true,
tags: true,
templateSelection: formatDropdown1,
});
}
var counter = 0;
function customMenu2(node) {
var position = 'inside';
var parent;
var selected_id;
selected_id = parent = $('#jstreee').jstree('get_selected');
counter++;
var node_data;
node_data = "<li class='node-li'><select data-live-search='true' class='tag' placeholder='Tag'><option></option><option value='volvo'>Project</option><option value='saab'>Owner</option><option value='mercede'>Department</option><option value='audi'>Business Unit</option></select></li>"
var items = {
createItem: {
label: "Add Node",
action: function () {
$('#jstreee').jstree().create_node(parent, {"id": "ajson5" + counter, "text": node_data}, position
, function () {
addTagValueClass();
$('#jstreee').jstree().open_node('#' + parent);
});
}
},
deleteItem: {
label: "Remove Node",
action: function () {
if (selected_id != "j1_1") {
$('#jstreee').jstree().delete_node(selected_id);
addTagValueClass();
}
}
}
};
return items;
}
$('#jstreee').on('open_node.jstree', function (e, data) {
addTagValueClass();
});
$('#jstreee').jstree({
"core": {"check_callback": true, "themes": {"icons": false}, "toggle_node": true}, // so that modifying operations work
"plugins": ["contextmenu"], contextmenu: {items: customMenu2}
});
</script>
</body>
</html>
I want that the values which i have set through the dropdown remain even when a node is created or removed.
My site is code in ASP.NET MVC 3.0.
with libraries:
jQuery 3.0.0,
jQuery Validation 1.17.0,
(I'm not sure which others can be useful mentioning).
My problem happens when testing in Internet Explorer 11, exactly when user press a button created as a "Custom Action" using jTable.org. This test happens in a Windows 2012 Server.
The same site tested on Firefox in same server is working without this or any other issue.
In IE, the regular buttons created by jTable for Create, Edit and Delete actions, are working.
This is the code for the View:
#model SuperSBL2.WebMVC3.ViewModels.HTEList
#{
ViewBag.Title = "Administrar HTEs";
}
#section CssImport{
<style>
div.filtering
{
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
background-color: #EEE;
}
</style>
}
<h2>Administrar HTEs</h2>
<div class="filtering">
<form>
<label>Línea de Producción: <input type="text" name="ProductionLineName" id="ProductionLineName" /></label>
<label>Area: <input type="text" name="AreaName" id="AreaName" /></label>
<label>Operación: <input type="text" name="OperationName" id="OperationName" /></label>
<br /><label>Modelo: <input type="text" name="ModelName" id="ModelName" /></label>
<label>Tipo (ensameble/subensamble): <input type="text" name="HTETypeName" id="HTETypeName" /></label>
<button type="submit" id="LoadRecordsButton" class="btn btn-primary">Buscar registros</button>
</form>
</div>
<div id="HTEContainer" style="width: 1200px; "></div>
<br />
<button type="submit" id="GoBack" class="btn btn-default">REGRESAR</button>
<script type="text/javascript">
$(document).ready(function () {
//Localization texts
var spanishMessages = {
serverCommunicationError: 'Error de comunicación con el servidor, no puedo conectarme a la API.',
loadingMessage: 'Obteniendo datos...',
noDataAvailable: 'No hay datos disponibles!',
addNewRecord: 'Nuevo HTE',
editRecord: 'Editar HTE',
areYouSure: 'Estás seguro?',
deleteConfirmation: 'Estás a punto de borrar éste registro. Por favor confirma.',
save: 'Guardar HTE',
saving: 'Grabando',
cancel: 'Cancelar',
deleteText: 'Borrar HTE',
deleting: 'Borrando',
error: 'Error',
close: 'Cerrar',
cannotLoadOptionsFor: 'No puedo cargar opciones para campo {0}',
pagingInfo: 'Mostrando {0} a {1} de {2} registros',
pageSizeChangeLabel: 'Registros',
gotoPageLabel: 'Ir a página',
canNotDeletedRecords: 'No puedo borrar {0} de {1} registros!',
deleteProggress: 'Borrado {0} de {1} registros, procesando...'
};
$('#HTEContainer').jtable({
messages: spanishMessages, //Localizacion
title: 'Lista de HTEs',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'AreaName ASC',
selecting: true,
actions: {
listAction: '#Url.Action("HTEListForGrid")',
deleteAction: '#Url.Action("DeleteHTE")',
updateAction: '#Url.Action("UpdateHTE")',
createAction: '#Url.Action("CreateHTE")'
},
fields: {
HTEHeaderId: {
key: true,
create: false,
edit: false,
list: false
},
HTETypeID: {
title: 'Tipo',
list: true,
edit: false,
create: true,
options: '#Url.Action("GetHTETypeOptions","HTE")'
},
LineID: {
title: 'Línea de Producción',
//width: '35%',
list: true,
options: '#Url.Action("GetProductionLinesOptions","MasterData")'
},
AreaId: {
title: 'Area',
dependsOn: 'LineID', // jTable builds cascade dropdowns!
//width: '35%',
list: true,
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/MasterData/GetAreasOptionsByProductionLineID?productionLineId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/MasterData/GetAreasOptionsByProductionLineID?productionLineId=' + data.dependedValues.LineID;
}
},
OperationID: {
title: 'Operación',
dependsOn: 'AreaId', // jTable builds cascade dropdowns!
//width: '35%',
list: true,
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/MasterData/GetOperationOptionsByAreaID?areaId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/MasterData/GetOperationOptionsByAreaID?areaId=' + data.dependedValues.AreaId;
}
},
ModelID: {
title: 'Modelo',
dependsOn: 'LineID', // jTable builds cascade dropdowns!
//width: '35%',
list: true,
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/MasterData/GetModelOptionsByProductionLine?productionLineId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/MasterData/GetModelOptionsByProductionLine?productionLineId=' + data.dependedValues.LineID;
}
},
OperationAvailableTime: {
title: 'Tiempo disponible',
//width: '35%',
list: true,
edit: false,
create: false
} ,
Effiency: {
title: 'Effciencia',
//width: '35%',
list: true
} ,
RevisionNumber: {
title: '# Revisión',
//width: '35%',
list: true,
edit: false,
create: false,
defaultValue: '0'
},
RevisionDate: {
title: 'Fecha Revisión',
//width: '15%',
type: 'date',
list: true,
edit: false,
create: false,
displayFormat: 'yy-mm-dd'
},
ProductionRate: {
title: 'Producción Diaria',
//width: '35%',
list: true
},
Taktime: {
title: 'Taktime',
//width: '35%',
list: true
},
RequiredHeadCount: {
title: 'Head Count',
//width: '35%',
list: true
},
HTEStatus: {
title: 'Status',
//width: '35%',
list: true,
edit: false,
create: false,
options: '#Url.Action("GetHTEStatusOptions","HTE")'
},
Active: {
title: 'Activo?',
//width: '12%',
type: 'checkbox',
list: true,
edit: false,
create: false,
values: { 'false': 'No Activo', 'true': 'Activo' },
defaultValue: 'true'
},
Overspeed: {
title: 'OverSpeed',
create: true,
edit: true,
list: true
//, defaultValue: #Html.Raw(Json.Encode(ViewBag.OverSpeed))
},
CustomActionAdmin: {
title: '',
//width: '1%',
sorting: false,
create: false,
edit: false,
list: true,
display: function (data) {
if (data.record) {
return '<button title="" id="btnAdmin" class="jtable-command-button glyphicon glyphicon-cog" onclick="transferAdmin(' + data.record.HTEHeaderId + '); return false;"></button>';
}
}
},
CustomActionActivities: {
title: '',
//width: '1%',
sorting: false,
create: false,
edit: false,
list: true,
display: function (data) {
if (data.record) {
return '<button title="" id="btnAdmin" class="jtable-command-button glyphicon glyphicon-wrench" onclick="transferHTEDetails(' + data.record.HTEHeaderId + '); return false;"></button>';
}
}
}
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
e.preventDefault();
$('#HTEContainer').jtable('load', {
ProductionLineName: $('#ProductionLineName').val(),
AreaName: $('#AreaName').val(),
OperationName: $('#OperationName').val(),
ModelName: $('#ModelName').val(),
HTETypeName: $('#HTETypeName').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
$('#GoBack').click(function (e) {
e.preventDefault();
window.location.replace("/HTE");
});
});
function transferAdmin(hteHeaderId) {
window.location.replace("/HTE/AdminSettings/" + hteHeaderId);
};
function transferHTEDetails(hteHeaderId) {
window.location.replace("/HTE/HTEActivitiesList/?HTEHeaderId=" + hteHeaderId);
};
</script>
<br />
#section scripts {
}
Now, this is the code for the _Layout.cshtml in use:
<!DOCTYPE html>
#{
var jTableStyle = "metro/blue/jtable.css";
if (!string.IsNullOrEmpty(Request["jTableStyle"]))
{
jTableStyle = Request["jTableStyle"];
}
}
<html lang="es-mx">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Sistema Balanceo de Líneas - #ViewBag.Title - </title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/metroblue/jquery-ui.css")" rel="stylesheet" type="text/css" />
#*<link href="#Url.Content("~/Content/highlight.css")" rel="stylesheet" type="text/css" />*#
<link href="#Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/core.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />
#RenderSection("CssImport", false)
<script src="#Url.Content("~/Scripts/jquery-3.0.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-migrate-3.0.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.unobtrusive-3.0.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.date.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#* <script src="#Url.Content("~/Scripts/jquery.validate-vsdoc.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shCore.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/moment.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/respond.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jtable/jquery.jtable.js")"></script>
<script src="#Url.Content("~/Scripts/jtablesite.js")" type="text/javascript"></script>
</head>
<body>
#Html.Partial("_NavBar")
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Super Sistema Balanceo de Líneas</p>
</footer>
</div>
#RenderSection("scripts", required: false)
#RenderSection("CustomScripts", required: false)
</body>
</html>
This is a picture of system in Internet Explorer, displayed as expected:
page displayed in Internet Explorer
You can see the rendering is as expected, not issue on this area with Internet Explorer.
Red arrows indicates the buttons created as Custom Action, once pressed up, nothings happens. When the IE developer tools are displayed, I press the buttons indicated with Read arrows, nothing happens: not even an error in console, not even an error in Network tab, nothing at all. This is error I'm having.
Green arrows indicates the buttons created by jTable for EDIT, CREATE and DELETE actions as part of the grid. These buttons are working perfect. No issue on this area. See these pictures:
Page in IE showing modal for New record
Page in IE showing modal for Edit record
I hopes you guys can provide any idea.
Thanks,
Gerardo.
This a complex senario, so I cannot replicate it.
I observe from your code, that you are adding click handlers via javascript in the button definitions. Have you tried applying the click handler via jQuery
display: function (data) {
var $but = '';
if (data.record) {
$but = $('<button title="" class="jtable-command-button glyphicon glyphicon-cog" ></button>');
$but.click(transferAdmin(data.record.HTEHeaderId));
}
return $but;
}
I would also point out your original code was creating a button using the same id btnAdmin on every row of the table which is neither good practice or useful, so I have omitted that, as it is possibly another reason why IE gets confused.
Thanks #misterP for his reply. After having bad times with this, I managed to understand what was wrong, and fixed it.
Let me try to explain fixes to issue I was having.
1) Main problem was that in IE, my jQuery logic was not working, when it worked in Firefox and Chrome. I was not aware of IE compatilibity modes that are fixed with the meta tag at level. So, on file _layout.chtml, I set the following:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
2) Regarding how I managed the functionality on the custom action, I read online that when working with jQuery targeting dynamic elements, we should start the filtering against a fixed tag --- hence I used ContainerForJTable. I declare a custom attribute seleccionable on the dynamic object:
display: function (data) {
if (data.record) {
return '<button id="' + data.record.FileID + '" class="jtable-command-button glyphicon glyphicon-eye-open seleccionable"></button>';
}
}
3) I wrote a function (outside of the jtable object creation --- $('#ContainerForJTable').jtable({..) to add an event to objects matching a filter using my custom attribute:
$('#ContainerForJTable').on('click', '.seleccionable', function () {
var theID = $(this).attr("id");
//console.log("The id is " + theID);
viewFiles(theID);
});
After these changes, the jtables objects had been working without any issues.
thanks,
I wrote a code that will translate text from en-US to id-ID (Indonesian). Here button has got a text which reads as Click me if you are serious. After applying translation, it is getting translated as Klik saya jika anda serius successfully. If I click on that button, an alert message will be displayed like this: You have been alerted, code it down. I want that alert message to be translated to id-ID. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="alertbox();" id="btn" >Click me if you are serious</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
function alertbox () {
alert("You have been alerted, code it down");
}
$.i18n.init({
lng: 'id-ID',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
$('#btn').text($.t('app.btn', {
btn: ''
}))
});
</script>
</body>
</html>
id-ID (ns.special.json)
{
"app": {
"btn": "Klik saya jika anda serius"
}
}
en-US (ns.special.json)
{
"app": {
"btn": "Click me if you are serious"
}
}
How can I translate alert message into id-ID?
Where is your problem? You dont even try :) There is everything documented:
http://i18next.com/pages/doc_jquery.html
And you can find many examples with jquery. You can find even live examples on jsfiddle, like that:
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
http://jsfiddle.net/SalvadorDali/dLc7x/
Finish your code and edit your question, so we can help you. First declare i18n variables, then use $.t
My code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<button id="btn">Click me if you are serious</button>
<div id="qwe"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
/*$("#btn").click(function() {
alert("You have been alerted, code it down!!!");
});*/
$.i18n.init({
lng: 'en-US',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
var key = $('#qwe').text();
$('#btn').text($.t('app.btn', {
btn: ''
}))
$('#qwe').text($.t('app.alert', {
alert: ''
}))
});
$("#btn").click(function() {
alert($('#qwe').text());
});
</script>
</body>
</html>
CSS:
div {
display: none;
}
ns.special.json (en-US):
{
"app": {
"btn": "Click me if you are serious",
"alert": "You have been alerted, code it down!!!"
}
}
ns.special.json (id-ID):
{
"app": {
"btn": "Klik saya jika anda serius",
"alert": "Anda telah diperingatkan, kode itu turun!!!"
}
}
my code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://localhost/abc/pqr/web/css_new/style.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/abc/pqr/web/css_new/scroll.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://localhost/abc/pqr/web/css/jquery_ui/ui.all.css" type="text/css" />
<script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery_ui/ui.core.js"></script>
<script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery_ui/ui.dialog.js"></script>
<script>
var timer;
var keys = {};
$(document).ready(function () {
$(document).mouseleave(function () {
customAlert("Your mouse is away");
});
});
$(document).keydown(function (e) {
keys[e.which] = true;
});
$(document).keyup(function (e) {
delete keys[e.which];
});
if( (keys[91] && keys[68]) || (keys[18] && keys[9]) || (keys[17] && keys[91] && keys[68]) ) {
customAlert("Your mouse is away");
}
function customAlert(customText) {
$("#popUp").html(customText);
timer = setInterval(customAlert2, 5000);
$("#popUp").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK", click: function () {
$(this).dialog("close");
clearInterval(timer);
}
}]
});
}
function customAlert2() {
location.reload();
$("#popUp2").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK", click: function () {
$(this).dialog("close");
}
}]
});
}
</script>
</head>
<body>
<h1>My first PHP program</h1>
<p>Hello World!</p>
<div id="popUp" title="First alert message"></div>
<div id="popUp2" title="Second alert message">Time is over</div>
</body>
</html>
When the pop-up is displayed the Ok button is missing. It's displaying only 'O'.Can you help me in this regard please? I've also attached the screen shot of the popup. Please look at it to get better idea of my issue.
jQuery UI documentation describes different approach for defining buttons.
An example from official docs:
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
http://jqueryui.com/dialog/#modal-confirmation
So, in your case it should look like that:
$("#popUp").dialog({
dialogClass: "no-close",
buttons: {
"OK": function () {
$(this).dialog("close");
clearInterval(timer);
}
}
});
$("#popUp2").dialog({
dialogClass: "no-close",
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
I have tried your code on JS fiddle and called your mouseleave function with the custom alert you provided over there and its working fine i.e when i leave the output window it is showing me the dialog box with "OK" button.
Please find this link and write your second fx too, may be we can find something over there.
Please find the jsFiddle below.
http://jsfiddle.net/LtQnT/352/
$(document).mouseleave(function () {
//$( "#popUp" ).dialog( "open" );
customAlert('Hi');
});
jwplayer("myElement_0").onPlay(function(){ pausePlayers(1); alert('0 has started'); });
jwplayer("myElement_1").onPlay(function(){ pausePlayers(2); alert('1 has started'); });
jwplayer("myElement_2").onPlay(function(){ pausePlayers(3); alert('2 has started'); });
jwplayer("myElement_3").onPlay(function(){ pausePlayers(4); alert('3 has started'); });
function pausePlayers(playing) {
for (var i=0; i<4; i++) {
if(i != playing) { jwplayer("myElement_"+i).pause(true); }
}
};
I have this script to pause other players if one is running. but it doesn't work. In my console, I see:
Uncaught TypeError: Object #<Object> has no method 'onPlay'
(anonymous function)
alhouthgh I'm pretty sure the jwplayer script is being loaded, no issues there.
Here is some quick and dirty sample code for something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.longtailvideo.com/jwplayer/jwplayer.js"></script>
<title>Multiple Mutually Exclusive JW6 Players Which Stop at End</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.flv",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mov",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
primary: "flash",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>