Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Jquery fire function problem for elements added via ajax

Posted on 2013-05-23
35
Medium Priority
?
992 Views
Last Modified: 2013-06-04
Hello experts.
I'm using this plugin:
http://code.google.com/p/ajax-upload/

The script is working fine.
The problem i have is that when i add via ajax new UploadButton 's the function is not fireing.
To fire functions for new added elements via ajax i'm using  : $("body").on("something",........ .
How can i do it in this case?
$(".UploadButton").ajaxUpload({
url : "upload.php",
name: "file",
onSubmit: function() {
.....
},
onComplete: function(result) {
.....
}
});
0
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 18
  • 16
35 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39199620
Try

$(''#UploadButtonContainer'').on('click','#UploadButton', function() {




You need to bind the even using .on to the new element's container
0
 
LVL 2

Author Comment

by:Panos
ID: 39199719
Hi.
Can you please show me how to do this with this code?
$(".UploadButton").ajaxUpload({
url : "upload.php",
name: "file",
onSubmit: function() {
.....
},
onComplete: function(result) {
.....
}
});
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39199729
Not in there. In

$(function() {
  // here
});
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Author Comment

by:Panos
ID: 39199749
Like this?
 $('#instruc').on('click','.uploader', function() {
       ajaxUpload();
  });
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39200309
Yes, but wrap that in
$(function() {...});
Try it and see
0
 
LVL 2

Author Comment

by:Panos
ID: 39200315
This is my code:
$('#instruc').on('change','.qq-uploader', function() {
       ajaxUpload();
  });

I get firebug error:
ReferenceError: ajaxUpload is not defined
ajaxUpload();
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39200354
No wrap YOUR code in the page load code $(function() { here your 3 lines });

It is the main jquery method on page load
0
 
LVL 2

Author Comment

by:Panos
ID: 39200368
Yes i did this so. i missed to write it. I did copy only this. I have other fynctions included in the main $(functio() .....
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39213933
So any messages in the console?

I cannot help you with the little snippets you have posted so far. I still cannot guess how your buttons are called, where the new buttons live and so on.
0
 
LVL 2

Author Comment

by:Panos
ID: 39213972
Well i tried to do it it as simplier as i can.
Download the zip file with my full code. Included a test html page and my customajaxupload file.
http://www.2shared.com/file/DfnwXjLB/test.html

The upload procces is working for the div that exists on the page but not for the div i add with the addinstruction function.

! The content from the js function is a div like the one that is allready on the page but with a different id and including a form like the one the plug in is generating on page load.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39214306
I do not understand where the button is loaded with Ajax. I only see a json call
0
 
LVL 2

Author Comment

by:Panos
ID: 39215016
Hi.
Tis one will show you what i mean.
The function is not firering for the div you will add with addinstruction function
http://www.2shared.com/file/5cmgZibm/test.html
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39215409
Sorry. I am not going to execute an unknown .exe on my work PC.

Can you upload the pages on a site somewhere?
0
 
LVL 2

Author Comment

by:Panos
ID: 39215463
Click the small Download blue button not the big one. It is only the file. No exe
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39215506
That invited me to find a f*ck buddy on my office computer. Not great.

I will no longer click anything from that site. It is either compromised or tries to install a virus. All download buttons go to an EXE file and clicking to get to one gave me a fullscreen porn page

http://www.siteadvisor.com/sites/http%3A//www.2shared.com/
0
 
LVL 2

Author Comment

by:Panos
ID: 39215518
I'm sorry but i have not this kind of problems. I will not use it any more.
Here is a rapidshare link.
http://rapidshare.com/files/3597745753/test.zip
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39215531
Ok, running the page in Firefox. If I click the square, I get a prompt with an
Edit
  Select

I click the select and get to choose an image

I select an image and I get

Uploading...

so what are the steps to find your issue?
0
 
LVL 2

Author Comment

by:Panos
ID: 39215562
click the add link.
A new field will be added (the content of : testcontent.html). when you select a file here the upload function is not working.

Replace last line before the scripts:
<a href="#" id="addinstruction">Add</a>
I have one image there instead of : "Add" you can't see it.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39215959
Ah, now getting somewhere.

"<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">XML Parsing Error: undefined entity
Location: testcontent.html
Line Number 7, Column 63:<sourcetext>            &lt;i class="qq-ui-icon ui-icon-wrench" title="Edit"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/i&gt;
--------------------------------------------------------------^</sourcetext></parsererror>"
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39216036
So I fixed the XML and am now getting s jQuery error in 1.9.1

TypeError: context is null
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
Line 4392

I have a hard time getting to where that is appearing
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39216047
Seems to work better when I do

    $('#addinstruction').on('click', function () {
      $("<div/>").load("testcontent.html").appendTo("#instruc");
   });
0
 
LVL 2

Author Comment

by:Panos
ID: 39216073
hmmm......
The div is loading the content.
The problem i have is that after selecting one image (in the new div) nothing happens
0
 
LVL 2

Author Comment

by:Panos
ID: 39216082
Don't care about after firering.
0
 
LVL 2

Author Comment

by:Panos
ID: 39216174
mplungjan
The ajaxUpload function is creating the form with the input file field on page load for every .qq-uploader li element and add an iFrame in the bottom of the page.
I'm "simulating" this adding the new div.

By  input.change(function (e) line 49 in the plugin js file  i get the validation and finally the upload function for the divs that exists on pageload but not for the new ones.
May be i need new script for this case.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39216199
Hmm.

The plugin only handles ONE iframe since it is using the same ID if you execute more than once. I think you need a new script that can handle more than one upload
Also I think that perhaps that script should not need to ajax the new form in each time, but create one and append it with the relevant event handlers.
0
 
LVL 2

Author Comment

by:Panos
ID: 39217612
......a new script that can handle more than one upload
It is working for me with multiple uploadfields using class attributes and a different holder id..  Also the loaded page has a dynamic content with a different id every time.

........but create one and append it with the relevant event handlers.
Can you explain this please?
0
 
LVL 2

Author Comment

by:Panos
ID: 39218526
Hi.
I removed completele the plugin.
I created a new function to the onchange event of the input file with a class value.
I tried to use some of my old code.
I have a problem now with the response.

after first submitting i have a content in my iFrame but the alert shows nothing.
The second submitting is working.

I add the form element manually without any script but for the existing div the upload now is not firering.Only for the new added one.

I think we are near to the solution.
Please take a look:
http://rapidshare.com/files/3517134510/newtest.zip

(i don't know if i could use something like onSubmit or onComplete too)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39218655
form.submit();
         var response = $('#__ajaxUploadIFRAME').contents().find('html body').text();
does not make sense.

You need the result from the submit to execute stuff. You cannot rely or content being available right after the submission
0
 
LVL 2

Author Comment

by:Panos
ID: 39218811
This makes sense .
Any work around. I need something that will get the content ,when i get something from the action page.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39218884
tell me again why you need to submit the form and not ajax the form?
0
 
LVL 2

Author Comment

by:Panos
ID: 39219027
I was just looking how this was done with the plugin.
1). It did add an iframe,  2) add as target the iFrame id and finally 3) submit the form.

May be i'm wrong .

What are you suggesting?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 39219172
0
 
LVL 2

Author Comment

by:Panos
ID: 39219999
Ok.
Thank you for your help.
I will check this tutorial. Maybe using the jquery.form plugin would solve the problems too.
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 39220004
thank you
regards
panos
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question