When I click submit on a form, it makes an AJAX call. If the return value is success I want to open a file upload browser to upload a file from the system. For this I am using the trigger click from jQuery on success message. But it is not working. Below is the code for the AJAX call.
$.ajax({
url: AppManager.defaults.contextPath,
data: colMap,
contentType: 'application/json',
type: 'POST',
success: function(data) {
if (data.result == 'Success') {
$('#continue-upload-input-box').trigger('click');
} else {
self.popupView.closePopup();
notify.popup('Error Uploading').error(self.uploadFailureMessage);
}
},
error: function(error) {
console.log(error);
}
});
This is where the code for file upload is written:
change: function($view) {
var self = this;
$('<form id="custom-upload" class="input-form-container" enctype="multipart/form-data"></form>').appendTo($view.find('.btn-wrap'));
$view.find('.input-form-container').after('<input name="excelFile" type="file" id="continue-upload-input-box" style="display:none;">');
$view.find('#continue-upload-input-box').off('change').on('change', function(event) {
if (event.target.files.length === 1) {
self.uploadCustomTemplate(new FormData($('#custom-upload')[0]));
self.popupView.closePopup();
}
});
}
What could be an issue in the above code?
you need to action a dom click event, not a jQuery click event.
try:-
$('#continue-upload-input-box').get(0).click();
use
$(document).trigger
insted of
$('#continue-upload-input-box').trigger('click');
if you use document then it will execute your trigger event . if your id is not in DOM when you trigger click it will not execute so you have to load DOM again
Use on method for calling event.refer following link:
http://api.jquery.com/on/
first make sure your 'data.result' value 'Success' is in correct format or which value it will return then use this
$("#continue-upload-input-box").trigger("click");
i think your code is proper but it's all depends on your other jquery code
.trigger is more or less like a click.
to trigger some action/event the element or object must be in DOM before your trigger the event.
So if you load the form from JS and then append it in DOM the your function that allow the uploader to show must be in .load function OR its better that you append it in DOM before the ajax fires.
http://api.jquery.com/trigger/
Use $('#continue-upload-input-box').click();. That should be sufficient.
Related
I have a huge problem with working with AJAX:
After the AJAX request on my page is send the next request are send multiple times, and buttons think that they are pressed multiple times.
Now I searched around here and the internet, but I can't solve it. So far, following corrections are made in the code:
All code is in an own function called AjaxInit()
AjaxInit() is called upon $(window).load and on $(document).ajaxStop
All Element have their binder to body (e.g. $("body").on("click","#btn-main", function)
Now I have tried unbinding all events using $("body").find("*").off(), but that did not help either.
I know that I do something wrong, I just don't know what.
How can I properly rebind everythink after the Ajax call is done? How can I make shure that object bindings (e.g. $("#news").sortable({})) will work properly after the first ajax call? I would love to use AJAX for all the callbacks on my page, but currently the best solution seems to be just reloading the entire page after every ajax call, which would be rather bad.
Any help is appreciated.
EDIT: Code added
$(window).load(function() {
AjaxInit();
});
$(document).ajaxStop(function() {
AjaxInit();
});
function AjaxInit() {
$("body").on("click", "#btn-admin-main", function(e) {
console.log("Admin clicked");
e.handled = true;
e.preventDefault();
LoadDynamicContent("/Edit/");
});
}
function LoadDynamicContent(path) {
//Nach oben Scrollen
$('html,body').scrollTop(0);
$.ajax({
type: 'GET',
url: path,
success: function(response) {
var html_response = $(response).find('#dynamic_content').html();
$("#dynamic_content").html(html_response);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a class="sidebutton-full" id="btn-main">Edit</a>
<div id="dynamic_content"></div>
You can unbind the click event from button
$(document).unbind('click').on("click", "#btn-main", function () {
//do stuff here
});
OR
$(document).off("click", "#btn-news").on("click", "#btn-news", function () {
});
If your form submission hitting twice then you need to change your code little bit
$("#form_news_sort").submit(function(e){
e.preventDefault()
// do stuffer here
.
.
.
.
return false;
})
if you are still facing error , please comment below
The problem is that when your ajaxStop handler calls AjaxInit(), it adds another click handler to the body.
In your example code, it looks like you don't need ajaxStop at all. All it will do is add another click handler, which is the problem. Or if your real code does some more complex initialization that needs to run whenever all Ajax requests are complete, you should factor out the click handler assignment from whatever else needs to happen.
$(function(){
$('a.ajaxLink').click(function(e){
var l = $(this).attr("href"),
getdata;
if(l != null){
e.preventDefault();
$.ajax({
type:'GET',
url:l + '#book',
success:function(result){
getdata = $(result).find('#book');
//$('#content').html(getdata);
$('#content').fadeOut(function(){
$('#book').remove();
$('#content').append(getdata);
});
$('#content').fadeIn(function(){
pos();
});
}
});
}
});
});
Hello, I have this code as above :) but there is a problem with the other files Loads multiple addresses with ajaxLink and then ajax does not work. It is something like this: the first click loads the partition with in the background the second click on a loaded by ajax page no longer works.
Looks like you replace the whole page or a part which contains your link, so the event bindning will no longer work. To make it work you should use jquery on function.
$(document).on('click', 'a.ajaxLink', function(e){.... your handler goes here})
Use the .on() event handler rather than .click() because the .on() can handle new DOM elements but .click() dose not
I use this file-upload script: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/
There is this in it:
$('#upload').fileupload({
My Problem is, that i load the content dynamically, so I think I need something like this (because I know this problem from the .click() function):
$(document).on('fileupload', '#upload', function () {
But this doesn't work. Can anyone help me, how to get this function called when the content with the form with id="upload" is loaded dynamically?
Would be great!
Your issue is probably because you're initializing $('#upload').fileupload() in document.ready().
You should initialize the element as file upload (execute $('#upload').fileupload()) after you dynamically load the content.
Since you're loading the content via ajax on button click (according to comments), you code should be along the following:
$(":button").click(function(){
$.ajax("url",{
success: function (data){
//code for injecting the element into DOM
$('#upload').fileupload(); // initialize it as file upload
}
});
});
You are almost right about the "I need something like this" part - the issue with your attempt at
$(document).on('fileupload', '#upload', function () {
is that 'fileupload' is not an event which is what .on() is expecting and that's why it worked for you with the 'click' case and not here.
You should include the assets/js/script.js to your page after the $('#upload') element is dynamically loaded so that all the content the script needs exists before it is executed. For that take a look at jQuery.getScript() or a simple dom approach and use it after the code which gets your elements added to the dom.
Use this function
$(function () {
var options = {
beforeSubmit: function (formData, jqForm, options) { }, // pre-submit callback
success: function (responseText, statusText, xhr, form) { } // post-submit callback
};
// bind form using 'ajaxForm'
$('#uploadForm').ajaxForm(options);
});
Is there an event handler to use in JQuery when a DOM select element has finished loading?
This is what I want to achieve. It is working with other events except 'load'.
This piece of code is loaded in the head.
$(document).on('load', 'select', function(){
var currentSelectVal = $(this).val();
alert(currentSelectVal);
} );
The question was badly formed earlier. I need to attach the event handler to all select elements, both present when the document is loaded and dynamically created later.
They are loaded from a JQuery Post to a php-page. Similar to this:
$.post("./user_functions.php",
{reason: "get_users", userID: uID})
.done(function(data) { $("#userSelector").html(data);
});
I think we're all confused. But a quick break down of your options.
After an update made to the Question, it looks like the answer you might seek is my last example. Please consider all other information as well though, as it might help you determine a better process for your "End Goal".
First, You have the DOM Load event as pointed out in another answer. This will trigger when the page is finished loading and should always be your first call in HEAD JavaScript. to learn more, please see this API Documentation.
Example
$(document).ready(function () {
alert($('select').val());
})
/* |OR| */
$(function() {
alert($('select').val());
})
Then you have Events you can attach to the Select Element, such as "change", "keyup", "keydown", etc... The usual event bindings are on "change" and "keyup" as these 2 are the most common end events taking action in which the user expects "change". To learn more please read about jQuery's .delegate() (out-dated ver 1.6 and below only), .on(), .change(), and .keyup().
Example
$(document).on('change keyup', 'select', function(e) {
var currentSelectVal = $(this).val();
alert(currentSelectVal);
})
Now delegating the change event to the document is not "necessary", however, it can really save headache down the road. Delegating allow future Elements (stuff not loaded on DOM Load event), that meet the Selector qualifications (exp. 'select', '#elementID', or '.element-class') to automatically have these event methods assigned to them.
However, if you know this is not going to be an issue, then you can use event names as jQuery Element Object Methods with a little shorter code.
Example
$('select').change(function(e) {
var currentSelectVal = $(this).val();
alert(currentSelectVal);
})
On a final note, there is also the "success" and "complete" events that take place during some Ajax call. All jQuery Ajax methods have these 2 events in one way or another. These events allow you to perform action after the Ajax call is complete.
For example, if you wanted to get the value of a select box AFTER and Ajax call was made.
Example
$.ajax({
url: 'http://www.mysite.com/ajax.php',
succuess: function(data) {
alert($("select#MyID").val());
}
})
/* |OR| */
$.post("example.php", function() { alert("success"); })
.done(function() { alert($("select#MyID").val()); })
/* |OR| */
$("#element").load("example.php", function(response, status, xhr) {
alert($("select#MyID").val());
});
More reading:
.ajax()
.get()
.load()
.post()
Something else to keep in mind, all jQuery Ajax methods (like .get, .post) are just shorthand versions of $.ajax({ /* options|callbacks */ })!
Why dont you just use:
$(document).ready(function () {
//Loaded...
});
Or am I missing something?
For your dynamic selects you can put the alert in the callback.
In your .post() callback function, try this:
.done(function(data) {
data = $(data);
alert(data.find("select").val());
});
Ok, correct me if I understand this wrong. So you want to do something with the selects when the document is loaded and also after you get some fresh data via an ajax call. Here is how you could accomplish this.
First do it when the document loads, so,
<script>
//This is the function that does what you want to do with the select lists
function alterSelects(){
//Your code here
}
$(function(){
$("select").each(function(){
alterSelects();
});
});
</script>
Now everytime you have an ajax request the ajaxSend and ajaxComplete functions are called. So, add this after the above:
$(document).ajaxSend(function () {
}).ajaxComplete(function () {
alterSelects();
});
The above code will fire as soon as the request is complete. But I think you probably want to do it after you do something with the results you get back from the ajax call. You'll have to do it in your $.post like this:
$.post("yourLink", "parameters to send", function(result){
// Do your stuff here
alterSelects();
});
Do you want all Selects to be checked when the User-Select is loaded, or just the User-Select?...
$.post("./user_functions.php", {reason: "get_users", userID: uID}).done(function(data) {
$("#userSelector").html(data);
//Then this:
var currentSelectVal = $("#userSelector").val();
alert(currentSelectVal);
});
If your select elements are dynamically loaded, why not add the event handler after you process the response?
e.g. for ajax
$.ajax({
...
success: function(response) {
//do stuff
//add the select elements from response to the DOM
//addMyEventHandlerForNewSelect();
//or
//select the new select elements from response
//add event handling on selected new elements
},
...
});
My solution is a little similar to the posters above but to use the observer (pubsub) pattern. You can google for various pub sub libraries out there or you could use jQuery's custom events. The idea is to subscribe to a topic / custom event and run the function that attach the event. Of course, it will be best to filter out those elements that have been initialize before. I havent test the following codes but hopefully you get the idea.
function attachEventsToSelect(html) {
if (!html) { // html is undefined, we loop through the entire DOM we have currently
$('select').doSomething();
} else {
$(html).find('select').doSomething(); // Only apply to the newly added HTML DOM
}
}
$(window).on('HTML.Inserted', attachEventsToSelect);
// On your ajax call
$.ajax({
success: function(htmlResponse) {
$(window).trigger('HTML.Inserted', htmlResponse);
}
});
// On your DOM ready event
$(function() {
$(window).trigger('HTML.Inserted'); // For the current set of HTML
});
I am using AJAX to submit a form behind the scenes, without refreshing the page. The problem I am running into is I can only submit the form once. After I submit it once, the on('submit') function no longer works and I am getting no errors. This completely defeats the purpose of using AJAX to submit the form :/
$(document).on('submit', '#myForm', function(e) {
$.post('mail.php', $(this).serialize(), function (data) {
//SUCCESS
$('.successORfail').html(data);
setTimeout(function(){
$(".successORfail").fadeOut("slow", function () {
$(".successORfail").remove();
});
}, 4500);
}).error(function() {
alert("Fatal Error: mail.php not found!");
});
e.preventDefault();
});
I was wondering if someone ran into a similar problem or knows how to solve this? I would like to be able to submit the form more than once, making changes to the form input values after each submit, if needed.
Many thanks in advance
Are you sure the AJAX request is not happening? It looks like you are removing the .successORfail element from the page, and thus the there is nothing to append the content to on subsequent calls.
Check your console and you will probably notice an ajax call happening each time.
Try changing your setTimeout to this:
var msgEl = $(".successORfail");
setTimeout(function() {
msgEl.fadeOut("slow", function () {
msgEl.empty().show();
});
}, 4500);
Your success event handler:
$('.successORfail').html(data);
setTimeout(function () {
$(".successORfail").fadeOut("slow", function () {
$(".successORfail").remove();
});
}, 4500);
is setting content in an element (.successORfail), then removing that element. The next time you submit the form, get a successful response, and that function is executed the element is no longer there to set the content into so you wouldn't see anything change.
Instead of removing the element, just .hide() it so that the next time it can be populated. You'll need to .show() it each time too.
$(document).on('submit', '#myForm', function(e) {
$.post('mail.php', $(this).serialize(), function (data) {
//SUCCESS
$('.successORfail').html(data).show(); //<-- show
setTimeout(function(){
$(".successORfail").fadeOut("slow", function () {
$(this).hide(); //<-- hide
});
}, 4500);
}).error(function() {
alert("Fatal Error: mail.php not found!");
});
e.preventDefault();
});
Also in the fadeOut() function, you can access the element with $(this) instead of re-selecting it based on the class name.
Can you add some HTML-snippet? Its hard to help without knowledge about your html-structure, because if you are replacing the form via $('.successORfail').html(data); the listener isn't re-bound to the form.
You should also return FALSE because the form-data is sent via javascript.
Well, it seems that you append your result to $('.successORfail').html(data); and the remove it. Take out the following and it should work multiple times...
$('.successORfail').remove();
Without that element, the change can't be made.