DaniWeb Forum Index > Web Development > PHP

unlimited file upload fields

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2008

Posts: 42

Reputation: marcmm is an unknown quantity at this point

Solved Threads: 0

marcmm

Offline

Light Poster

Re: unlimited file upload fields

#11

Jan 28th, 2009

I tryed your example... it dosen't do anything. just displays the checkboxes and clicking on them will do nothing.

•

Join Date: Jul 2008

Posts: 148

Reputation: mschroeder is on a distinguished road

Solved Threads: 25

mschroeder mschroeder is offline

Offline

Junior Poster

Re: unlimited file upload fields

#12

Jan 28th, 2009

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
//Wait for the document to be ready
 $(document).ready(function(){
 
   //Listen for a click on every checkbox
   $("input:checkbox").click(function () { 
   		var val = $(this).val();
		var name = $(this).attr('name');
                //This is so IE does not cache the results
		var noCache = new Date();
 
                //Make a JSON request
   		$.getJSON('ajax.php', {'item':name, 'val':val, '_':noCache.getTime()}, function(json){
			$("[name='" + json.item + "']").attr('value', json.check )	
		});
 
    });
 });
 
</script>
<script type="text/javascript">
//Wait for the document to be ready
 $(document).ready(function(){

   //Listen for a click on every checkbox
   $("input:checkbox").click(function () { 
   		var val = $(this).val();
		var name = $(this).attr('name');
                //This is so IE does not cache the results
		var noCache = new Date();
                
                //Make a JSON request
   		$.getJSON('ajax.php', {'item':name, 'val':val, '_':noCache.getTime()}, function(json){
			$("[name='" + json.item + "']").attr('value', json.check )	
		});

    });
 });
	
</script>

Well let me go through it and try to explain it better.
in jQuery the $.(document).ready() function is setup immediately following initialization of the DOM.
So the code sits in there so it can be used even before the actual content on the page is loaded.

The main workhorse is this function:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
   //Listen for a click on every checkbox
   $("input:checkbox").click(function () { 
   		var val = $(this).val();
		var name = $(this).attr('name');
                //This is so IE does not cache the results
		var noCache = new Date();
 
                //Make a JSON request
   		$.getJSON('ajax.php', {'item':name, 'val':val, '_':noCache.getTime()}, function(json){
			$("[name='" + json.item + "']").attr('value', json.check )	
		});
   //Listen for a click on every checkbox
   $("input:checkbox").click(function () { 
   		var val = $(this).val();
		var name = $(this).attr('name');
                //This is so IE does not cache the results
		var noCache = new Date();
                
                //Make a JSON request
   		$.getJSON('ajax.php', {'item':name, 'val':val, '_':noCache.getTime()}, function(json){
			$("[name='" + json.item + "']").attr('value', json.check )	
		});

what this does is says listen for a click event on every input type of checkbox. On a click of any checkbox its runs the function contained in that code.

it gets the value of the checkbox that was just checked $.(this).val();
and also grabs the name of the field.

In my exampe I made the name unique for each checkbox and then set a default value of 0 indicating it was not display.

the noCache is just a date object so that IE does not cache the GET request.

$.getJSON() setups the ajax request for ajax.php. {'item':name, ... } is the query parameters.
This function ultimately requests: ajax.php?item=fieldname&val=checkboxvalue&_{timestamp}

ajax.php in my example simply is looking for a get variable and then encoding a basic php array into JSON and then echoing the JSON to the stream.

$.getJSON returns a JSON object by default so we can simply navigate it with jQuery.

the last attribute is the function to call on a successful ajax request. In this case i specified it right in the $.getJSON function.

it just looks for an element with the name id of the one submitted and then updates its value according to the JSON response. in this case changes 0 to 1 or 1 to 0.

Thats all there is too it, like i said its not the perfect response to your problem but it does do everything you wanted. Depending on your php version etc we can also work without the JSON.

Use php to initially draw the form, and you dont need to inject any javascript into the elements themselves. This makes for much cleaner code.

Hopefully this helps break it down some more.
I apologize because i left an early function (updateElement) in my previous example and its not needed.

Please feel free to ask any more specific questions and I'll try to help you get started with jQuery which if you're relying on ajax and/or javascript will dramatically improve your time, i know it did for me.

•

Join Date: Oct 2008

Posts: 42

Reputation: marcmm is an unknown quantity at this point

Solved Threads: 0

marcmm

Offline

Light Poster

Re: unlimited file upload fields

#13

Feb 4th, 2009

thank you for taking the time to explain this indeapth. I apreciate it. I still am not sure exactly how to apply this, but I'm sure some experimentation will solve that.

In the meantime I decided to use a more primitive solution to the whole problem, and jsut relayed on form submits with clicking a button instead of a checkbox. wich redirects to a page, executs the queries, updates the DB and then redirects back to the original page. the page is not expected t ohavem ore then 10 thumbnails on it at any time, so even though it might seem like a bad idea, I tested it and it seems to work ok. I'll look to updating this in the future using this example.

In the meantime, I noticed you mentioned using code before the content of the page is loaded.

This is also something I'm interested in since I'm planning to restrict access to part of the webpage by a autentification mesage where the user should type in their username and password.

the way I imagined this was that when the user would try to access the first page of the restricted part of the page, a pupul would apear whenre he would be needed to type in his password. if the password is wrong he would be redirected to the last page he was on, if it's corect he can go on. also if he tryes to load a page after the first restricted page like manually typing

site/restricted_page/something.php

he would be redirected to the first restricted page where the login message would happen. jsut to prevent unauthorised access. of course for that a value would probably need to be checked if he HAS entered a corect password so that he won't be redirected even if he did enter it.

this is what I think it should work like, but the first thing that I don't know about this is how to handle the login popup. is there a way to generate one of those standard type messages like alerts or those yes and no messages but with two fields and a submit button on them? or should I relly on making an actual popup page with those fields on it.

I'm thinking that all this should happen before the content of the page loads... so that if it's an unauthorised user, he won't get to see anything.

Any ideas?