So I am trying to implement a dialog box pop up when the user clicks on a menu button on my page for example About-Button which will display information regarding the web page. So, I have implemented a jquery function and a ascx page for the above.
$(document).ready(function() {
$('#aboutButton').click(function(event) {
alert( "Thanks for visiting!" );//testing
$(function () {
$("#aboutButtonDiv").load('aboutButton.ascx');
$("#aboutButtonDiv").dialog({
backdrop: 'static',
draggable: false,
position: {
my: "center top",
at: "center top+100",
of: window
},
dialogClass: "no-close",
resizable: false,
height: 'auto',
width: 500,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
})
})
})
$(".menu-close").hide();
});
My ascx code is a simple div tag
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="aboutButton.ascx.cs" Inherits="WebProj.aboutButton" %>
<!DOCTYPE html>
<html>
<body>
<div id="aboutButtonDiv" title="About">
<p>Hello this is my first dialog using JQuery</p>
</div>
</body>
When I am clicking the button the click event is firing(I can see the Thanks for visiting message) but the dialog which I want doesn't pop-up. Am I missing something in Jquery code. In my main web page I have the following button
<li class="menutab-list">
<a href="#" type="link" id="aboutButton" data-toggle="modal" data-target="#modalAbout">
<span class="listing-text">About</span>
</a>
</li>
Your code works fine when I tested it. So it probably has something to do with missing jQuery UI files or parts of it.
In order for the Dialog to work you need the jQuery UI library. And even if you have that it could be that it is missing the specific Dialog part.
Go to http://jqueryui.com/download/ and create your download by selecting the options that you need or download the full package. You can check the includes on the third line of jquery-ui.js which parts are included.
And there is a jquery css file as well, with some icon images in the download that are also needed for the dialog to work properly.
Related
I hope that you can help with this problem.
I have two pages, page A contains a table of information from a SQL database, page B allows users to create new records. I want to be able to have a button which displays page B modally rather than having to re-direct the user.
Can this be done?
Sure, there are many ways one of which is jQuery UI Dialog.
First, make sure you load jQuery UI in your page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Then, in page A:
<p><input type="button" class="button" value="Modal" /></p>
<script type="text/javascript">
$('.button').click(function () {
var page = "PageB.aspx";
var d = $('<div></div>')
.html('<iframe src="' + page + '"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 350,
width: 250,
title: "Some title"
});
d.dialog("open");
});
</script>
Is it possible to add an image to a pop-up message in C#/ASP.Net? I have a standard pop-up coded as such:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Data Entry",
"alert('!!!!!ATTENTION !!!!! \\r\\n This is NOT the production version');", true);
I am being asked to add an image of a stop sign or a large exclamation point or something that stands out and I don't even know if it's possible.
I don't believe it's possible using the JavaScript alert function. However, if you use any CSS based dialog/modal box (ex, Bootstrap Modal, jQuery UI Dialog etc), it should be possible. It'd be silly to list all of the possible tools to do this, but just know they're all pretty similar to what I'm showing below in jQuery UI Dialog.
$(function() {
$( "#dialog" ).dialog({modal: true});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog" title="Test System">
<p>This ain't the production system!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Achtung.svg/2000px-Achtung.svg.png" style="height: 50px; width: 50px" />
</div>
You cannot add html using javascript alert function.
A JavaScript alert is a simple window containing a message.
To implement your need, you must use a library for dialogs, popups etc.
You must use something like jQuery & jQuery UI (par example).
Here is a jsfiddle using jQuery and jQuery UI that do what you want: http://jsfiddle.net/5a833tjv/ (jQuery 1.9.1 and jQuery UI 1.9.2)
So you'll need to add the following html (par example):
<div id="dialog-message" title="Important information">
<span class="ui-icon ui-icon-info" style="float:left; margin:0 0px 0 0;"></span>
<div style="margin-left: 23px;">
!!!!!ATTENTION !!!!! \\r\\n This is NOT the production version
</div>
</div>
And modify your startup script accordingly:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Data Entry",
"
$('#dialog-message').dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
'I've read and understand this': function() {
$(this).dialog('close');
}
}
});
", true);
I have an issue with the jQuery click function. I am trying to integrate jQuery Mobile Autocomplete into an C# MVC application.
It the following code doesn't work when the page first loads. However, it works if I reload/refresh the page.
HTML:
<ul data-role="listview" class="selectitems" data-filter="true" data-inset="true" data-filter-reveal="true" data-filter-placeholder="Search Ingredients...">
#foreach (var i in Model.ingredientList){
<li data-id="#i.id" data-unit="#i.useUnit.symbol">#i.title</li>
}
</ul>
Script:
<script src="/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
$(document).ready(function () {
$('.selectitems > li').on('click', function () {
$('input[data-type="search"]').val($(this).text());
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
$('#hdnIngredientID').val($(this).data('id'));
$('#txtUseQtyDetails').val($(this).data('unit'));
$('#hdnIngredientTitle').val($(this).text());
$('#txtQty').focus();
});
$('.ui-input-clear').on('tap', function () {
$('#hdnIngredientID').val('');
$('#txtUseQtyDetails').val('');
});
});
Any assistance would be appreciated.
UPDATE:
jQuery-mobile autocomplete hides the list items until user input happens using CSS "display: none;". Would this prevent the click function from being assigned? If so, how do I work around this?
FURTHER UPDATE:
Found that the "live" function is depreciated. Changed it to "on" instead. Unfortunately this didn't fix the problem :-(
Could it be because the "li" items are hidden by CSS when the page is loaded?
I've deployed it here:
http://rar_mobile_dev.runarestaurant.com/Ingredient/Create?recipe_id=15240
(username: test, password: test)
You could try using on() in stead of click.
$(document).on('click', '.selectitems > li', function(){
$('input[data-type="search"]').val($(this).text());
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
$('#hdnIngredientID').val($(this).data('id'));
$('#txtUseQtyDetails').val($(this).data('unit'));
$('#hdnIngredientTitle').val($(this).text());
$('#txtQty').focus();
});
I am still pretty new to using jQuery to do anything, but I have had good luck with linking to Colorbox iFrames in the past.
Right now, I am trying to link a common ASP button to open up a Colorbox window. I have tried searching all over but I can't seem to find the exact answer I'm needing. Here is what I have so far, which definitely doesn't work at all.
<div id="openColorbox">
<asp:Button ID="NewRecordBTN" runat="server" Text="New Material Movement Request" onclick="NewRecordBTN_Click" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#openColorbox").click(function(){
$.colorbox({
iframe: true,
width: "80%",
height: "80%",
transition: "fade" }));
});
Trying to make the jQuery .click() function watch the "openColorbox" div that I created and open on click. I also want to point the iFrame to another URL in the process.
Try to handle OnClientClick event on button
EDIT:
Something like this:
<asp:Button ID="New`enter code here`RecordBTN" runat="server" Text="New Material Movement Request" onclick="NewRecordBTN_Click" OnClientClick="OpenColorBox()" />
<script type="text/javascript">
function OpenColorBox()
{
$.colorbox({ iframe: true, width: "80%", height: "80%", transition: "fade" });
}
</script>
I am not sure if you need server side event handling?
I was able to send to a URL within the jQuery Colorbox and reload the parent page after the transaction was completed via the following code:
<script type="text/javascript">
function OpenCBox()
{
$.colorbox({ href: "NewMMR.aspx", iframe: true, width: "40%", height: "70%", transition: "elastic", onClosed: function () { parent.location.reload(true); } });
}
</script>
This will reload the parent page upon reload. It also sends it to NewMMR.aspx when it is finished.
I am new to JQuery and trying to display a Yes/No confirmation dialog box when the user clicks on an aspx button. When the dialog box gets displayed to the user he can click the Yes or No button and depending upon the user action i want to execute different code present in code behind file i.e. in aspx.cs
I have tried with the following code but not succeded in my objective.
Code present in aspx page:
<link href="jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
jQuery("#myButton").click(showDialog);
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
},
"No": function() {
$(this).dialog("close");
}
}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
<form id="testconfirmJQ" name="testconfirmJQ" runat="server">
<fieldset>
<legend>jQuery UI Modal Submit</legend>
<p><label for="email">E-mail:</label><br />
<input id="emailJQ" type="text" name="emailJQ" value="" /></p>
<p>
<asp:Button ID="myButton" runat="server" Text="Button" onclick="myButton_Click" />
</fieldset>
</form>
<div id="myDiv" title="Verify Form jQuery UI Style"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> You entered your e-mail address as:</p><p id="dialog-email"></p><p>
If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p></div>
</form>
In code behind the event handler is empty for now. Any suggestions will be appreciated!
Take out the onclick attribute of asp:button. There should be no need for it -- you are not doing server side actions.
You could also change it to an <input> of type button.
Since jQuery is client side and you want to execute server side code in your .aspx.cs file, you could try saving a value indicating what the user responded to the prompt and they doing a postback so the server side can execute the appropriate code.
You might look into using the Button.OnClientClick Property which can execute client side code before the postback. Still use the jQuery dialog box.