im new to bootstrap, and i want to do this:
when i press a button i want to submit the form, and then open a modal, how can i do this? so i get the post data on the modal. I've tried with two buttons, first one submit the form and the other one opens the modal, if i do it in that order it works fine, but i would like to do it in only one button.
any help?
this is my button:
<a data-toggle="modal" href="#myModal" data-id="<?php echo $rol['rol_id'];?>" class="open btn btn-primary btn-lg">Launch demo modal</a>
This is a bad method and you should be using AJAX for this instead. When the modal is clicked, an ajax request should fire. Wait for its response (and return the data you need). If its successful then load the modal with the returned data.
I've tried with two buttons, first one submit the form and the other
one opens the modal, if i do it in that order it works fine, but i
would like to do it in only one button.
From this I assume that after the POST you display the returned data within the modal. If you want to follow this method you will need to write some Javascript within the HTML to fire the modal after a POST request.
<?php if ($_POST['submitted']) { ?>
$(document).ready(function() {
$("#myModal").modal();
});
<?php } ?>
I would recommend against this as you have to put this in a .php or .phtml file, AJAX would be better suited in this case.
// This question has already been solved elsewhere... I suggest following this link and doing what #Samuel Liew recommends. AJAX/jQuery/PHP Form submission and modal box open on success #fruitp is correct AJAX is the way to go with this.
Related
I have a PHP script labeled first_page.php. On that page, I currently have a div that looks like this:
<div id="status">
<h3>To view a list of all rooms statuses, select the link below.</h3>
Show Status
</div>
And links to the correct page, response_data.php. What i'd really like to have instead, is a button that is on the first_page.php, and when that button is clicked, have it load the response_data.php page with .fadeIn().
I've tried to get this jQuery script working, with no luck. Here is what I have tried. I've changed my html to look like this:
<button id="button">Click here to show data</button>
<div id="data" style="display: none;">
<?php include 'response_data.php' ?>
</div>
$('#button').click(function() {
$('#data').fadeIn(1000);
});
Above, I have added a button and a div that I wanted to fadeIn. The div holds the php script, so I wanted the div to fade the php script in. I set the data CSS to display none. When I click the button, nothing happens. It actually works, but the div data fade's in without having had the button clicked. Then the button remains. I'd like it to not auto click, and also somehow hide the button after the first click.
The jQuery part is just fine. I highly suggest to check that your div#data actually has some text in it.
To do so, you can try something like:
console.log($('#data').text().length > 0 ? 'Text found' : 'Could not find text');
Also, to hide the button after it was clicked simply use the hide() method:
$('#button').on('click', function() {
$('#data').fadeIn(1000);
$(this).hide();
});
Note: You can also use the fadeOut() method or the remove() method if you wish to remove the button from the DOM.
I'm having trouble getting the click event on a save button.
Let me explain.
I have a view index which displays a list of posts.
For each post, there is a button to add a comment.
When the user click on add a comment, I renderPartial a form where I have a input field for the comment and 2 buttons, 1 to save and another to cancel.
If I look the html through firebug, I can see
<input id="save" type="button" value="Save">
but if I right click on the html page and click on view page source, I cannot find the
<input id="save" type="button" value="Save">
that's why I suppose my jquery script doing things on button click
$('#save').click(function(e) .... does not work, I put a alert in the code to see whether I go inside the function but no alert message is displayed.
I must add that the click event function for the button to add comment is in the same script and works (when I look at html source code, I can see the id of add comment)
Do you have any idea of what could be the problem?
The reason is because the form is added after the original DOM load. You need to use the .on function and bind it to a DOM element that exists on original page load. So you could do this:
$('body').on('click','#save',function(e) {
//more code here
});
Or you need to bind the .click to #save after you have rendered the form on the page. You can't bind an action to an element before it exists in the DOM.
Context: In a form the user needs to add at least one responsible person before submitting the form. This is done with jQuery and Ajax. When submitting the form I need to check if at least one responsible was added using jQuery.
So I add a div with class "checkexists" in a div with ID "verantwoordelijke_added" as soon as the user click the plus button to add a repsonible.
PHP class returns this to jQuery:
$output_array["result"] = '<div id="responsadded_'.$respId.'" class="checkexists" style="line-height:25px">'.$firstname.' '.$lastname.' ('.$_GET["uid"].') <button type="button" class="close eua iid'.$respId.'" id="btn_rm_resp" title="Verwijder" aria-hidden="true">×</button></div>';
$output_array_json = json_encode($output_array);
echo $output_array_json;
jQuery appends this code to the div "verantwoordelijke_added":
$('#verantwoordelijke_added').append(data.result);
Then when submitting the form I would like to check if there are any divs with class "checkexists" in the containing div:
if ($("#verantwoordelijke_added").find(".checkexists").length > 0)
But even if there is a div appended, jQuery can't find it, I guess since it was added "on the fly".
Is there a way arround this?
Thanks a lot,
Mark
I have modal on place...and the button in which I need it to do two things in one time,...
when the button save clicked, there is php function called and executed, but while I do that I need to show the modal, even if the background php function is executed, how do I do that?
<button class="btn ID="Save">Save</button>
this is the php controller to php function..
if(isset($_POST['ac'])){
if($_POST['ac']=='cancel'){
$class->no($id);
}
if($_POST['act']=='save'){
$class->yes($id);
}
}
as you see from the above code, I call yes function to do the php-side work, But in the function at the end I have redirect php method to redirect to other page,
and I have the following Jquery code...
$('#save').click(function(){
$('#modSave').modal();
})
In general, the problem is when I click the button it comes the Modal, But because of the redirect method in the php, when it goes to other page the modal is disappear.
one thing, the php redirect to the same page from some parameter passed pages to its default page.
how do I prevent from disappearing the Modal while or if the page even redirects??
I'm having some trouble trying to work out how to render a form within a modal box within Yii.
Currently I have the following code, in which I've just worked in getting a link to display a modal box.
CHtml::link(' Email this Gift', '#', array(
'id' => 'giftModal',
'onclick'=>'js:bootbox.confirm("hello world")',
)
);
I really need to render a form within the modal box. How do I do that, I have actually spent quite a while looking at how to accomplish this, but I've clearly been searching incorrectly, so would appreciate any guidance.
Thank you
Put what you want into hidden div, in this case I put my form into other view for convenience.
<!-- dialog contents on hidden div -->
<div id="modal-content" class="hide">
<div id="modal-body">
<!-- put whatever you want to show up on bootbox here -->
<?php
//example
$model = Category::model()->findByPk(1);
$this->renderPartial('//test/child-view', array('model'=>$model)) ?>
</div>
</div>
Then pass message into bootbox with above content
<script>
$(function(){
bootbox.confirm($('#modal-body').html());
</script>
When you are working with form, the button of modal box is outside your form, you have to customize a bit to make your form working properly.
Example when click button "OK" of bootbox you call submit your form by script
$('my-form-selector').submit();
Important: Because in this code I got HTML from hidden div, so there would have two forms (one on bootbox, one on hidden div). You have to add class bootbox as prefix of form element to indicate the form which you manipulate on bootbox instead (in my case, bootbox is just generated class by its self library and is the parent of content on modal box, my-form-selector could be #form-id, .form-class-name, etc)
bootbox.confirm($('#modal-body').html(), function(result){
if(result){
console.log($('.bootbox my-form-selector').parent().parent()); //<--it should print the object of modal bootbox, it ensures the form is in modal box, not one on hidden div-->
$('.bootbox my-form-selector').submit();
}});
I think you should use dialog instead of confirm, because there you can fully customize your modal box