I am prototyping a way for a user to view all the data behind a visualization. Basically they would click on a point, a modal would pop up, and the table within modal would be dynamically filtered by a string submission. I've got almost everything working perfectly so far, but I can't get the filter to submit on value change.
The tables library I am using is DataTables, so I have been trying to test this with a small jquery script and some html buttons.
Currently my script is triggered on click of a specific button, it then opens the modal, finds the table's unique id and then the closest child that is an input element, and then it writes a string as that input's value.
Example Sript:
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('May 16, 2018');
})
</script>
Relevant HTML:
<div class="modal fade" id="x-data-modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="moday-body">
<div class='row'>
Search:<input type="search" class="form-control form-control-sm" placeholder=""
aria-controls="x-data-table">
</div>
<table id='x-data-table'>table stuff</table>
</div>
</div>
</div>
</div>
I cannot access the input directly as it is created by the DataTables library without a unique id, but this does the trick. Upon clicking the button the modal is opened and the relevant input is changed to the included string. But for some reason it doesn't submit. So basically the table opens with a canned search when I wanted to open with that canned search either executed or in the process of executing.
I've tried:
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('May 16, 2018');
search_input.submit();
})
</script>
And similarly (using the built in DataTables search module):
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('Apr 27, 2018');
var table = $('#x-data-table').DataTable();
search_input.on('change', function () {
table.search(this.value).draw();
console.log(('This was the search') + this.value);
});
console.log('Ran Whole Function');
});
</script>
You need to call the .submit() function on the form element, not the input element.
Solved this by watching the Event listener for the search and piggy-backing off the DataTables function. Ended up being much eaiser to locate the search with this as well.
<script>
$('#test-button-2').on('click', function () {
var table = $('#x-data-table').DataTable();
table.search('Jun 10, 2018').draw();
})
</script>
Related
I am doing a web based calculator wherein I want to append each and every number pressed on to a paragraph, this is the paragraph to hold all the entered input <p id="display" class="col-10 table-bordered" style="height:20px"></p> then this is one of the buttons <button class="col-2" id="seven">7</button>
Then below is the jQuery code used to try and captured the data
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
$("#seven").click(function () {
//document.getElementById('display').text('7') = $('#seven').text();
$("#display").append('7');
});
});
</script>
The problem is when I click on button 7, the number appears once on the display and disappears, I think it is refreshing or something, I cant seem to get the number to stick once it has been clicked, please help.
I have a value that I am passing to a div in a bootstrap model using javascript code. I want to again use that value to filter data from MySQL database within a bootstrap modal but I have failed to pick the value from the div
Javascript Code that sends the vale to the div in Bootstrap
<script type="text/javascript">
$('#check_feedback').click(function() {
$('#inquiry_id').html($('input[name=id]').val());
})
</script>
Div code
<div id="inquiry_id"></div>
PHP code
$id = htmlspecialchars($_POST["inquiry_id"]);
this is the error that i see when i run this code
The error that is see
You can try this:
I have created an example, please change according to your needs.
$('#check_feedback').click(function() {
$('#textarea_id').val($('#inquiry_id').text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<div id="inquiry_id">This content is wrap within div tag </div>
<div id="textbox_id"></div>
<textarea id="textarea_id"></textarea>
<button id="check_feedback">check feedback</button>
I have a form with different multiple submit buttons that perform separate actions.
One of these buttons is part of a bootstrap modal that adds a quantity field. When I press this button I would like it to add the value of the quantity field as a url parameter. For example a user enters 25 in the quantity text field and clicks submit, they should POST the form data to the page www.example.com/folder/?quantity=25.
Unfortunately I am a complete novice to javascript and jquery, so I tried to modify an answer to someone else's question on how to change a form's action to work on my button.
Right now my modal and submit button are working, but the button's formaction is not being changed. I have also tried changing the form's action using the script below and removing the action from the button, but with no success.
Any assistance would be much appreciated. Additionally, I do not care about not supporting older browsers. If just firefox and chrome support it, that is good enough for me.
<div class="modal fade bs-order-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<input type='text' name='quantity' id="quatity">
<li><button name='btn-add' id='btn-add' type="submit" form="id-details" formaction="/inventory/order/" class="btn btn-info">Add to Order List</button></li>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<script>
$(function() {
$('#btn-add').submit(function(){
var quantity = $('#quantity').val();
$(this).attr('formaction', "/inventory/order/?quantity=" + quatity);
});
});
</script>
Issue is the button doesn't have a submit event - the form does. What you want to do is modify the click event of the button instead. Also for safety I prefer to use $(document).ready() when attaching the event:
$(document).ready(
function () {
$('#btn-add').on('click', function () {
var quantity = $('#quatity').val(); // Your ID on the "quantity" input is missing an "n"
$(this).attr('formaction', "/inventory/order/?quantity=?quantity=" + quantity);
});
});
Finally, you may want to add some basic validation to make sure the value in the textbox isn't empty or alphanumeric.
I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.
This is the code portion for button. Id will be assigned form DB. It is working fine.
<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>
Modal Window: Here I need to get the value form popupwindow function and query DB and view:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
</div>
</div>
JavaScript Function for Passing values to Modal Popup Window
function popupwindow(id) {
// code for Pass the value to modal window
window.location="#openModal"
}
I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.
I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:
function popupwindow(id) {
$("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
$("#openModal").show();
})
}
And your HTML:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
<div class="content"></div>
</div>
</div>
Instead of using onClick(), use jQuery click function. Here's how:
$("[input[name = 'button']").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Alternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:
<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>
Now, in JQuery, do the following
$(".modalBtn").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Hope it answers your question.
use window.location.hash for replace hash
function popupwindow(id) {
window.location.hash = '#openModal'
}
You can use the following script for loading and unloading pop up box,
<script type="text/javascript">
$(document).ready( function() {
loadPopupBox();
$("#popupBoxClose").click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$("#popup_box").fadeOut("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.8"
});
}
function loadPopupBox() { // To Load the Popupbox
$("#popup_box").fadeIn("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.2"
});
}
});
</script>
Other than that you dont need to send values through the JS , JS is a client side , u cannot play with server side language , using client side.
one solution is you can use something like,
window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"
and change the method of the form to GET instead of post.
After doing that you can write a php code , for excepting the value from $_GET and echo the modal pop-up using php.
I am developing one application using codeigniter. In this application got a problem that modal window is not opening second time.
In detail .
I have form(view) which contains two select box and search button. User will select the options then click on search button it will display a paginated result . I am using ajax to get the result. The pagination is also based on ajax. On this table result user can edit or update any of the records. Here comes the issue. I am displaying the update form inside a modal window. Inside that modal window I have to do some jquery validations. For that I am including jquery library. The moment when I hit on the edit button for the first time, the modal window is showing and second time it is throwing an error
Uncaught TypeError: Object [object Object] has no method 'modal'
If I removed the jquery library from the modal window then it is working fine.
The code which I am using on this is
My first view
<script src="<?php print base_url()?>js/dboard.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php print base_url()?>js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_all').bind("click",function(e){
var pubid = $('#pub').val();
var magid = $('#mag').val();
var limit = 0;
$.post('../user/ajax_view_all',{p_id:pubid,m_id:magid,l:limit},function (data){
$('#result_table').html(data);
});
//Load pagination on ajax click
$(document).on("click",".pagination a",function(event){
var url = $(this).attr("href");
var limit = url.substring(url.lastIndexOf('/') + 1);
jQuery('.pagination a').removeClass('active');
$.post($(this).attr('href'),{p_id:pubid,m_id:magid,l:limit},function (data){
$('#result_table').html(data);
});
return false;
});
//Open update form in modal window
$(document).on("click",".btn-setting",function(e){
edit_id = 2;
$("div[id='myModal']").modal();
$.post('../user/update_publishing_modal',{ed_id:edit_id},function(data){
$('.modal-body').html(data);
});
e.preventDefault();
return false;
});
});
});
</script>
Modal form in the same page.
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Update Schedule</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
please tell what is the issue with this. How can I include the jquery library inside the modal window.
I see a minor issue with misplaced braces, not sure if it can cause this issue: you need to replace :
});
}
});
});
with :
});
});
});
at the end of the script.