In my code I have
<script>
$(document).on('click', 'a#coin', function(){
// get month
var val = $(this).attr('data-id');
$.post('alert.php', {coin: val}, function(data){
console.log(data);
});
});
</script>
This is the data toggle link for the modal
<a id="coin" href="#" data-id="BTC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for BTC" style="color:orangered"></i></a>
And in alert.php I simply have
$coin = $_POST['coin'];
echo $coin;
The modal is popping up fine its just not passing the data-id value
Unsure as to what Im doing wrong
More code added
<?php
require('alert.php');
?>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
$("#liveprices").load("liveprices.php");
setInterval(function() {
$("#liveprices").load("liveprices.php");
}, 5000);
});
</script>
</head><body>
The function discussed here is loaded at the end of the document
Says bootstrap.min.js requires Jquery although jquery is loaded right
above it
By default bootstrap uses jQuery slim version. Slim version do not have $.ajax and related functions. Use the jQuery full version.
Use this jQuery
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Below is the comment from the slim version with the features removed
/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
After a discussion over the chat regarding the requirements, we came to a conclusion that PHP is not at all required in this case and simple jQuery does the trick:
Requirements:
If you look at this screenshot
you will see a list of coin names with an alarm icon ..
When the relevant alarm icon is clicked I want it to pop up a modal and just assign and echo a variable value ( which will be the coin ) BTC etc
Later on a form will be added which ideally will have that data added to a hidden field ready for submission
Solution (one approach):
JS FIDDLE
Relevant code changes:
$(document).on('click', 'a.coin', function(){
var val = $(this).attr('data-id'), modal = $('div#test-modal');
console.log(val);
modal.find('.modal-title').html('Get alerts for ' + val);
modal.find('.modal-body .alert-notification').html('Get alert notifications when ' + val + ' breaks strong support / resistance lines');
modal.modal('show');
});
Since you are using document.on('click'), the $(this) may be somewhat confused. I might try $(event.target).closest('a#coin') in place of $(this) and see if it helps:
$(document).on('click', 'a#coin', function(event) {
var val = $(event.target).closest('a#coin');
console.log(val);
});
Related
I want to access php id on the same page for this i want something like this:
<a onclick='showDialog_update()' href='follow_event.php?id=$customer->id'\">
but i want to show popup and not want the page to get refresh so i can show my result on my popup on the same page.
i already tried this jquery code but its not working for me
<a href="javascirpt:void(0)" rel='$customer->id' class="showpopup">
$(".showpopup").click(function(ev)
{
var getid = $(this).attr('rel');
alert(getid);
ev.preventDefault();
}
Please try this code.
You must echo the php variable into the a tag
asdf
<!-- jQuery cdn source, can be skipped -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$(
$(".showpopup").click(function(ev)
{
var getid = $(this).attr('rel');
alert(getid);
ev.preventDefault();
})
);
</script>
I need to get data from Materialize CSS chips, but I don't know, how.
$('.chips-placeholder').material_chip({
placeholder: 'Stanici přidíte stisknutím klávesy enter',
secondaryPlaceholder: '+Přidat',
});
function Show(){
var data = $('.chips-placeholder').material_chip('data');
document.write(data);
}
<!-- Added external styles and scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- HTML body -->
<div class="chips chips-placeholder"></div>
<button onclick="Show()" type="button">Show</button>
So, to access to the data's chip you just have to do this:
var data = $('#id of your chips div').material_chip('data');
alert(data[0].tag);`
'0' is the index of your data (0, 1, 2 , 3, ...).
'tag' is the chip content. You can also get the id of your data with '.id'.
To get data from Materialize CSS chips, use the below code.
$('#button').click(function(){
alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});
They appear to have changed the method available in the latest version.
The documentation suggests that you should be able to access the values as properties of the object, but I’ve spent an hour looking, not getting anywhere.
Until the following happened
$('.chips-placeholder').chips({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
onChipAdd: (event, chip) => {
console.log(event[0].M_Chips.chipsData);
},
During the onChipAdd event I was able to access the event. Within this object was an array of tags.
I know this isn't the documented way, however there is only so much time a client will accept when it comes billing and I must move on.
This worked great for me
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.chips');
var instances = M.Chips.init(elems, {
placeholder: "Ajouter des Tags",
secondaryPlaceholder: "+tag",
onChipAdd: chips2Input,
onChipDelete: chips2Input,
Limit: 10,
minLength: 1
});
function chips2Input(){
var instance = M.Chips.getInstance(document.getElementById('chip1')), inpt = document.getElementById('myInputField');
inpt.value = null;
for(var i=0; i<instance.chipsData.length; i++){
if(inpt.value == null)
inpt.value = instance.chipsData[i].tag;
else{
inpt.value += ','+instance.chipsData[i].tag; //csv
}
}
console.log('new value: ', inpt.value);
}
});
</script>
I am working on a project where we are trying to implement a jQuery plugin called Footable. It works by calling the function .footable() on the table being selected by jQuery. When I tried to call this function I got a type error: undefined is not a function.
We are also using prototypejs in this project so at first I though that the problem was that footable was using $.() instead of jQuery.(), and it was. I went in and changed the $[.(] to jQuery hoping that it would fix the problem, but I am still unable to call .footable().
You should also know that I am loading footble.js from an Iframe. I'm not sure if that would cause any problems.
I'm not sure what to try next. Any advice is appreciated.
Thanks in advance
UPDATE 1
I have tried entering the following code in the console
var $j = jQuery.noConflict();
$j('<table></table>').footable();
In an environment that successfully loads footable an object is returned with the footable classes. In my enviornment I get a "TypeError: undefined is not a function".
make sure load jquery first, and then footable
and $ is alias from jQuery, so its should not a problem, u can use $() or jQuery()
based on your question, you should use $() or jQuery(), not $.() or jQuery.()
I think you're on the right track with there being a conflict.
Here's a plunk that demonstrates the issue: http://plnkr.co/edit/2sR7F2W0QGJAcXxgez14
In the plunk, if JQuery is still reference by $ and you add the reference to Prototype, you see that Footable stops working. If you use the JQuery NoConflict and then use that instead of $, Footable starts work as expected again.
Here's where I define the scripts:
<head>
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>var $j = jQuery.noConflict();</script>
<script src="footable.js"></script>
<script src="footable.filter.js"></script>
<script data-require="prototype#*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
</head>
Then when I use JQuery and Call footable():
$j(function() {
window.footable.options.filter.filterFunction = function(index) {
var $t = $j(this),
$table = $t.parents('table:first'),
filter = $table.data('current-filter').toUpperCase(),
columns = $t.find('td');
var regEx = new RegExp("\\b" + filter + "\\b");
var result = false;
for (i = 0; i < columns.length; i++) {
var text = $j(columns[i]).text();
result = regEx.test(text.toUpperCase());
if (result === true)
break;
if (!$table.data('filter-text-only')) {
text = $j(columns[i]).data("value");
if (text)
result = regEx.test(text.toString().toUpperCase());
}
if (result === true)
break;
}
return result;
};
$j('table').footable().bind('footable_filtering', function(e) {
var selected = $j('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
});
}
If you want to continue to use $ jquery you could do something like: (jQuery and prototype.js conflict, how to keep jQuery as $?)
(function($) {
$('table').footable();
})(jQuery);
<div id='mydiv'>
update
</div>
<script>
function openWindowReload(link) {
setTimeout(function(){
var href = link.href;
window.open(href,'_blank');
document.location.reload(true)
}, 5000);
return false;
}
</script>
so i have this code that force to refresh (after 5 secs) the current page after clicking the button 'update' (target = "_blank")...
but i want to reload only a particular div....
explanation:
update button is only visible when field in table updating = false ... so when it is true update button is not visible..but when u click the button update it will 1st update the table and set updating = true
update.php
<?php
mysqli_query($con, 'UPDATE TABLE sET updating = TRUE');
(long code in here)
?>
so can u pls help me guys to achieve my goal.....
Using jquery $.post shorthand ( http://api.jquery.com/jquery.post/ ), for example:
$(document).ready(function(){
$.post( "update.php", function( data ) {
// wrap this with the timeout, if you need
// but the method post is asynchronous already and takes time
$( ".update" ).hide();
});
});
The html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button class="update">Update!</button>
</body>
</html>
That's all! Hope this helps!
Is there a way to create a loop for the and statements inside an jquery accordion , so I can iterate through my JSON.
The code below has the JSON working, so I want the data from the JSON to fill my jquery accordion. Just don't know how to work around the h3 and div tags that teh accordion needs.
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<link rel="stylesheet" href="jquery-ui-1.8.23.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.8.23.custom/development-bundle/jquery-1.8.0.js"></script>
<script src="jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.selectable.js"></script>
<script src="jquery-ui-1.8.23.custom/development-bundle/ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.23.custom/development-bundle/demos/demos.css">
<script type='text/javascript' src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script><script>
$(document).ready(function(){
/* call the php that has the php array which is json_encoded */
$.getJSON(ReturnPlacesJSON.php, function(data) {
/* data will hold the php array as a javascript object */
$.each(data, function(key, val) {
var latlng = new google.maps.LatLng(val.xcoord, val.ycoord);
var title = (val.title)?val.title:""
var icon = 'http://shanewmiller.com/Specials/images/beermug.png';
var special = val.Description;
var end = (val.endtime)?val.endtime:""
var start = (val.starttime)?val.starttime+" - ":""
var day = (val.day)?val.day:""
var html = val.name + val.address + special + day + start + end;
$('<h3 />').html(special).appendTo('#accordion');
$('<div />').html(val.name + ' ' + val.address).appendTo('#accordion');
});
});
});
</script>
</head>
<body>
<div id="accordion">
</div>
</body></html>
What you are trying to do is to create h3 and divs, inside the accordion div
What $('#accordion > h3').each() and $('#accordion > div').each() do is iterating through h3 and divs already inside the accordion, which are none.
What you in fact need to do is iterate through the json - and you do it by calling $.each(data, ...) - and then for each item, create a new h3 and a new div with that content.
You create element using jQuery with something like this:
$('<h3 />').html(special).appendTo('#accordion');
$('<div />').html(val.name + ' ' + val.address).appendTo('#accordion');
I believe the rest of the code must be fine tuned. For instance, I'm not sure that calling accordion(), and after that populating the div gives you the desired effect.