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.
Related
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>
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 have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.
Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work.
The search code is simply a form that takes text, then im using the xmlhttp method to make it live.
Now, displaying it is as follows: (I have given it a class to use in the ajax)
echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";
Ajax:
$(document).ready(function() {
$(".display").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#displayDiv").empty();
$.post("display.php",function(data) {
$("#displayDiv").append(data);
Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.
Thanks.
EDIT: it loads test.php which is:
<html>
<body>
<div id="displayDiv">
<h2> Test </h2>
</div>
</body>
</html>
EDIT2: div id which is in the same page as script:
<html>
<div id="displayDiv" style="width: 40%; float:right">
</div>
It's just following the link when you click on it. To stop this you need to change the event handler to:
btn.on("click",function(e){
e.preventDefault();
// rest of your code
});
$(document).ready(function() {
$(".display").on("click", function(e) {
$("#displayDiv").empty();
$.post("display.php", function(data) {
$("#displayDiv").append(data);
}
);
e.preventDefault();
});
});
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've got a form and I want a modal to fire when the submit button is clicked. I'm using the Zurb Reveal.js plugin, and am calling jQuery and the relevant reveal.js.
I've got the following code:
<input type="submit" id="submit-button" data-reveal-id="myModal" value="Submit this support request">
And this at the foot of the page (before the end body tag):
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#buttonForModal").click(function() {
$("#myModal").reveal();
});
});
</script>
The data-reveal-id works when there is an anchor tag firing the modal, so I thought that I could fire it programmatically with the above JS (given on the plugin site), but that doesn't seem to work either. Help?
As your button is a submit button, when you will click on it, the page will be refreshed according to the form options. If you are not using a form, you need to use <button> instead.
reveal is not a JQuery standard method
<script type="text/javascript">
$(document).ready(function() {
$("#buttonForModal").click(function(event) {
//Prevent form submission to avoid page refreshing
event.stopPropagation()
//Show your div
$("#myModal").fadeIn(300);
});
});
</script>
You need to prevent button's default character first then open modal.
<script type="text/javascript">
$(document).ready(function() {
$("#buttonForModal").click(function(event) {
event.preventDefault();
$("#myModal").reveal();
});
});
</script>