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!");
})
}
Related
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
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>
I am new to using jquery and i have written the following code and it does not work and i am not able to figure out what the mistake is ..syntax might also be wrong.
It has 2 submit buttons while using button1 it should get info from the DB and display on the same page.i.e., get the title from the DB and display on the same page.
While second submit button is used to submit title into the DB and update it(written in script_2.php).
<form id="myForm" method="post">
id: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
title:<input type="text" name="title"/>
</form>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },
function(output) {
$('#age').html(output).show();
}) ;
}) ;
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
</head>
Help appreciated.
You are missing the }); to close the $("#button1").click function:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },function(output) {$('#age').html(output).show();});
});
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
You have too many closing
<script type="text/javascript" src="jquery.js"></script></script>
to
<script type="text/javascript" src="jquery.js"></script>
jQuerys attr() expects strings, not an object, like:
$('form#myForm').attr("action", "script_2.php");
You form is before your <head> tag. It should be after your </head> and in a <body> tag.
You are putting the results of your ajax call in an element with id age, but I don't see any element with that id on your page.
That's all for errors (that I see as of now), but you can also speed up your selecter here $('form#myForm') by changing it to $('#myForm') since id's are unique, and I doubt you have any element with the id myForm which isn't a form.
I am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>