Button doesn't do post back in IE 9 - javascript

I'm using the asp file upload control.i didn't wanted to show the user the ugly asp.net control so used some style="width: 0px; height: 0px; overflow: hidden;" to make it hidden.
Here is my html code
<a id="a">Browse</a>
<div style="width: 0px; height: 0px; overflow: hidden;">
<asp:FileUpload ID="file" runat="server" />
</div>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
And i my jQuery ready function i wrote
$(function(){
$('#a').click(function(){
$('#file').click();
});
});
But this code doesn't do a postback in ie. I'm testing in ie 9.Although it works perfectly fine in Chrome and Firefox.
Can any tell me what is wrong with my code.Or else a work around for this.

Have you looked at IE Developer tools to see if there are any javascript errors in IE? It is possible that it is not able to find the control with ID 'file' since it is a server control and the ID is generated dynamically when the page is rendered.
Use this to select a server control.
$("#<%= file.ClientID %>").click()
Or you can use jquery selector.
$("[id$='file']")

Related

Hide a Radbutton which is inside a popup when another popup form is submitted and closed upon OnClientClicking

I have a page "Main2.aspx" and inside this page, I have a button "Transactions" upon clicking this button opens a popup form "Transactions" and Inside this popup, I have coded a button "AddRadbutton" and Upon clicking this "AddRadbutton" on using Javascript URL redirection a new popup "SaveDetails" form will appear.
This "SaveDetails" form is having a "SaveRadButton", upon clicking this "SaveRadButton" my form details will be saved and the popup closes successfully.
The problem I'm facing here is, "AddRadbutton" on the "Transactions" form is still visible even after filling and submitting the details using "SaveRadButton" on "SaveDetails" form.
Earlier, I'm able to achieve the same scenario by coding on Server Side, when I have used the same "SaveDetails" popup page in User Control Page which is inside "Main1.aspx" but not here on Main2.aspx.
In Main2.aspx page I can only achieve this only when page refresh happens. but I need this "AddRadbutton" to be Hidden Immeadiately after submitting the form in "SaveDetails" popup form.
Techniques I've tried so far:
Below is the Code for AddRadButton (which is in Transactions popup)
<div id="AddDetailsDiv" runat="server" visible="true" style="width: auto; height: auto; float: left; margin-right: 10px;">
<telerik:RadButton ID="AddRadButton" runat="server" Text="Add Details"
CausesValidation="False" TabIndex="14" OnClientClicking="showDetailsWindow" UseSubmitBehavior="false" >
</telerik:RadButton>
</div>
Below is the Code for SaveRadButton (which is in SaveDetails popup)
<telerik:RadButton ID="SaveRadButton" runat="server" Text="Save" OnClick="InsertRadButton"
In Server Side for OnClick is there any chance of handling this issue using below line:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "RadWindow", "CloseBind();", true);
I've tried coding another Javascript function and use it in OnClientClicking or OnClientClicked and call both functions but unable to achieve it because Telerik UI is not supporting or I might be missing something else.
I've tried this basic AddRadButton.Visible = false on server side, its working, but only after page refresh but I needed it to be hidden Immeadiately after popup form submission.
I've tried handling in the below code() but unable to achieve it.
function CloseBind() {
var oWindow = GetRadWindow();
oWindow.close();
oWindow.BrowserWindow.loadDetails();
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
I've searched and tried many stackoverflow-related questions, scenarios and also on many community developer sites but those didn't help me either.
Any Ideas or suggestions would be appreciated.
AddRadButton.Visible = false
should work. You will need to make sure that it's inside an if which checks for IsPostback. If that does not work for you, then it's possible that a later event in the WebForms lifecycle overrides it, maybe a render-related event is where this should be implemented, like OnPreRender. You could also register a callback script (see How can I do a call back to the code behind method using javascript (properly)?) and invoke a Javascript functions that changes the display styling to none.
I've tried to solve the problem by introducing an alert() before the window is closed so that the page refresh happens upon alert "OK" button click from the user side.
I've tried by calling an alert function in telerik: RadWindow using OnClientClose="saveDetailsWindowClose"
<telerik:RadWindowManager EnableShadow="true" Behaviors="Maximize, Close" ID="MainRadWindowManager"
DestroyOnClose="false" Opacity="100" runat="server" Modal="true" AutoSize="false"
CssClass="lte_colpopup" KeepInScreenBounds="true" RestrictionZoneID="MainContent"
VisibleStatusbar="false" style="overflow: hidden !important">
<Windows>
<telerik:RadWindow ID="MyRadWindow" ReloadOnShow="true" ShowContentDuringLoad="false" OnClientClose="saveDetailsWindowClose"
Width="950" Height="450" runat="server" Title="Person Details">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadScriptBlock ID="MasterScriptBlock" runat="server">
I've used below simple Javascript function to alert the User:
<script type="text/javascript">
function saveDetailsWindowClose(sender, args) {
alert('A Screen refresh is mandatory to load the details, so please click "OK" button to proceed');
window.location.reload();
}
</script>
</telerik:RadScriptBlock>
This is how I solved the Issue, fortunately, AddRadbutton on both these Main1.aspx and Main2.aspx and also on popup pages are working as intended. Luckily it didn't hamper with the closing of a window in UserControl Page on Main1.aspx which is using the same saveDetails.aspx page.

Asp Print button

I have tried enough on print button code but no sake. These are my codes with images.
<asp:Button ID="printButton" style="margin-left: -0.3%;" runat="server" Text="Print Invoice" OnClientClick="javascript:window.print();" Font-Bold="True" Font-Size="14pt" Width="150px" Height="40px" BackColor="#CC0000" ForeColor="White" />
This gives me the following output.
The problem in this output image is that it prints all the page but it has damaged my design. Like if you can see, Header is showing code instead of images. Is this any way to modify it. e.g i only want here to print the circular logo and the grid-view only.
Another code i have used on button_click code behind is:
ClientScript.RegisterStartupScript(Page.GetType(), "vPrint", "window.print();", true);
it also doesn't works for me. As i used this code when i have design my own template, but when i'm applying this on downloaded templatel, it shows me an empty page on print button output. See here.
I also tried JavaScript function like window.Print() etc. But not working, Kindly sort out this for me. Thanks
Why use an ASP button control at all? Just use a standard html one:
<style type="text/css">
#btnPrint
{
margin-left: -0.3%;
width : 150px;
height: 40px;
background-color: #CC0000;
color: #FFFFFF;
font-size: 14pt;
}
</style>
<input id="btnPrint" name="btnPrint" type="button" value="Print Invoice" onclick="window.print()"/>

Controlling primefaces dialog from javascript

I try to control primefaces display show and hide from java script on bean validation failure, but its not working. As suggested in forums have tried
with widgetVar name of the component in javascript and even tried with id of the component but failed.
XHTML
<p:dialog header="Modal Dialog" id="mglasspaneid" showHeader="false" closable="true" resizable="false" draggable="false" widgetVar="mglasspane" style="height: 50px !important;" modal="true">
<span id="loading" draggable="false" style="height: auto !important;">Loading</span>
</p:dialog>
Javascript
<script>
function handleComplete(data) {
if (data.status === 'success') {
console.log(document.getElementById('validation-failed').value);
mglasspane.hide();
}else{
console.log(document.getElementById('validation-failed').value);
mglasspane.show();
}
}
</script>
From PrimeFaces 5.0 you must call any component with the PF function (i.e. PF('widgtVar') instead of widgetVar which has already been deprecated in 4.0). Source here.
Replacing mglasspane.hide(); by PF('mglasspane').hide(); should work.
More information about the PF function here

asp.net javascript div hide show not working

I am new to asp.net/javascript and have been practising with the following code for sometime now.
Basically I am testing how div containers appear using javascript with the following code (extract)
Everytime I run the page I get the following error:
BC30456: 'Show' is not a member of 'ASP.default4_aspx'.
And the following line gets highlighted:
<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />
I can see the onclick="SHOW() ;" seems to be the problem, but I don't know what's wrong.
Any guidance is welcome.
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />
<div style="background-color:yellow;width=200px;height:200px"></div>
<div style="background-color:red;width=200px;height:200px"></div>
<div style="background-color:blue;width=200px;height:200px"></div>
<div style="background-color:beige;width=200px;height:200px"></div>
<div style="background-color:skyblue;width=200px;height:200px"></div>
<div id="div_Schedule" class="MiddlePopUp" style="display:none;left:400px;top:400px;z-index:10;">
<asp:Button ID="btnScheduleHide" runat="server" Text="hide" onclick="Hide();" CssClass="STD_button" />
<br/>
<br/>
<img src="/quick.jpg" style="height: 764px; width: 1168px" />
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById('div_Schedule').style.display = "none";
function Show() {
document.getElementById('div_Schedule').style.display = "block";
}
function Hide() {
document.getElementById('div_Schedule').style.display = "none";
}
</script>
You should use the OnClientClick instead of OnClick. The first one handles the client click on the client - it doesn't trigger a postback. While the second triggers a postback and the click will be handled in the server.
That being said, you could try this:
<asp:Button ID="btnSchedule"
runat="server"
Text="Schedule"
OnClientClick="Show();"
TabIndex="1000"
style="width:120px;margin-top:-5px;border: thin solid #ffffff;"/>
The same holds for the OnClick of btnScheduleHide button.
As a side note, I don't see the reason for these button to be server side buttons. They could be html buttons. You don't have to define them as a server side controls and then the View engine of ASP.NET render the corresponding html code for them, since you quite possibly don't need to trigger a postback to the server and make some actions there and return a response from the server.
The following, I am almost sure that would meet your needs:
<input type="button" id="btnSchedule" value="Schedule" onclick="Show();"/>
Furthermore, if you stick with the first approach you have to change also the way you select your button in your client side code:
This will not work:
document.getElementById('btnSchedule')
Why?
Because the rendering engine of ASP.NET will create an ID not exactly like btnSchedule. You could easily spot this, if you use the developer tools.
So how you could select it correctly?
document.getElementById("<%= btnSchedule.ClientID%>");
Don't put the javascript onclick in the asp.net button.
Use the ClientID property to attach the onlcick event.
This should do the job.
document.getElementById('div_Schedule').style.display = "none";
function Show() {
document.getElementById('div_Schedule').style.display = "block";
}
function Hide() {
document.getElementById('div_Schedule').style.display = "none";
}
var showButton = document.getElementById("<%= btnSchedule.ClientID%>");
var hideButton = document.getElementById("<%= btnScheduleHide.ClientID%>");
showButton.addEventListener("click", Show);
hideButton.addEventListener("click", Hide);

Access is denied error in IE while file uploading

I am currently working on a new site under .NET MVC platform and I am trying to implement an asynchronous user upload image through iframe. Although I almost complete my task and is fully functional in any other browser fails in IE 9 with the follow error: Microsoft JScript runtime error: Access is denied. It looks like a security concern. Allow me to describe my issue using below code snippets with comments:
1. I have an html form with an input file that its visibility is hidden. Inside the form there are one input element with type="file" and a submit button (also hidden).
<div class="brandLogo">
<p>#identity._RetailerLogo.Caption</p>
<div id="LogoContainer" class="imgLogo">
<img id ="CompanyLogo" src="#DefaultRetailerImage" alt="" title="#Model._ADD_LOGO_IMAGE">
</div>
<p class="txtR">
<a id="UploadLogo" href="#" style="position: absolute; left: -999em; top: -999em;">Upload
</a>
</p>
<form id="UploadForm"
action="#Url.Action("editLogo", "Profile")"
method="POST" enctype="multipart/form-data"
name="UploadForm"
target="UploadTarget"
style="position: absolute; left: -999em; top: -999em;">
<input name="UploadLogoFile" id="UploadLogoFile" type="file" onchange="clickUploadButton();" />
<input type="button" id="SubmitLogoForm" value="Save Image" />
</form>
<iframe id="UploadTarget" onload="UploadImage_Complete();" name="UploadTarget" style="position: absolute;
left: -999em; top: -999em;"></iframe>
The html form tries to post the file to an iframe via javascript. Both form and iframe are on my local project (asp.net mvc) under the same domain ( i run this under localhost).
I am using an on change event on the input element to capture that user selected something and to trigger the submission of the form with ajax call. So when I call via javascript: $("#formID").submit() I get an access denied error.
Any help would be appreciated
I saw this IE bug before,finally I changed my method .triggering change event of input element programmically consider as security risk by IE :( (so stupid IE)
By default IE not let you trigger file element change, if you want you this feature can use ajaxuploader or fileuploader
var uploader = new qq.FileUploader({
// pass the dom node (ex. $(selector)[0] for jQuery users)
element: document.getElementById('file-uploader'),
// path to server-side upload script
action: '/server/upload'
});

Categories