I have an UL that I control using hide and show. The problem is that when I click on level1 it shows level2 for only a moment before it disappears, I believe this is because of a postback or something. The functionality works but it just doesnt stay like it. I need to be able to toggle the items in the list to show and hide them.
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<title></title>
<link href="styles/Menu.css" rel="stylesheet" />
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" class="MenuBar">
<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" StaticDisplayLevels="3" Target="_blank" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="0px" >
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level2"/>
<asp:MenuItemStyle CssClass="level3" />
<asp:MenuItemStyle CssClass="level4" />
</LevelMenuItemStyles>
<StaticMenuItemStyle CssClass="staticItem" />
</asp:Menu>
</div>
</form>
</body>
</html>
Related
I am currently building my first ASP.Net core application with Razor pages, where I am trying to add the toast to screen on when an item is successfully added to cart which is a click event on the Add to Cart link. I added the logic but is not working as expected. I followed link and below is the Index.cshtml where I am trying to show toast
<div class="toast">
<div class="toast-body">
Successfully added item to the cart
</div>
</div>
.............
<td>
.....
Add to Cart
......
</td>
.........
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#buyNow", (function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var id=$(this).data("id");
onBuyNow(id);
}));
function onBuyNow(id) {
.........
$.ajax({
type: 'POST',
url: '#Url.Action("OrderItem", "Inventories")',
data: data,
dataType: "json",
success: function (result) {
if (result !== "")
{
//showing validation errors
.........
}
else {
// Navigates to the same page back and thats where I am trying to show toast
var url = '#Url.Action("Index", "Inventories")';
window.location.href = `${url}?id=${customerId}&rmID=${#HttpContextAccessor.HttpContext.Request.Query["rmID"]}`;
// trying to show toast on success
$('.toast').toast('show');
}
},
error: function (error) {
alert(error);
}
});
};
});
</script>
No toast shows up when the item got added to cart successfully. I already have references to the bootstrap in the _Layout.cshtml
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App Name</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.7.0/font/bootstrap-icons.css">
</head>
Any help is greatly appreciated
**** EDIT***
Before adding the new references in the _Layout.cshtml, it shows the navigation and all
After adding the suggested new refreneces like
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App Name</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.7.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
The issue is it takes off the pagination from the index page and it appears like below table and the footer
I have checked your code. Seems problem on your script library
references. It’s not correct. The link you have followed they shared
the link as well which you haven't used. So the take away is, for
toast it requires particular library that's why you are not getting
it.
Your Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="toast">
<div class="toast-body">
Successfully added item to the cart
</div>
</div>
<td>
Add to Cart
</td>
<script>
$(document).ready(function () {
$("#buyNow").click(function (e) {
var id = 5;
onBuyNow(id);
});
function onBuyNow(id) {
alert("Your Product Id is : " +id);
$('.toast').toast('show');
}
});
</script>
</body>
</html>
Output:
Note: Remember to add required script link. Additionally, for internal link make sure you have those script library locally. Other
than toast will not work. You can have a look official document here
Self-define toast without any script:
<div id="toast" class="toast" style="position: fixed; margin-left:250px; bottom: 800px;font-weight: 400;line-height: 1.5; color: !important #212529; width: 100%; max-width: 300px;border: 1px solid rgba(0,0,0,.1);box-shadow: 0 0.5rem 1rem; border-radius: 0.25rem; background-color: rgba(255,255,255,.85); color: #6c757d; font-size: 16px; padding: 10px; user-select: none;">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Successfully added item to the cart
</div>
</div>
<td>
Add to Cart
</td>
Self define script:
#section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("#toast").hide();
$("#buyNow").click(function (e) {
var id = 5;
onBuyNow(id);
});
function onBuyNow(id) {
$("#toast").show();
$("#toast").show().delay(2000).fadeOut();
}
});
</script>
}
Output:
Remarks: if you want to align the toast-box position please modify margin-left:250px; bottom: 800px these property as per your
needs. Hope it would guide you to resolve the issue and save much
time.
I am trying to use bootstrap multiselect plugin in one of my ASPX pages. Along with the multiselect plugin I have several other jQuery controls in the same page (like autocomplete textbox etc) and some client side validations as well. Following is my bootstrap multiselect code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Styles/StyleSheetMasterDataForm.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="Styles/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="Styles/bootstrap-multiselect.css" type="text/css" />
<script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function () {
debugger;
$("[id*=ListBoxProdEngine]").multiselect({
includeSelectAllOption: true
});
}); //Ending document.ready
</script>
HTML code:
<tr>
<td class="style6"><div class="style8"><strong>Product Engine:</strong></div></td>
<td class="style2"><asp:ListBox ID="ListBoxProdEngine" multiple="multiple" runat="server"></asp:ListBox></td>
</tr>
Code behind:
private void PopulateProductEngine()
{
try
{
ProductEngine objProductEngine = new ProductEngine();
ListBoxProdEngine.DataSource = objProductEngine.GetProductEngine();
ListBoxProdEngine.DataTextField = "ProductEngine";
ListBoxProdEngine.DataValueField = "ProductEngine";
ListBoxProdEngine.DataBind();
}
catch (Exception ex)
{
ErrorHandler.ReportError(ex); //Notifies technical team about the error
Server.ClearError();
Response.Redirect(string.Format("Error.aspx?aspxerrorpath={0}", Request.Url.PathAndQuery));
}
}
The error encountered is in the "multiselect" function in document.ready. Please help.
What I have is simple, a form with in that form a webbrowser-controll.
That webbrowser goes to a website. And that all works.
But what I wan't to do when he's on the page is to let him run some javascript code (or jQuery if that's possible) to get all the text thats between the <b></b> tags on the website.
How should I do that?
EDIT:
Thanks to Birk, the code now looks like this:
HtmlElementCollection bigFontTags = webBrowser1.Document.GetElementById("Frame_A").Document.GetElementsByTagName("b");
string[] textPieces = new string[bigFontTags.Count];
for (int i = 0; i < bigFontTags.Count; i++) {
textPieces[i] = bigFontTags[i].InnerText;
}
//process text
string bigText = String.Join(" ", textPieces);
MessageBox.Show(bigText);
But that doesn't work. That is because the element that i need to get, is deep inside frame's and frameset's.... This is the layout (simple):
<frameset rows="0,1000" border="0" frameborder="0">
<frame src="/mail/Login?domain=telfort.nl&style=default&plain=0" name="SContentFrame" id="SContentFrame" scrolling="Auto" noresize="">
<frameset rows="88,*" framespacing="0" frameborder="0" border="0" bordercolor="#FFFFFF">
<frameset cols="182,*" framespacing="0" frameborder="0" border="0" bordercolor="#FFFFFF" onunload="ExitLogout()" onload="LoadFrames('/mail/Navigation?sid=1FBE4F29181F18D9358ABC082C7DEE1B6C67481B&userid=marcmeesters%40telfort.nl&seq=+Q&auth=+A&style=default','/mail/MessageList?sid=1FBE4F29181F18D9358ABC082C7DEE1B6C67481B&userid=marcmeesters%40telfort.nl&seq=+Q&auth=+A&srcfolder=INBOX&chk=1&style=default')">
<frame src="/supp/blank.htm" name="Frame_A" id="Frame_A" frameborder="0" scrolling="Yes" marginwidth="0" marginheight="0" bordercolor="#FFFFFF" border="0">
<form name="phoenix" method="post" action="" onsubmit="return clickedButton">
And then are here some tables and the content that i want to get.....
So how can i get that content from there??? (in a nice way???)
EDIT2:
I will post the generated source of the website: (NOTE! i've deleted everything that wassn't relevant... So only the way from the begin to the content)
<html><head>
<title>Telfort - Webmail</title>
<link rel="SHORTCUT ICON" href="http://www.telfort.nl/images/template/favicon.ico">
<link rel="stylesheet" href="/style/telfort/stylesheet.css" type="text/css" media="screen">
<!-- main.tpl 20001107 -->
<script type="text/javascript" src="/supp/phsec.js"></script>
<script type="text/javascript" src="/supp/client_sniffer.js"></script>
<script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script></head>
<frameset rows="0,1000" border="0" frameborder="0">
<frame src="/mail/Login?domain=telfort.nl&style=default&plain=0" name="SContentFrame" id="SContentFrame" scrolling="Auto" noresize="">
<html><head>
<title>Telfort - Webmail</title>
<link rel="SHORTCUT ICON" href="http://www.telfort.nl/images/template/favicon.ico">
<link rel="stylesheet" href="/style/telfort/stylesheet.css" type="text/css" media="screen">
<!-- main.tpl 20001107 -->
<script type="text/javascript" src="/supp/phsec.js"></script>
<script type="text/javascript" src="/supp/client_sniffer.js"></script>
</head>
<frameset rows="0,1000" border="0" frameborder="0">
<frame src="/mail/Login?domain=telfort.nl&style=default&plain=0" name="SContentFrame" id="SContentFrame" scrolling="Auto" noresize="">
<html><head>
<title>Telfort - Webmail</title>
<link rel="stylesheet" href="/style/telfort/stylesheet.css" type="text/css" media="screen">
<!-- main_frame.tpl 20060510 -->
<script src="/supp/phif.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function LoadFrames(t1,t2) {
NavWin(frames["Frame_NAV"],t1);
NavWin(frames["Frame_A"],t2);
}
function ExitLogout() {
window.open(NavURL("/mail/Logout?sid=5D3995C305E2F91F575EDF1E2F11F5D75A7DF6D8&userid=marcmeesters%40telfort.nl&seq=+Q&auth=+A&style=default&popup=1"),"Logout","resizable=yes,scrollbars=yes,status=0,width=10,height=10");
}
//-->
</script>
</head>
<frameset rows="88,*" framespacing="0" frameborder="0" border="0" bordercolor="#FFFFFF">
<frameset cols="182,*" framespacing="0" frameborder="0" border="0" bordercolor="#FFFFFF" onunload="ExitLogout()" onload="LoadFrames('/mail/Navigation?sid=5D3995C305E2F91F575EDF1E2F11F5D75A7DF6D8&userid=marcmeesters%40telfort.nl&seq=+Q&auth=+A&style=default','/mail/MessageList?sid=5D3995C305E2F91F575EDF1E2F11F5D75A7DF6D8&userid=marcmeesters%40telfort.nl&seq=+Q&auth=+A&srcfolder=INBOX&chk=1&style=default')">
<frame src="/supp/blank.htm" name="Frame_A" id="Frame_A" frameborder="0" scrolling="Yes" marginwidth="0" marginheight="0" bordercolor="#FFFFFF" border="0">
<html><head>
<title>Berichtenlijst</title>
<!-- folders_msglist.tpl 20001106 -->
<link rel="stylesheet" href="/style/telfort/stylesheet.css" type="text/css" media="screen">
</head>
<body marginwidth="0" marginheight="0">
<form name="phoenix" method="post" action="" onsubmit="return clickedButton">
AND HERE THE CONTENT!!!!
</form>
</frameset>
</frameset>
</frameset>
</frameset>
</html>
EDIT 3 :
Thanks to Birk, the problem is solved, and this is the answer:
HtmlWindow SContentFrame = webBrowser1.Document.Window.Frames[1];
HtmlWindow Frame_A = SContentFrame.Document.Window.Frames[2];
HtmlElementCollection bigFontTags = Frame_A.Document.GetElementsByTagName("b");
string[] textPieces = new string[bigFontTags.Count];
for (int i = 0; i < bigFontTags.Count; i++) {
textPieces[i] = bigFontTags[i].InnerText;
}
string bigText = String.Join(" ", textPieces);
MessageBox.Show(bigText);
Create a DocumentCompleted-event and process all tags using ((WebBrowser)sender).Document.GetElementsByTagName("b");.
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
HtmlElementCollection bigFontTags = ((WebBrowser)sender).Document.GetElementsByTagName("b");
string[] textPieces=new string[bigFontTags.Count];
for (int i = 0; i < bigFontTags.Count; i++)
{
textPieces[i] = bigFontTags[i].InnerText;
}
//process text
string bigText = String.Join(" ", textPieces);
MessageBox.Show(bigText);
}
That's not JavaScript, but the result is exactly the same.
EDIT #2: For all those nested frames you could use:
HtmlElementCollection bigFontTags = webBrowser1.Document.GetElementById("SContentFrame").Document.GetElementById("SContentFrame").Document.GetElementById("Frame_A").Document.GetElementsByTagName("b");
That should work, if I understand your frameset structure correctly.
I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />
I have an asp.net panel with a style which hides it and I'm using JQuery to slideToggle the panel using a hyperlink. This works fine. However, if I add a button on the page that causes a postback the panel will default back to hidden. I understand why this is happening but what is the best way to keep the panels visibility state when a postback occurs?
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server" CssClass="panel">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Here's how I solved my problem...
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
if ($('#panelText').hasClass('panel')) {
$('#PanelState').attr('value', 'true');
} else {
$('#PanelState').attr('value', 'false');
}
});
});
$(document).ready(function() {
if ($('#PanelState').attr('value') == 'false') {
$('#panelText').addClass('panel');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="PanelState" runat="server" Value="false" />
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Add a hidden field in form:
<asp:HiddenField id="hdnPanelState" runat="Server" value="false" />
and modify the JS function:
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
//YOU WILL ALSO NEED TO CALCULATE IF SHOWING PANEL OR HIDING
$("#hdnPanelState").attr("value","true");//Store Value
});
});
</script>