jQuery ajax post on every button click [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
Hey I was trying to submit a form with ajax, but the code I wrote submits it on pretty much every button you press on that page. I need to limit it to only a specific button with specific ID when I changed it to be ("#formId").submit it doesn't work here is the code
<form id="formId" method="post">
<table>
some table content
</table>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(":submit").click(function (e) {
e.preventDefault();
var form = $(this.form);
jQuery.ajax({
type: "POST",
url: "test.php",
data: form.serialize() + "&" + this.name + "=" + this.value,
success: function(data) {
alert("good stuff");
}
});
});
});
</script>
Keep in mind that code is being generated by while loop (when selecting stuff from database) and I put the JS code at the bottom after the loop.

Assign your event to the actual form and change the event to submit instead of click:
jQuery("#formId").on("submit", function (e) {...}

Give every button a different ID and try the code below, or at least implement something like the code below.
<script type="text/javascript">
document.getElementById("button_id").addEventListener("click", function (e) {
$.ajax({
type: "POST",
url: "path_to_script.php",
data: $("#form_id").serialize(), // serializes the form's elements.
success: function(data) {
alert("Congratulations this works");
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
Let me know if this works

Try this.
$("#formId :submit").on("click",function(){
// your ajax code is here...
})

Related

PHP AJAX - Can an <input> element have "action" just like how a <form> does?

Forms have an action attribute to specify where (for example a .php file) to post to. Do <input> elements have the action attribute?
The answer is most likely no. But I wish to know what concept am I getting wrong here?
Is there a equivalent of action for <input>?
The reason I am asking this is that I have a few checkboxes, and I wish to use AJAX to fire something to a PHP file, such that a div changes when the checkboxes are ticked (I don't want a whole page reload). How should I go about doing this?
I am still drafting the code at this stage, but an example can be seen here.
Appreciate your suggestions!
Based on comments it really sounds like you want something to be sent when any number of checkboxes might be changed.
Add an event handler to all of them, serialize() the form and post it whenever any one of them changes
var $form =$('#myForm');
$form.find(':checkbox').change(function(){
var formData = $form.serialize();
$.post('/someFile.php', formData, function(response){
// do something with response
}).fail(function(){
alert("Oops something bad happened');
});
});
Use jQuery AJAX Methods:
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
EX:
$(document).ready(function(){
$("button").click(function(){
// You can call ajax on any event of html element like checkbox checked, dropdown changed
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
$(document).on('change', '#checkboxid', function() {
if ($(this).is(':checked')) {
$('#container').load('pages/somephpfile.php');
}
});
Use .load() on change of checkbox
you cant set which php file to load based on the checkbox status.
Also try
$(document).on('change', '#checkboxid', function() {
$.ajax({
type: 'POST',
url: 'somephp.php',
dataType: "html",
success: function(data) {
$('#container').html(data) //load the data from somephp.php here
}
});
});

GAE JAVA Code changes not reflecting in Eclipse

I am asking this question after looking for an answer to my problem from past two days.
THINGS ALREADY TRIED
I have tried following things in eclipse:
Clean/Build my Project
Renaming my JavaScript file (changes in this file are the one which not reflecting)
Terminating all Launches from Console (using double cross icon)
Terminate/Disconnect all Launches from Debug window (Right click on launch and selecting the option Terminate/Disconnect all)
Removing all the files from the project, clean the project and copied again the files.
Clearing browser cache/history from browser's options (Used Google Chrome 47.0.2526.106 m and Internet Explorer 11.0.9600)
Used this code
$("#form-contact-form").on('click', '#btn-contact-from-submit', function () {
//my code goes here...
});
instead of
$('#btn-contact-from-submit').click(function(){
//my code goes here...
});
Used <script type="text/javascript" src="js/page-contact.js?123"></script> also
MY PROBLEM
I am making a small change, that is adding an event listener to a button element in my html file. I have added an alert('Sending Message'); too in the listener so that it triggers the alert as soon as it enters the listener code. Previously it was working. But from past two days, whatever changes I do are not reflecting.
ECLISPE AND GAE PLUGIN VERSION
ECLIPSE: Juno Release build id: 20120614-1722
GAE PLUGIN FOR ECLIPSE: 3.8.0.v201410302155-rel-r42
CODE
HTML BUTTON ELEMENT
<form action="contact" method="post" id="form-contact-form">
<div class="col-md-100 fadeInBottom"><button type="submit" id="btn-contact-from-submit">Let it go!</button></div>
</form>
JAVASCRIPT LISTENER
$(document).ready(function() {
$('#btn-contact-from-submit').click(function() {
alert('sending message first');
var isFormValidated = false;
isFormValidated = true; //making condition true
if (isFormValidated) {
alert('sending message');
$("#btn-contact-from-submit").html('Wait! It is going!');
$("#btn-contact-from-submit").prop('disabled', false);
$("#form-contact-form").submit(function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
//data: return data from server
$("#btn-contact-from-submit").html('It went! Thank you!');
},
error: function(jqXHR, textStatus, errorThrown) {
//if fails
alert('Crashed!');
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#form-contact-form").submit(); //Submit the FORM
}
});
});
I am including the JavaScript file just before the body is ending
<script type="text/javascript" src="js/page-contact.js"></script>
Can anyone please help me in this?
If I missed to include any information, please inform me and I will update my question.
Thank You Community!

Jquery ajax call not working when page is deployed [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
We have a simple jquery ajax call
we made a more button and on button click it call another php file
on my local computer server its working good even once it work good on when i made it live on server but suddenly it stop working live.
Following code working good on local computer server but when i made it live then its not working
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div align="center"><input type="button" id="morejobs" class="m-btn blue buttonSmall tmargin" data="?id=111&page=2" value="More Jos ยป" /></div>
<script type="text/javascript">
$("#morejobs").click(function () {
var datavalue = $(this).attr("data");
//$("#morejobs").text('Loading..');
if (datavalue) {
$.ajax({
type: "GET",
url: "new_keyword_city_common.php",
data: datavalue,
cache: false,
success: function (data) {
$("#friendsugmore").html('');
$("#friendsugmore").html(data);
}
});
}
return false;
});
</script>
What can be issue when same code working good on local server but not live
You say your files are in the root. What you can try is to add / before the file to force it to take the root:
url: "/new_keyword_city_common.php",
If this doesn't work try an absolute path. Add the whole domain name before the PHP file. For example:
url: "http://yourdomainhere.com/new_keyword_city_common.php",

jquery popup effect 'onclick' submit button (WITHDRAWN)

Since I am a beginner, I have a beginner's question.
Using the famous fancyBox plugin. It is called in the head like so:
$(document).ready(function() {
$(".fancybox").fancybox();
});
Normally the script is attached by adding the class-name:
<a class="fancybox fancybox.iframe">...</a>
My present difficulty arises because I would like to run the fancyBox pop-up after the user submits a form:
<form action="http://maps.google.com/maps" method="get">
...(google API stuff etc, etc)...
<input type="submit" value="...">
My research to this point has led me to conclude that I probably have to use onsubmit or onclick within the
<input type="submit">
However, my experimentation has proven a futile effort.
Any help would be greatly appreciated.
========================================
UPDATE: (1/7/2013)
I am withdrawing my question because I have apparently wandered into subject matter that is slightly above my head at the moment. I choose not to delete the question in case someone in the future may find something of some use here. Thank you for your help everyone.
My reason: it appears that Google directions does not permit display in <iframe>. That being considered, configuring a workaround for fancyBox would be far too complex. I am abandoning the fancyBox and have gone with plain old Javascript:
as shown here
Post the form using $.ajax gives you the greatest control. You can then control the success and error conditions from the client side.
To do this you will either need to catch the submit event:
$('#form').submit(function() {
ajaxUpdate();
return false;
});
Then create a function:
function ajaxUpdate(){
var formSerial = $('#form').serialize();
$.ajax({
url: '<url to post to>',
dataType: "text",
type: "POST",
data: formSerial,
success: function(text) {
$(".fancybox").fancybox();
},
error: function(text) {
alert('error in posting');
}
});
}
You can then do what you like in the success and error blocks.
To load a window you could add the following to your function:
if(confirm("Do you want to open the directions?")){
$.fancybox({
'titleShow': false,
'width': 370,
'height': 300,
'href': <URL>,
'type': 'iframe'
});
}
Using jquery submit buttoin it can be possible :
$('#target').submit(function() {
$(".fancybox").fancybox();
return false;
});
After fancy box 'ok' button click submit the form ..
Hope this idea will helpfull.

jQuery add html content in hidden div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When I use jQuery selectors for add dynamically generated html in hidden div, they don't work. How to add something in hidden div with jquery?
I need to make div hidden while adding content after ajax query, because I should generate many html blocks and add them on page, I want to add all blocks in hidden div and then show all content (make div visible).
You can use jQuery's hide() and show() function to accomplish this, which is a little cleaner than the .css() ZeJur used. Have a look at my Plunker example
Example:
<div class="hiddenContent">I am hidden div</div>
<button class="addDynamicContent">Add dynamic content to div - hide while doing</button>
Script:
<script>
$('.addDynamicContent').click(function() {
$.ajax({
url: "http://api.icndb.com/jokes/random",
beforeSend: function() {
$('.hiddenContent').hide();
console.log('I hide before request');
},
success: function(response) {
$('.hiddenContent').html(response.value.joke);
$('.hiddenContent').show();
console.log('I show after I got the content');
}
});
});
</script>
Check out Plunker
To hide Your element use jQuery .css() method
$('#panel').css('visibility', 'hidden');
and to show it back:
$('#panel').css('visibility', 'visible');
If You need to hide your element before loading a new items You can use beforeSend function:
beforeSend: function(){
$('#panel').css('visibility', 'hidden');
}
and after all Your data is loaded and parsed use success function to show it again:
success: function(data){
$('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
}
and all together:
$.ajax({
method: "POST",
url: "sample.php",
dataType: "json",
beforeSend: function(){
$('#panel').css('visibility', 'hidden');
},
success: function(data){
$('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
},
});

Categories