Why my Jquery popup plugin isn't working? - javascript

I'm using this magnific pop up plug in (http://dimsemenov.com/plugins/magnific-popup/documentation.html)
This is my very basic html, I simply want the button to open a pop up window in that page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</script>-->
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<title>Burn That Burger</title>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css" media="all">
<link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all">
</head>
<body>
<div id="popup">
test pop up goes here
</div>
<button>create and show popup</button>
</body>
</html>
Javascript:
$(document).ready(function () {
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
});


JSFiddle: http://jsfiddle.net/TrueBlueAussie/vGAsL/19/
you have applied the popup id to your body, instead of a separate div.
<body>
<div id="popup">
test pop up goes here
</div>
<button> create and show popup </button>


I think you have an issue in your body tag, it should be:
<body>
<div id="popup">
test pop up goes here
</div>

Related

Why is this JavaScript button click failing to call a function?

I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<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"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};

You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>

first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<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" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>

The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>

Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>

Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">

actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the 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

jquery mobile - run function from another page without disable ajax

i have two page test1.php and test2.php when i click on my button for going to test2.php my function not running in test2.php only if i put data-ajax="false" in said button it working but i want without disable ajax .. Is there a way ?
test1.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body >
<div id="page-1" data-role="page" >
<div data-role="content">
click
</div>
</div>
</body>
</html>
test2.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body >
<div id="page-1" data-role="page" >
<div data-role="content">
</div>
</div>
<script type="text/javascript">
$(function() {
alert("hi");
})
</script>
</body>
</html>

If you want to run an external function, you can just create a file, let's call it myfunction.js. Then you add it below you jquery includes, like this:
...
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="myfunction.js"></script>
And in "myfunction.js" you add this:
$("a").click(function(){
alert("Hi");
});
Kind of like I did in here: https://jsfiddle.net/uzt27mm2/ just call the script from an external .js file.

Div vanishes when using tooltipster

I want to use the jquery plugin tooltipster for my website. But whenever i want to add a tooltip do a div, the div itself vanishes. The funny part is that when i hover over the place the div was meant to be i still get to see the tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
</head>
<body>
<div style="background-color:green; width:500px; height:500px;" class="tooltip" title="This is my div's tooltip message!"></div>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>
</body>
</html>
There is no other CSS than the inline one for the div in this test example.
Please help me out with this mysterious problem.

<div style="background-color:green; width:500px; height:500px;" class="tooltip" title="This is my div's tooltip message!">You Must add content here</div>
Try this...
<html>
<html lang="en">
<head>
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background-color:green; width:500px; height:500px;">
<h1>Here is the example</h1>
Hover Over Me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

Summernote and Codemirror not working?

I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks

Refer the following code snippet, it's working perfectly fine for me.
<!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" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.

Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};

Categories