Geriatrixs studip questions thread

[Geriatrix]

This thread is for my clueless questions.
I'm learning webdev on my own and don't have any friends doing web development so I'm going to rely on you guys.

Yes I know Google exists for all kinds of questions but I found that asking actual people results in clearer answers with better followup question potential.

If some other newb has some stupid webdev related question feel free to dumb it here as well.

 

[Geriatrix]

Question;
So I've figured out how to use OOP structures to built a nice framework in php and modulize a lot of code to keep my site small and agile.
How does this affect search engine crawlers though? Does the Google spider parse php for page rank information or does it only look for standard html?(Yes I know about sitemap, I'm just being anal)

 

[midrange]

The spiders will click through your links and index them. Could use .htacess to make the urls more search engine friendly. (Don't use links (GET) to perform CRUD actions, else the bots may be deleting/updating data in your database)

 

[Raithlin]

Question;
So I've figured out how to use OOP structures to built a nice framework in php and modulize a lot of code to keep my site small and agile.
How does this affect search engine crawlers though? Does the Google spider parse php for page rank information or does it only look for standard html?(Yes I know about sitemap, I'm just being anal)

Google only sees the resulting HTML - not the actual server-side PHP.

 

[Geriatrix]

The spiders will click through your links and index them. Could use .htacess to make the urls more search engine friendly. (Don't use links (GET) to perform CRUD actions, else the bots may be deleting/updating data in your database)

Thanks for the GET bit. I don't use it like that but good to know for future reference.

:edit nevermind, Raithlin answered my question

 

[Geriatrix]

Google only sees the resulting HTML - not the actual server-side PHP.

Ah ok. Thanks.

 

[Raithlin]

The spiders will click through your links and index them. Could use .htacess to make the urls more search engine friendly. (Don't use links (GET) to perform CRUD actions, else the bots may be deleting/updating data in your database)

Unless you use your robots.txt to tell the robots not to index those links.

Thanks for the GET bit. I don't use it like that good to know for future reference.

Regarding the links, can the spiders crawl php generate links?

Yes.

 

[Geriatrix]

Next Question:
Jquery.
So I've got some elements and some textfields in a <div> that I want to get filled out and send to another <div>.
So I use $('.div').html() to get the contents of the original <div> but when its sent to the new <div> the textfields are empty. How can I get the filled in values to propagate too?

 

[Raithlin]

Next Question:
Jquery.
So I've got some elements and some textfields in a <div> that I want to get filled out and send to another <div>.
So I use $('.div').html() to get the contents of the original <div> but when its sent to the new <div> the textfields are empty. How can I get the filled in values to propagate too?

Wait, what? :wtf:

 

[Geriatrix]

Wait, what? :wtf:

Lol ok.
I have <div class='div'><input type='textfield' /></div>
Someones fills in the textfield

Then I want to send that input field with the filled in value to
<div class='new_dif'></div>

$('.div').html() fetches and writes the <input type='textfield'> to the new <div>but the text field is empty.

 

[murraybiscuit]

use val() not html()
why would you want to duplicate a value to another field via js?
if you're wanting to figure out the jquery api, it's a good idea to download the chm if you haven't already.
http://docs.jquery.com/Alternative_Resources

 

[Raithlin]

why would you want to duplicate a value to another field via js?

That's what I was trying to figure out.

if you're wanting to figure out the jquery api, it's a good idea to download the chm if you haven't already.
http://docs.jquery.com/Alternative_Resources

http://visualjquery.com is also an awesome resource. There is also an AIR app somewhere (search for jquery-api-browser) that does a nice job of bringing the API (with descriptions) to your desktop.

[EDIT]
This app is more up-to-date (1.4.2): http://demos.erikzaadi.com/js/jQAPI/

 

[Geriatrix]

use val() not html()
why would you want to duplicate a value to another field via js?
if you're wanting to figure out the jquery api, it's a good idea to download the chm if you haven't already.
http://docs.jquery.com/Alternative_Resources

val() only gets the value, not the entire html code in a div.

Ok, I'll try and explain what I want to achieve.

I have a form that contains textfields, radio buttons and such.
In one part of the form, I want to create a series of say 4 text inputs on top of each other. When the last one gets filled in a new one empty should be added underneath it, in case someone wants to add more information.

My problem is this, how do I add a new textfield in this manner?
Javascripts document.write() clears the whole page so I figured I'd need to get the whole form in a variable, add the new textfield to the variable and finally write the variable with the new text field out again with document.write().

Now to get the whole form (or in my case the <div> the form is in) into the variable I tried to use $('the divs class name').html(), which works fine except that I lose all the filled in information.

So I have no production experience and I'm sure I'm missing something basic so please help a fool out.

 

[Raithlin]

Very simply put...

var newField = "<input type='textfield' />";
$("#new_dif").append(newField);

 

[Geriatrix]

Very simply put...

var newField = "<input type='textfield' />";
$("#new_dif").append(newField);

Thanks!
I came across append this morning but haven't had time to try that yet.
I'm sure that'll solve it.

But still, I'm curious, would it be doable to load a whole form with filled in values into a var?

 

[murraybiscuit]

it's not really as simple as just adding an element.
ideally, you want to bind it to the blur event on the last field, clone it (so that you don't need to update code in two places if you change your markup) and then remove the event from the original field so that it doesn't duplicate again. otherwise if you add another ten fields and go back to edit any of the previous fields, it will add empty fields in the middle of everything else.

	$('#divid').find("input[type='text']").last().bind('blur',function(){ //or change your find() selector to a class rather
		$(this).clone(true).val('').appendTo($(this).parent()).prev().unbind(); // or omit the val('') if you want to retain the original field's value
	});

you'd also want to name the fields "varname[]" in order to populate an array for postback.

 

[Geriatrix]

it's not really as simple as just adding an element.
ideally, you want to bind it to the blur event on the last field, clone it (so that you don't need to update code in two places if you change your markup) and then remove the event from the original field so that it doesn't duplicate again. otherwise if you add another ten fields and go back to edit any of the previous fields, it will add empty fields in the middle of everything else.

	$('#divid').find("input[type='text']").last().bind('blur',function(){ //or change your find() selector to a class rather
		$(this).clone(true).val('').appendTo($(this).parent()).prev().unbind(); // or omit the val('') if you want to retain the original field's value
	});

you'd also want to name the fields "varname[]" in order to populate an array for postback.

Cool thanks. I'm going to try it on the focus event though, I think it would make it clearer for the user to understand how the input system works. I suppose I can use a blur event to add something that deletes a field if empty too, but only if its not the last one.

Regarding your varname comment, do you mean this part? <input type='textfield' name='something' />

 

[Raithlin]

It's certainly quicker than manipulating the DOM. Much quicker. How you create the string is up to you though. I'll try to find some samples on how best to go about it.

//rummages through archives, bookmarks...

 

[Raithlin]

ideally, you want to bind it to the blur event on the last field, clone it (so that you don't need to update code in two places if you change your markup) and then remove the event from the original field so that it doesn't duplicate again. otherwise if you add another ten fields and go back to edit any of the previous fields, it will add empty fields in the middle of everything else.

	$('#divid').find("input[type='text']").last().bind('blur',function(){ //or change your find() selector to a class rather
		$(this).clone(true).val('').appendTo($(this).parent()).prev().unbind(); // or omit the val('') if you want to retain the original field's value
	});

you'd also want to name the fields "varname[]" in order to populate an array for postback.

Wouldn't the .live() binding function automatically update the binding? As in

$("#divid").children(".varname:last").live("blur", function() { $("#newid").append("<input id='varname'/>"); });

[EDIT]
I found this complete example that details adding upload fields dynamically, but you can easily change it for your own use.

 

[murraybiscuit]

Wouldn't the .live() binding function automatically update the binding? As in

$("#divid").children(".varname:last").live("blur", function() { $("#newid").append("<input id='varname'/>"); });

your example doesn't seem to work with live(). it does with bind(), but you'd still need to unbind the previous element's event.
it might make more sense to bind it to the focus event, like geriatrix says, and then kill the additional field on blur if the focused one is empty.
but that's starting to get pretty complicated.