Solved

Jquery fire function problem for elements added via ajax

Posted on 2013-05-23
35
969 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
  • 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 500 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now