We Keep Coding

How to display content of file in a modal Window in Kendo Grid

I'm having displaying the content of a JSON file in a modal window. Currently i'm only able to display the file name as a link but what I would want to do is to display the content of that file. Any ideas how it is done. Below is my current code.
$("#adhocSearchKendoGrid").on("click", "a.open-modal", function() {
var dataItem = grid.dataItem($(this).closest("tr"));
$("<div></div>")
.appendTo($("#win"))
.kendoWindow({
title: "Editing item #" + dataItem.filename,
width: "40%",
modal: true,
position: {
top: 30
}
})
.data("kendoWindow")
.content("<a target='_blank' class='file-view'>" +dataItem.filename+"</a>");
//.maximize();
});

Use jQuery's load() method:
$("<div></div>")
.appendTo($("#win"))
.load("path/to/my/file", function() {
$(this).parent().kendoWindow({
title: "Editing item #" + dataItem.filename,
width: "40%",
modal: true,
position: {
top: 30
}
}).data("kendoWindow").center();
});

jQuery not displaying correctly fixed on refresh

I have a thumbnail slider on my web page which i am developing. Now when i go into the website it shows only a little block of the picture but once i refresh the page all is good, any ideas why this happens
http://www.ap2x.gbes.co.za/1/1.html
that is the page in question
i have tested on firefox, chrome and IE. Error does not seem to be browser specific
Slider works perfectly fine off line with no such problem.
I have no idea what could be causing this
$(function() {
// wrap all thumbs in a <div> for the 3x3 grid
$div = null;
$('#thumbs').children().each(function(i) {
if ( i % 9 == 0) {
$div = $( '<div />' );
$div.appendTo( '#thumbs' );
}
$(this).appendTo( $div );
$(this).addClass( 'itm'+i );
$(this).click(function() {
$('#images').trigger( 'slideTo', [i, 0, true] );
});
});
$('#thumbs img.itm0').addClass( 'selected' );
// the big-image carousel
$('#images').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 500,
height: 281,
items: 1,
auto: false,
scroll: {
fx: 'directscroll',
onBefore: function() {
var pos = $(this).triggerHandler( 'currentPosition' );
$('#thumbs img').removeClass( 'selected' );
$('#thumbs img.itm'+pos).addClass( 'selected' );
var page = Math.floor( pos / 9 );
$('#thumbs').trigger( 'slideToPage', page );
}
}
});
// the thumbnail-carousel
$('#thumbs').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 550,
height: 150,
items: 1,
align: false,
auto: false,
});
});

It sounds like it doesn't work until the images have been loaded so you either need to tell the slider how big the images will be once they are loaded or wait till they are loaded before running your script.
Does adding the following CSS solve the problem?
#images img {
height: 281px;
width: 500px;
}
I can't get the bug again to test it myself.

I bet you're viewing this website with Chrome.
There is a nasty bug with this browser when he cannot determine the height of an element.
A workaround would be setting width and height to each slider image manually through css.

JQuery Reload to

