Develop Reference

Jquery hide/ show svg images

[enter image description here][1]Help!
I have two svg image buttons on my page. On the page load I am displaying one of the two buttons based on the value in the DB . and I have jquery to hide that button and show another one on button click from UI. I cannot show another button after hide.
both buttons are in a single span class.

The visibility property can't be block. You should use visible instead.
Have a look at the documentation for more about this property.
EDIT
If that can help... Here is an example showing both hidden and visible for the visibility attribute...
// That is executed on load.
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
// Handler for the toggle button.
$("#toggle").on("click", function(){
$(this).toggleClass("active");
if($(this).hasClass("active")){
$("#btnXX").css("visibility", "hidden");
$("#btnYY").css("visibility", "visible");
}else{
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnXX">XX</button><button id="btnYY">YY</button><br>
<br>
<button id="toggle">Toggle it</button>

I figured it out. My back end code was using property btnXX.Visible = false, Changing it to display:none fixed my issue.
If you don't want to render the control at all in certain situations, set Visible="false". Since it keeps the control's HTML out of the page, slightly but if you want to show the control via Ajax/etc, this won't work and display:none css should be used

GridView SelectedIndexChanged scroll into view to a DetailsView

I have a GridView that displays a small amount of information about multiple users. In this GridView, I have a button that will display all of the information about the selected user inside a DetailsView below the GridView. The problem is, if I don't search for a specific user, I get a list of over 200 people and the GridView is extremely long. This makes the end-user have to scroll to the bottom of the page, which is very annoying. I have been reading about a ScrollIntoView function but I don't think that it is related to a DetailsView. I also read that I can use JavaScript to potentially get the results that I am looking for. I am not sure what the best approach is for this, but any help would be very much appreciated. I have an empty SelectedIndexChanged method that was generated by Visual Studio when I double clicked on the button. If I do end up going with the JavaScript route, where would I insert the code for this? Would it go in the aspx.cs page or just the aspx page?

If all the clicks of the GridView point to the same place on the page, you could do something like this.
<script type="text/javascript">
$('#<%= GridView1.ClientID %>').click(function () {
$('html, body').animate({
scrollTop: $("#targetID").offset().top
}, "medium");
});
</script>
If you load the DetailsView with a PostBack, ypu can do this. Add a scriptmanager to the code behind.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ScrollToElement", "ScrollToElement('targetID')", true);
And then the matching JavaScript function.
<script type="text/javascript">
function ScrollToElement(id) {
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, "medium");
}
</script>

I was able to create a work around to get this working properly. I created a new button that the user can press that will scroll to the top of the DetailsView. It was quite simple, but it will work for what we do. I created an empty span tag above the DetailsView and used <input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" /> for the button.

How to maintain div contents after post back?

I have a panel on a page which it's contents are changed client side. For example, I have the following web form:
<asp:panel id="panContents" runat="server">
<span>Initial content</span>
</asp:panel>
The following jQuery snippet replaces the contents of the div client side when the page is first loaded:
$("<%= panContents.ClientId =>")
.html("<span>Some content to be maintained after postback</span>")
After the page is submitted and returned to the client, the contents of the panel reverts back to as when the page was first loaded:
<div>
<span>Initial content</span>
</div>
Is it possible to maintain the contents of the panel after post back so that it appears the same before being submitted? So I end up with the following after post back:
<div>
<span>Some content to be maintained after postback</span>
</div>

The content of panel vanishes because you are just manipulating the DOM. If you want to retain the value of panel first put it into a hidden field and after post back reassign the text to panel

This content exists only on a client, since Panel does not post any content to the server (somewhat obviously). The workaround you might want to apply to check if you need to run the snippet on the page load. For this you might want a hidden field with a flag.
Here is a dirty proof of concept:
<asp:HiddenField ID="ReplacePanelFlag" runat="server" Value="0" />
// check flag on page load
$(function() {
if ($("<%= ReplacePanelFlag.ClientID %>").val() === "1") {
//run snippet
}
});
// in snippet make sure to set the flag to "1"
$("<%= panContents.ClientId =>")
.html("<span>Some content to be maintained after postback</span>");
$("<%= ReplacePanelFlag.ClientID %>").val("1");

Ajax function to validate on click of a button:

In my page i have a
dropdown
Panel1
Panel2
Button to Move Next
onclick of dropdown data in Panel1 is displayed. and Panel 2 displays previously selected data.
When there is nothing selected indropdown Panel1 is set to invisible.
Now i want if there is nothing selected in dropdown.onclick of button an alert message to be displayed 'please select a data for panel1 and then move next'
earlier i had done this using javascript function with a custom validation function on Next button. but now i want to upgrade
it to Ajax.
Javascript Code:
function Validate(sender, args)
{
if (document.getElementById("ctl00_rightContainer_ContentTable1_Panel1").style.display == 'none') {
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
But after trying ajax function i used visible property and with that i get an error in javascript saying object not found since on load Panel1 is invisible. i hav upgraded my rest functions to ajax but i dont knw hw shal i do this.

If By AJAX you means Asp.net Update Panel then it is preet easy but i dont like it.
Put the Panel inside UpdatePanels
Dont forgot to add ScriptManager on top:
<asp:ScriptManager runat="server" id="sc1"/>
<asp:UpdatePanel ID="up1" runat="server">
</asp:UpdatePanel>
And for the dropdowns set AutoPostBack to true.
The dropdown will have a selectedIndex and in selectedindex check validations and show next panel or message
You can show message like this:
In Label
OR
Alert or some jQuery Popup
ScriptManager.RegisterStartUpScript(this.Page , typeof(Page) , "alertV" , "alert('Errors');" , true);

If you set Visible property of server control to false it won't render at all and you can't show it from client-side code. Try to set style="display:none;" instead. This way panel will be rendered but not displayed on a page and you can show it from JavaScript.

UpdatePanel and modifying controls outside of the Panel

I have a control inside of an UpdatePanel. The UpdatePanel has an AsyncPostBack trigger associated with the inner control. This works just fine.
I have another control containing a SSRS ReportViewControl that I would like to conditionaly hide based on the results from the postback event of the UpdatePanel mentioned above.
The ReportViewerControl is not inside of an UpdatePanel and I would like to keep it this way. How can I hide the ReportViewerControl based on the postback event of an UpdatePanel inside of another control?
I am assuming that many problems would spring up if I place the ReportViewerControl inside of an UpdatePanel, anyone know for sure?

You could create a script inside you update panel content template and hide your control form javascript.
<script type="text/javascript">
Sys.Application.Add_load(MyFunctionThatHides);
</script

The ReportViewerControl is not inside of an UpdatePanel and I would
like to keep it this way.
I did a simple trick. I created a another Updatepanel and put a literal control side the update panel and this update panel code Is Above the "Control you want to hide"
something like this
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Always" >
<ContentTemplate>
<asp:Literal runat="server" ID="literal1"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
Then in Code behind I inject CSS
something like this
literalDvControl.Text = "<style> #YourControlID{ display:none;}</style>";
This seems to be working. Basically literal control is injecting style tag and browser is very quick to react.
but do read about this .
Using <style> tags in the <body> with other HTML

Hide the content through server side code but rather to use javascript (possibly injected by the server through a postback) as suggested by Machinegon.
Have a second UpdatePanel around the other content that you want to hide. (You can't make the current one bigger, but making a second shouldn't cause problems.) Have that second update panel set the same button as the trigger. (You can have a trigger that's outside of the update panel, you just can't update content outside of the update panel.) If the update is conditional (you only sometimes change the content when the button is clicked) then you can set the only trigger for the second panel to be a hidden button which you Click in code from the handler of the first button click.

You can use following code after processing the Async AJAX call on server and just before returning the response to client/browser
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowHideReportViewerJSScript", <JS code to show/hide reportviewer>, true);
I assume you have scriptmanager placed on the ASPX page