instantsearch menuselect widget is not working sometimes on IE - javascript

Now I'm developing search page by using algolia widgets.
If I don't use menuselect widget, my web page is running well in IE.
But If I use menuselect widget, algolia widgets following menuselect are not displayed.
So I have tried to test only menuselect widget.
Following code shows my test file.
var searchDiscover = instantsearch({
indexName: 'demo_ecommerce',
searchClient: algoliasearch('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5'),
routing: false,
});
var widget = instantsearch.widgets.menuSelect({
container: '#brand-list',
attribute: 'brand',
});
searchDiscover.addWidget(widget);
searchDiscover.start();
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="shortcut icon" href="./favicon.png" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/instantsearch.css#7/themes/algolia-min.css"
/>
<link rel="stylesheet" href="./src/index.css" />
<link rel="stylesheet" href="./src/app.css" />
<title>ais-ecommerce-demo-app</title>
</head>
<body>
<div class="ais-InstantSearch">
<h1>InstantSearch.js e-commerce demo</h1>
<div class="left-panel">
<div id="clear-refinements"></div>
<h2>Brands</h2>
<div id="brand-list"></div>
</div>
<div class="right-panel">
<div id="searchbox" class="ais-SearchBox"></div>
<div id="hits"></div>
<div id="pagination"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch#3.32.0/dist/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js#3.0.0"></script>
<script src="./src/app.js"></script>
</body>
</html>
It is working on Chrome, but not working on IE.(I can't see menuselect on IE).
In other hand, I can see menuselect live example in following url, but not find code.
https://instantsearchjs.netlify.com/stories/?selectedKind=MenuSelect&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
What's wrong in my code?

I sloved this issue.
For the widget to work in IE, I can add polyfills to the page:
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>

Related

The reason why JavaScript is not running on the main page of Blazer

The reason why JavaScript is not running on the main page of the Blazer, considering that we have access to the main file when running the web application and the link to the JavaScript file, it works correctly, and when you click on it, the code is displayed correctly and completely in the Ceres section. It will be given. But the JavaScript function is not called or is not executed at all. My codes are as follows:
function opeSublist() {
try {
if (checkFirstList == 0) {
checkFirstList = 1;
}
var checkList = document.getElementById('FirstList');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
} catch {}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
Referesh . . .
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
and the javascript function is inside of multiselect-dropdown.js javascript separate file. But it is not clear to me why this function is not executed and the result is not displayed. In fact, by clicking on a DIV, a list should be displayed, and by clicking outside the list, the list should be removed from the display mode. All steps are correct. And in a normal HTML page, this function is executed correctly. But when transferred to Blazor, it does not run. I do exactly the same things I did on the HTML page in Blazer. But it has no effect.
In order to avoid the complexity and disconnection of JavaScript functions, it is better that the functions that are to be called in Blazor are stored in a separate file, for example named blazJavaFile.js, and defined in the index.html file in the wwwroot folder. Your submitted file will change like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/blazJavaFile.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
Referesh . . .
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
Then, on the page where you want to call this function, create the following method and call it with the following command.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("opeSublist");
}
}
At the same time, don't forget to add this statement #inject IJSRuntime jsRuntime which is dependency injection, at the beginning of the page or at the top of your page. More information and more examples are available in the links Example 1 and Example 2

Vue.js not being recognised with CDN

