I want to catch the event if a specific jQuery mobile page changes. For example, I used the code which I indicated below:
$(document).on("pagechange", function () {
alert("page changed");
});
But, how can I make this function run only for a specific page, for example: the page which has id="myPage"? I want to make it give alert only when myPage is changed.
(* I use multiple page structure in jquery mobile)
I think you could register events on page instead of document:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>Page 1</p>
<div data-role="navbar">
<ul>
<li><a href="#pagetwo" >TWO</a></li>
<li>ONE</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<p>Page 2</p>
<div data-role="navbar">
<ul>
<li>TWO</li>
<li><a href="#pageone" >ONE</a></li>
</ul>
</div>
</div>
</div>
<script>
$("#pageone").on("pageshow", function() {
alert("cambio a pagina 1");
});
$("#pagetwo").on("pageshow", function() {
alert("cambio a pagina 2");
});
</script>
</body>
</html>
If you prefer pagechange event, you could get the page URL:
$(document).on("pagechange", function(toPage) {
alert(toPage.currentTarget.URL);
});
$(document).on('pagechange', '#myPage', function (event) {
alert("I alert only on #myPage");
});
Related
I've a page in MVC which I want to reload automatically every 2 seconds without doing a refresh, I have seen examples
with Ajax but all referenced using buttons or in POST-GET events. I only want it to reload without refresh,
What can I do to perform that function?
Thank you
This's my view
#model MVC_PCMonitoring_Dash.Models.TablesPCModels
#{
ViewBag.Title = "Home Page";
}
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="~/Content/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
</div>
<div class="img bg-wrap text-center py-4" style="background-color: #A40033;">
<div class="user-logo">
<div class="img" style="background-image: url(Images/logo.jpg)"></div>
<h3>TOTAL PC</h3>
</div>
</div>
<ul class="list-unstyled components mb-5">
<li class="active">
Home
</li>
<li>
PC 1
</li>
<li>
PC 2
</li>
<li>
Exit
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<p align="right">#DateTime.Now</p>
<center>
<img src="~/Images/welcome.png" alt="centered image" />
</center>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use timer and ajax in this case.
setInterval(function(){ --ajax call to refresh---},2000) //2000 means 2 min
I am using vuejs as a drop in for some minor functionality in a Laravel app (i.e. not components) and for some reason that I'm yet to discover v-model is not working.
Here's my base layout blade file that was generated via php artisan make:auth, contents mostly removed as irrelevant:
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- css imports etc. -->
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<!-- nav menu -->
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
#stack('scripts') <---- Javascript goes here!
</body>
</html>
Here's the file where v-model is being used and not working, again, irrelevant parts have been removed:
resources/views/instructors/create.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="card-title">
<h2>vue: #{{ message }}</h2> <-- This works
<div>
<input type="text" v-model="message"> <-- Blank!!?
</div>
</div>
<!-- more html -->
</div>
</div>
</div>
</div>
</div>
#endsection
#push('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
#endpush
The input field which v-model="message" is bound to is completely empty, however, when outputting message via curly braces I can see it's value. This is what it looks like:
Any ideas what's going wrong? I have checked the console and Vue dev tools and no errors show up, in fact nothing shows up at all in Vue dev tools - an issue perhaps? I copy pasted these code snippets from the Vue docs introduction to make sure I wasn't doing something silly. I have tried setting the data attribute inside the Vue instance as a function returning an object but it makes no difference. I also have the code working here: https://jsfiddle.net/eywraw8t/249625/ where the input field shows the value of message as I am expecting it to work.
I wouldn't consider myself a Vue pro but I'm no beginner and I cannot quite figure out what's going on. Any help would be appreciated, thanks!
Update
Thanks to everyone who answered. Made a silly mistake... I forgot that there is some JS that is pulled in, in the <head> when running make:auth - this includes Vue by default. I forgot to look properly here as assumed it would be prior to </body>. I believe the two JS scrips were conflicting which was causing the issue. See head below:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script> <-- Vue included here
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
I commented the script out and it's working fine now.
For vue.js 2 use the following:
<html>
<body>
<div id="app">
<h1>Vue: #{{message}}</h1>
<input v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
For more details how to work on v-model: Laracasts_episodes_2
try the following code
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="card-title">
<div id="app">
<template>
<div>
<div class="card-title">
<h2>
Add Instructor
</h2>
<h2>vue: #{{ message }}</h2>
<div>
<input type="text" v-model="message">
</div>
</div>
</div>
</template>
</div>
</div>
<!-- more html -->
</div>
</div>
</div>
</div>
</div>
#endsection
#push('script')
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
});
</script>
#endpush
In my project the dropdown menu won't work.
the code is like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{!! MaterializeCSS::include_full() !!}
<script>
$( document ).ready(function() => {
$('.dropdown-button').dropdown();
});
</script>
<title>...</title>
</head>
this is the header of the page
this is what the dropdown look like
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
I put materialize css into my project using composer, and did what was listed on the official materialize website
I hope someone can help me out
Try and move your script (the one below) to the bottom of your body.
<script>
$( document ).ready(function() => {
$('.dropdown-button').dropdown();
});
</script>
I have downloaded a JQuery-plugin for a searchable drop down list. Here is the source
I fill the list using D3.js. It works well for few elements, but when I want to load all elements (around 1200) the design is crashed and the list is displayed in the top so that I can't see the items and there is no scroll-bar.
Here how it looks like when I load the whole elements:
Here we can see from the developer tool in the browser that the data is loaded correctly:
The console shows these violations:
Here is my D3.js code:
d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
if (error) throw error;
d3.select("#my-select").selectAll(".option")
.data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
.enter().append("option")
.text(function (d) { return d; })
.attr("value", function (d) { return d; });
});
Html script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Crypto Trading Project</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sol.css">
</head>
<body>
<header>
<div class="collapse bg-light" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-6 py-4">
<select id="my-select" name="Cryptos" multiple="multiple"></select>
</div>
<div class="col-sm-6 py-4">
From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
</div>
<div class="col-sm-3 py-4">
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Cryptos VA
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/date-time-picker.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sol.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/loadsol.js"></script>
<script type="text/javascript">
$(function() {
// initialize sol
$('#my-select').searchableOptionList({
showSelectAll: true
});
//dateTimePicker
$('#J-demo-04').dateTimePicker({
limitMax: $('#J-demo-05')
});
$('#J-demo-05').dateTimePicker({
limitMin: $('#J-demo-04')
});
});
</script>
</body>
</html>
How can I have it work?
I could finally figure it out. The idea is simply to fix the height of the active container and add a scroll bar. So I add in the sol.css file to the .sol-container.sol-active .sol-selection-container class these two css attributes:
height: 300px;
overflow-y: auto;
I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.
First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ?
If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snippets
<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />
<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>
<script src="StyleSheet/fastclick.js"></script>
<script type="application/javascript">
$.mobile.defaultPageTransition = 'none';
$.mobile.transitionFallbacks.slideout = 'none';
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
$( document ).bind( "mobileinit", function() {
$.mobile.buttonMarkup.hoverDelay = 500
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="HomePage" class="jqm-demos">
<div class="ui-body ui-body-b">
CLick Me to go second page
</div>
</div>
<div data-role="page" id="SecondPage" class="jqm-demos">
<div class="ui-body ui-body-b">
<br> CLick Me to go first page
<div id="JQM" data-theme="b" data-content-theme="c"
data-role="collapsible" data-collapsed-icon="arrow-d"
data-expanded-icon="arrow-u">
<h3>
<span style="float: left;"> JQM is very slow </span> <a
href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
style="float: right;"
class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
</a>
</h3>
<p>I sther any way so that page transition should happen just
like native applciation when using JQM ? Botton click also also
sometimes not responsive.</p>
</div>
</div>
<!-- content -->
<!-- footer -->
<div data-role="footer" data-theme="b" data-tap-toggle="false"
data-position="fixed">
<!--class="ui-bar ui-bar-b"-->
<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
<center>
<a href="#HomePage" data-role="button" data-icon="home"
data-iconpos="notext" data-theme="b">Home</a>
</center>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>