Develop Reference

How to dispay and hide div in angularjs

I am having a loader in my screen which will be displayed on the screen until page gets loaded or page gives any error.
I am having a div where I have the loader...
<div id:loader class="loading">
...and I am trying to show and hide based on the page load status.
How can I hide and show the loader? Here in my js code:
oninit() {
$scope.loader.showDiv = true;
function(success) {
$scope.loader.showDiv= false;
}
}
But it is not working. Now it is running continuously on the page. Any helping hand on achieving the same.

Use ng-show Try this
<div id:loader class="loading" ng-show="showDiv">
Still use your init function to set showDiv = true or false
Or set a scope for loading in your init
$scope.isLoading = true;
Put this in your div
ng-show="!isLoading"
Set it to false when page is loaded
$scope.isLoading = false;

Ghost cell in IE9 with Repeater Control

IE9 Generate blank cell or you can say Ghost Cell, with ASP.Net Repeater control.
I try javascript regural expression. Render function to run reg. exp. but the page holds few update controls and generate error.
Error: sys.webforms.pagerequestmanagerservererrorexception the message
received from the server could not be parsed. ScriptResource.axd
I try all the well known links for this error.
Please suggest me if you really have...
Thank You
protected override void Render(HtmlTextWriter writer)
{
using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
{
base.Render(htmlwriter);
string html = htmlwriter.InnerWriter.ToString();
if ((ConfigurationManager.AppSettings.Get("RemoveWhitespace") + string.Empty).Equals("true", StringComparison.OrdinalIgnoreCase))
{
//html = Regex.Replace(html, #"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}", string.Empty);
html = Regex.Replace(html, #"(?<=<td[^>]*>)(?>\s+)(?!<table)|(?<!</table>\s*)\s+(?=</td>)", string.Empty);
html = html.Replace(";\n", ";");
}
writer.Write(html.Trim());
}
another Solution is, but fail for Repeater
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
document.body.innerHTML = document.body.innerHTML.replace(expr, '><');

You can access the Repeater control directly (before it's written to the page and rendered by IE) and remove the cells based on their index.

Need to remove spaces between "< /td >" and "< td >".

Found a very useful script to prevent unwanted cells in your html table while rendering in IE9 browser.
function removeWhiteSpaces()
{
$('#myTable').html(function(i, el) {
return el.replace(/>\s*</g, '><');
});
}
This javascript function you should call when the page loads (i.e. onload event)

Javascript Code to hide and display a panel

i want a javascript code to hide/display a panel
The panel has a grid if the grid has data...then the panel should be displayed
and if the grid is empty then the panel should be hidden
I tried this code..but it does not work...
<script language="javascript" type = "text/javascript">
var gridview = (document.getElementById("#<%= gridview1.ClientID %>")) ? true : false;
if (gridview) {
document.getElementById("Panel1").style.display = 'inline';
}
else {
document.getElementById("Panel1").style.display = 'none';
}
</script>

Remove the # in document.getElementById("#<%= gridview1.ClientID %>").

in the line -
var gridview = (document.getElementById("#<%= gridview1.ClientID %>")) ? true : false;
instead of using ("#<%= gridview1.ClientID %>") , write the direct id of your grid yourself.like
var gridview = (document.getElementById("gridview1")) ? true : false;
try it.

First of all, I'm not familiar with C#, so I can't speak for the other part of the code. As for the JavaScript, a couple of things you should know:
getElementById does not return a boolean value, it returns an object. So use !! to force convert to boolean
getElementById does not tell you whether or not there is a value in the element. It simply returns the DOM object specified by getElementById. You need to check for innerText (for IE, chrome, safari) or textValue (for firefox, chrome, safari) property. If using jQuery, check for .val() or .text() is empty.
And getElementById just use the name of the element, without the #. jQuery use that.
Hope it helps,
Angela :)

JavaScript can't get the drop down selected index in a ModalPopupExtender

I have a ModalPopupExtender with multiple drop down lists inside an UpdatePanel,i use JavaScript to open a page and pass parameters in the query string.
The drop down lists selected index is always set to 0 (the initial value when the ModalPopupExtender starts).
Any help?
JS function
function openInterfacePage() {
var url = "Interface.aspx?";
if ($('#<%= DDLPOP.ClientID %>').prop("selectedIndex") > 0) {
url += "pop=" + $('#<%= DDLPOP.ClientID %> option:selected').val().trim();
}
if ($('#<%= DDLDevicePOPUP.ClientID %>').prop("selectedIndex") > 0) {
url += "&device=" + $('#<%= DDLDevicePOPUP.ClientID %> option:selected').val().trim();
}
if ($('#<%= DDLDeviceInterface.ClientID %>').prop("selectedIndex") > 0) {
url += "&interface=" + $('#<%= DDLDeviceInterface.ClientID %> option:selected').val().trim();
}
window.open(url, "mywindow", "toolbar=0,titlebar=0,status=0,resizable=0,menubar=0,location=1, width=920,height=500");
}
The prop("selectedIndex") always = 0,I think the javascript does not recognize the changes that occur after the postbacks.

I found out the reason behind this and i am posting it in case anyone else faces the same issue.
I put my code in a user control and the javascript function was in the same user control,so there were different copies of the same function in the page (the same number of using the user control in the page).
So i removed the functions from the user control and put it in the page,so now there will be only one copy of that function. and passed the IDs of the Drop Down Lists controls as parameters to the function.

How to initialize textbox to hide for first display and still have jquery work

So I now have the following jquery to hide or show a textbox based on specific values selected in a DropDownList. This works except that I need the first display of the popup to always be hidden. Since no index change was made in the drop down list, the following does not work for that. If I code it as visible="false", then it always stays hidden. How can I resolve this?
<script language="javascript" type="text/javascript">
var _CASE_RESERVE_ACTION = "317";
var _LEGAL_RESERVE_ACTION = "318";
function pageLoad() {
$(".statusActionDDLCssClass").change(function() {
var value = $(this).val();
if (value == _CASE_RESERVE_ACTION || value == _LEGAL_RESERVE_ACTION) {
$(".statusActionAmountCssClass").attr("disabled", false);
$(".statusActionAmountCssClass").show();
}
else {
$(".statusActionAmountCssClass").attr("disabled", true);
$(".statusActionAmountCssClass").hide();
}
});
}
</script>
Thank you,
Jim in Suwanee, GA

If you set
visible=false
.Net will not render it. You can do
style="display:none;"
and .Net will render the tag properly but CSS will hide it from the user.

Add the following to pageLoad function
function pageLoad(sender, args) {
$("input.statusActionAmountCssClass").hide();
.... rest of code .....
}
By the way, I would recommend using the selector $("input.statusActionAmountCssClass") to get a jQuery object containing a reference to your input, otherwise jQuery will search all elements to match the CSS class .statusActionAmountCssClass
EDIT:
Another change that could also be made is to use jQuery's data() to store the two global variables
$.data(window, "_CASE_RESERVE_ACTION","317");
$.data(window, "_LEGAL_RESERVE_ACTION","318");
then when you need them simply cache the value in a local variable inside the function
function someFunctionThatNeedsGlobalVariableValues() {
var caseReserveAction = $.data(window, "_CASE_RESERVE_ACTION");
var legalReserveAction = $.data(window, "_LEGAL_RESERVE_ACTION");
}
this way, the global namespace is not polluted. See this answer for more on data() command