Hi I am currently learning Vue.js and I have an issue with it, I am calling Vue using a CDN.
I have followed instructions but it does not seem to be recognising that Vue exists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
</html>
This is the simple js file It does not output the code from the Vue object.
Would really appreciate any help on this.
const app = vue.createApp({
data () {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
It should be Vue.createApp instead of vue.createApp.
Working Fiddle
const app = Vue.createApp({
data() {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
<title>Vue Basics</title>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>

javascript function disabled after route to other page

i have html file that wraps react component , below is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content=""><!--
<link rel="shortcut icon" href="assets/img/logo-fav.png"> -->
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
<style type="text/css">
.modal-body {
max-height:400px;
overflow-y:auto;
}
</style>
</head>
<body>
<div id="root">
</div>
<script src="bundle.js"></script>
<script src="/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/lib/jquery.niftymodals/dist/jquery.niftymodals.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.niftyModal('setDefaults',{
overlaySelector: '.modal-overlay',
closeSelector: '.modal-close',
classAddAfterOpen: 'modal-show',
});
$(function(){
Plugins.init();
$('.admin').click(function(){//button modal
alert('alert');
});
});
</script>
</body>
</html>
and this is my admin page
import React, {Component} from 'react';
import CreateForm from '../Component/Admin/CreateForm';
class AdminPage extends Component {
render(){
return(
<div className="be-content">
<CreateForm/>
<div className="page-head">
<h2 className="page-head-title">Manage Admin</h2>
<ol className="breadcrumb page-head-nav">
<li>Admin</li>
<li className="active">Index</li>
</ol>
</div>
<div className="main-content container-fluid">
<div className="panel panel-flat">
<div className="panel-heading">
Admin
<button data-modal="create" className="btn btn-space btn-primary pull-right md-trigger admin">Create New</button>
</div>
<div className="panel-body">
</div>
</div>
</div>
<div className="modal-overlay"></div>
</div>
);
}
}
export default AdminPage;
my problem is :
i have page for admin, and within it there is a modal, i'm using modal to show a form , when we start page or type the route address from address bar eg: localhost:3000/admin modal is showing and all javascript function such as alert that i put (see above html file) is fired, but if i access the page from sidebar link the javascript function is disabled or doesn't work, example
i access / from sidebar link then i click /admin and i click button to show modal it doesn't show modal.
i'm using react route v4
and my question is exactly same like this but i want more simple,effective and efficient way.
Anyone can help? thank you.
I think the problem is in jQuery binding after DOM updates like here and you should rewrite this line:
$('.admin').click(function(){//button modal
to this:
$(document).on('','.admin',function(){//button modal

MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screen

I´m using a Bootstrap 3 date AND time picker linked here:
DateTime Picker for Bootstrap 3
I can´t make the picking window open. When you click on the textbox, nothing happens and no messages are shown on browser Console (Chrome). So, in truth, the control is working as a simple textbox, not as a DateTime picker.
Here is my code:
_Layout file included in all views:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>TestApp</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="screen">
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
<link href="#Url.Content("~/Content/CustomNavBar.css")" rel="stylesheet" media="screen">
</head>
<body>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<.... some other stuff here...>
Index.cshtml used on that page:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="col-md-10">
<div class='well'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
I appreciate any help to make this work...
Thanks for any help...
Your layout can be cleaned up a bit, since MVC4 no longer requires #Url.Content() for virtual paths. You probably also want to look into how the bundling system works. For certain, what you're trying to do will probably work better with sections:
_Layout.cshtml:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TestApp</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />
<link href="~/Content/bootstrap.css" rel="stylesheet" media="screen" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<link href="~/Content/CustomNavBar.css" rel="stylesheet" media="screen" />
#RenderSection("head", required: false)
</head>
<body>
#RenderBody()
<script src="~/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml:
#section head
{
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" type="text" />
}
#section scripts
{
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
<div class="container">
<div class="col-md-10">
<div class='well'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Using sections lets the view engine inject things like <script> or <link /> tags into the correct parts of the layout. Anything not in a section is injected wherever #RenderBody() occurs in the layout.
If you want a more concrete example, go straight to the source: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
In this two scripts of your Index.cshtml.
<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
You didn't use #UrlContent(). Run your project, and look in the generated html source code, if the browser can find this js files. Or look any error in the Network tab of your browser developer tools.

Leaflet and jQuery mobile won't cooperate

everyone. I'm working on a mobile app for a nature reserve (the old map is currently built with flash), and I'm having trouble with jQuery mobile and leaflet. As it stands, I can only get either the leaflet map or the jQuery navbar. Below is the html section:
<!DOCTYPE html>
<html>
<head>
<title>UW Arboretum</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/logo.png"/>
<!-- <meta name="MobileOptimized" content="320" /> -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> </script>
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/leaflet-src.js"></script>
<script src="js/jquery.js"></script>
<script src="lib/jquery-ui/js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="map">
</div><!--map-->
<div data-role="footer"
data-position="fixed">
<div data-role="navbar">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>jkl</li>
</ul>
</div><!--footer-->
</body>
</html>
</body>
</html>
You have double jQuery loading:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="js/jquery.js"></script>
Also try using newest versions of jQuery and jQuery Mobile

Categories