In a php page I have placed a submit button,
HTML:
<input type="submit" name="btnAdd" id="btnAdd" Value="Add">
I need to hide this button (using jQuery) when link is cliked,
Link:
echo ' Edit ';
Javascript:
<script type="text/javascript">
$(document).ready(function() {
function MyFunction(){
$('btnAdd').hide();
});
</script>
But this code does not hide the button as expected. How can I fix this?
You have a wrong selector. You need to use #btnAdd for an id selector:
<script type="text/javascript">
function MyFunction() {
$('#btnAdd').hide();
}
</script>
Also you should put the MyFunction function outside of the document.ready callback to avoid making it privately scoped.
Another possibility is to do this unobtrusively:
echo ' Edit ';
which seems easier to be written as:
Edit
and then subscribe for the .click() event of the edit link:
<script type="text/javascript">
$(function() {
$('#edit').click(function() {
$('#btnAdd').hide();
});
});
</script>
Related
I have seen many of the posts in stackoverflow but i'm unable to find my answers so thats why i'm posting here.
Scenario is this:
My Page is having many div containers and each div is having EDIT Button and when a user clicks EDIT of any DIV i want the user to be redirected to another page with ID of that DIV,
I want to do this whole this using POST method.
File edit.php
<button class="edit_btn" onclick="edit_ID('$btn_id')">
<script type="text/javascript">
function edit_ID(array){
$.ajax({ type:"POST",
url:'redirecter.php',
data:{editorID:array.split("_")[1]},
success:function(data){
//window.location.href="editapplication.php";
}
});
}
</script>
File redirector.php
<form action='editapplication.php' method='post' name='frm'>
<?php
foreach ($_POST as $a => $b) {
echo "<input type='hidden' name='".htmlentities($a)."' value='".htmlentities($b)."'>";
}
?>
</form>
<script language="JavaScript" type="text/JavaScript">
document.frm.submit();
</script>
you need to hook the click event of the button, and perform your actions there:
$(function() {
$('#buttonID').bind('click', function(event){
var id = $(this).parent().id;
$.ajax({....});
});
});
I´m trying to get typed text on ckeditor (textarea), but I have some trouble:
Here is my code:
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#editor').ckeditor();
var editor = $('#editor').ckeditorGet();
var data = $('#editor').val();
window.alert(data);
window.alert(CKEDITOR.instances['editor'].getData());
});
</script>
<body>
<form method="post">
<textarea name="editor" id="editor"></textarea>
<input type="submit" value="Submit">
</form>
The results on two alerts are empty. What i´m doing wrong?
That's because you are calling the alerts when the page loads. At that time, there is nothing yet on the textarea.
Bind the event to something that will happen after the textbox has something to show, for example, when you click the submit button:
$(document).ready(function(){
$('#editor').ckeditor();
$('input[type=submit]').on('click', function() {
window.alert($('#editor').val());
});
});
Also, you may want to bind the click event to the document instead, so it will happen even if you add new submits programatically. For that to happen, bind the event like this:
$(document).on('click', 'input[type=submit]', function() {
window.alert($('#editor').val());
});
Simply the question is that, how to off all events with one call, for example if I have another events like 'mouseleave, mouseenter, keyup, keydown ...'.
What I'm doing here is that each time the dialog is showed I turn off (off) the events, this 'off' works well with click, but I want a code to turn off all events with one call, I tryed: $('.dialog').off('**'); but it doesn't works. If I don't use off I get multiple calls to click (multiple hello worlds).
I have a code like this:
myform.php
<script type="text/javascript">
$(document).ready( function () {
$('.dialog').off('click');
$('.dialog').on('click', '.mybutton', function() {
alert('hello world');
});
});
</script>
<input type="button" class="mybutton" value="click me!"/>
html:
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
function openDialog()
{
$.post( '/myform.php', null, function (data) {
$('.dialog').html( data );
$('.dialog').show();
});
}
function closeDialog()
{
$('.dialog').hide();
$('.dialog').html('');
}
});
</script>
</head>
<body>
<div class="dialog" style="display:none">
</div>
<input type="button" onclick="openDialog();" value="show dialog!" />
<input type="button" onclick="closeDialog();" value="close dialog!" />
</body>
</html>
You can pass no arguments and it unbinds all of them.
$("element").off();
jsFiddle.
I think that the unbind() method would work here.
http://api.jquery.com/unbind/
"removes all previously attached event handlers
I have a dialog ($('.dialog').show()), that writes a form ($.post('/form/xyz', null, function (data) { $('.dialog').html( data );} )). That form has an script (javascript/jquery) like this:
<script type="text/javascript" src="myform/script.js">
<form>
<input type="text" value="click me!" id="clickme" />
</form>
The script has the following code:
$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});
The problem is: each time the dialog is showed I need to re-execute the script but when I click #clickme I get the alert showed the times that the script was executed.
I never noted this problem (I don't know why) but now that is happening. I'm working with jQuery 1.9.2, and I'm thinking to use the function (preventPropagation), but I think this isn't reliable because I should need to do this at each 'on' event. In addition, I believed that doing an 'script loading history' will solve the problem to control that, but I have the problem that when I need to execute functions when the form is loaded I will cannot re-execute automatically as well as I'm doing now.
What's the solution?
Full example:
HTML
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
$('#open-dialog').on('click', function () {
$.post( '/server-form.php', null, function (data) {
$('.dialog').html( data );
});
});
});
</script>
</head>
<body>
<div class="dialog">
</div>
<input type="button" value="Open dialog" id="open-dialog"/>
</body>
</html>
PHP (server-form.php)
<script type="text/javascript" src="dynamic-script/30a2f63d6276a21db19782b2d8c93363.js">
<form>
<input type="text" value="click me!" id="clickme" />
</form>
*DYNAMIC-SCRIPT dynamic-script/30a2f63d6276a21db19782b2d8c93363.js *
$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});
That's all!!!
You should try this:
$(document).ready(){
$("#clickme").click(function(){
alert("you've clicked me!");
})
}
There are similar questions at SO, but none that seem to address this.
Below is a very simplified variant of my situation. Drupal/PHP site -- I have a form w/ submit button that I am using jquery.form plugin to ajax-ly submit. It works fine if I use the submit (#submit) button.
Now, I want to programmatically fire that button using another button (#submit2) outside of the form. I can do that using jquery click() function, but the content coming back isn't going to the ajax target as I would expect.
I do not have much freedom to re-organize this code, else i would.
(Note I tried to make this code easy for you to run by src-ing jquery and the form plugin from my website.)
Ideas? Thanks!
<?php
if ($_REQUEST['submit'] == 'Submit') {
print 'ajax returns ... ' . $_REQUEST['text'];
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#form').ajaxForm( { target: $('#span') } );
$('#submit2').click( function() { $('#submit').click(); } );
});
</script>
</head>
<body>
<span id='span'>target span</span>
<form method='post' id='form'>
<input type='text' name='text' size='50' />
<input type='submit' id='submit' name='submit' value='Submit'/>
</form>
<input type='submit' id='submit2' name='submit2' value='Submit Too?' />
</body>
</html>
I managed to solve a similar situation to yours. If the only objective of simulating a click on submit1 is to submit the form, you might try:
$('#submit2').click(function() {
$('#form').trigger('submit');
});
You may also need to return false immediately after triggering the form submit button from the non-form submit button click event code. For example:
<script type="text/javascript">
$(function() {
$('#form').ajaxForm({ target: $('#span') });
$('#submit2').click(function() { $('#submit').click(); return false; });
});
</script>
It works for me. Is that what you are looking for?
Have you tried giving a name to the form, and instead of
$('#submit2').click( function() { $('#submit').click(); } );
doing
$('#submit2').click( function() { document.myForm.submit(); } );
That should do the same thing as having the submit button clicked if the form has been ajaxified.