I'm new to JQuery and Javascript, and can't find a good example online of how to refresh just the html object inside a div.
The html object is this graph from cosm.com
index.html
<div id="graph" >
<object type="text/html" style="width:100%; height:100%; margin:1%;"data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" >
</object>
</div>
script.js
$(document).ready( function() {
updateGraph;
setInterval (updateGraph, 2000);
}
function updateGraph() {
//This line is not working!!!!
$('#graph').reload();
//$('#graph').load();
}
http://jsfiddle.net/spuder/PNK4k/

Try this out http://jsfiddle.net/Bvpft/16/
Tested in Chrome and FireFox. It refreshes and redownloads the image but not sure what it's supposed to be doing beyond that.
HTML
<!DOCTYPE html>
<body>
<div id="graph" >
<object type="text/html" style="width:100%; height:100%; margin:1%;" data="">
</object>
</div>
</body>
Javascript
$(document).ready( function() {
var graph = $('#graph'),
uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?',
params = {
width: 740,
height: 150,
colour: '#0055ff',
duration: '5minutes',
legend: 'Vibration measure 0 -> 1024 ',
title: 'Foosball Vibrations - 5 Minutes',
show_axis_labels: 'true',
detailed_grid: 'true',
scale: 'manual',
max: 75,
timezone: 'Mountain Time (US & Canada)'
};
var updateGraph = function() {
var data = uri + $.param(params);
graph.empty();
graph.append($('<object/>')
.prop({'type': 'text/html', data: data})
.css({'width': '100%', 'height': '100%'}))
};
updateGraph();
setInterval (updateGraph, 1000);
});
Edited - Changed to Image, made non-flickering, added no-caching (Tested in IE10, Chrome and FireFox): http://jsfiddle.net/JAYDb/4/
HTML
<div id="graph" ></div>
CSS
#graph {
background-color:#C0C0C0;
margin: 0 auto;
min-height: 200px ;
min-width: 750px ;
display: inline-block;
}
#graphObject{
display: block;
width: 100%;
}
Javascript
$(document).ready( function() {
var uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?',
params = {
width: 740,
height: 150,
colour: '#0055ff',
duration: '5minutes',
legend: 'Vibration measure 0 -> 1024 ',
title: 'Foosball Vibrations - 5 Minutes',
show_axis_labels: 'true',
detailed_grid: 'true',
scale: 'manual',
max: 75,
timezone: 'Mountain Time (US & Canada)'
};
var data = uri + $.param(params),
graph = $('#graph'),
obGraph = $('<img/>').prop({'id': 'graphObject'});
var updateGraph = function() {
var date = new Date(),
src = data + '&' + date.getTime();
obGraph.prop('src', '');
obGraph.prop('src', src);
};
graph.empty().append(obGraph);
updateGraph();
setInterval (updateGraph, 1000);
});

A closing bracket is missing?
$(document).ready
( function()
{
updateGraph;
setInterval (updateGraph, 2000);
}
); // missing
You're jsfiddle is not working, because no jQuery version was selected. I've made a working example:
$(document).ready( function() {
alert("OK");
updateGraph();
window.setInterval(updateGraph, 5000);
} );
function updateGraph() {
//This line is not working!!!!
alert("ok");
//$('graph').reload(); // unknown method?
}
http://jsfiddle.net/mmGT9/4/
What do you mean with "$('graph').reload(); ? Is that a custom function?
If you want to reload the "object", I would remove the object from the HTML area and leave just the blank DIV. Then add the following line in your javascript function.
$("#graph").html('<object type="text/html" style="width:100%; height:100%; margin:1%; " data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" ></object>');
This will set the object into the element with the id "graph". Existing content within the div will be overridden. The function is called every n seconds and replaces the object, which force a reload. You can do it more pretty by using a variable.
Here is an example: http://jsfiddle.net/mmGT9/5/

jsFiddle
This Works..
I changed your object to an img tag
<img id='obj' style="width:100%; height:100%; margin:1%; " src=...
$('document').ready( function() {
var i;
var src = $('#obj').prop('src');
setInterval(function(){
i++;
$('#obj').prop('src',src+"&"+i);
},5000);
});

Problem with dialog box using Jquery UI

dial and place are the two divisions which exist in the html code that calls the function.
I am able to open up both of them but not able to embed the graph using plot in the 'place' division after it is opening up via the 'Draw' button.
It works fine only when I open both the boxes initially.
function abcd (dial,place,xrange){
var dial = conv(dial)
var xr = document.getElementById("xrange");
var yr = document.getElementById("yrange");
var gtype = document.getElementById("pattern");
xr.value = ""; yr.value = ""; gtype.value = "Line" ;
var place = conv(place);
$(dial).dialog("close");
$(dial).dialog("open");
$(place).dialog({
autoOpen: false,
show: 'Explode',
height: 500,
width: 450,
modal: true})
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$((place)).dialog("open");
$(function () {
//manipulate input values to plot data
$.plot(document.getElementById(plac2), [ {data:d1roe,label:"abc"},
{data:d1roa, label:"xyz"} ], {
series: {stack: 0},
xaxis: {ticks: ticks},
ticks: ticks
});
});
//function open(xyz) {$(xyz).dialog("open");}
function conv (myid) {
return ( '#' + myid );
}

I figured out a quick fix for it.
The problem was that the dialog will open but will not be manipulated by flot because it was unable to extract the width and height of the dialog box. So before opening the dialog we can fix the height and width.
Specifying height in the style sheet of html did not work in my case.
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$(place).width(500); // can take this as an input as well
$(place).height(500);
$(place).dialog("open");
//ploting code
}})}

