i have improve my code using highchart. I'm using plotoption to echo variabel just like in http://jsfiddle.net/gF8Cf/3/ .
Here is my highchart code :
plotOptions: {
series:
{
cursor: 'pointer',
point: {
events: {
click: function box() {
var week = this.category;
$("#dialog").dialog({
title: "Detail Data",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
},
And for the next, i set the dialog box by :
<div id="dialog" style="display: none">
<div style="margin-left: 35px; font-size:12px;">
IT IS WEEK :
<?php
box();
echo $week
?>
</div>
</div>
I want to show data this.category when the dialog-pop-up-box opened.
The problem is, did i set the wrong code for $week ?
$(function(){
var week = '<?php $week ?>';
});
Try to load the week variable on window load.
Related
I would like to know if it is possible to use datatables (Metronic Laravel Theme) to display a 6*4 grid of user-images instead of displaying the images row-by-row (the standard datatable behavior). Anyone able to help?
ive just started on this so i don't want to waste a lot of time if it's not possible at all, this is what i have so far:
let members_datatable,
members_element = $('...');
members_datatable = members_element.MyCustomDataTable({
columns: [
{
field: 'id',
title: members_element.data('column-id'),
width: 50,
template: function (row) {
return row.id;
}
},
{
field: 'first_name',
title: members_element.data('column-name'),
width: 150,
template: function (row) {
let user_id = ...;
let user_company = ...;
let company_branche = ...;
return `<div class="mt-card-item">
<div class="mt-card-avatar mt-overlay-4">
<img src="storage/public/userImages/${user_id}.jpg">
<div class="mt-overlay">
<h2>${user_company}</h2>
<div class="mt-info font-white">
<div class="mt-card-content">
${company_branche}
</div>
</div>
</div>
</div>
</div>`;
}
},
],
});
I have been googling this and trying to find a solution which seems to be pretty much impossible, I have dropzone integrated in to my application with the remove button, I want to add an additional button to each thumb nail is this possible to do? so two buttons per each thumbnail?
I have added custom download button for each file check below code
var myDropzone = new Dropzone("#form", {
maxFilesize: 2, // MB
addRemoveLinks: true,
dictRemoveFileConfirmation : 'Sure Want To Delete',
init: function() {
this.on("success", function(file, responseText) {
var filename = file.name;
$('#form').append("<input type='hidden' data='"+filename+"' name='files[]' value='"+responseText+"'>");
});
this.on("complete",function(file){
var newNode = document.createElement('a');
newNode.className = 'btn btn-primary btn-xs downloadbtn';
newNode.href = "<?= SITE_URL.''.'upload/attachments/' ?>"+file.name;
newNode.target = "_blank";
newNode.innerHTML = '<i class="fa fa-download"></i> Download';
file.previewTemplate.appendChild(newNode);
});
}
});
Are you creating a custom theme for the thumbnail? That is the easiest way to add buttons etc. http://www.dropzonejs.com/#theming
for example:
<div id="preview-template" style="display:none">
<div class="documents_drop_file_thumb">
<div class="documents_drop_file_thumb_remove"><a class="dz-remove" href="javascript:undefined;" data-dz-remove=""><img src="<?php echo DIRECTORY_INDEX . "/"; ?>images/remove_file.png" alt=""></a></div>
<div class="documents_drop_file_thumb_EXTRABUTTON"><a class="dz-extraaction" href="javascript:undefined;"><img src="<?php echo DIRECTORY_INDEX . "/"; ?>images/extrabutton_file.png" alt=""></a></div>
<div class="documents_drop_file_thumb_image"><img data-dz-thumbnail /></div>
<div class="documents_drop_file_thumb_progress_status"><span data-dz-name></span></div>
<div class="documents_drop_file_thumb_progress"><span class="dz-upload" data-dz-uploadprogress></div>
<div class="documents_drop_file_thumb_progress_status"><span data-dz-errormessage></span></div>
</div>
Then all you need is a dropzone parameter when setting up your dz.
//Prepare the drop zone area
var myNewdDropzone = new Dropzone("#idOfForm", {
url: "my-ajax.php",
method: "POST",
addRemoveLinks: false,
clickable: true,
previewTemplate: document.querySelector('#preview-template').innerHTML,
init : function() {
this.on("addedfile", function(file) { new_file_added(file); });
this.on("thumbnail", function(file,fileurl) { new_thumbnail_added(file); });
this.on("removedfile", function(file) { new_file_removed(file); });
this.on("totaluploadprogress", function(progress) { display_progress(progress); });
this.on("queuecomplete", function() { all_files_uploaded(); });
//this.on("processing", function(file) { new_file_processed(file); });
}
});
Pay particular attention to:
EXTRABUTTON - that is your shiny new button area
addRemoveLinks - your template has them, so don't add new ones (with a nice icon, assuming you have a nice icon with that name)
previewTemplate - that sets up your new thumbnail template
this.on("etcetcetc") calls functions driven by events if you need them
I need help using a Kendo UI list view which lives within a grid row detail template.
here is something I have done so far.
<div id="grid">
</div>
<script type="text/x-kendo-template" id="gridDetailTemplate">
<div class='grid-edit'>
<div class='edit-list'></div>
</div>
</script>
<script type="text/x-kendo-template" id="editItemtemplate">
<div class='edit-Item'>
#if(Type=='string'){#
<ul><li><b>#:Name#</b></li><li><input class='inputString' value='#:DataVal()#'/></li></ul>
#}else if(Type=='number'){#
<ul><li><b>#:Name#</b></li><li><input class='inputNumber' data-role='numerictextbox' data-type='number' value='#:DataVal()#'/></li></ul>
#}else if(Type=='date'){#
<ul><li><b>#:Name#</b></li><li><input class='inputDate' data-role='datepicker' value='#:kendo.toString(DataVal(),'MM/dd/yyyy')#'/></li></ul>
#}else if(Type=='boolean'){Name #<input type='checkbox'/>
#}#
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var selFields = new Object();
$.each(data, function (index, elem) {
selFields[elem.Name] = new Object();
selFields[elem.Name]["type"] = elem.Type;
});
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "http://localhost:4916/Deal",
dataType: "json"
}
},
schema: {
data: "Data", total: "Total",
model: {
fields: selFields
}
}
},
height: 430,
filterable: true,
sortable: true,
pageable: false,
detailTemplate: kendo.template($("#gridDetailTemplate").html()),
detailInit: detailInit,
columns: [{
field: "SecurityName",
title: "Security Name",
width: 250
},
{
field: "DateOfAcquisition",
title: "Date Of Acquisition",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "Acres",
title: "Acres",
width: 120
}
]
});
});
});
function detailInit(e) {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var detailRow = e.detailRow;
detailRow.find(".edit-list").kendoListView({
dataSource: {
data: data,
schema: {
model: {
DataVal: function () {
switch (this.get("Type")) {
case "number"
}
if (e.data[this.get("Name")])
return e.data[this.get("Name")];
else
return '';
}
}
}
},
template: kendo.template($("#editItemtemplate").html())
});
});
}
</script>
My code gets dynamic field list and binds it to the data source for grid.
Then, in the detailInit event, I find the div within row detail and convert it into kendo UI list, for which the template have been created.
Now, when I use data-bind="value: DataVal()" ,it doesn't pick up the values of List data source. It works the way I have done i.e. value="#: DataVal() #". But, data-role does not convert the fields to specified types which are datepicker and numericinput in my case.
I believe that data-role not being used is caused due to same issue as data-bind not being read.
Can anyone help me out with this? Also, feel free to suggest any alternate ways and general code improvements. I am an ASP.NET developer and usually don't work on pure html and javascript.
PS: I would be happy to provide the context on what I am trying to achieve here if anyone is interested.
Thanks in advance.
If you can rig up a jsFiddle or jsBin example that would help debug the issue.
However, try removing the parenthesis:
data-bind="value: DataVal"
Kendo should detect that DataVal is a function and call it on its own.
I experienced a similar situation in a listview template. I created a JSFiddle to demonstrate:
http://jsfiddle.net/zacharydl/7L3SL/
Oddly, the solution is to wrap the contents of the template in a div. It looks like your template already has this, so YMMV.
<div id="example">
<div data-role="listview" data-template="template" data-bind="source: array"></div>
</div>
<script type="text/x-kendo-template" id="template">
<!--<div>-->
<div>method 1: #:field#</div>
<div>method 2: <span data-bind="text: field"></span></div>
<input data-role="datepicker" />
<!--</div>-->
</script>
var model = kendo.observable({
array: [
{ field: 'A'},
{ field: 'B'}
]
});
kendo.bind($('#example'), model);
i create a kendo-datasource and assign it to a kendo-listview. its work fine. But i added a search functionality for the list-view. the problem is after search the datasoruce is updated but my listview does not reflect the changes. please help me here is the code bellow. thanks
<script type="text/javascript">
var shareDataSource; var title = $('#blogTitle').val() || "";
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/BlogPosts/?title=" + title
}
},
pageSize: 15
});
$("#listView").kendoListView({
dataSource: shareDataSource,
template: kendo.template($("#template").html()),
autoBind: true
});
function searchByTitle() {
var title = $('#blogTitle').val();
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/BlogPosts/?title=" + title
}
},
pageSize: 15
});
shareDataSource.read();
}</script>
<div>
<input type="text" id="blogTitle" size="5" />
<input type="button" value="Search" onclick="searchByTitle();" />
</div> <div id="listView"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="post">
<div class="post-meta">
<h2 class="post-title"> <a title="" rel="bookmark" href="">${Title}</a></h2>
<hr/>
<p class="post-metadata">November 29, 2012 in <a rel="category tag" title="View all posts in .net" href="">.net</a>,
<a rel="category tag" title="View all posts in SQL Server R2" href="">SQL Server R2</a> | Tags: <a rel="tag" href="">software</a>,
<a rel="tag" href="">technology</a> | <a title="" href="">Leave a comment</a></p>
</div> <div class="post-content"> ${Content}
</div>
</div>
</script>
Hasib,
you have already defined kendo datasource on the top, try not to recreate it again in your search method. In theory to update your ListView you need to call read on your data source :
function searchByTitle() {
shareDataSource.read();
}
update the datasource [read]. But should use parametrMap. Bobby_D mention above.
//---------------------------------------------------------------------------
var shareDataSource;
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function(){ var title = $('#blogTitle').val() || "";
return "api/BlogPosts/?title=" + title;}
}
},
pageSize: 15
});
//----------------- better -----------------------------
var shareDataSource;
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url:"api/BlogPosts/",// "api/Blogposts/",//
data: {
title: function () { return ($('#blogTitle').val() || ""); } // sends the value of the input as the title id
}
}
},
pageSize: 15
});
I have a function to save the new position of a draggable div created dynamically.
<script type="text/javascript">
$(document).ready(function() {
$(".comdiv").draggable(
{
drag: function(event, ui) {
$(".comdiv").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
alert ('Finished dragging!');
$(".comdiv").css("opacity", "1.0"); // Full opacity when stopped
},
});
});
</script>
This works for a static div defined in the body of the HTML page. I get the alert box. But I also create divs in a php script called through ajax. The alert box doesn't come up for these. The event handler is defined for the entire class. Is there a different way of calling that function for the divs created in this script? The alert box doesn't come up for them.
<?php
function get_nodes() {
// load SimpleXML
$nodes = new SimpleXMLElement('communities.xml', null, true);
foreach($nodes as $node) // loop through
{
echo "<div id = '".$node['ID']."' class= 'comdiv ui-widget-content' style = 'top: ".$node->TOP."px; left: ".$node->LEFT."px;
width: ".$node->WIDTH."px; height: ".$node->HEIGHT."px;'> \n";
echo " <p class = 'comhdr editableText ui-widget-header'>".$node->NAME."</p>\n";
echo " Delete \n";
echo " Add URL \n";
foreach($node->URLS->URL as $url)
{
echo " <div id='".$url['ID']."' class='comurl'><a href='".$url->URLC."' target='_blank'>".$url->NAME."</a><img
align='right' src='redx.png' onClick='delete_url(\'".$url['ID']."\');'/></div>";
/* echo "<script type='text/javascript'> alert('Node: ".$node['ID']." has URLS:".$url['ID']." ".$url->NAME." ".$url->URLC."
'); </script>"; */
}
echo "</div> \n";
echo "<script type='text/javascript'>\n";
echo " $('#".$node['ID']."').resizable();\n";
echo " $('#".$node['ID']."').draggable();\n";
echo " $('#".$node['ID']."').draggable('option', 'handle', '.comhdr');\n";
echo "</script>\n";
}
echo "<script type='text/javascript'>\n";
echo " $('.editableText').editableText();\n";
echo "</script>\n";
return;
}
echo get_nodes();
?>
Here is the HTML.
<body>
<div style="top:450px; width:120px; height:120px; left:800px; background:red;"></div>
<!-- THE ALERT BOX COMES UP IF I DRAG THIS DIV -->
<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px; height:250px; border:1px solid grey;">
<p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
//define php info and make ajax call to recreate divs from XML data
$.ajax({
url: "get_nodes.php",
type: "POST",
data: { },
cache: false,
success: function (response) {
if (response != '')
{
$(document.body).append(response);
}
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".comdiv").draggable(
{
drag: function(event, ui) {
$(".comdiv").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
alert ('Finished dragging!');
$(".comdiv").css("opacity", "1.0"); // Full opacity when stopped
},
});
});
</script>
</body>
</html>
The permissions needed to be set on the folder containing the XML along with the xml itself. Did that for owner, system, iis user, and user.