• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 998
  • Last Modified:

Jquery fire function problem for elements added via ajax

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
Panos
Asked:
Panos
  • 18
  • 16
1 Solution
 
Michel PlungjanIT ExpertCommented:
Try

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




You need to bind the even using .on to the new element's container
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
Not in there. In

$(function() {
  // here
});
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
PanosAuthor Commented:
Like this?
 $('#instruc').on('click','.uploader', function() {
       ajaxUpload();
  });
0
 
Michel PlungjanIT ExpertCommented:
Yes, but wrap that in
$(function() {...});
Try it and see
0
 
PanosAuthor Commented:
This is my code:
$('#instruc').on('change','.qq-uploader', function() {
       ajaxUpload();
  });

I get firebug error:
ReferenceError: ajaxUpload is not defined
ajaxUpload();
0
 
Michel PlungjanIT ExpertCommented:
No wrap YOUR code in the page load code $(function() { here your 3 lines });

It is the main jquery method on page load
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
I do not understand where the button is loaded with Ajax. I only see a json call
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
Sorry. I am not going to execute an unknown .exe on my work PC.

Can you upload the pages on a site somewhere?
0
 
PanosAuthor Commented:
Click the small Download blue button not the big one. It is only the file. No exe
0
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
Seems to work better when I do

    $('#addinstruction').on('click', function () {
      $("<div/>").load("testcontent.html").appendTo("#instruc");
   });
0
 
PanosAuthor Commented:
hmmm......
The div is loading the content.
The problem i have is that after selecting one image (in the new div) nothing happens
0
 
PanosAuthor Commented:
Don't care about after firering.
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
......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
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
This makes sense .
Any work around. I need something that will get the content ,when i get something from the action page.
0
 
Michel PlungjanIT ExpertCommented:
tell me again why you need to submit the form and not ajax the form?
0
 
PanosAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
0
 
PanosAuthor Commented:
Ok.
Thank you for your help.
I will check this tutorial. Maybe using the jquery.form plugin would solve the problems too.
0
 
PanosAuthor Commented:
thank you
regards
panos
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 18
  • 16
Tackle projects and never again get stuck behind a technical roadblock.
Join Now