I have a simple web page which takes the value from the input box and passes it to the next page or form. Only problem is I don't know how to use jquery to get the value and assign it as a php value. I want to pass this value in into the URL
EDIT THIS IS MY LATEST CODE:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#usr").change(function(){
var usr = $("#usr").val();
$("#button").attr("href","calculate.php?id={45}&tt="+usr);
});
});
</script>
<?php
print
"<input type='text' class='form-control' id='usr'>".
"<a id='button' href='calculate.php?id={45}&tt='><button class='btn btn-success'>Calculate</button></a>";
?>
When click the button it goes nowhere and no value is displayed in the URL
Where am I going wrong?
Thanks
You're missing the ID in the <a> element whose href you want to modify.
<?php
print
"<input type='text' class='form-control' id='usr'>".
"<a id='button' href='calculate.php?id={45}&tt='><button class='btn btn-success'>Calculate</button></a>";
?>
If you want to put a PHP variable in the jQuery code, you need to escape back to PHP from the HTML.
<script type="text/javascript">
$(document).ready(function(){
$("#usr").change(function(){
var usr = $("#usr").val();
$("#button").attr("href","calculate.php?id=<?php echo $values['test']; ?>&tt="+usr);
});
});
</script>
Related
EDIT: I can only call tagsinput() if I do not use tagsinput() in a callback
This is still a problem, because I need to call tagsinput() in a callback.
ORIGINAL:
I have not been able to find an answer that solves my issue yet:
I am trying to use this library: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
my HTML file includes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<!-- Bootstrap CDN links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="script.js"></script>
<select id="el" data-role="tagsinput" name="el" multiple ></select>
in script.js (which is connected to multiple HTML files, but the one in question is included above):
function addTagToInput() {
$('#el').tagsinput('add', 'item2');
}
After trying to call addTagToInput(), I get $(…).tagsinput is not a function even though the CDN JS file was properly loaded.
The deciding question is still how exactly do you initialize your tagsinput()?
Also I think that you get some other errors like network problems or something else, so that the tagsinput or jQuery library will not load. The following code works correctly and I've created a button whose click event triggers the addTagToInput() function:
$(function() {
var $el = $('#el'),
$btnAddTag = $('#add-tag');
function initInput() {
$el.tagsinput({
// add a custom class which run with bootstrap v4
tagClass: 'badge-dark'
});
}
function addTagToInput() {
$('#el').tagsinput('add', 'item' + Math.floor(Math.random() * 100));
}
initInput();
addTagToInput();
$btnAddTag.on('click', addTagToInput);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<button type="button" class="btn btn-dark" id="add-tag">+</button>
<!-- because of adding the initInput() function in jQuery I've deleted the data-role="tagsinput"-->
<select id="el" name="el" multiple ></select>
I am trying to create two pivot tables using pivottable.js to show payroll hours
the desired result would be like this:
Payroll for location 1
foo
bar
biz
Payroll for location 2
bad
bash
bin
obviously in the pivottable.js display form which I cannot recreate here
however, the pivottable only shows one for the page and it is either location 1 or location 2
I dont know enough about javascript or html to understand what I am doing wrong here, it seems like a simple problem that I just am not seeing. this is all within a php file.
here is the code I am using for the php file
$pageStart = '<html>
<head>
<title>Payroll</title>
<!-- c3 and d3 scripts and jquery -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<!-- PivotTable.js -->
<link rel="stylesheet" type="text/css" href="./jquery/pivottable/dist/pivot.css">
<script type="text/javascript" src="./jquery/pivottable/dist/pivot.js"></script>
<script type="text/javascript" src="./jquery/c3_renderers.js"></script>
<style>
body {font-family: Verdana;}
</style>
<!-- mobile support -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<p> Location 1 payroll hours
<script type="text/javascript">
// This loads the payroll hours for location 1
// no derived attributes
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers);
$(function(NB){NB,
$("#output").pivotUI(
' . $json . ',
{rows: ["Name"],
cols: ["Hours_type", "Date"],
aggregatorName: "Sum",
vals: ["Hours"],}
);
});
</script>
<br>
<p> location 2 Payroll Hours
<script>
$(function(SV){
$("#output").pivotUI(SV,
' . $json2 . ',
{rows: ["Name"],
cols: ["Hours_type", "Date"],
aggregatorName: "Sum",
vals: ["Hours"],}
);
})
</script>
<div id="output" style="margin: 30px;"></div>
</body>
</html>';
print $pageStart;
the $json and $json2 are mysql functions that pull the data for the pivottable to display
If you use $("#output") for both tables, then one will overwrite the other.
You would need two different tags with different ids like :
Reference first table in output and second in output1
I am new to Bootstrap. I am using bootstrap range slider and javascript in my program. Inspite of using following, I am not able to see tooltip of slider:
<input id = "cheapHFSlider" type="range" data-slider-min="0" data-slider-max="100" data-slider-step="1"
data-slider-tooltip="show" onchange="sliderChanged(this)">
<label id = "cheapHFSliderVal">
When I hover my cursor over that slider in Chrome's debugging mode, I can see that 'tooltip tooltip-main top' is being highlighted in Elements tab of debugger. Attaching the screen shot of above.
Related CSS and JS are:
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Bootstrap slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css">
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap slider JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>
My script tag is:
<script type="text/javascript">
$(document).ready(function() {
$("#cheapHFSlider").slider().on('slide', function(_event) {
$("#cheapHFSliderVal").html(_event.value + "%");
});
$("#cheapHFSliderVal").html($("#cheapHFSlider").slider('getValue') + "%"); // set the initial value of slider in label
})
function sliderChanged(slider) {
switch(slider.id) {
case 'cheapHFSlider':
$("#cheapHFSliderVal").html(slider.value + "%");
break;
default:
console.log("Invalid slider '" + slider.id + "' !");
}
}
</script>
Please let me know where I am going wrong
My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts
I am trying to pop up a form on click of a button. I have included
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js">
The page .
and Using ->
<script type="text/javascript">
$(document).ready(function () {
$('#AddBook').click(function () {
$('#form').dialog({
height: 500,
width: 500,
"title": "Add Book "
}).html();
});
});
</script>
for the first time of click of "AddBook" button it is rendering the proper output.But ,when i click the button second time ,it shows an exception "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
you can do it more correctly as you're using MVC:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css"/>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
Or you can use bundling:
In BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.*",
));
And usage in view:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
There is no need in callng .html() in your script.
Its seems Your script has not been properly included. You are missing End tag </script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js"></script>