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.
Related
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.
I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
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.
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
So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.
May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});
There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});