I write in View inside the script tag function.When I click the menu item in view call this function.
I want rename Java script confirm() buttons . How can I do this ? I don't know how write Java script code for this condition .
I follow below code
<script type="text/javascript">
function myFunction() {
var x;
if (confirm("Press a button") == true) {
x = "You pressed Cancel";
} else {
x = "You pressed OK";
}
}
</script>
<li><a><span class="glyphicon glyphicon-log-in" onclick="myFunction()"> </span> Exit</a></li>
ANSWER
You can't control the appearance of confirm() or alert() Javascript dialogs, because they are native, consquently their design is based on the OS/browser.
What you can do:
Own Dialog
Extensions / Plugins
Use a existing dialog js
WAY TO BUILD OWN CLICK ELEMENTS
document.querySelector('#okLI').addEventListener('click', handleClick);
document.querySelector('#cancelLI').addEventListener('click', handleClick);
function handleClick(e){
var target = e.target;
var clickType = target.getAttribute("click-type");
if(clickType > 0)
console.log("CLICKED OK");
if(clickType < 0)
console.log("CLICKED CANCEL");
}
document.querySelector('#ok').addEventListener('click', clickButton);
document.querySelector('#cancel').addEventListener('click', clickButton);
function clickButton(e){
var button = e.target;
var buttonType = button.getAttribute("button-type");
if(buttonType > 0)
console.log("CLICKED OK");
if(buttonType < 0)
console.log("CLICKED CANCEL");
}
<ul>
<li id="okLI" click-type="1">OK</li>
<li id="cancelLI" click-type="-1">CANCEL</li>
</ul>
<button id="ok" button-type="1">OK</button>
<button id="cancel" button-type="-1">CANCEL</button>
You dont need to use buttons, you can add this to every element you want to click.
As you requested, please check jQuery modal dialog for this feature.
you need to include following css and JS in your page.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Then add following script on your page.
Following script will configure a dialog for you with two buttons, "Delete" and "Cancel" and as you see both have a call back function where you can decide what to do on individual click.
<script type="text/javascript">
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete": function() {
// YOUR LOGIC GOES HERE
$( this ).dialog("close");
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
} );
</script>
and then add following HTML on your page
<div id="dialog-confirm" title="Delete Item?">
<p>Do you want to proceed?</p>
</div>
Finally you just need to call following function, when you want to show dialog.
for example, to trigger it on a button click.. you can make it like following
<button type="button" id="btn_delete">Delete</button>
<script type="text/javascrpt">
$("#btn_delete").click(function(){
$( "#dialog-confirm").dialog( "open" );
});
</script>
You can find more details on following link.
jQuery Dialog
For javascript Confirm
You cannot rename button titles for Javascript Confirm, as it is managed by browser and there is no any library or plugin which can manipulate these components.
Related
What am I doing wrong?
I try to change div text with ajax... but doesn't do anything... I guess the problem is in my controller method..
This my div
<div id="div1">
text to change
</div>
<button>change text</button>
#section scripts{
<script>
$(document).ready(function() {
$("button").click(function () {
$.ajax({
url: "/Home/ChangeText", success: function (result) {
$("#Div1").html(result);
}
});
});
});
</script>
}
This my Controller
public JsonResult ChangeText()
{
var result = "New Text";
return Json(result, JsonRequestBehavior.AllowGet);
}
Note: when is running it's enter to method 'ChangeText' but it doesn't print the result(New Text) on my view
You wrote <div id="div1"> and $("#Div1").html(result);. However div1 not equals Div1, first symbol is big (upper case). JavaScript is sensitive to upper and lower case.
The type attribute specifies the type of button. Always specify the type attribute for the <button> element. Different browsers may use different default types for the <button> element. If you want send data to controller - write type of button type="button" or type="submit".
Attribute values and descriptions:
button - The button is a clickable button
submit - The button is a submit button (submits form-data)
reset - The button is a reset button (resets the form-data to its initial values)
Try this code:
<div id="div1">
text to change
</div>
<button type="button">change text</button>
#section scripts{
<script>
$(document).ready(function() {
$("button").click(function () {
$.ajax({
url: "/Home/ChangeText", success: function (result) {
$("#div1").html(result); // Div1 != div1
}
});
});
});
</script>
}
I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..
If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})
I have the below JQuery script
<script type="text/javascript">
$(function() {
$("#no-email-popup").dialog(
{
autoOpen: false,
buttons: {
"ok": function() {
alert($('#new_email').val());
alert(window.top.$("#new_email_label.").val());
// alert(window.top.$("#<%= new_email_label.ClientID %>").val());
$(this).dialog("close");
},
"cancel": function() {
$(this).dialog("close");
}
}
}
);
});
</script>
And and modal asp.net is
<div id="no-email-popup">
<label>Enter Email: </label>
<input type="text" id="new_email" />
</div>
I want to get the value from Pop up back to to asp.net page and assign to label there
<asp:Label ID="new_email_label" runat="server">test top window label</asp:Label>
I found out that I cannot change the value of this label even
Please help how to get value to top asp.net page
Using .val() on a <label/> won't give you the inner html of said label. You would need to use .html() to retrieve it, or .html("something") to set it.
after (or instead) of your alerts, try: $("#new_email_label").val($("#new_email").val());
I'm having a problem with a JQuery dialog being empty when displayed. I know what the problem is but can't figure out how to fix it. I hope to find some help here.
Issue:
I have a page with a simple list of users. Every item/user on the list has an EDIT link. When clicked edit a dialog box pops up with details for that user. Great! Sounds simple enough.
So the user list initializes the partial view that'll be a dialog box:
#Html.Partial("EditUser", new User())
That pre-loads the partial view and the dialog is initialized with a regular:
$(function () {
$("#edit-user-dialog").dialog({
title: "Edit User",
autoOpen: false,
height: 500,
width: 600,
modal: true
});
});
So far so good...
The partial view itself is a regular page with Ajax form submit that allows me to submit modified user info. Everything associated to that popup, such as its DIV, connected JScripts must be contained within just so information could be easily found later. Here is the sample code of the Partial View that will be displayed as a dialog:
#model MyNamespace.User
<script src="#Url.Content("~/myUserEditScriptScripts.js")" type="text/javascript"></script>
<div id="edit-user-dialog" style="display: none">
#using (Ajax.BeginForm("SaveUserJson", "User", new { id = Model.Id }, new AjaxOptions
{
HttpMethod = "post",
OnSuccess = "editUserSuccess()",
}))
{
<div class="display-field">
#Html.DisplayFor(model => model.Name)
</div>
.
.
.
Various controls go here...
.
.
.
<p>
<input type="submit" value="Detach" />
</p>
}
</div>
Standard stuff so far...
So when the initial list of users is loaded the "Edit users" partial view gets pre-loaded on the page but it's not visible because the div is set to display: none and it's initialized as being a dialog popup.
Next when an "edit" link is clicked next to a specific user I would like that popup to be populated with the information of that selected user.
Ajax to the rescue!
On "Edit" link click I load the partial view with the selected user data:
function editUserLoad(userId) {
$.ajax({
url: '/User/EditUser/',
data: { id: userId },
type: 'post',
datatype:'html',
success: function (data) {
$("#edit-user-dialog").html(data);
$("#edit-user-dialog").dialog('open');
}
});
}
Works great! It grabs the selected userId, jumps to my action method that returns the partial view populated with the User data I want to display.
The problem is that the dialog is displayed empty ! Well I know why. It's empty because the dialog DIV is set to "display: none". But why ? Doesn't .dialog('open'); override display: none and doesn't it suppose to show the content of the dialog even if it was hidden ?
I tried to have .show separately but it didnt work.
Help ?
Could you try this approach. Just create an empty div like following
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Edit User',
modal: true,
open: function(event, ui) {
//Load the Edit User partial View
$(this).load("#Url.Action("action","controller",new {ID = user_id})");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Edit User" style="overflow: hidden;">
//return partial view
public ActionResult EditUserView(int id)
{
UserModel um = new UserModel(id);
return PartialView(um);
}
THERE is a very nice example here, which you can use to
I'm using Jquery dialogs in my Asp.net web application for all my messages.
Now I've tried to fill a listview with customers inside a dialog and its working, but I want to allow the user to use paging in the listview for choosing his customer out of the list.
When I press the button to move up 1 page, it ain't working...
Maybe it's just not possible? Or does someone have an example of paging a datacontrol in a Jquery dialog?
Greetz,
Ben
I suspect that the dialog is not being displayed after the paging postback?
You have two options:
One: Change to using a popup window with the listview so that the paging is handled in the normal way in its own page
Two: On the serverside, when rendering pages, also render a startup jQuery script that re-displays the dialog.
<div id="dialog" style="display:none;" >
<asp:listview ID="lv" runat="server" />
...etc
</div>
In code behind:
var script = new StringBuilder();
script.AppendLine("jQuery(function($) {");
script.AppendLine(string.Format(" $('#dialog').attr('Title','{0}');", dialogTitle));
script.AppendLine(" $('#dialog').dialog({ closeOnEscape: true, modal: true });");
script.AppendLine("});");
ClientScript.RegisterStartupScript(GetType(), "dialog", script.ToString(), true);
The 2nd option works!
I only added this code in codebehind:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "openDialogScript", "$(function() { openCustomerDialog(); });", true);
And in the .aspx file I added this:
openCustomerDialog = function openDialog(){
$("#reportCustomerDialog").dialog({
modal: true,
height: 420,
width: 500,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
$("#dialog").show();
};