I am using jquery datepicker in bootstrap modal popup.Once we open the popup and we can select the date and click on 'Save' button. The popup is closed and page is reloaded and the data is saved in the database.It is working till here as expected.
But, in the following scenario it is not working as expected.
I open popup and close the popup without clicking on 'Save' button
When I open popup again and enter date and click on 'Save' it throws jquery undefined error.
Following is my code:
<div class="modal-body">
<div class="form-group">
<label for="<%=txtDate.ClientID %>">Date:</label>
<asp:TextBox runat="server" ReadOnly="true" ID="txtDate" CssClass="form-control datepicker"></asp:TextBox>
</div><hr/>
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-warning" Text="Save" OnClick="btnSave_Click" UseSubmitBehavior="false" data-dismiss="modal" />
<button type="button" class="btn pull-right" data-dismiss="modal">Close</button></div>
My JS code:
<script src="<%=ConfigurationManager.AppSettings["Rootfolder"] %>/Scripts/jquery-ui-1.11.2.js"></script>
<script type="text/javascript">
var txt1 = '#<%= txtDate.ClientID%>';
$today = new Date();
$yesterday = new Date($today);
$yesterday.setDate($today.getDate() - 0);
$(function () {
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy",
minDate: $yesterday,
autoclose : true
});
});
</script>
Am I missing something? Please let me know if I need to add something as I tried for too long and it is not working as expected.
I tried fixing it by reloading jQuery but it did not work. So instead of only closing modal popup on click of 'Close' button I am closing the modal popup and then reloading the page. For this I changed the button to server side control and on click event I am redirecting to the same page.This resolved the issue.
I am posting this because if anyone struggling with similar issue, this might do the trick.Might not be the perfect solution but, it worked for me.
This worked for me.
While closing bootstrap modal, just set datetimepicker to default using set defaults method.
$(".modal").on("hidden.bs.modal", function () {
$(selector).datetimepicker({}).setDefaults();
});
Hope this will help.
Related
I am trying to hide my content by clicking the button. But when the page is loading, content is hiding but after finishing page load content is showed. This content doesn't hide. I am using Visual Studio 2017 community and asp.net/vb.net framework. But the same JQuery code is working on my text editor and my browser.
Here is my sample code:
<p id="justp" class="testcls">Hi Hide me!</p>
<asp:Button ID="testbtn" runat="server" Text="hide me" />
<script>
$(function () {
$('#testbtn').click(function () {
$('.testcls').hide();
});
});
</script>
I am try to passing alert inside hide() and it is run successfully :
$('.testcls').hide(alert("Hello"));
What is the problem?
How can I solve this?
In case your are just using this button to hide/show your content on the client side (no server side calculation or something like that) use a normal input / button tag:
Replace this:
<asp:Button ID="testbtn" runat="server" Text="hide me" />
With this line:
<button type="button" id="testbtn">Hide me!</button>
As mentioned above this solution will only work if you don't need to submit any data.
What is the problem?
The button submits your form after the click so the page will be refreshed and the view will return to the default status.
How can I solve this?
You've several ways to change this behavior :
if you have got a control on the asp code you could remove the runat="server" to prevent the button from submitting :
<asp:Button ID="testbtn" Text="hide me" />
You could simply add the return false; statement at the end of the event.
Another way is preventing the default behavior using preventDefault() like :
$('#testbtn').click(function (e) {
e.preventDefault();
$('.testcls').hide();
});
The one that I recommend to you is using UseSubmitBehavior:
<asp:Button ID="testbtn" runat="server" UseSubmitBehavior="false" Text="hide me" />
Last choice is using the plain HTML code like :
<button type="button" id="testbtn">Hide me!</button>
I have a very simple slideToggle. Opens and closes just fine. I have some tools, a few drop downs that cause a Post Back. When the post back executes, it causes the slideToggle to go back up. How do I keep that from happening? Is there a default value setting I missed or don't know?
I have searched high and low for this answer and nothing works. I have tried so many different options and all lead to nothing. All the answers given here on the site don't work. Any other suggestions? Thanks again for the help
Here is the slideToggle code.
<script type="text/javascript">
$(document).ready(function () {
$(".Flip").click(function () {
$(".FlipPanel").slideToggle("slow");
});
}); `enter code here`
</script>
Here is the markup I use to open and expand.. With some CSS to style it.
<div class="Flip" id="testFlip" runat="server">Preferred Cargo</div>
<div class="FlipPanel">
</div>
Here a very basic example. The value of state will be loaded from the TextBox, incremented and then stored again. You will find that the value increments on every PostBack without server side code. Adapt this to store the open state of your panel.
I uses a TextBox to visualize the process, but normally you would use a HiddenField.
<script type="text/javascript">
$(document).ready(function () {
var state = $("#<%= TextBox1.ClientID %>").val();
state++;
$("#<%= TextBox1.ClientID %>").val(state);
});
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br>
<asp:Button ID="Button1" runat="server" Text="Button" />
I have an asp.net website. I want to open a popup asking for user confirmation in code behind page.
I have a drop down with some values. "cancel ticket" is one of those values. So when user selects this item, I want to display a confirmation box asking user "Are you sure you want to cancel the ticket"?
I've tried some code using JavaScript,
HTML:
<asp:DropDownList ID="ddlStatus" runat="server" CssClass="selectstyle" DataTextField="Name" DataValueField="ID" onchange ="GetSelectedItem(this);" />
JavaScript :
<script type="text/javascript">
function GetSelectedItem(x) {
if (x.value == 4) {
return confirm("Are you sure you want to cancel support ticket ?");
}
}
which is displaying a popup as I want.
Now, I want to make a textbox and a label visible if user clicked on "OK" and reset dropdownlist if user clicked on "Cancel"
I've found this, i hop this help you
http://www.aspsnippets.com/Articles/Server-Side-Code-Behind-Yes-No-Confirmation-Message-Box-in-ASPNet.aspx
You would use
ClientScriptManager.RegisterClientScriptBlock
https://msdn.microsoft.com/en-us/library/bahh2fef%28v=vs.110%29.aspx
The right way to approach this is by checking the value and prompting the user in the client side via javascript (this will probably help you).
But if you insist on going through the server, you can either:
Do an ajax call and then prompt the user for confirmation,
or create another form/view to do that.
Try adding a bootstrap modal and injecting script like ClientScriptManager.RegisterClientScriptBlock (Type, String,"$(modal).modal('show')")
Do remember to add the bootstrap js and css
My suggestion is:
1- Create a invisible div with your cancel button (and/or others elements/controls you want)
<div id="div_dialog" style="display: none;" >
<h3>Do you want to cancel?</h3>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>
</div>
2- Use jquery to use your drop down as a trigger and dialog your hidden div
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
// this will open the popup when drop donw change
//(aply your filter by selected item)
$("#<%=DropDownList1.ClientID%>").change(function () {
$("#div_dialog").dialog({
dialogClass: 'DynamicDialogStyle',
height: 160,
width: 220,
title: "My modal Dialog Popup",
modal: true
});
return false;
});
// this function will do the postback and fire the event in the popup button
$('#<%=Button1.ClientID%>').click(
function() {
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
});
});
</script>
3- Instead of using ddlStatus_Tickets_SelectedIndexChanged event, handle your confirmation code in the confirmation button event click
protected void Button1_Click(object sender, EventArgs e)
{
// you code
}
I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
I have a link to the application so you can view it here
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a><span id="plussignmsg">(Click Plus Sign to look <br />
up Previous Questions)</span> </th>
</tr>
</table>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
Your Live-Example shows me, that you seem to be using SimpleModal
From the documentation:
CLOSING THE DIALOG
SimpleModal will automatically bind the close
function (using the onclick event) to any element inside the dialog
with the simplemodal-close class. In addition, you can
programmatically close the currently opened dialog by calling
$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
$.modal.close();
and be done.
I've used this jQuery reveal modal plugin on several sites and it has worked great for me.
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
The code from both examples will probably lead you to what you are specifically looking for :)
I have a button that closes a modal dialog box on an ASP.NET Ajax form. How do a add a client side function to be called on the same button click?
currently firebug has this for the onclick
javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$DefaultContent$btnPaymentActionDetailClose", "", true, "", "", false, false))
can I just add a click handler with jQuery? I don't want to wipe out the postback as it is necessary for the forms functionality.
Can I use
$("#buttonId").bind("click", function(e){
runAnotherFunction();
});
And not interfere with the existing postback?
Actually truth be told, I want to exec the function when the modal dialog closes. Do ajax control toolkit widgets fire any type of events? I know I can find the behavior and call show and hide. Can I attach my function to exec when modal.hide() is executed?
Thanks for any advice,
~ck in San Diego
Yes, you can definitely have your ASP:Button run Javascript on the client before posting back. It's the OnClientClick property of the webcontrol.
You won't need jQuery for this.
<asp:button id="btn" runat="server" onClientClick="SomeJsFunction()"
onClick="ServerSideMethod()" Text="Hello Button" />
<script language='javascript'>
function SomeJsFunction()
{
alert('hi');
}
</script>
If you're interested controlling whether the postback occurs or not, you could return and check for true/false from the result of your Javascript function.
function SomeJsFunction()
{
var isGood = false;
return isGood;
}
<asp:button id="btn" runat="server" onClientClick="return SomeJsFunction()"
onClick="ServerSideMethod()" Text="Hello Button" />
(thanks to Ralph for the nudge in the comments)