The key thing you need for flot to work is for your plac2 div to have a width and height, and be visible (i.e. drawn to the screen). So before you plot, try alerting whether your div has width and height:
var placeholder = document.getElementById(plac2);
alert($(placeholder).width()+','+$(placeholder).height());
//plotting code here
Let us know what happens.

How to display a message on screen without refreshing like SO does? [duplicate]

This is the first time I visited stack overflow and I saw a beautiful header message which displays a text and a close button.
The header bar is fixed one and is great to get the attention of the visitor. I was wondering if anyone of you guys know the code to get the same kind of header bar.

Quick pure JavaScript implementation:
function MessageBar() {
// CSS styling:
var css = function(el,s) {
for (var i in s) {
el.style[i] = s[i];
}
return el;
},
// Create the element:
bar = css(document.createElement('div'), {
top: 0,
left: 0,
position: 'fixed',
background: 'orange',
width: '100%',
padding: '10px',
textAlign: 'center'
});
// Inject it:
document.body.appendChild(bar);
// Provide a way to set the message:
this.setMessage = function(message) {
// Clear contents:
while(bar.firstChild) {
bar.removeChild(bar.firstChild);
}
// Append new message:
bar.appendChild(document.createTextNode(message));
};
// Provide a way to toggle visibility:
this.toggleVisibility = function() {
bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
};
}
How to use it:
var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();

Update:
Check out the DEMO
Code Used:
$(function(){
$('#smsg_link').click(function(){
showMessage('#9BED87', 'black', 'This is sample success message');
return false;
});
$('#imsg_link').click(function(){
showMessage('#FFE16B', 'black', 'This is sample info message');
return false;
});
$('#emsg_link').click(function(){
showMessage('#ED869B', 'black', 'This is sample error message');
return false;
});
});
/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window
params:
- bgcolor: The background color for the message box
- color: The text color of the message box
- msg: The message text
*/
var interval = null;
function showMessage(bgcolor, color, msg)
{
$('#smsg').remove();
clearInterval(interval);
if (!$('#smsg').is(':visible'))
{
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'fixed',
top:0,
left:0,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
fontSize:'18px',
textAlign:'center',
opacity:0.8,
margin:'auto',
display:'none'
}).slideDown('show');
interval = setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 3000);
}
}
}
If you want to create your own, check out the slideToggle function of jQuery.

The relevant css would include:
position: fixed;
top: 0;
width: 100%;
More information about position:fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
If IE6 support is important to you, you may wish to research workarounds.

Here is an alternative method using jQuery which would also slide up/down on show/hide.
Add the following HTML right after the <body> tag in your page:
<div id="msgBox">
<span id="msgText">My Message</span>
<a id="msgCloseButton" href='#'>close</a>
</div>
Add this CSS to your stylesheet
#msgBox {
padding:10px;
background-color:Orange;
text-align:center;
display:none;
font:bold 1.4em Verdana;
}
#msgCloseButton{
float:right;
}
And finally here is the javascript to setup the close button and functions to show and hide the message bar:
/* Document Ready */
$(function () {
SetupNotifications();
});
SetupNotifications = function () {
//setup close button in msgBox
$("#msgCloseButton").click(function (e) {
e.preventDefault();
CloseMsg();
});
}
DisplayMsg = function (sMsg) {
//set the message text
$("#msgText").text(sMsg);
//show the message
$('#msgBox').slideDown();
}
CloseMsg = function () {
//hide the message
$('#msgBox').slideUp();
//clear msg text
$("#msgtText").val("");
}
To perform a simple test you could try this:
Show Message!

Something like this?
$("#bar").slideUp();
However, here I think they fade out first the bar then they bring the main container up, so that'd be something like that:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});