How to remove function name from element with blur event? - javascript

I have this issue and till now I didn't find the solution to this
This is the code
<input type="text" id="myid" onblur="myfunction(); myfunction2();" >
And after an ajax response like this
$.ajax({
type: 'post',
cache: false,
url: 'my_url',
data: { info: data},
datatype: 'json',
success: function(res) {
if (!res.error) {
//Remove myfunction2() from my input element
}
}
});
I would like to remove from the onblur the function called myfunction2().
How can I do this?

Use $("#myid").attr("onblur", "");, however, this is rather poor practice.
You should instead do this:
$("#myid").on("blur", "myFunctionGoesHere(params);"); to add
$("#myid").off("blur", "#myid", "myFunctionToRemove()"); to remove

Related

Jquery is not submitting the form with the custom button

My requirement is to upload a file from a form upon clicking the custom button by using Jquery stuff.
My form details are below:
<form id="CreateAttachmentForm" method="post" enctype="multipart/form-data" action="../../FileUploadServlet" >
My file is defined as below:
<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf" "/>
My custom button related code is below:
<contact:contactbutton
id="printButton"
style="position:relative; width:90px; top:27px; height:30px; left:160px;"
textTop="7px"
defaultButton="false"
tabindex=""
accesskey="C"
onClickEx="createAttachmentRequest();"
onfocus="if(event.altKey){click();}">
<u>C</u>reate
</contact:contactbutton>
Whenever the user clicks on the custom button, the form should be submitted.I have registered an onClick event event where the control should reach the function named createAttachmentRequest()
The following is my createAttachmentRequest() function:
function createAttachmentRequest() {
alert("test ");
$("#CreateAttachmentForm").submit(function() {
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
}
But the form is not submitted when I click the custom button. I have searched various questions on SO, but no suitable solution found so far.However I could see the alert message printed which confirms that the control is reaching the function createAttachmentRequest().What's wrong with my code?
The issue is because you're attaching a submit event handler in the function - not actually submitting the form.
It would be best to remove the createAttachmentRequest() function entirely and use unobtrusive JS code to attach the event. To do that, remove the onClickEx attribute from your <contact:contactbutton> element, then use this JS code:
$(function() {
$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: new FormData(this),
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
Also note that I removed async: false as it's incredibly bad practice to use it. If you check the console you'll even see warnings about its use.
You can do one of the following:
Take the submit event outside the function and remove the function like so:
$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
OR
inside the function remove the submit listener like so:
function createAttachmentRequest() {
alert("test ");
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
}

How to get json data coming from ajax and show it prefilled in input box

Following is the code that Ii have used to get the response in json.
but when I add alert alert(response.Subject); it returns "undefined"
HTML:
<input type="text" id="subject" value='Subject'>
Javascript:
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
success: function (response) {
console.log(response); // it show the json that response returns. I want to show in the input box prefilled with the data that response return
}
});
please help me out.
You can use val to set value in the textbox
$('#subject').val(response[0].Subject);
Also, you might want to change the ajax call:
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
dataType: "json",
// ^^^^^^^^^^^^^
success: function (response) {
// response is JSON
$('#subject').val(response[0].Subject);
}
});
val
Set the value of each element in the set of matched elements.
http://api.jquery.com/val/#val2
ajax
Perform an asynchronous HTTP (Ajax) request.
http://api.jquery.com/jQuery.ajax/
It really depends the construction of your JSON object, but standart is responseText that you parse with JS
maybe you try to get the response text or response JSON
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
success: function (response) {
console.log(JSON.parse(response.responseText));
//or
console.log(JSON.parse(response.responseJSON));
}
});
you can write like this:
$('#subject').val(response.Subject);
I thinks it's really easy. Just add:
$('#subject').val(response.Subject);
in your success handler.

Replace entire div instead of div contents

i am using the following ajax script to replace the contents of a div. But it only changes the contents inside that div. I want to replace the entire div.
<script>
function sendmessage()
{
var message_content=$("#message").val();
$.ajax({
type: "POST",
url: "newmessage.php",
dataType: "html",
data: {message:message_content},
success: function(data) {
$("#newmessage").html(data);
}
});
}
</script>
Here contents of id="newmessage" is changed. I want to replace ... with ...
Use replaceWith
<script>
function sendmessage()
{
var message_content=$("#message").val();
$.ajax({
type: "POST",
url: "newmessage.php",
dataType: "html",
data: {message:message_content},
success: function(data) {
$("#newmessage").replaceWith(data);
}
});
}
</script>
Use .replaceWith() :
$("#newmessage").replaceWith(data);

