I have an odd thing going on that I'm trying to find a work around for (not by choice but I HAVE to do it). I have a javascript function that shows or hides a table row. Someone else wrote it. How it works is that when you click on an image in a table row it shows a row underneath it. Clicking the image again collapses the row. The image code for it is simple:
<img blah blah blah onClick="ShowHide(this);">
What I am trying to do is capture that img element and attributes and send it as a query string so that when the page does a postback I can call the javascript function ShowHide(this) in the code behind and pass it the image properties. That way the row will show on page load. Does that make sense? So what I have right now is:
function postbackwithModal(){
//image properties is what I need to figure out
window.location = "/Products/ProductDetail.aspx?element=" + imageProperties;
}
and then in the code behind:
string element = Request.QueryString["element"];
if (!element.IsNullOrEmpty())
{
ClientScript.RegisterStartupScript(GetType(), "hwa", "ShowHide(" + element + ");", true);
}
The ShowHide() function looks like this:
function ShowHide(Element) {
var rowIndex = $(Element).parent().parent()[0].sectionRowIndex;
var item = $(Element).parent().parent().parent().children()[rowIndex + 1];
if ($(item).is(":visible") == true) {
$(item).hide(0, function () { $(Element).attr('src', '../Images/plus.png'); });
}
else {
$(item).show(0, function () { $(Element).attr('src', '../Images/minus.png'); });
// Loop though the images and set the src value to be the custom handler endpoint.
var ImageContainer = $(item).children().children().children()[3];
var Images = $(ImageContainer).find('img');
}
globalPlus = Element;
}
Related
I have button called sales and it have a JavaScript popup when I click on cancel it postback and the values in the form are inserted but when i click on ok it does not post back and the values in the form does not go in the database ( the JavaScript button is actually print call and when button is clicked it asks for print when print dialog box is open it does not post back and data is not inserted in the database)
here is the javascript code
function confirmAction(printable) {
var r = confirm("You want to Print Invoice?");
if (r == true) {
var printContents = document.getElementById(printable).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
__doPostBack();
}
else {
__doPostBack();
}
}
here is the code for button click
<asp:Button ID="btnaddsale" runat="server" Text="Sale" OnClick="btnaddsale_Click" OnClientClick="javascript:confirmAction('printable')"/>
Ok, couple of notes for you:
You want a postback in either case.
Your <asp:Button> will automatically do a postback either way, so you don't need to call __doPoskBack(); in this scenario.
Major issue here is that, if you want a postback, it will happen immediately when the function exits, effectively canceling out the print dialog too soon. To avoid this, we will use a JavaScript trick that will check if the document has focus, and only when it does (when user exits print dialog in the browser) will we return and allow the postback to occur.
To fix the issue,
First: Make the function return true; when user cancels, and wait for focus and then return true if the user wants to print:
function confirmAction(printable) {
var r = confirm("You want to Print Invoice?");
if (r == true) {
var printContents = document.getElementById(printable).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
// Check focus after user exits print dialog and then return true for the postback
var document_focus = false;
$(document).focus(function () { document_focus = true; });
setInterval(function () { if (document_focus === true) { return true; } }, 500);
}
else {
return true;
}
}
Then, change the JavaScript code to use the return statement in the OnClientClick event:
<asp:Button ID="btnaddsale" runat="server" Text="Sale"
OnClick="btnaddsale_Click"
OnClientClick="javascript:return confirmAction('printable')"/>
Update based on comments and your changed requirement:
Here's a snippet to make the script pop up after the postback. So you will insert values to database, and then add the print script / confirm dialog on page load using Page.ClientScript.RegisterStartupScript()
Note I don't recommend to embed the script in your C# code, so I'd suggest to take your confirmAction() function and place it (if not already) into a separate "yourScripts.js" file and then just call the function name when the page is loaded using jQuery. Here's an example:
In your master page or page header: This file should contain the confirmAction() function
<script type="text/javascript src="path/to/yourScriptsFile.js">
Then, in code-behind:
protected void Page_Load(object sender, EventArgs e)
{
// Only display script on PostBack, not initial page load
if (IsPostBack)
{
Page.ClientScript.RegisterStartupScript(
this.GetType(),
"confirmAction",
#"<script type=""Text/Javascript"">$(document).ready(function() { confirmAction('printable'); });</script>");
}
}
Also note, since you will NOT want a postback now, the confirmAction function should no longer return true; or use the trick code I posted above, and will just return false:
function confirmAction(printable) {
var r = confirm("You want to Print Invoice?");
if (r == true) {
var printContents = document.getElementById(printable).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
return false;
}
I have been using Winform GEPlugin control example for my work.
http://code.google.com/p/winforms-geplugin-control-library/wiki/ExampleForm
my problem is i want to move my placemark (in C#, not KML), i tried a lot but it is not working.
kindly suggest me some solution for this. a sample of code will also be helpful.
I guess we can move it through java script and in winform-GE Plugin there are functions like injectJavascript and invokeJavascript, we can make use of those functions to execute javascript function..
Even I'm not able to move it exactly but I'm able to create a new placemark and delete the previous one which will give a sense that placemarks are moving.
<script
src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw"
type="text/javascript"></script>
<script type="text/javascript">
function addSampleButton(caption, clickHandler) {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;
if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);
// add the button to the Sample UI
document.getElementById('sample-ui').appendChild(btn);
}
function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
</script>
<script type="text/javascript">
var ge;
var placemark;
var counter = 0;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
addSampleButton('Create a Placemark!', buttonClick);
addSampleButton('Remove last Placemark!', RemovebuttonClick);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// Get the current view.
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.setRange(1000);
// Set new latitude and longitude values.
lookAt.setLatitude(11.50);
lookAt.setLongitude(79.50);
// Update the view in Google Earth.
ge.getView().setAbstractView(lookAt);
createPlacemark();
document.getElementById('installed-plugin-version').innerHTML = ge
.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function removePlacemark() {
//counter--;
// alert("placemark" + (counter -1));
ge.getFeatures().removeChild(placemark);
}
function createPlacemark() {
if (counter != 0)
removePlacemark();
placemark = ge.createPlacemark('');
placemark.setName("placemark" + counter);
ge.getFeatures().appendChild(placemark);
// Create style map for placemark
var icon = ge.createIcon('');
icon
.setHref('http://www.veryicon.com/icon/png/Transport/Transport%201/Car.png');
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
// Create point
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var point = ge.createPoint('');
point.setLatitude(la.getLatitude());
point.setLongitude(la.getLongitude());
placemark.setGeometry(point);
placemark.
counter++;
}
function buttonClick() {
createPlacemark();
}
function RemovebuttonClick() {
removePlacemark();
}
</script>
You can try these script and if u r able to move by giving latitude and longitude, then please let me know
I am currently working in ASP.Net / C#. I am trying to make the server redirect to another page using via the rows in a datagrid, however, my code doesn't seem
to work. Any help would be appreciated.
protected void GridView1_RowCreated()
{
foreach (GridViewRow row in GridView1.Rows)
{
Color color = row.BackColor;
string color2 = System.Drawing.ColorTranslator.ToHtml(color);
Session["" + row.Cells[0].Text + ""] = row.Cells[0].Text;
//row.Attributes.Add("onclick", "zz(); return false;");
/*if (row.RowState == DataControlRowState.Alternate)
{
row.Attributes.Add("onclick", "redirectFunction(); return false;");
//row.Attributes.Add("onmouseover", "this.style.backgroundColor=' #FFFFFF';");
//row.Attributes.Add("onmouseout", "this.style.backgroundColor='" + color2 + "';");
//row.Attributes.Add("onclick", cookie.Value = row. GridView1.SelectedRow.Cells[0].Text);
//row.Attributes.Add("onclick", "zz(); return false;");
}
else
{
//row.Attributes.Add("onmouseover", "this.style.backgroundColor=' #FFFFFF';");
//row.Attributes.Add("onmouseout", "this.style.backgroundColor='" + color2 + "';");
//row.Attributes.Add("onclick", "zz(); return false;");
}*/
}
}
public void redirectFunction()
{
Response.RedirectPermanent("View.aspx");
}
Other page
if(Session["session"].ToString() != null)
{
// do something
}
It looks like you are adding a client side on click event and then trying to call a c# method which won't work.
This code:
foreach (GridViewRow row in GridView1.Rows)
{
row.Attributes.Add("onclick", "redirectFunction()");
// Or if you want to pas in an id
row.Attributes.Add("onclick", "redirectFunction(" + rowId + ")");
}
is adding a javascript click event to the row and you are telling it to call a javascript method. You then need to add the javascript method to your aspx page:
<script type="text/javascript">
function redirectFunction() {
alert("do you see this??");
window.location = "View.aspx";
}
</script>
I have added an alert statement, you can get rid of it but do you see this popup? If not check for any javascript errors on the page.
You could also do this with jQuery (it's much easier):
$('.yourrowclassname).click(function () {
window.location = "View.aspx";
});
This means you do don't need to add the attribute in code, just use/add a class to the row.
You should implement this feature by using the SelectedIndexChanged event for the GridView. From there, you can grab all the properties and information of your object that you will need to display in your View.aspx page.
Check this post here, this will help you achieve what you are trying to do
https://stackoverflow.com/a/331662/125551
just add session["var"]= val or send that value in url and get that value in page_load on other page from querystring instead of session
I have written code for javascript but it is not called any how. I tried to call both form html side and also by assigning attribute from page load event but it is not at all called.
This is the code for my javascript.
function rdbantiplatelet_onClick(thiscontrol, trName) {
alert('hi');
var RB1 = thiscontrol;
var radio = RB1.getElementsByTagName("input");
var trDose = document.getElementById(trName.toString());
// var RB1 = document.getElementById("<%=this.rdbantiplatelet.ClientID%>");
// var radio = RB1.getElementsByTagName("input");
// var tblAntiplatelet = document.getElementById("<%=tblAntiplatelet.ClientID %>");
for (var i = 0; i < radio.length; i++){
if (radio[i].checked){
trDose.style.display = "";
return true;
}
else{
trDose.style.display = "none";
return true;
}
}
return false;
}
This is the code to call javascript written in page_load event..
rdbantiplatelet.Attributes.Add("OnClick", "return rdbantiplatelet_onClick(this,'" + trDose.ClientID.ToString() + "');");
Try an alert() first to make sure your onclick is firing, then try your rdbantiplatelet_onClick() function:
rdbantiplatelet.Attributes.Add("OnClick", "alert('I am working');");
First of all for your reference here is a list of standard html events
http://www.w3schools.com/tags/ref_eventattributes.asp
try adding something like this to the html radiobutton element
onchange="alert('on change fired');"
and
onclick="alert(' on click fired');
so you can make sure you are picking up the right event.
Once you have the right event then replace the alert call to your method
which would be something like this
onchange="rdbantiplatelet_onClick(this, this.parent.id)"
...you might have to change the 'this.parent.id'
Make sure you are running through a good web browser for development FireFox with the firebug plug-in is great for this stuff.
You are add click event to html table that holds radiobuttons. Use script below:
foreach (ListItem item in rdbantiplatelet.Items)
{
item.Attributes.Add("onclick", "return foobar(this);");
}
i'm using the below javascript to change an image on an aspx in asp.net c#
<script language="JavaScript" type="text/javascript">
var updateImageWhenHashChanges = function()
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(window.location.hash == "#size=2")
{
theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>";
}
else if(window.location.hash == "#size=3")
{
theImage.src = "<%# Eval("realfilename", "/files/{0}") %>";
}
else if(window.location.hash == "#size=1")
{
theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>";
}
else
{
}
}
</script>
here's how i call it with a link
test
the problem is that it only does what i'm expecting on the SECOND click of the link, because it seems onclick fires before the href, so the first time i'm just placing the var and the 2nd time i'm actually getting what i want.
does anyone know how i can fix this? i'm trying to get the image to change on each click
Perhaps you can replace your href with javascript:void(0) and then handle the link's "natural" click behavior at the end of your onclick() script.
Have you tried a different event like onmouseup or onunload?
You should pass in the current anchor's href to the function call and then use that in your if statements, then return false so that the default behavior isn't used.
var updateImageWhenHashChanges = function(pChoice)
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(pChoice == "size2")
{
// more lines of picking and choosing... and finally:
return false;
and then in the anchor
test
It would also be much better if you could use your databinding to put the real href of the image into the href of the anchor so that if JavaScript wasn't enable the user would still end up being able to see the image in question. Then your function code would just be getting a handle to the image and setting the source to that inbound param.
What about something like this:
<script type="text/javascript">
var updateImageSize = function(imageType, imageID)
{
thisImage = document.getElementById(imageID);
switch(imageType)
{
case "thumb":
// change image src to the thumbnail's path
thisImage.src = "YourThumbNailPath";
case "medium":
// change image src to medium image path
thisImage.src = "YourMediumImagePath";
case "large":
// you get the picture
thisImage.src = "YourLargeImagePath";
default:
// whatever you want it to default to
thisImage.src = "YourThumbNailPath";
}
}
</script>
Then the implementation:
Update Image
Hope that helps.