I need to able to click on list element and depending on which I am clicking, 2 variables will be displayed on the same page.
I have 2 variables which are defined in the html code ( this could be changed as I am hardcoding them variables into the html ):
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
Later I would like to pick up both variables with PHP $_POST like this:
<?php
echo $_POST['var1'];
echo $_POST['var2'];
?>
How can I achieve that?
You could do something like this:
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
<script>
function myFunction(a, b){
$.ajax(function(){
url: <yourURL>,
data: {'a': a, 'b': b }
success: function(){
//access the variables here.
}
});
}
</script>
use $.post()
html
<ul>
<li>Text 1</li>
<li>Text 2</li>
...
jquery
function callFunction(var1,var2){
$.post('path/to/your/php/page',{'data1':var1,'data2':var2},function(result){
alert('success');
})
}
and you can get the posted data in php by $_POST
php
$data1 = $_POST['data1'];
$data2 = $_POST['data2'];
echo $data1 " , " $data2;
Related
Using JQuery I want to check that each list item has the css class Complete. If so, i want to display a button, if not I want to keep the button hidden.
The classes are currently inserted dynamically using PHP when the page loads.
My code so far is;
<button id="steps-complete" hidden>Download Now</button>
<ul class="wb-steps">
<li class="<?php echo $class ?>">Step 1</li>
<li class="<?php echo $class ?>">Step 2</li>
<li class="<?php echo $class ?>">Step 3</li>
</ul>
<script>
jQuery( document ).ready(function() {
var steps = [];
jQuery( ".wb-steps li" ).each(function( index ) {
// successfully displays complete for each list item
console.log( index + ": " + jQuery( this ).attr('class') );
// if all stepa have 'complete' show button
$("#steps-complete").show();
});
});
</script>
You have the $class variable, and its value is set as the class of all list items.
Since you are using PHP to render the page, you can use the same variable to test if the button should be shown or not. So you wouldn't need jQuery in this case, you can just remove that part.
Here's what it would look like:
<?php
if (strpos($class, 'Completed') !== false) {
?>
<button id="steps-complete" hidden>Download Now</button>
<?php
}
?>
This works in your case because you set the same class to all items.
Hope this helps.
i've made a function to check of the children of the wb-steps have a class named john, if not then we show the steps complete
jQuery( document ).ready(function() {
if($(".wb-steps").children().not('.john').length = 0){
console.log("there was a div found with a class named john");
}else{
$("#steps-complete").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="steps-complete" hidden>Download Now</button>
<ul class="wb-steps">
<li class="<?php echo $class ?>">Step 1</li>
<li class="<?php echo $class ?>">Step 2</li>
<li class="<?php echo $class ?>">Step 3</li>
</ul>
You can simply count the elements to see if all of them have the complete class:
jQuery(document).ready(function() {
var $steps = $(".wb-steps li");
var show = $steps.length === $steps.filter('.complete').length;
$("#steps-complete")
.toggle(show)
.get(0)
.toggleAttribute('hidden', show);
});
$("ol").append("<div id='save' style='display:none'>Save<div>");
$("li").mouseup(function() {
$('#save').show();
});
$("ol").sortable();
$("body").on('click','#save',function(){
$(this).hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<ol id='some123'>Items
<li draggable='true'>Item 1</li>
<li draggable='true'>Item 2</li>
<li draggable='true'>Item 3</li>
<li draggable='true'>Item 4</li>
</ol>
snippet above working correctly with js append.
How to show an element after append by php using mouseup?
So, I have draggable list. And, I need to show element every time the user changes the list order. Every time the element is dropped, I call a function as shown:
$("li").mouseup(function() {
$('#save').show();
});
$("ol").sortable();
When the user clicks save button, I hide it using:
$("body").on('click','#save',function(){
$(this).hide();
})
But how do I make it visible again? $('#save').show(); isn't working!
funniest thing:
my php generate 2 buttons, like that:
<div class="buttons"><button id="saveTit" style="display: none" >Save content</button></div>
<div class="buttons"><button class="butClick" data-con='<?php echo $content?>'>Add new row</button></div>
To call 2nd button i use:
$(".butClick").on('click',function(){
alert($(this).attr('data-tit'));
})
but to call 1st one i have to use body selector... any idea why?!
I change id for class inside div and to call a event...
And it works...
Hi try to change the div to hidden instead and use the prop function instead of show and hide :
$("ol").append("<div id='save' hidden>Save<div>");
$("li").mouseup(function() {
$('#save').prop("hidden",false);
});
$("ol").sortable();
$("body").on('click','#save',function(){
$(this).prop("hidden",true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<ol id='some123'>Items
<li draggable='true'>Item 1</li>
<li draggable='true'>Item 2</li>
<li draggable='true'>Item 3</li>
<li draggable='true'>Item 4</li>
</ol>
Hope it helps
I wrote my site with php. I have the index file dynamically loading my pages from a pages folder. I have the nav menu in a separate file as well.
so I'm trying to have the text color highlighted when clicked, since I can't get the windowlocation to work. Because of the way I have it setup, the windowlocation returns /index.php with javascript or jquery. So I tried to keep it simple by just targeting the link.
<nav>
<ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Script to add selected class to highlight active link-->
<script>
$(document).ready(function(){
$("ul li a").click(function(){
$("ul li a").removeClass('selected');
$("ul li a").addClass('selected');
});
});
</script>
my css is setup like this:
a.selected{color:#0066ff;}
I've tried throwing this code in every php file I created. Still nothing works. When I want an alert box to pop up with a message when a link is clicked, that works fine. why does this not work? Nothing changes when I run the code... Any suggestions?
If you reload the page by clicking each link then try
<nav>
<ul>
<li><a href="index.php?p=home" <?php (empty($_GET['p']) || $_GET['p'] == 'home') ? echo 'class="selected"' : ''?> >Home</a></li>
<li><a href="index.php?p=skills" <?php $_GET['p'] == 'skills' ? echo 'class="selected"' : ''?>>Skills</a></li>
<li><a href="index.php?p=about" <?php $_GET['p'] == 'about' ? echo 'class="selected"' : ''?>>About</a></li>
<li><a href="index.php?p=contact" <?php $_GET['p'] == 'contact' ? echo 'class="selected"' : ''?> >Contact</a></li>
</ul>
</nav>
Though you won't need the jQuery function.
If you don't want to reload the page then try this in your jQuery:
$(document).ready(function(){
$("ul li a").click(function(){
$("ul li a").removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
You need to add selected class in the clicked li element.
try like this:
$(document).ready(function(){
$("ul li a").click(function(){
$(".selected").removeClass('selected');
$(this).addClass('selected');
});
});
Actually you are redirecting when you are clicking in the li element. so jquery wil not be worked in this scenario.
it will work if you use one page application with out page reloading.
You can to do it by php like this:
// index.php
<?php
$page = isset($_REQUEST['p']) ? $_REQUEST['p'] : '';
switch($page) {
case 'skills' :
echo ' <ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
case 'about' :
echo ' <ul>
<li><a href="index.php?p=home" >Home</a></li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
case 'contact' :
echo ' <ul>
<li><a href="index.php?p=home" >Home</a></li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
default:
echo ' <ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
}
I have a mysql database and I am using jquery to do a live search which is working like a charm. But I have tried alot of ways to have a pagenation for my search results.
Below is my jquery code
$(document).ready(function(){
/*
Set the inner html of the table, tell the user to enter a search term to get started.
We could place this anywhere in the document. I chose to place it
in the table.
*/
$.get('data/search-data.php', function(returnData) {
$('#results').html(returnData);
});
/* When the user enters a value such as "j" in the search box
* we want to run the .get() function. */
$('#searchData').keyup(function() {
/* Get the value of the search input each time the keyup() method fires so we
* can pass the value to our .get() method to retrieve the data from the database */
var searchVal = $(this).val();
/* If the searchVal var is NOT empty then check the database for possible results
* else display message to user */
if(searchVal !== '') {
/* Fire the .get() method for and pass the searchVal data to the
* search-data.php file for retrieval */
$.get('data/search-data.php?searchData='+searchVal, function(returnData) {
/* If the returnData is empty then display message to user
* else our returned data results in the table. */
if (!returnData) {
$('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>');
} else {
$('#results').html(returnData);
}
});
} else {
$.get('data/search-data.php?searchData='+searchVal, function(returnData) {
$('#results').html(returnData);
});
}
});
});
A simple solution, without delving into javascript object and/or templating is returning the pages from the server like this:
<div data-page="1" class="results">
<ul>
<li>Result 1</li>
<li>Result 2</li>
</ul>
</div>
<div data-page="2" class="hidden results">
<ul>
<li>Result 3</li>
<li>Result 4</li>
</ul>
</div>
<div data-page="3" class="hidden results">
<ul>
<li>Result 4</li>
<li>Result 5</li>
</ul>
</div>
<div id="pager"></div>
then create the pager links with jquery on the ajax callback:
var links = [];
$('.results').each(function(i) {
var link = $('<a />', {
text: i+1,
href: '#'
});
links.push(link);
});
$('#pager').html(links);
then a click handler will toggle the display of the pages:
$('#pager').on('click', 'a', function() {
var i = $(this).index();
$('.results').eq(i).removeClass('hidden').siblings('.results').addClass('hidden');
return false;
});
DEMO: http://jsfiddle.net/Ry7NJ/1/
Im trying to replicate the functionality of this page (http://www.kissfm.ro/fresh-top-40/) for a friend who has a small web radio. The site is setup in wordpress fyi.
So my question is, after searching stackoverflow, how do i save/get the revised charts based on the users input? i found how to save single submittions but how do i get the final charts based on the user choice?
Thanks in advance!
(code or link to tutorial welcome!)
make your HTML sortable, add javascript, and save to php on update.
<ul id="sortable">
<li id="1">elem 1</li>
<li id="2">elem 2</li>
<li id="3">elem 3</li>
<li id="4">elem 4</li>
</ul>
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
$.get('saveSortable.php', {order:newOrder});
}
});
});
I know this is old, but what I do is just add a hidden input element in every LI. They would all have a the same name with [] at the end. This way, when you post the form containing the UL, you will get an array in your post values in the order you just put your list.
According to the Sortable docs we have to prefix the LI's id with some string.
Then if we serialize the sortable in the update method we'll get a nice array in php e.g. new_order[]=1&new_order[]=2 etc.
var data = $(this).sortable('serialize');
<ul id="sortable">
<li id="new_order_1">elem 1</li>
<li id="new_order_2">elem 2</li>
<li id="new_order_3">elem 3</li>
<li id="new_order_4">elem 4</li>
</ul>
You may POST with input to DB and save it
Here we go:
<ul id="sortable">
<li id="1"><input type ="text" value="elem 1"/></li>
<li id="2"><input type="text" value="elem 2"/></li>
.
.
</ul>
<style>
#sortable{
border: hidden;
}
</style>
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
$.get('saveSortable.php', {order:newOrder});
}
});
});
Hope it helps ;)