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.
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.
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.
Can anyone help me .I need php code for checking whether a div is clicked or not.
like,
if (isset($_POST['Submit1'])) { }
But instead of submit button i need a div ...
anyone help me please
thanks
You will need JavaScript for this as PHP doesn't access the DOM if I'm reading your question correctly. I would recommend you add jQuery lib to your page as it's simpler to add click event to a DIV, otherwise you have to add an event listener in javascript yourself for click events on the DIV.
jQuery: http://api.jquery.com/click/
DIY: http://www.codingforums.com/archive/index.php/t-122993.html
I can't tell if you want a div to be treated as a form element, like a checkbox, or if you want to use a div to submit a form.
Using it as a form element has been explained by Stano, if you want the div to submit a form, you really should just use a submit button. If you want to use an image instead of a button, using <input type="image"...> will function as a submit button.
If you really need to use a div to submit the form, you will need javascript. Something like this, we take a form named "bald" and when you click the div, the form "bald" is submitted as if you pressed a submit button.
<form name="bald" action="somefile.php">
<div onclick="bald.submit();">Click here to submit</div>
</form>
PHP can't tell you if a div has been clicked as php only works on the Server. For this you need javascript.
jquery makes something like this very simple.
Can't quite imagine what can be this test good for, but you can use javascript like this:
<div id="clickable_div" onclick="document.getElementById('divclicked').value='YES'"> SOMETHING </div>
in your form
<input type="hidden" id="divclicked" name="divclicked" value="NO"/>
and in php
if ($_POST['divclicked']=='YES') {...} else {...}
I'm wondering if the best way to tackle this is in PHP or using jQuery? Not sure how best to tie together refreshing the parent page's data when the user hits save in the edit window and submits changes. The code to launch the window is below:
edit
And in the edit page here is the code for the save button:
<fieldset class="submit actions">
<input id="signup" type="submit" name="signup" class="submitbtn" value="Save" />
<input type="button" class="secondary" name="butClose" id="butClose" value="Close" onclick="window.parent.Lightview.hide();" />
</fieldset>
You can utilize jQuery and setup an onclick() event handler to refresh the page on the click of the save button. In addition, you could apply form validation if needed, and only refresh the page if all requirements are met. Without knowing specifically what your project entails, you may also be able to just do everything via AJAX and not reload the page at all.
As you may see in your code example (the "edit" window), the shadowbox snippet uses window.parent for accessing the parents window element to close the box.
You have to write your own JavaScript and add an id (something like butSubmit) to the submit button. Something like this:
$('butSubmit').onClick({
// Reference to the parent window
var parentWindow = window.parent;
// Accessing the parent windows jQuery object
// and find the element with id #myTargetElement
var targetElement = parentWindow.$('#myTargetElement');
// Current window elements (with id #myInputField) value
var content = $('#myInputField').val();
targetElement.text(content); // May use .html() or .val()
parentWindow.Lightview.hide(); // Close the box
});
Ah yeah, I assume you have loaded jQuery on both (!) windows.
However, this does not save your content. You shoud use the jQuery.ajax() method for solving this.
I'm pretty new to Javascript and I'm sure this is an easy fix, but I can't figure it out.
I'm using a slightly modified version of the code from this page and I want to make the form work by entering the information and pressing enter rather than having to click the button.
FYI I've read this thread and can't work out my own answer from there. I tried changing the type to "submit" from "button" but then the login didn't work. I've also tried changing "onlick" to "onsubmit" and had the same problem.
Use a type of "submit" but change the onclick to onclick="loginFunction(); return false;"
The return false stops the submit button from actually doing the submit.
If you want to submit a form on click of button instead of enter then no need to use input type="submit" instead of this you can use input type='button' and set a onclick function in this like input type="button" onclick="my_func()" and in the definiton of this function my_func you can use document.formname.submit() for submitting the form.
hope it will work for you.
Set the "tab index" property of your html elements with your button having the highest index (or one up after the last html element)