I want to call a c# function from my javascript function.
I have a link button in my ascx (please see the code below). The problem is that if you press enter in firefox is not working however it is working fine in internet explorer.
<li class="clearfix border_top">
<label for="title" class="first_column bold">Search For</label>
<div class="contactUs_details">
<input type="text" id="advanced_txtBox1" name="advanced_txtBox1" class="searchbox" runat="server" style="width:300px;" />
<asp:CheckBox ID="chkSearchBDJ" runat="server" Text="Search BDJ" CssClass="checkboxlistnoborder" />
</div>
</li>
<div class="img_SearchNow">
<asp:LinkButton ID="btnSearchNow" CausesValidation="true" runat="server" OnClick="btnSearchNow_Click"></asp:LinkButton>
</div>
I have linkButton see above on which I have called on c# function on Click, But if you pree some text in above textbox and press "Enter" it should automatically call function "btnSearchNow_Click". It is working fine in IE but not working in Firefox.
A javascript function to click a button...
function clickMyButton() {
var ele = document.getElementById('btnSearchNow');
if ((ele !== null) && (ele != 'undefined')) {
ele.click();
}
}
The wording of your question could use some cleaning up, or some additional information.
If you are looking for pseudo-submit behavior from inside a text box, take a look at this post. Submit Login control button when I hit Enter
You will have to generate the javascript from the server side, since you are using an ASCX and the ID's are not the ones you defined.
You need to have a submit type on the page for it to work properly in firefox.
<input id="mysubmit" runat="server" type="submit" onclick="return false;" style="display: none;" />
Edit: Here's a google cached page that has more information. The original post doesn't seem to be available ATM, but good old google had it.
Related
I am using ASP.NET for a web page in order to make some server calls that involve looking up user organization information. Based on that information, we need to either hide or display a div. In the header I have a C# function that definitely runs. I have tried the following lines to hide the div.
divID.Style.Add("display","none");
and
divID.Visible = false;
In the body, I am currently using an asp:Panel that runs at server and contains the id "divID". No matter what I do, I can't get the div to hide (without manually putting the styling in). I tried putting the scripts before and after the body, and it didn't make a difference. Any suggestions on the best way to do this would be appreciated.
EDIT:
Here is the C# initiating code.
<script runat="server" language="C#">
void getUserInfo(Object sender, EventArgs ev){
The rest of the C# code is irrelevant, but the relevant line shown above is definitely being run.
The HTML portion looks something like this.
<asp:Panel runat="server" id="divID" style="width:200px; height:130px; ">
<div style="text-align:center">Test Data</div>
</asp:Panel>
C# code is always compiled and run from the server-side, and so cannot impact the state of a page once rendered unless you use postbacks or callbacks. If you want to change the visible state of a control on the client-side, you will need to use Javascript on the client side (possibly triggered by a button click) to show and hide the control.
As an example, check out the solution at the link below.
https://forums.asp.net/t/1603211.aspx?Show+hide+div+on+button+click+without+postback
<script type="text/javascript">
function ToggleDiv(Flag) {
if (Flag == "first") {
document.getElementById('dvFirstDiv').style.display = 'block';
document.getElementById('dvSecondDiv').style.display = 'none';
}
else {
document.getElementById('dvFirstDiv').style.display = 'none';
document.getElementById('dvSecondDiv').style.display = 'block';
}
}
</script>
<asp:Button ID="btn" runat="server" Text="Show First Div"
OnClientClick="ToggleDiv('first');return false;" />
<asp:Button ID="Button1" runat="server" Text="Show Second Div"
OnClientClick="ToggleDiv('second');return false;" />
<br />
<div id="dvFirstDiv" style="display: none;">
First Div
</div>
<div id="dvSecondDiv" style="display: none;">
Second Div
</div>
In the header I have a C# function that definitely runs.
If you're talking about the HTML page header - no, it definitely not running. C# code is executed only server side.
Based on your post, I'm assuming we're talking WebForms here and yo have a script block in your aspx file. While this is fine, I recommend placing the server-side code into a code behind file.
So all you need to do is to add a handler for the PreRender phase of the page life cycle and place your logic for showing/hiding the div in there.
public void Page_Prerender(object sender, EventArgs e)
{
divID.Visible = false;
' OR
'divID.Style.Add("display","none");
}
Note that setting the Visible property of a WebForms control excludes the control from rendering to the page, whilst setting display: none renders it as HTML but it isn't displayed on the page.
Try in backcode: divID.Controls.clear();
This worked for me.
I have looked at other questions and answers and still cant seem to solve my issue.
I am using jQuery UI tabs with 3 tabs: Basic Info, Payment, Confirmation
What I want to do is pass the values on the basic information tab textbox's, and payment tab into a label that is on the confirmation tab
ASPX:
<ul>
<li>Basic Information</li>
<li>Payment Information</li>
<li>Confirmation</li>
</ul>
<div id="tabs-1">
<asp:Label runat="server" ID="lblFirstName" Text="First Name" />
<asp:TextBox runat="server" ID="tbFirstName" AutoPostBack="true"/>
<asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" />
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
<asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
<asp:Label runat="server" ID="lblConfirmFirst" />
</div>
</div>
Script in head:
$("#btnContinue").click(function () {
$("#lblConfirmFirst").html($("#tbFirstName.").val());
});
The next tab function works fine, and the values retain in the textbox when the next tab is selected, however it wont pass to the label on the 3rd tab.
I think the problem is asp.net rename your server controls if the page has a master page.
add the attribute: ClientIDMode="Static" to your asp controls.
As you are using the ASP.NET controls, the ID will get changed while rendered. Use the jQuery Ends With selector for selecting the elements.
Use jQuery text method for ASP.NET Labels (i.e. html span), and jQuery val method for ASP.NET Toolboxes (i.e. html input).
Also, as the button is ASP.NET button, it gets post back every time you clickit, so use return false; at the end of button click method.
You have a AutoPostBack="true" for textbox, which might also create problem by resetting the label text while post back.
Below code will work if AutoPostBack="true" is removed from textbox.
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
$("input[id$=btnContinue]").click(function () {
$("span[id$=lblConfirmFirst]").text($("input[id$=tbFirstName]").val());
return false;
});
});
I am using a Javascript package that makes a popup of inline html: http://www.enthropia.com/labs/ibox/
The following works correctly:
Click to Open
However, I want to be able to open the link as above by clicking a asp.net server control button:
<asp:Button ID="searchButton" runat="server" Text="Search Stories" OnClick="searchButton_Click" />
How do I acomplish this? I tried:
<asp:Button ID="searchButton" runat="server" Text="Search Stories" OnClick="searchButton_Click" />
and it works, but it breaks the OnClick C# ability. Also, I found out this is incorrect. So how do I do it correctly?
You want this to occur in the browser, not serverside, so you will not be able to use the .net OnClick.
You'll need to set the asp.net button's JS onclick behavior, and issue a click event on the link when it triggers.
With your existing code, i would do something like this:
ASPX page:
<a id="linkId" href="#inner_content" rel="ibox&width=800&height=400" title="Search Non Scrum Stories">Click to Open</a>
<div id="buttonContainer">
<asp:Button ID="searchButton" runat="server" Text="Search Stories" />
</div>
<script>
var link = document.getElementById("linkId");
var button = document.getElementById("buttonContainer").children[0];
button.onclick = function(){link.click();}
</script>
Here is a working example of the js: http://jsfiddle.net/MaxPRafferty/f8jqP/
I have a website where the user can select different cards. I need a way where when a new card is selected then the page does not refresh. When I click the back button now it just goes back to previous selections. I need it to go back to the previous page. Here is the code for the image change
<div class="imgCard" style="padding-right: 50px">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<fieldset style="border-width: 150px; border-style: none">
<asp:Image ID="imgCardChoice1" runat="server" />
<br />
<br />
<a id="openChange1" href="#" style="color: Red">Change Card</a>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
When the user clicks on "Change Card" then a jquery modal box opens and allows them to change the card. Thank you for any help/advice. If needed the code behind to select a new card is in C#.
Without knowing more, it sounds like you need to use AJAX to do that. If you are already using jQuery, check out jQuery.load(). You can make an AJAX request to a url on your site that will only return the image information and load that into the element you specify.
Here is a link to the docs:
http://api.jquery.com/load/
Try to use some javascript function.
create a div where you want to put your image.
then give him an ID, on javascript function call the div id and change the src to the image that you want to put.
on your link or wathever you have to change the image, call the onclick function and use the javascript function.
On my website i have 2 images, that onmouseover change an image in other div completely different.
see it on:http://roundhillevents.com
and pass the cursor on the facebook and on the youtube logo's.
If nothing appears, let stay the cursor over that a little while.
PS: Only works with forefox and don't know why.
I am having some very strange behaviour in IE with my .Net buttons.
I have a normal HTML button.
<input type="submit" onclick="return Valadation()" value="Save profile" class="btn primary rounded" />
Which then calls some simple JavaScript
if (txbEmail.length == 0) {
$("[id$='txbEmail']").addClass("error");
$("[id$='txbEmail']").focus().select();
showMessage = true;
displayMessage += "Email Address, "
}
else {
$("[id$='txbEmail']").removeClass("error");
}
if (showMessage) {ShowStatus("warning", displayMessage);
return false;
}
else {
var saveButton = $('[id*="butSave"]');
saveButton.focus();
saveButton.click();
}
With the final result clicking a asp.net button
<asp:Button ID="butSave" runat="server" Style="display: none;" onclick="butSave_Click" />
This issue is that Ie just wont ever post the page back? works fine on FF, Chrome, just not IE
If you need the ASP button to perform javascript validation, use the OnClientClick property:
<asp:Button ID="butSave" runat="server" Style="display: none;" onclientclick="return Valadation()" onclick="butSave_Click" />
Simply return false from your Valadation() method to stop the asp button from submitting.
Turns out this is a known issues within jQuery and wont be fixed, but there is a very easy work around.
The script .click() will not work if the button in question has the type="submit" (only in IE wont this work IE7,IE8,IE9 all show this error).
But if you just change the button type to type="button" the .click() event works just fine.