I have a bootstrap dropdown which is fill with Jquery function.
But when i submit the form:
<div class="dropdown">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >
Choose basket
<span class="caret"></span>
</button>
<ul class="dropdown-menu" name="basket" role="menu" id="groupe" aria-labelledby="dropdownMenu1">
</ul>
</div>
</div>
In my action.php $_POST['basket'] is empty.
This form mustn't be sent with ajax, but just with html "form".
Your sample code shows no <form> nor any form elements. Giving a name attribute to a ul doesn't magically make it work as a form element - you'd have to use JavaScript to either fill and submit an invisible form or send the data via AJAX.
Related
PHP Code:
<td>
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item " id="achieve" value="<?php echo $value['user_login_id'] ?>">Achivements</a>
<a class="dropdown-item" id="skill" value="<?php echo $value['user_login_id'] ?>">Skills</a>
<!--
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
-->
</div>
</div>
</td>
Here I have a dropdown button in each row where each dropdown has a list of achievements / skills. When clicking an achievement or skill I want to pass that row's id to ajax.
How should I send with ajax?
Using this method you can easily get the dropdown value:
Pass the id or class by using the .value method.
var submitForm = function() {
var name = document.querySelector('.name').value;
console.log(name);
}
document.querySelector('.btn').addEventListener('click', submitForm);
<input type="text" placeholder="name" class="name"><button class="btn" value="submit">Submit</button>
I have solution like this code i think you enough smart to understand it but let me know if you cant get it.
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item achivementClass" id="achieve" value="value1">Achivements</a>
<a class="dropdown-item" id="skill" >Skills</a>
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
</div>
This your script code
<script>
$(function() {
$('.achivementClass').click(function(){
id =$(this).attr('value');
console.log(id);
});
});
</script>
I have a generic modal just before the closing body tag of my page. I use Javascript to show the modal when a button is clicked, passing data attribute values embedded within the button to the modal title, body and footer. This makes the modal dynamic. It works great, however, when I add the trigger button within jQuery DataTable, it fails to trigger the modal.
This is my modal:
<div class="modal fade" id="modal_confirm_action" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<div class="pull-right m-l-15">
<button class="btn btn-danger btn-sm modal_close_btn" data-dismiss="modal" class="close" title="Close"> ×</button>
</div>
</div><!--/.modal-header-->
<div class="modal-body">
<!--render data via JS-->
</div>
<div class="modal-footer">
<a class="btn btn-sm btn-danger" role="button" id="action_url"> Yes, Continue </a>
<button data-dismiss="modal" class="btn btn-sm btn-secondary"> No, Cancel </button>
</div>
</div>
</div>
</div>
This is the button that triggers it:
<a class="btn btn-sm btn-danger text-white modal_trigger_confirm_action" data-title="Delete Post" data-msg="Sure to delete?" data-url="'.base_url('posts/delete_post/'.$id).'">Delete</a>
Note: I'm using server side processing with DataTables (and CodeIgniter), so the button above is inside my controller method, and rendered in one column, like this:
...
$row[] = '<a class="btn btn-sm btn-danger text-white modal_trigger_confirm_action" data-title="Delete Post" data-msg="Sure to delete?" data-url="'.base_url('posts/delete_post/'.$post_id).'">Delete</a>';
...
This is the JavaScript that opens the modal:
$('.modal_trigger_confirm_action').click(function() {
//get data value params
var title = $(this).data('title');
var msg = $(this).data('msg');
var url = $(this).data('url');
$('#modal_confirm_action .modal-title').text(title); //dynamic title
$('#modal_confirm_action .modal-body').html(msg); //dynamic body content
$('#modal_confirm_action .modal-footer #action_url').attr('href', url); //url to delete item
$('#modal_confirm_action').modal('show'); //show the modal
});
Clicking the Delete button within each row doesn't do anything. What am I doing wrong?
Because the button is generated dynamically and not the part of DOM when it loaded first time so you need to trigger click on that dynamically generated button something like this.
$(document).on( "click",".modal_trigger_confirm_action", function() { //logic here });
Please try this:
$( ".modal_trigger_confirm_action" ).on( "click", function() {
// your logic here
});
How do I achieve the following?
I have a list of entries.
I want to be able to delete a single entry via the right "x"
But also I would like to be able to select multiple entries via the checkboxes on the left. After that, obviously clicking the "delete selected entries" at the bottom.
At the moment, all of this is in one form. Everything is links at the moment, not really what I want at all because it doesnt work.
Can anyone help me with a strategy or implementation that would enable me to get this working?
Heres the html code at the moment, I create it dynamically with some PHP, request if you want to see: :)
<form class="learnfest_form" method="post" action="">
<h2>Delete a Learnfest Entry <small>Select an entry to delete</small></h2>
<hr>
<ul class="list-group checked-list-box">
<li class="list-group-item"><input type="checkbox" value="c1e42a9f9cfbdad684fa5a107a9967cef96a8a6e"> L01<a class="pull-right" href="c1e42a9f9cfbdad684fa5a107a9967cef96a8a6e" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
<li class="list-group-item"><input type="checkbox" value="0c0203b6b6d5105a3e72deac0b61be61236b1ff7"> L02<a class="pull-right" href="0c0203b6b6d5105a3e72deac0b61be61236b1ff7" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
<li class="list-group-item"><input type="checkbox" value="99a5cbf3ff728b5d6f3f524d301edc6a5d38feb9"> L03<a class="pull-right" href="99a5cbf3ff728b5d6f3f524d301edc6a5d38feb9" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
<li class="list-group-item"><input type="checkbox" value="31729ebd6fa5fcb0f17cdc1e3e5fe3c861149782"> L04<a class="pull-right" href="31729ebd6fa5fcb0f17cdc1e3e5fe3c861149782" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
</ul>
<div class="panel panel-default">
<div class="panel-body">
Delete Selected Entries <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
</form>
When you click on Delete Selected Entries retrieve all .list-group-item checkbox:checked elements and make an AJAX request to your php page to delete all of them. Your request will be something like this:
{
elementstodelete: [
'c1e42a9f9cfbdad684fa5a107a9967cef96a8a6e',
'0c0203b6b6d5105a3e72deac0b61be61236b1ff7'
]
}
On server side you use json_decode() to read all the elements and you'll make the magic query to delete them.
sorry if this is a bit vague although I really don't know how to explain this one.
Basically I already have a listing page that lists all of the rows in my database into a html template that lists each row into an eCommerce style category page using PHP.
I am using this code for the listing page using PDO:
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>
</div>
Now what I want to do is create a page for each of the SQL rows however I am unsure how I can do this, just like an eBay product page really.
My main question is what method could I do to create individual pages that are dedicated to each SQL row?
If anyone could shed a bit of light on this for me it would be much appreciated.
Knowing you can extract data from a page to another using $_POST['name-of-your-element'], I would say to do something like this :
Creating a php page dedicated to display information of one specific row
Putting some $_POST['...'] call to display the exact data
To do this, instead of just displaying your row in your actual page, you should create form for each row, and then adding a submit button for each row which will launch the "display row page" with the correct information. I would see something like this for each row :
<form method = "post" action = "displayData_Make.php">
<div id = "Make" name = "Make">
Make : <?php echo $row['Make'] ?>
</div>
<input type = "submit" value = "more information..." />
</form>
Then in you "displayData_Make.php" receive your information and display them like you want :
<?php
$info = $_POST['Make'];
// Do what you want with this data
// Display, etc...
?>
<!--
Some html code
-->
My goal is to submit the users selection from a bootstrap dropdown menu to $_POST. As I was researching this question I came across this (bootstrap input field and dropdown button submit)
My question is very similar to this one. However, when I tried what the answer to that question recommended it did not work for me for several reasons.
My Code
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Programming Cards
<!--Creats button for navigation when window gets too small-->
<button class = "navbar-toggle" data-toggle = "collapse" data-target= ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Upload</li>
<li>
<form action="index.php" method="POST" id="my_form">
<input type="hidden" name="topic" id="topic">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Topic Select<b class="caret"></b>
<ul class="dropdown-menu">
<li>Introduction</li>
<li>Methods</li>
<li>Loops</li>
<li>Conditional Logic</li>
</ul>
</a>
</li>
</form>
<script>
$(function()
{
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
});
});
</script>
</li>
</ul>
</div>
</div>
</div>
Aspects of code that are not working
When the li is nested inside of the form element the formatting of the dropdown menu changes. I would like the dropdown to be a form but I want it to look like the default bootstrap dropdown.
Attaching an onclick event handler to the li elements simply is not working. Even after the li is clicked, the PHP does not detect any value for $_POST['topic']
Summary of Goal
I would like the default looking bootstrap drop down menu. I would like the user to be able to click on any item in the drop down menu. After the click the selection should be added to the $_POST array at index "topic"
There is a syntax error in your click() code. You missed 2 semi-colons at the end.
$(function()
{
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
}); // <-- need a semi-colon here.
}); // <-- and here.
Other than the above:
Your click handler is clearly not being called.
You're using the jquery API, without first linking to the jquery script file.
Do point 2, then remove the outer $(function()...) and instead, use
$(document).ready(function(){
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
});
});
And, Check this demo .
Try this
<form action="index.php" method="POST" id="my_form">
<input type="hidden" name="topic" id="topic">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Topic Select<b class="caret"></b>
<ul class="dropdown-menu">
<li>Introduction</li>
<li>Methods</li>
<li>Loops</li>
<li></li>
</ul>
</a>
</li>
</form>
<script>
$(function()
{
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
});
});
</script>
if you want to send all navbar, remove hidden field named topic and use next script
<script>
$(function()
{
$('.dropdown-menu li').click(function()
{
$('.dropdown-menu li').each(function()
{
$('#my_form').append('<input type="hidden" name="topic[]" value="'+$(this).html()+'">');
});
$('#my_form').submit();
});
});
</script>