So I have a PHP button that opens a modal. It then works off an old java script code for an older JQuery. I am trying to upgrade it to Bootstrap and not sure what I am doing wrong - the window pops up, but the Yes button won't work. The No button just closes the modal.
PHP code creates a remove button (I tried adding a Modal to it that does pop up):
if (can2('delete audit')) {
$admin_actions .= "
<a data-toggle=\"modal\" data-target=\"#myModal\" href=\"#\" id=\"$row[auditID]\" class=\"remove modify\" Title=\"Remove\" ><span class=\"hidding\">Remove</span></a>";
}
Old Code:
<div id="question_alert" class="question_alert" >
<div id="alert">
Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.
</div>
<input type="button" id="yes_delete" value="Yes " />
<input type="button" id="no_delete" value="No" />
</div>
New code:
<div class="modal fade" id="myModal" role="dialog" data-backdrop="false" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<!-- Modal header-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">DELETE?</h4>
</div>
<!-- Modal content-->
<div class="modal-body">
<p>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back. </p>
</div>
<!-- Modal Footer-->
<div class="modal-footer">
<div id="question_alert" class="question_alert">
<!-- problem here for yes -->
<input type="button" id="yes_delete" value="Yes " />
<input type="button" id="no_delete" value="No" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</div>
old code JQuery used for the yes button mainly:
$(".remove").click(function(){
var auditID = this.id;
$.blockUI({message: $('#question_alert')});
//Continue with unanswered questions
$('#yes_delete').click(function() {
$.post("edit_audits.php?action=delete&auditID="+auditID,function(data) {
if(data) alert(data);
$.growlUI('Success','You have successfully DELETED the audit.','success',1000);
setTimeout(function() {
window.location.reload();
}, 2000);
return false;
});
});
//Fix answered questions
$('#no_delete').click(function() {
$.unblockUI();
return false;
});
});
Related
I have multiple forms on my site that are loaded in a Bootstrap Modal on a click of a button. For some reason when I try to submit the forms nothing happens. I have checked the browser console and I can't find any errors. Also there is no error in the error_log file.
The code below is what I have for my forms. Have I done something wrong?
Edit: I have tested with another form and it seems javascript/jquery is not being loaded in the modal.
<button type="button" class="application_button button" data-toggle="modal" data-target="#jobapplyform">
<?php esc_attr_e( 'Apply for job', 'wp-job-manager' ); ?>
</button>
<div class="modal fade" id="jobapplyform" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close-btn-modal" data-dismiss="modal" aria-label="Close">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/close-icon.png"/>
</button>
<h2 class="modal-title" id="jobModalLabel">Apply</h2>
</div>
<div class="modal-body">
<div class="application_details">
<?php echo do_shortcode('[contact-form-7 id="5096" title="Claim This Profile"]'); ?>
</div>
</div>
</div>
</div>
</div>
May be you are using bootstrap4.
Please try bellow code
<!-- The Modal -->
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#jobapplyform">
Open modal
</button>
<div class="modal" id="jobapplyform">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close-btn-modal" data-dismiss="modal" aria-label="Close"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/close-icon.png"/></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="application_details">
<?php echo do_shortcode('[contact-form-7 id="5096" title="Claim This Profile"]'); ?>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If there is not visibility issue then please try to prevent close when submit button and check if contact form submit button action triggered.
You are missing form element for HTML and type submit for the button, or else the info wont be sent anywhere.
I'm currently running an HTML template that has a placeholder div, and when the user clicks inside the div, a modal pops up with an instance of TinyMCE. So far so good.
TinyMCE works here as far as adding text/content, and then you hit a button that closes the modal and passes the content into the placeholder div in the same format. (Think of it like the user viewing a template for a static page, they want to insert content so the modal allows them to use TinyMCE to do so and then they hit the button to view it in the 'live' template).
Anyway, this works fine. The problem is, if you notice an error or typo and need to call TinyMCE again, It won't work. Once the content passes to the div, it no longer triggers the modal when clicking in the div. I'm not a JavaScript expert by any means so I'm sure something is wrong on that side.
Here's the code. Everything works as expected, but I just need to be able to keep the action of clicking the div and loading the modal to edit the content from TinyMCE:
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modalFull = $('#fullModal').modal({
show: false
});
$('.fullWidth').on('click', function() {
$modalFull.modal('show');
});
$(document).ready(function() {
$("#form-data3").submit(function(e) {
var content3 = tinymce.get("mytextarea3").getContent();
$(".fullContent").html(content3);
jQuery.noConflict();
$('#fullModal').modal('hide');
$('.modal-backdrop').remove();
return false;
});
});
</script>
With $(".fullContent").html(content3);, you are overwriting the modal's markup.
Place it outside that div.
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<
I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
Hello everyone I wanted to do is to switch form using single page (show/hide using javascript) but everytime i refreshd the page it will go back to the default form. Now i have a javascript code that will make the current form stays even if the users refresh the page it wont go back the the default form.
My problem is with my current script it makes a hash title in the url...how to make the hash hide without affecting the function of the script? or is there any other tricks in doing this in jquery/javascript? can anyone help me please?
script:
<script type="text/javascript">
$(function(){
$('.myFirst').hide();
$('.mySecond').hide();
$('.myThird').hide();
$('#show_first').click(function(){
parent.location.hash = 'first';
$('.myFirst').show();
$('.mySecond').hide();
$('.myThird').hide();
$('.modal').modal('hide');
return false;
});
$('#show_second').click(function(){
parent.location.hash = 'second';
$('.myFirst').hide();
$('.mySecond').show();
$('.myThird').hide();
$('.modal').modal('hide');
return false;
});
$('#show_third').click(function(){
parent.location.hash = 'third';
$('.myFirst').hide();
$('.mySecond').hide();
$('.myThird').show();
$('.modal').modal('hide');
return false;
});
$('#show_' + parent.location.hash.substr(1)).click();
});
</script>
modal link:
<a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>
modal dialog code:
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="show_first" class="btn btn-info" data-dismiss="modal" aria-hidden="true">First</button>
<button type="button" id="show_second" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
<button type="button" id="show_third" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Third</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
html code:
<div class="container">
<div class="myFirst">
<div class="row">
<center>
First Page
</center>
</div>
</div>
<div class="mySecond">
<div class="row">
<center>
Second Page
</center>
</div>
</div>
<div class="myThird">
<div class="row">
<center>
Third Page
</center>
</div>
</div>
</div>
You can store the id of the form in cookie and then after page refresh using the id put focus on the form using id of that form.
You can change url of page using HTML5 and pushState https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
I am working on someone script.I can t understand it clearly to implement my code.I need this content in modal pop up.
<div data-rel="close" data-role="panel" data-display="overlay" data-position="right" id="circle-more">
<div class="details-arrow">
<div class="boxscroll">
<div class="contentscroll circle-more-cont">
</div>
</div>
</div>
</div>
Actually now its taking data dynamically from db and hidden.It working fine but it shows in page.I want to show this entire content in modal.can anybody help me.I tried all options nothing work out.
it get contents from here
function circleMoreDetailsSocial(social_ring_obj_index, comment_details, cur_obj)
{
$(".circle-more-cont").html('');
if (nice) nice.remove();
var i = 1;
$.each(circleData4[social_ring_obj_index], function(social_value_index, social_value)
{
$.each(social_value, function(value_index, value)
{
if(value[1] == 'facebook')
social_media_link = "https://facebook.com/"+value[2];
// <div class='"+value_index+"' style='background-color:"+eval("color"+i)+"'> </div>
$(".circle-more-cont").append("<a href="+social_media_link+" onclick='javascript: void(0)' return false;' ><p>"+value[0]+"</p></a>");
i++;
});
});
$("#circle-more").panel('open');
nice = $(".boxscroll").niceScroll(".contentscroll",{cursorcolor:"#F00",cursoropacitymax:0.7,boxzoom:true,touchbehavior:true});
return false;
}
This make some sense i think.it dynamically add content from json file as pargraphs.so when i click a paragraph it will redirect to some links.I dont want to get redirected.instead of that i just want to wrap everything under modal so i can stay in same page.redirect will done only in modal.
please check demolink
Reference link http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
use jqueryui dialog -modal ...https://jqueryui.com/dialog/
example:
html
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
js:
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
you can use jquery + jquery ui
the code
$(function(){
$( "#circle-more" ).dialog({
height: 140,
modal: true
});
});
this a demo
https://jqueryui.com/dialog/#modal
that's open the dialog at the start of the page.