jquery ajax mutliple photo upload from a tutorial - javascript

I'm using a pretty basic jquery ajax photo upload for a page that I've created. I'm using exactly the same code as the tutorial, except I've made the few modifications explained later. The tutorial for creating it is here:
http://www.saaraan.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php
The problem I'm running into is I'm trying to convert the script to allow multiple uploads on a page. I have the page setup with multiple forms already, and the php action is ready to receive multiple photos, I'm just clueless when it comes to the jquery part. It declares myform with the id of UploadForm, but since I converted it, I now have the ids of UploadForm1, UploadForm2, UploadForm3, etc..
var myform = $("#UploadForm");
There is a short way of doing the this in jquery I'm sure, but the only solution I can come up with is just repeating the jquery function as many times as I need with the ids hard-coded. Once someone shows me how to fix the UploadForm id problem, I'll be able to fix the progressbar, progressbox, statustxt, and submitbutton ids as well.

Assign a class to each one and reference the class with $('.ClassName'). Then go through the collection with .each(function(){}).

You could allow for each photo to have an input element inside your form, and with a little JavaScript you could allow the user to add/remove rows in your form. Essentially, you are looking for multiple file upload. I've found something that might help:
How to upload multiple files using PHP, jQuery and AJAX

Related

Html form to local xml file

I'm trying to make a simple form that adds user input to a local xml file. Basically, I need to input a name and a proffesion.
The xml file looks something like this:
<mainNode>
<name>Jeff</name>
<proffesion>Dog Trainer</proffesion>
</mainNode>
But I need some method (either with jQuery or javascript) to populate or add to the existing file (example.xml) using that form instead of creating a new xml file or replacing the nodes. I would show I've tried so far, but i've tried so many examples I can't even decide what to show (but if necessary I'll edit this post ). Any help or pointing in the right direction would be appreciated, thanks ! :)

Web Page Javascript Objects

newbie question.
I've read some of the W3Schools, I also read a lot from other sources on the internet, however I can't find what I need, and I'm sure it's quite simple to you.
I'm using ASP.Net, and I want to add to my website, multiple items, which every item hold a picture, and some other information, including links. I'm pretty sure I don't need to write the code for every item in the HTML source, and I don't know exactly how to implement my this.
The basic idea is that my items will be imported from a Database that I create in visual studio, and I want to style my webpage so they would appear in a certain formation, I thought I might need to use Javascript or CSS for this, hope I'm not mistaken.
Javascript isn't some sort of magician that will render all your stuff on its own. However, you can use it to attach a template to every of your items.
What you have to do is :
Create a base HTML template for 1 of your item that can be applied to all of them
Create a Javascript function that will attach thoses CSS classes and HTML attributes to every element out of your DB (or you could use a templating frameork .. since there's a lot of them I'll let you look for it on Google. It's pretty easy to use)
On page load or whatever event you want to bind on, you call your function which will attach the CSS and HTML to every element out of your DB and will render it on your page
Enjoy what you've done.
I hope this helps. Good luck ! ;)

manipulating tinymce in Wordpress

I need to be able to extract, manipulate and update the text in wordpress's tinymce #content textbox.The code is coded in a wordpress plugin.
The below post helps but i am unable to comment or contact the original creator to ask him further questions. Having 1 points I cant practically do anything except ask questions. Let me know if i am doing this wrong.
Basically the code from this link is what i need to manipulate or edit the content in wordpress tinymce editor.
Manipulating TinyMCE content with jQuery
But the code seems to be overly simplified.
so my question is:
Do i need to include jquery
Do i need to include the tinymce js or class? is it in wordpress itself?
The code seems to be half javascript half php? Is the code suppose to be coded in a .js file?
do i need to put php tags here?
// make it into a jQuery object
var $content = $(content);
// manipulate the jquery object using jquery
$content = $content.remove('a');
Thanks.
hi I have figured it out after a bit more researching.
At first I was working with php to manipulate data after it is saved. But then i went on to wanting to manipulate the text before it was saved like underlining certain text based on a list in the database. So I needed to move on to javascript because i was editing the text before it was submitted or a page reload which i didn't wrap my head around yet.
So next i just coded the changes into javascript and built a button to call the process.
and seems i didn't need to include the tinymce class because probably the header of the editor page has already included it.

Get textarea contents before submit

I have a textarea by id "compose" and i want to get the data from that textarea before the submit button is pressed. I have another javascript function that will share the information to various other sites based on the user preferences and i need to pass the information in the textarea to that js.
function getVal(){
alert(document.getElementById("compose").value);
}
I am not getting any information and im guessing its because the information is stored else where but i dont know where that is stored.
I am using zend with this and i would like to use jQuery but i cannot get jQuery to work properly with zend. It either wrecks other components on the page or does not work at all. Any suggestions?
edit: This is where i am calling getVal(). Its just a link right now as i am trying to get the input into the text area. Then i will insert the found data into my js script.
I attached Zend because the site is made using the zend framework and after a while of stuggling with jquery i didnt want a jquery answer because i would not be able to use it.
click
edit1 It seems the engine im using has dropped jquery support for the version im using.... Thank you for your answers and help
since you tagged this as jquery I assume you use it. In that case, the simplest way would be ...
$("#compose").val()
Oh, never mind, I read now that you can't make jquery work?
In that case, did you read this post? Best way to start using jQuery in a Zend Framework 1.9 application?
You can hi-jack the submit event for the form, do your AJAX request, then submit the form normally:
$('form').on('submit', function () {
$.ajax({
url : '<URL>',
data : { compose : $('#compose').val() }
});
});
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().
Docs for .on(): http://api.jquery.com/on

How can I get javascript to work on html that I load with json on the page?

On a particular page, I use json to load a bit of html code that displays information about what the user submitted when he clicks on something.
In this case, the user is picking his favorite baseball player and the json returns some html code that formats and displays the name of the player.
When that html is loaded on the page, the live click javascript function no longer applies to the html that is loaded. Is there some way I can refresh the javascript so that it applies to it?
When the user clicks on his favorite baseball player, you make a request to the server and it returns a json object with the players information, right? If the server returns a string containing html tags instead of a json object I don't think you are doing it the right way.
The JSON object that the server should respond with should look like the following.
{Name : 'Kobe Bryant', JerseyNumber : 0, Salary : 500}
Once you receive this object, you will parse it and put its content in an element on the page. Responding with an HTML code is not good practice, you should create a template where your athletes data will be store.
If you give us some code along with this question, I would be more than happy to help you solve it.
Are you using jQuery? They have a built-in method to handle this.
$('#myElement').live('click', function() {
/* Your Code Goes Here */
});
In jQuery 1.7 the same thing can be written as:
$('#myElement').on('click', function() {
/* Your Code Goes Here */
});
After doing a lot of research and talking to several people, I found that I need to re-bind the event after the json callback.
This was a great help:
http://jetlogs.org/2009/01/29/re-binding-jquery-events-on-ajax-callbacks/
When using jQuery's .click() method and rendering new html, the javascript that was originally attached to it, needed to be attached again.
This is more easily solved by using the .live() method with the 'click' option. The .live() method automatically re-binds the new code.

Categories

Resources