I can't get this simple Angular example to work in Firefox. Tried Ctrl+F5 but nothing. In Chrome works fine.
I set Javascript options to: Javascript -- AngularJS 1.2.1 -- No wrap-in
HTML:
<div ng-app="AppName">
<div ng-controller="OneController">
{{title}}
</div>
</div>
Javascript:
var myapp = angular.module('AppName', []);
myapp.controller('OneController', function ($scope) {
$scope.title = 'Just a text';
});
Related
I'm new to ASP.NET Core and trying to figure out how to display a Bootrstap modal based on a string property of the underlying page Model (Model.Message). I've tried several different things and nothing is working. Below is a sample Bootrstap modal I found on the Bootstrap website. I can get the modal to display with a button, but that's not the functionality I am looking for.
<!-- Modal -->
<div class="modal fade" id="UserDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
EDIT: Added code to my scripts section at the bottom of the page and a new JavaScript function in an external .js file.
Here's my scripts section on the Razor page
#section scripts
{
<script>
$(document).ready(function () {
ShowModalDlg();
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
</script>
}
Here's the new JavaScript function in my external file
function ShowModalDlg()
{
$("#UserDialog").modal("show");
}
The ShowModalDlg() function does get called when it is supposed to, but the bootstrap modal is not showing. The button I added to test "showing" the modal still works. I also added (although not shown here) a temporary call to alert("I'm here!") inside of the ShowModalDlg() function and the alert shows perfectly. I did just check the Chrome debug console and I am getting an error that seems to indicate I am loading jquery twice. That error message is:
"$(...).modal is not a function"
So it looks like I need to figure out where that's happening.
I have the following in my _Layout.cshtml page:
<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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
If I understand you, this kind of approach might solve your problem. We define a ShowModal variable sent from the controller as a javascript variable, then we trigger the modal by checking the value of this variable.
EDIT: We expect 'show' string as showModal variable from controller.
<script>
var showModal = '#Model.showModal';
if(showModal == 'show'){
$("#exampleModal").modal("show");
}
</script>
If you use it this way it will work. You can check it here.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- You may not really need this. -->
<!-- Bootstrap 5 (https://getbootstrap.com/docs/5.0/getting-started/download/) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I fixed the problem by combining the answer above with the following:
$(window).load(function ()
{
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
I should not have had that code inside of document ready, which is why it wasn't working and also causing the error message.
I have created a snippet to convert the tex commands to expressions and while the snippet is added to the CMS page, the commands are converting into expressions but its getting disappears after a few seconds.
Also, I have tried dynamically by adding the command through js and converting it using the MathJax.typeset() and MathJax.Hub.Queue(['Typeset', MathJax.Hub, tag]);.
But still, the same problem occurs and if we try to add the MathJax js in the snippet then the expressions are displayed multiple times.
Please find the below snippet and help us on finding the issue.
<template id="mathjax_form_12" name="Mathjax">
<section>
<t t-call="web.layout">
<div class="section">
<div class="section-contact">
<div class="container">
<div class="contact-form">
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
$$f(x,y)=\int_0^\infty dp\int_0^\infty dq \frac{pqf(p,q)}{\sqrt{x^2+y^2}}$$
</p>
</div>
</div>
</div>
</div>
<script>
(function(){
MathJax = {
tex: {
inlineMath: [['$'], ['\\(',')']],
packages: ['base', 'newcommand', 'configMacros']
},
};
})();
</script>
<script async="1" src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_SVG'></script>
</t>
</section>
</template>
Thanks!!
I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.
I am using magnific popup on a new website that i am building but i am running into a problem getting it to work when multiple galleries on the same page.
I'm using wordpress, Slick Slider to display a slider full of thumbnails and when one of the thumbnails is clicked it should open the larger version of the image in the Magnific Popup.
My HTML looks like this:
<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image1.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image2.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image3.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image4.jpg" alt="" class="standard-image"></a>
</div>
</div>
</div>
</div>
I have a site.js file that contains all of the javascript for my site in it. I'm calling magnific popup using the following function. I've added some extra stuff in it to add effects.
jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
tClose: 'Close (Esc)',
tLoading: '',
preload: [1,4],
gallery:{
enabled:true,
tPrev: 'previous',
tNext: 'next',
tCounter: '%curr% of %total%'
},
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' ยท <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
}
},
closeBtnInside: false,
closeOnContentClick: false,
mainClass: 'mfp-zoom-in',
removalDelay: 300, //delay removal by X to allow out-animation
callbacks: {
lazyLoad: function (item) {
console.log(item); // Magnific Popup data object that should be loaded
},
beforeOpen: function() {
jQuery('#carousel-links a').each(function(){
jQuery(this).attr('title', $(this).find('img').attr('alt'));
});
},
open: function() {
//overwrite default prev + next function. Add timeout for css3 crossfade animation
jQuery.magnificPopup.instance.next = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
}
jQuery.magnificPopup.instance.prev = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
}
},
imageLoadComplete: function() {
var self = this;
setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
}
}
});
});
I have the same exact HTML code building different galleries outputting on the same page and for some reason the first carousel with lightbox works great. But for whatever reason, the second gallery does not work. The carousel works fine, but Magnific Popup does not fire. When i click on one of the thumbnails, it opens the larger image in the browser window.
I tested my js function by adding a "console.log("clicked");" after the .each. I see the console that the thumbnail is being clicked and that part is working.
Any idea how i can get the multiple sliders to work on my page?
I've tried the example from the documentation for the multiple galleries by removing everything from the function and making it as barebone as possible. I get the same result, the first lightwindow works but the second one does not.
I'm not seeing any js errors on the console either.
UPDATE #1
This isn't an ideal solution, but i did find a way to make this work. I had to use unique IDs on each slider in order to get the lightbox to work if multiple sliders were on the same page using the same ID value. In this case, I was using #carousel-links for all of the sliders. I guess you can't share the same ID for sliders across the board and get this lightbox to work?
I also moved the javascript code to be right after the carousel in the module template page. I removed it for now from my site.js file.
I'm not looking for a way to optimize the code so i can put it in my site.js. I'll try to grab that ID value by using the class on each carousel. I'll report back if i can get that to work.
UPDATE #2 - OMG
Could the problem i was having when the lightbox only worked with the first instance of the lightbox be because i was an ID instead of a CLASS as my selector for the lightbox? I changed to the CLASS and now they are all working.
What fixed my problem is I changed the selector from the ID to a class on the same element. This allowed for multiple galleries on the same page to work together with no problem.
I was using something like this before Dojo 1.8, but now I get a "node not found" error :
<form dojoType="dijit.form.Form">
Search :
<input type="text" dojoType="dijit.form.TextBox" name="searcht" id="searcht">
<script type="dojo/connect" event="onSubmit" args="evt">
my_function();
dojo.stopEvent(evt);
</script>
</form>
I noticed that if I remove the search text box the code is working.
How can I rewrite the above to work with 1.8, and also please be so kind to point me in the right direction to read about this and understand why this is happening.
I should also note that I'm using the same type of code for contentpanes, and the code works fine there.
Thanks,
Noru
In dojo 1.8 dojo.connect is dojo/on. First you have to load the modules you are going to use and parse the file to transform dijit elements.
<script>
require([
"dojo/parser",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button"
], function(parser) {
parser.parse();
});
</script>
Second, declare the dijit properties and funcionality inside html tags:
<div data-dojo-type="dijit/form/Form" id="search_form">
<script type="dojo/on" data-dojo-event="submit" data-dojo-args="evt">
evt.stopPropagation();
alert( "my_function()" );
</script>
<label for="my_textbox">Search:</label>
<input type="text" data-dojo-type="dijit/form/TextBox" id="my_textbox"/>
<button data-dojo-type="dijit/form/Button" id="my_button" type="submit">
Submit
</button>
</div>
I used a declaratively example inserting dijit options inside the html code. There is other way using only javascript. Take a look in the official documentation: http://dojotoolkit.org/reference-guide/1.8/dijit/index.html