I cannot get my jqGrid to become editable and am stumped as to what is wrong.
I have a function that is called when links are clicked and creates new grids.
Javascript
<script language="javascript">
function getCharacteristics(id)
{
$.getJSON('json/getCharacteristics.php?category_id='+id, function(data) {
$("#grid").jqGrid("GridUnload");
data.length=data.length-1;
$("#grid").jqGrid({ //set your grid id
data: data, //insert data from the data object we created above
datatype: 'local',
width: 500, //specify width; optional
colNames:['character_id','gr_name','en_name','charType'], //define column names
colModel:[
{name:'character_id', index:'character_id', key: true, width:50},
{name:'gr_name', index:'gr_name', width:100, editable:true},
{name:'en_name', index:'en_name', width:100, editable:true},
{name:'charType', index:'charType', width:100, editable:true},
], //define column models
pager: '#pager', //set your pager div id
sortname: 'id', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
editurl: 'clientArray',
cellsubmit:'clientArray',
caption:"jqGrid Example", //title of grid
onSelectRow: function (character_id) {
jQuery("#" + options.table).editRow(character_id, true);
},
});
$("#ed1").click( function() {
$("#grid").jqGrid('editRow',"1");
this.disabled = 'true';
});
});
}
</script>
The output of my JSON data is the following:
JSON data
[{"character_id":"477","en_name":"LENGTH","charType":"input","gr_name":"\u00cc\u00c7\u00ca\u00cf\u00d3","categories_id":"27"},{"character_id":"479","en_name":"COLOR","charType":"input","gr_name":"\u00d7\u00d1\u00d9\u00cc\u00c1","categories_id":"27"},false]
Head Section
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
div.scrollCategories{
height:200px;
overflow-y: scroll;
overflow-x: hidden;
}
td th
{
font-size:10px;
border:1px solid #98bf21;
padding:10px 10px 10px 7px;
}
th
{
font-size:11px;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;
}
tr.alt td
{
color:#000;
background-color:#EAF2D3;
}
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" media="screen" type="text/css" />
<link href="jquery.jqGrid-4.5.2/css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>
</head>
The selector in the onSelectRow is not correct, replace jQuery("#" + options.table) with jQuery("#grid").
Check the demo please.
Demo on jsFiddle
Related
I have added all required js and css files, still getting this error. I am sharing my header script : It's a jquery slider plugin I have downloaded from github and trying to integrate in a laravel web application
<link rel="stylesheet" type="text/css" href="{{asset('css/bootcamp.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/lightslider.css')}}">
<style>
.bootcamp-body{
background: white;
color: black;
}
.content{
}
.content-slider{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.demo .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.demo{
width: 800px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='{{asset('js/lightslider.js')}}'></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
I am getting the following error :
The library looks (after clicking on the link) :
I'm using a kendo grid and I want to implement an action bar when a user hover the row. I found the example solution. But I'm looking for showing the tooltips at the end of the row instead of the current hover column. So how can I get the last column that user currently stop at?
Add a :last-child to the filter property:
filter: "tbody td:last-child",
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 500
}, {
field: "ContactTitle",
title: "Contact Title",
width: 300
}, {
field: "CompanyName",
title: "Company Name",
width: 300
}, {
field: "Country",
width: 300
}]
});
});
$("#grid").kendoTooltip({
position: "right",
callout: false,
filter: "tbody td:last-child",
content: function(e) {
return "<button class='k-button' ><span class='k-icon k-i-trash'></span></button> <button class='k-button'><span class='k-icon k-i-email'></span></button> <button class='k-button'><span class='k-icon k-i-warning'></span></button>";
}
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Dojo
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
I'm trying to drag an object (a simple image) onto the canvas from the toolbox. But once I move/ drag the object I dropped on the canvas it seems to create another clone of itself. But what I need is to simply be able to drop the object onto the canvas multiple times and have the possibility to move the object within the canvas without creating replicates of that object every time I drag it within the canvas. Here's my code:
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: #0d78bc;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
//Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
//Objects in the canvas are stagnant.
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
$(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged.
droppedElement.appendTo('#dropArea');
droppedElement.click(divClicked);
}
});
function divClicked(clickedElement)
{
jsPlumb.draggable(clickedElement, {
containment : 'parent',
stop : function (event)
{
alert("divClicked Called!");
stateDragged=true;
clickedElement.css('background-color ','blue');
}
});
}
});
</script>
</body>
</html>
I've solved it and here's the final code. I had to remove the helper since jsPlumb doesn't support jQuery. And also add a class to the dropped element which provides the same style but stays safe from inheriting the same functionality as the ctoolbox element.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.ch{
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("ch");
$(droppedElement).draggable({containment:
"dropArea"});
droppedElement.appendTo('#dropArea');
}
});
});
</script>
</body>
</html>
This is the script i wrote to get an ajax response.
<script>
$( document ).ready(function()
{
$("#log").click(function(){
alert('hellow');
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
dataType: "html"
}).done(function(resp) {
console.log(resp);
var $response = $(resp);
});
});
})
</script>
This is how the ajax response body looks like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta http-equiv="refresh" content="900" >
<title>Toronto Raptors</title>
<link href="Html/Panel/ControlPanelStyle.css" rel="stylesheet" type="text/css">
<!--THIS WILL SUPPRESS ALL ERROR POPUPS-->
<script type="text/javascript">
<!--
var debugMode = false; //turns on error messages for windows and grids ->false = production build
//Hide all window errors
if(debugMode == true){
function silentErrorHandler() {return true;}
window.onerror=silentErrorHandler;
}
//-->
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 100%;
background: #244A77;
}
a img {
text-decoration: none;
border: 0 none;
}
Html, body {
Overflow:hidden;
}
font.text {
visibility:visible;
}
#pageContainer{
width: 100%;
height: 100%;
background: 244A77; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#244A77', endColorstr='#7DA7D9'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(244A77), to(7DA7D9)); /* for webkit browsers */
background: -moz-linear-gradient(top, #244A77, #7DA7D9); /* for firefox 3.6+ */
}
/*CSS for resizing counter Widgets*/
div#counter2containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter2container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter5containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter5container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter10containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter10container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter11containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter11container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
</style >
<!-- general window handling -->
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css" />
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
<!--Tree - Used for Triggers -->
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxtree.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<!--acordian Used for Triggers and Healtcare -->
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css" />
<script src="../../dhtmxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="../../dhtmxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<!--Other Header Files Required-->
<!--JAVASCRIPT to autore-size counter widgets-->
<script type="text/javascript">
//$(document).ready(function() {
function divresize(counterName) {
//alert("RIZSE1");
var containerName = '.' + counterName + 'container'
var secondContainer = '#' + counterName + "containercontainer";
var contentwidth = $(secondContainer ).width();
var contentheight = $(secondContainer ).height();
$(containerName).css('width',contentwidth )
$(containerName).css('height',contentheight );
//Better ReSize Attempt...
//Determine Character Width
/*var elem = document.getElementById(counterName +"_Value");
var currentText = elem.innerHTML;
var widthMultiplier = 1;
if(currentText.length > 1){
widthMultiplier = (currentText.length);
contentwidth = contentwidth / (widthMultiplier);
}*/
//Make the size the same as the smaller of the two dimensions
if(contentwidth < contentheight){ $('#' + counterName+ '_Value.text').css('font-size',contentwidth / (1.3)); }
else{ $('#' + counterName+ '_Value.text').css('font-size',contentheight / (1.3)); }
//alert("RIZSE");
}
</script>
<!-- dhtmlxGrid -->
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/ext/dhtmlxgrid_ssc.js"></script>
<link rel="STYLESHEET" type="text/css" href="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<!--dhtmlxCharts Required-->
<link rel="STYLESHEET" type="text/css" href="../../dhtmxSuite/dhtmlxChart/codebase/dhtmlxchart.css">
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxChart/codebase/dhtmlxchart.js"></script>
<!--Javascript For Speedo and/or Counter Required-->
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery-1.4.min.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery.speedometer.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery.jqcanvas-modified.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/excanvas-modified.js"></script>
</head>
<!--<body onload="doOnLoad();" style="background-image: url('../../dhtmxSuite/images/BannerTileBackground.gif'); background-repeat: repeat-x; background-color: #87AEC5;" >-->
<body onload="doOnLoad();" >
<div id="pageContainer">
<div id="counter2_div">
<div id="counter2containercontainer">
<div class="counter2container"><font class="text" id="counter2_Value"></font></div>
</div>
</div>
<div id="counter5_div">
<div id="counter5containercontainer">
<div class="counter5container"><font class="text" id="counter5_Value"></font></div>
</div>
</div>
<div id="counter10_div">
<div id="counter10containercontainer">
<div class="counter10container"><font class="text" id="counter10_Value"></font></div>
</div>
</div>
<div id="counter11_div">
<div id="counter11containercontainer">
<div class="counter11container"><font class="text" id="counter11_Value"></font></div>
</div>
</div>
<div id="pie_medium6_div" style="width:100%;height:100%;position:absolute"></div>
<div id="speedometer4_div" style="width:100%;height:100%;position:relative;left:0px;top:0px">0</div>
<script type="text/javascript">$(function(){ $('#speedometer4_div').speedometer(); }); </script>
<!--<div id="winVP" style="position: relative; height: 100%; margin: 0px;"></div>-->
<div id="triggersActive" style="width:100%;height:100%;"></div>
<div id="triggersHistory" style="width:100%;height:100%;"></div>
<div id="triggerBox" style="width:100%;height:100%;"></div>
<div id="pageFooter">Powered By Raptors</div>
</div>
</body>
<script type="text/javascript">
var dhxWins;
var dhxAccord;
var menu;
var w999;
var triggers;
var showWidgets;
var tree;
//Globals needed for banner messages
var marqueeQueue = [""];
var lastMessage = "";
var lastTrigger = "";
var lastFiringTriggerList = "";
var marqueeCounter = 0;
var marqueeIndex = 0;
//Globals needed for initial start positions if null
var curTopPos = 27;
var curLeftPos = 0;
var curBottomPos = 0;
var windowDim = getBrowserDimensions();
var maxWidth = windowDim.split(',')[0];
var maxHeight = windowDim.split(',')[1];
var initialLoadMode = true;
var warningBorderSytle = "solid 5px #FFFF00";
var urgentBorderSytle = "solid 7px #FFA500";
var criticalBorderSytle = "solid 10px #FF0000";
function doOnLoad() {
//Ignore chart Errors
if(debugMode == false){
dhtmlxError.catchError("LoadXML",function(a,b,data){ });
}
//Create a viewport and attach to existing div
dhxWins = new dhtmlXWindows();
//dhxWins.enableAutoViewport(false);
//dhxWins.attachViewportTo("winVP");
//Handle moving and resizing widgets... save to cookie
dhxWins.attachEvent("onMoveFinish", function(win){ setWindowStatusCookie(win,1); });
dhxWins.attachEvent("onResizeFinish", function(win){ setWindowStatusCookie(win,1); });
dhxWins.attachEvent("onFocus", function(win){ updateZIndex(win); });
//dhxWins.attachEvent("onClose", function(win){ setWindowStatusCookie(win,0); });
dhxWins.setImagePath("dhtmxSuite/dhtmlxWindows/codebase/imgs/");
dhxWins.attachEvent("onClose", function(win){ win.hide(); });
//ShowWidgets Window
showWidgets = dhxWins.createWindow("showWidgets", 0, 30, 250, 600);
showWidgets.setText("Add Widget");
tree = showWidgets.attachTree();
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../dhtmxSuite/dhtmlxTree/codebase/imgs/csh_bluefolders/");
tree.setOnCheckHandler(widgetTree_oncheck);
tree.enableCheckBoxes(true,true);
tree.deleteChildItems(0);
tree.insertNewChild(0, 'w2', "Raptors are back");
tree.insertNewChild(0, 'w5', "Celtics is never the same");
tree.insertNewChild(0, 'w10', "lakers are up");
tree.insertNewChild(0, 'w11', "Heat is going down");
tree.insertNewChild(0, 'w1', "Leafs are back");
</script>
I am intrested in parsing out the very bottom part where it says:
tree.insertNewChild(0, 'w2', "Raptors are back");
From this i want to parse out ==> Raptors are back
Can anyone please provide some guidance or clue or help as to how i can do this? I have been stuck on this for 2 days. I am very new to web development in general so i apologize if this is a poorly worded question.
Something like this should work if you need to accept the result as HTML:
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
dataType: "html",
success: function (html) {
alert(/tree.insertNewChild\([^"]*"([^"]*?)"\);/g.exec(html)[1]);
}
});
Here is an example on jFiddle too:
http://jsfiddle.net/hcrM8/16/