I use this function to display a mysql table on my page and if table has new rows to update it.
I want to use a few buttons to change 'data.php?clas=Regularitate%20Sedan' or 'data.php?clas=' to something else.
My final code to work like this:
-when I press button1 $('#Table3').load('HERE TO BE VARIABLE1') AND THE TABLE3 TO REFRESH
-when I press button2 $('#Table3').load('HERE TO BE VARIABLE2') AND THE TABLE3 TO REFRESH
<div id="show"></div>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
setInterval(function () {
$('#Table3').load('data.php?clas=Regularitate%20Sedan')
$('#Table2').load('data.php?clas=')
}, 1500);
});
</script>
I tried this function
<head>
<script type="text/javascript">
var destinatie = "hello.html";
function choose(choice){
destinatie = choice;
}
</script>
</head>
<button type="button" onclick="choose('/data.php?ral=1&clas=Regularitate%20Sedan&tur=1')">PS1</button>
I think it can change the destinatie variable, and on jquery I changed $('#Table3').load('destinatie').
How do I call the jquery function?
put a data-choice attribute in your html and get it with :
$('button#IdOfYourChoice').attr('data-choice')
look at this ressource :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
Related
I have a code like this:
<html>
<head>
<title>Example formBuilder</title>
</head>
<body>
<div class="build-wrap"></div>
<div class="build-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
jQuery(function($) {
$(document.getElementsByClassName('build-wrap')).formBuilder();
});
</script>
</body>
</html>
If it was initialized by id, then I could have get data with something like this:
var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();
document.getElementById('getJSON').addEventListener('click', function() {
alert(formBuilder.actions.getData('json'));
});
However, I am using classname to initialize form builder. Is there any way, when click on save, get the respective form-builder data? I am using https://formbuilder.online/
Here is jsfiddle: https://jsfiddle.net/xycvbj3r/3/
#PS: there could be numerous form builder inside php loop.
You can try this:
formBuilder.actions.getData('json');
Or:
formBuilder.actions.getData();
The live demo is here: http://jsfiddle.net/dreambold/q0tfp4yd/10/
I was facing the same issue too. This worked for me
var list = ['#ins1', '#ins2', '#ins3'];
var instances = [];
var init = function(i) {
if (i < list.length) {
var options = JSON.parse(JSON.stringify([]));
$(list[i]).formBuilder(options).promise.then(function(res){
console.log(res, i);
instances.push(res);
i++;
init(i);
});
} else {
return;
}
};
init(0);
And to get data, you can use instances[key].actions.getData()
I am not sure how you are planning to save this data, but to help with your problem of getting form data for a particular form you can use something like this
var formBuilder = $(document.getElementsByClassName('build-wrap')).first().data('formBuilder').actions.getData()
Or to use it over a jQuery Collection then
$(document.getElementsByClassName('build-wrap')).each(function () {
var formBuilder = $(this).data('formBuilder').actions.getData()
})
There is a callback mentioned in the documentation, onsave which runs on editor save. So, when clicking on any form builder's save button, the respected form's data can be received.
Here is the code-
<html>
<head>
<title>Example formBuilder</title>
</head>
<body>
<div class="build-wrap"></div>
<div class="build-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
jQuery(function($) {
var options = {
onSave: function(evt, formData) {
// This is the respected form's data
console.log('MY DATA_________', formData)
},
};
$(document.getElementsByClassName('build-wrap')).formBuilder(options);
});
</script>
</body>
</html>
Here is the fiddle (couldn't create a working snippet due to not working CDNs.
)- https://jsfiddle.net/nehasoni988/rpo1jnuk/1/#&togetherjs=Mka9TJ4cex
i am playing around with some new javascript functions to try to automatically click the button on a web page.
However, the click event of the button does not fire automatically. I have googled some code and it appears to be correct.
I am using IE browser 10
<html>
<head>
<script type = "text/javascript">
function haha1()
{
alert('haha1');
}
</script>
<script>
document.getElementById('haha').click();
</script>
</head>
<body>
<input type = "button" id = "haha" onClick = "haha1()" value = "lol"/>
</body>
</html>
You need to do it after the page loads. Basically your script executes before haha gets created so it doesn't show your alert.
<script type = "text/javascript">
function haha1()
{
alert('haha1');
}
function fire_haha() {
document.getElementById('haha').click();
}
</script>
</head>
<body onLoad="fire_haha()">
You have to wait for the DOM fully loaded before triggering the event and dccording to unobstrusive javascript. You should not embed javascript into html.
<html>
<head>
<script type = "text/javascript">
function haha1()
{
alert('haha1');
}
</script>
<script>
window.onload = function(){
document.getElementById('haha').onclick = function(){
haha1();
};
document.getElementById('haha').click();
}
</script>
</head>
<body>
<input type = "button" id = "haha" value = "lol"/>
</body>
</html>
Try this with jQuery
function fire_haha() {
$('#haha').trigger('click');
}
I'm using an API, and am trying to access the value of product.shoeName to change text on my HTML page. This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="shoepoo.js">
</script>
</head>
<body>
<div>
<p id="text" style="color:purple;
font-weight:bold;font-size:20px;">
</p>
<script type="text/javascript"> shoeName(); </script>
</div>
</body>
</html>
const SneaksAPI = require('sneaks-api');
const sneaks = new SneaksAPI();
//getProducts(keyword, limit, callback) takes in a keyword and limit and returns a product array
function shoeName(){
sneaks.getProducts("Jumbo Blazer", 1, function(err, products){
products.forEach(
function names (product) {
document.getElementById("text").innerHTML = product.shoeName;
})
});
};
Basically, I want product.shoeName to be shown as text, but nothing is showing up. How can I fix this? I understand it's a local function which is probably stopping the data from being shown (or something like that), but how can I work around this?
Made below changes in shoepoo.js
products.forEach((product)=> {
document.getElementById("text").innerHTML = product.shoeName;
});
But you need to create dynamic HTML components if there is multiple data in products. Otherwise, it set the last shoeName in the paragraph component.
It seems simple enough, but nothing I try is working. I have a jquery ui datepicker, I use val() to get the value of that input on button click(), then log it. The click event is working. I can log a string I write myself, but when I pass console.log() the variable that stores the datepicker value...nothing. I've tried using html() and text() instead of val(), still nothing
//JS
$(function(){
$("button").button();
$("#date").datepicker();
var date = $("#date").val();
$("button").click(function(){
// this logs
console.log("event working");
// but this logs nothing
console.log(date);
});//close click
});//closes function
//HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://myDomain/bn/lbStyle.css"/>
<script src="http://myDomain/index.js"></script>
<title>
Welcome to The Bringer Network
</title>
</head>
<body>
<form id="dialog">
<p>Date <input type="text" id="date"/></p>
<button>Submit</button>
</form>
</body>
</html>
You should declare date variable within click if you want to assign the value of input field. Go through code below. You actually initialized soon after the page is loaded whixh is not the correct way in your case.
$(function(){
$("button").button();
$("#date").datepicker();
$("button").click(function(e){
e.preventDefault();
var date = $("#date").val();// look this line. It should be inside.
console.log("event working");
console.log(date);
});//close click
});
I'm not sure what are you trying to do. But I think you should place this: var date = $("#date").val(); in your click event. Because your code assigns the .val() of the field when it's empty. That's why your var date is empty.
http://jsfiddle.net/FnGmS/ - Here is a working demo of this code:
$(function () {
$("button").button();
$("#date").datepicker();
$("button").click(function () {
var date = $("#date").val();
console.log("event working");
console.log(date);
});
});
Lets say I have a string like this
var methodString = "<script>
var a;
var b;
function func1(v1, v2)
{
..///DO random stuff
}
</script>";
I then attach this code to the end of the body after a button click somewhere on the page
$(body).append(methodString);
How do I call this new function that i just appended
$("button1").click(function() { func1(a,b); }); //This doesn't seem to recognize the new method.
simple HTML
<button onclick="func1(a,b);">Click me</button>
With jQuery
<script type="text/javascript">
$('#myButton').click(function(){
func1(a,b);
});
</script>
<button id="myButton">Click me</button>