I have a project that I am going to call image paths from SQL. I have tested placing the variable in the image source
HTML
<li><a href='"<%=img_src_path%>"'><img src='"<%=img_src_path%>"' id="myImage" runat="server" alt="" title=""/></a></li>
Code Behind
myImage.src = "imagePage";
Is this same thing possible with javascript? here is my jquery:
$("#fancybox-manual-c").click(function () {
$.fancybox.open([
{
href: '1_b.jpg',
title: 'My title'
}, {
href: '2_b.jpg',
title: '2nd title'
}, {
href: '3_b.jpg'
}
], {
helpers: {
thumbs: {
width: 75,
height: 50
}
}
});
Is it now possible to put the value of myImage in place of the actual images listed here in the jQuery
Yes, you can use <%= %> syntax in JavaScript to inject server variables into your code:
$("#fancybox-manual-c").click(function () {
$.fancybox.open([
{
href: '<%= img_src_path_1 >',
title: 'My title'
}, {
href: '<%= img_src_path_2 >',
title: '2nd title'
}, {
href: '<%= img_src_path_3 >'
}
], {
helpers: {
thumbs: {
width: 75,
height: 50
}
}
});
});
You could also access the src property of any image on your page with jQuery:
$("#myImage").prop("src");
But, there is some weirdness in your code:
You are setting the img src twice. Once with <%= %> in the HTML and again in the code behind with myImage.src = "imagePath";. Why?
You are double quoting your HTML attributes. Use single quotes or double quotes, but not both on a single attribute.
I'm not familiar with fancybox, but this is how I would use jQuery to do the basic idea.
$(document).ready(function() {
img_path = "/the_new_img_path.jpg"
$("#img_link").attr("href", img_path)
$("#img").attr("src", img_path)
})
Then in the HTML
<a href='/some_default_link' id='img_link'><img id='my_img' src='/some_default_image.jpg' /></a>
Related
I would like to implement a pop-up window on mouse over to display a basic thumbnail displaying all the info about said entry.
Below is my index view:
Below is the thumbnail window I would like to display when the mouse hovers over any of the Software Name's.
Any help is appreciate, thank you in advance!
Assuming popup is the ID of your "description box":
HTML
<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>
JavaScript
var e = document.getElementById('parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
Alternatively you can get rid of JavaScript entirely and do it just with CSS:
CSS
.parent .popup {
display: none;
}
.parent:hover .popup {
display: block;
}
What you could do is iterate through all the <tr> </tr> with JQuery and append a html element in which you add your thumbnail. Something like:
$('#table tr').each(function (i, obj) {
$(obj).mouseenter(function () {
$('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
$('#hoveringTooltip').html("your thumbnail");
$('#hoveringTooltip').css({
"top": (obj.getBoundingClientRect().top + 20),
"left": obj.getBoundingClientRect().left,
"background-color": "white",
"border": "1px solid black"
});
});
$(obj).mouseleave(function () {
$('#hoveringTooltip').remove();
});
})
As you can see I apply some css to the div apended in order to show it near the mouse location.
I would like to pass the studentID from the jQuery code to the C# code function when user clicks on the View link, please advise.
$(document).on("ready", function () {
obj = {
width: 940,
height: 555,
title: "Students List ",
};
obj.colModel = [
{
dataIndx: 7, editable: false, sortable: false, title: "Password", width: 65, align: "center", resizable: false, dataIndx: "studentID",
render: function (ui)
{
var rowData = ui.rowData, dataIndx = ui.dataIndx;
var val = rowData[dataIndx];
return "<a href='#" + rowData.studentID + "' style='text-decoration: underline;'>View</a>";
}, className: "checkboxColumn"
},
{ title: "Student Name", width: 220, getEditCellData: saveCell, dataIndx: "studentName" },
{ title: "Student ID", width: 120, getEditCellData: saveCell, dataIndx: "studentID" },
];
obj.dataModel = {
dataType: "JSON",
rPP: 20,
sortDir: "down",
rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
filterIndx: "",
filterValue: ""
};
});
</script>
Grid
<asp:Content ID="Content2" ContentPlaceHolderID="PageTitlePlaceHolder" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<div id="grid_table" style="margin: auto;"></div>
</asp:Content>
Suggest changing your anchor tag to this
<a href="javascript:void(0);" data-studentId=rowdata.studentID style='text-decoration: underline;' class='viewStudent' >View</a>
After that wire up the click event in jquery for the view button
$(document).ready(function() {
$(".viewStudent").on("click", function() {
.. do what you need to do here ..
});
});
Here is a jsfiddle on how to do this
https://jsfiddle.net/8brpuo82/7/
Looks like you may be using web forms here - have you tried using a Hidden Field? Once you bind the anchor tag click event to a jQuery function:
ahh, I see GJohn beat me to it
... then you should be able to reference that ID within the Page response lifecycle, e.g., int studentID = hfStudentID.Value;
I've got a page that opens a modal (Page1.aspx).
That modal is another aspx page (Page2.aspx).
How can I declare in the opener page (or any other way), that a modal button, executes a button click in Page2.aspx.
I've tried to put:$('#ButtonOK').click(); (as it's the buttons id), but on the parent page it isn't recognized.
How can I execute that click?
Many thanks.
MY CODE, PAGE1:
function createModal(f,w,h) {
var dialogWidth = w;
var dialogHeight = h;
$('#dialog').dialog({
autoOpen: false
, bigframe: false
, modal: true
, width: dialogWidth
, height: dialogHeight
, autoResize: true
, closeOnEscape: true
, position: { my: "center", at: "center", of: window.top }
, open: function (event, ui) {
$('#dialog').css('overflow', 'hidden'); //this line does the actual hiding
}
,buttons: {
Ok: function () {
$("input[id$='ButtonOK']").trigger('click');
},
Cancelar: function () {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
$("#iframe").attr('src', f);
return false;
}
function PermMV(usr) {
createModal('new.aspx?usr=' + usr,350,450);
}
<div id="dialog" style="display: none;">
<iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" align="middle"></iframe>
</div>
PAGE 2:
<div id="acrescenta2" title="Perm">
<asp:TextBox ID="txtuser1" name="txtuser" runat="server" Text="" CssClass="consprodtxt" />
<asp:Button ID="ButtonOK" runat="server" OnClick="ButtonOK_Click" OnClientClick="ButtonOK_Click" Text="OK" CssClass="btnmv" />
</div>
Hope that helps.
You need to use IFrame Like This,
<div class="modal-body" id="modal_dialog">
<iframe style=" width:100%; height: 100%;" id="ifrm" src="yourExternalPage.aspx" runat="server">
</iframe>
And Open This Div as a Dialogue using JQuery,
<script type="text/javascript">
$("#BtnClick").live("click", function () {
$("#modal_dialog").dialog({
title: "jQuery Modal Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
1<>Simple jQuery Modal Popup Window Example in ASP.Net
2<>Modal popup using jquery in asp.net
$(document).on("click","element",function(args){
//...
});
Try it
Try this:
$("#ButtonOK").trigger('click');
I am useing jquery pie chart in ASP.NET. pie chart doing work properly, but I want to bind values from database. How can I do bind database values in the pie chart. I have created a table in the database and I want to fetch values from database into the pie chart.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function ()
{
var chart;
$(document).ready(function ()
{
// Radialize the colors
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color)
{
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
chart = new Highcharts.Chart(
{
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function ()
{
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}
]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<di v id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
Simple solution would be to place your values from the DB in a hidden field and then access them using javascript and get their values to be used as part of the series.
This is the ASPX:
....
<asp:HiddenField ID="FireFoxDataValueFromDB" runat="server" />
<asp:HiddenField ID="IEDataValueFromDB" runat="server" />
....
This is the CS:
Page_Load Event()
{
if (!IsPostBack)
{
FireFoxDataValueFromDB = getFFDBValue();
IEDataValueFromDB = getIEDBValue
}
}
....
This is the Javascript:
var FFVal = $("#FireFoxDataValueFromDB").val();
var IEVal = $("#IEDataValueFromDB").val();
and then use it as the series data:
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', FFVal],
['IE', IEVal],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}...
How to refresh a parent page after closing sharepoint dialog?
Here is my coding to open a pop-up.
<input type="button" value="Add" class="button submit" style="width: 80px" onclick="javascript:OpenAttachmentUpload()" />
<script type="text/javascript">
//User Defined Function to Open Dialog Framework
function OpenAttachmentUpload() {
var strPageURL = '<%= ResolveClientUrl("~/Dialogs/AttachUpload.aspx") %>';
//OpenFixCustomDialog(strPageURL, "Attachment");
OpenCustomDialog(strPageURL, 350, 200, "Attachment");
return false;
}
</script>
here is the script.
function OpenCustomDialog(dialogUrl, dialogWidth, dialogHeight, dialogTitle, dialogAllowMaximize, dialogShowClose) {
var options = {
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: Function.createDelegate(null, CloseCallback3)
};
SP.UI.ModalDialog.showModalDialog(options);
}
After opening it, when I close the pop-up (~/Dialogs/AttachUpload.aspx) , I wanna refresh the parent page.
How can I do it?
I google and see SP.UI.ModalDialog.RefreshPage but still can't find an answer for me.
Thanks.
P.s
I don't know much about SharePoint.
You're almost there.
In the option dialogReturnValueCallback you can define a function that will be executed after the dialog was closed. By now you create a delegate pointing to CloseCallback3 but this is not defined in your code.
If you call SP.UI.ModalDialog.RefreshPage in this callback method the page gets refreshed after the dialog was closed with OK.
var options =
{
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: function(dialogResult)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
}
Btw:
You use javascript: in the onclick of the button. This is not necessary. this is only required in the href of an a tag
You can also use the build-in function "RefreshOnDialogClose"
SP.UI.ModalDialog.showModalDialog({
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: RefreshOnDialogClose
});
Try to use this code on click of a button:
<script type="text/javascript">
function RefreshParent()
{
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Ok, null);
}
</script>
If you only want to refresh the page if changes were made you can use the following call back instead.
var options =
{
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: function(dialogResult)
{
if (dialogResult != SP.UI.DialogResult.cancel)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
}
}
Saves you from refreshing the page if the user hit cancel.
Try java-script code as below in Closecall back.
window.location = window.location;