Insert a loading text message before a div gets populated?

I am tweaking my function below and had an issue. I'd like a loading text message to be inserted right before #project-container fills up with HTML and disappear once response has been inserted.
However, if I insert:
$('#project-container').html("my text here");
...right before:
$('#project-container').html(response);
Then, response doesn't show since the div is already populated with "my text here". Is there another method I can use?
function projectShow() {
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
success: function(response) {
$('#project-wrapper').addClass('activated');
$('#project-container').html(response); <---I want it inserted
$('.post-container').addClass('fadeInUp'); before this line.
$('.close-button').addClass('fadeOutDown');
$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
If you need a 'Loading' message, show it upon beforeSend event, and hide it on success:
function projectShow() {
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
beforeSend: function() { $('#project-container').html("Loading, Please wait"); },
success: function(response) {
$('#project-wrapper').addClass('activated');
$('#project-container').html(response);
$('.post-container').addClass('fadeInUp');
$('.close-button').addClass('fadeOutDown');
$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
See Ajax Events
You should probably add the loading message just before the AJAX call. It makes no sense to do it in the success callback, since the two operations will happen in the same cycle and chances are you'll always see just one. This should do it:
function projectShow() {
// add the initial text here
$('#project-container').html("my text here");
// add the initial class here for height issues from the comments
// $('#project-wrapper').addClass('activated');
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
success: function(response) {
$('#project-wrapper').addClass('activated');
$('#project-container').html(response); <---I want it inserted
$('.post-container').addClass('fadeInUp'); before this line.
$('.close-button').addClass('fadeOutDown');
$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
As said in the comments, if you wish to keep the original text then append the response to it (either by using append(), or concatting them, or whatever method you like best).
See the both ways in action below:
function projectShow(keep) {
$('#project-container').html("my text here");
$.ajax({
type: 'POST',
cache: false,
url: 'http://hayageektest.appspot.com/cross-domain-cors/post.php',
//data: {'action': 'load-content', post_id: post_id },
success: function(response) {
//$('#project-wrapper').addClass('activated');
if (keep)
$('#project-container').append(response);
else
$('#project-container').html(response);
//$('.post-container').addClass('fadeInUp'); // before this line.
//$('.close-button').addClass('fadeOutDown');
//$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="projectShow()">Click me</button>
<button onclick="projectShow(true)">This one will keep the original! Click it. <br /></button>
<div id="project-container"></div>

jQuery placing .each() functions inside a .click() function

The .each() functions inside the .click() are not running. I do not know how to structure them to make it syntactically correct so jQuery will recognize and run them.
I tried tacking them on before the closing }); but I either didn't do it right or that isn't how it's done. I tried Googling but other than my topic title I was at a loss for what to search. I did try jquery function inside function but that turned out to be a lost cause.
EDIT: I have managed to get the first one to fire properly (//POST specials) however, the second one still isn't working. I even tried to put the extras POST inside the .ajax() of the specials and it didn't work.
$('.class').find('#button').click(function() {
//all kinds of variables here
var dataString = {//variables:variables}
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/reserve.php",
data: dataString,
cache: false,
success: function(html)
{
//POST specials
$('#specialscheck input:checked').each(function() {
var reservation = $('#reservation').val();
var special = parseInt($(this).attr('id'));
dataString = {reservation:reservation, special:special};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/insert_specials.php",
data: dataString,
cache: false,
success: function(html)
{
//$('.unitinfolist').html(html);
}
});
});
//POST extras
$('#extrascheck input:checked').each(function() {
var reservation = $('#reservation').val();
var extra = parseInt($(this).attr('id'));
dataString = {reservation:reservation, extra:extra};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/insert_extras.php",
data: dataString,
cache: false,
success: function(html)
{
//$('.unitinfolist').html(html);
}
});
});
}
});
});
You should move the .each up into the success function of the jquery post, or set its async: false, to follow this pattern.
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType,
async:false
});

Categories

Resources