why can't view modal ?
and error like this
it should be like this
You should try this way:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
Answer
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"> </script>
<script type="text/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
// jQuery
$('.edit_real').on('click', function (event) {
event.preventDefault();
$('#edit_real').modal();
});
</script>
Related
I am trying to implement an downloadable table on my project, I have all the cdns required and the tabulator is already installed by node. I am programming in Laravel. This is my code so far:
<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
var tabledata = [
{id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
table.setData(tableData);
var table = new Tabulator("#example-table", {
data:tabledata,
height:"311px",
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", width:100, sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", width:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross"},
],
});
//trigger download of data.csv file
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
//trigger download of data.json file
$("#download-json").click(function(){
table.download("json", "data.json");
});
//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report", //add title to report
});
});
</script>
<script type="text/javascript">
</script>
</div>
/////////////////////////////////CDN/////////////////////////////////////
<script src="https://kit.fontawesome.com/d6743b0f97.js" crossorigin="anonymous"></script>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.3/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
<link href="dist/css/tabulator.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modules/format.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modules/format.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>
This is what I am getting in my body: https://i.imgur.com/sC6og2Q.png
Nothing
Tabulator only manages the area inside the table, it will not create buttons outside of the table itself.
You need to add a button to the page yourself:
<button id="download-csv">Download CSV</button>
And then add a click binding to trigger the action on your table:
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
On a separate note you are including a lot of files you dont need to, if you are including tabulator.js then you dont need to include any other files, as it bundles them all up.
If you are going to use tabulator_core.js then you only need to include it or the minified version once
i want to send Get when the link clicked to receive the result in php code
and this what happened
this in php file working perfect
<html>
<a class="cc" href="#">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
but when i put GET to the href didn't work just Flashing content
<html>
<a class="cc" href="?id=1">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
In the second case, you really need to stop the <a> from following the link.
$(document).ready(function() {
$(".cc").click(function(e) {
e.preventDefault();
$(".body").load('page.php');
});
});
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
I want to pass jQuery variable to php file ,
this is my_js.js file
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
var s_id = this['sender_id'];
});
});
}
and i want to display it here in php file,
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div> <?php echo $s_id ; ?> </div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
You might consider using jQuery to set the s_id value in the page.
You can modify your HTML as follows (the important part being the added span element):
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div><span id="s_id"></span></div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
And you can use jQuery in your getJSON callback to set the value as follows to find your added span element and modify its text:
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
$("#s_id").text(this['sender_id']);
});
});
}
I have a partial which loads all common links and styles in head and I use setScript in other pages for local scripts. I want to add the following script which is located in my view/scripts after other scripts but zf appends it at first:
<? $this->headScript()->setScript('$(document).ready(function() {
$("#birthdate").datepicker();
});',
$type = 'text/javascript') ?>
which leads to following code:
<script type="text/javascript">
$(document).ready(function() {
$("#birthdate").datepicker();
});
</script>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.dcmegamenu.1.3.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
but I want:
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.dcmegamenu.1.3.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#birthdate").datepicker();
});
</script>
Try calling:
<? $this->headScript()->appendScript('$(document).ready(function() {
$("#birthdate").datepicker();
});',
$type = 'text/javascript') ?>
Try adding your other files using:
<? $this->setScript()
->prependFile('/js/jquery-ui-1.8.16.custom.min.js')
->prependFile('/js/jquery.hoverIntent.minified.js')
->prependFile('/js/jquery.dcmegamenu.1.3.3.min.js')
->prependFile('/js/jquery-1.7.1.min.js') ;
?>