So I'm developing a Blazor App, Server side, and for the life of me, I cannot get a modal popup to function. I've followed several guides on how to do it, and from what I can tell I have everything right, but it will not trigger. I have a more complex solution, but even just for testing I did a bare bones project to just see if a cut and dry app would work, maybe something is wrong in my bigger project. But no, even just a simple app will not function. I'm pulling my hair out! Here is what I have, just for the simple bare bones app, this is my Index.razor file
#page "/"
<h1>Hello, world!</h1>
Welcome to your new app.<br />
<br />
<input type="button" class="btn btn-primary" data-target="#testModal" data-toggle="modal" value="Get Random" />
<div class="modal" id="testModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Generate Random Hash</h5>
<button type="button" class="btn btn-primary" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Random Number #((new Random().Next(0, 5000)))<br />
<br />
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#code{
}
My understanding is that the "data-target" and "data-toggle" should make things work, but nothing. Just for posterity too, here is my _Hosts.chtml file
#page "/"
#namespace ModalTest.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ModalTest</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Can anyone shed any light onto what I might be doing wrong here?? Many thanks!!
This simply won't work with Bootstrap - Blazor cannot natively run JavaScript/JQuery out-of-the-box and that's what Bootstrap uses to trigger open/closing of modals (among other components of theirs).
If you want this to work, you have three options:
Use JSInterop and an #onclick event on the button to call the Bootstrap function that is called inside your #code block for the modal. You'll need to cover closing it too using this same idea. I see you're missing (or you didn't include in your snippets) the necessary core Bootstrap jquery libraries which is required to go down this path.
Make your own modal component, roll your own #onclick event function, and call OnStateChanged inside this function when they open & close it.
Switch to something like Blazorise that already has most of the Bootstrap components ported over and usable for Blazor.
Option #2 above worked for me as follows:
Make the modal a component by putting it in its own razor file.
Add this to the component in a code block:
[Parameter] public EventCallback OnClose { get; set; }
Add this to the button that closes the modal:
#onclick="OnClose"
In the main page add
public bool showModal = false
Add somewhere in the main page
#if (showModal)
{
<MyModal OnClose="() => { showModal = false; }" />
}
Finally, in the button that opens the modal, add
#onclick="() => { showModal = true; }"
Related
I am using arrow up glyph-icon using Bootstrap. when i applied downloaded css in HTML it is not working, but if used full HTTP css path in online it works.below is my code, tell me where is wrong in my code,is it browser version is dependent? if I used https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. this complete path it works.but I need to add offline.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<body>
<div class="w3-container">
<button class="w3-button w3-xlarge w3-circle w3-red w3-card-4"> <span class="glyphicon"></span></button>
</div>
</body>
</html>
Replace this
<span class="glyphicon"></span>
with
<span class="glyphicon glyphicon-arrow-up"></span>
More information :
https://getbootstrap.com/docs/3.3/components/
Got it! Well, at least if you use the µBlock plug-in in your browser.
For me it worked when checking the "Ignore generic cosmetic filter"-option (or whatever it is called in English) on the "Prepared Filters"-page (or whatever it is called in English).
I tried to figure out where the source of this feature is located to see how that cosmetic filter works, but couldn't find it. I mean there might be a way to work around that cosmetic filter if the element with the glyphicon would be coded differently.
I 'd like to understand how the following piece of code works
<!DOCTYPE html>
<head>
<title>Title</Title>
</head>
<body>
<form method="POST" action="/link" >
<div id="form1" >
<input type="file" class = "btn btn-danger">
<img id="pic" src="#" alt="HTML5 Icon" >
</div>
<input type="submit" name="submit" value="Submit" class = "btn btn-info">
</form>
</body>
</html>
I am trying to render images when using a file upload handler and apparently at this point the code breaks. It seems to have the effect of reloading the page again and again.
The question is similar to one already asked in stackoverflow.
[<img src="#"> Means in HTML?
I think that the "#" attribute was calling the url again and set up a sort of infinte loop that was resulting in the multiple post requests to the server.
Anyways, got the code to work by using a default image filename instead of the "#"
I have a HTML project consisting of 5 pages. I have a login button in every page where I am using a modal. It uses id of the modal div.
<li> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">LOGIN</button></li>
but i've to copy paste the modal code in every page.
Is there a way to not paste the complete modal div in every page ?
My suggnetion is to use jquery here is some code snippet
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("button.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
For button you can put your code in #includedContent div.
Aou have to put script code js file . i.e "button.js"
And include that js file in every page where you need to have login button.
and #includedContent div.
hope so this will help you
How can i navigate from one HTML page to other HTML page using Mobile jQuery?
I tried this one:
function temperature()
{
$.mobile.changePage("temperature.html",{reloadPage:true});
}
when i clicked on temperature button temperature function is called.
<button id="TempConvert" data-theme="b" onClick="temperature()">Temprature Converter</button>
i got error message Error while Loading Page.
I used below scripts tags to include .js files
`<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
`
You could use an anchor: Go temp! and style it so it looks like a button (that is what the data-role="button" part does).
The anchor will still behave like a regular anchor but it will look like a button.
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div