I have a function in Javascript & jQuery .
dynamic_link = $j('#dynamic_link_add_btn').parent().parent().parent().parent()
.children('tbody').html();
function add_tier (t,html_handle){
alert(html_handle);
$j(t).parent().parent().parent().parent()
.children('tbody').append(html_handle);
}
It is called by onclick="add_tier(this,dynamic_link)":
<td class="a-right" colspan="4">
<button class="scalable add" type="button" id="dynamic_link_add_btn" onclick="add_tier(this,dynamic_link)">
<span>Add Extra Links</span>
</button>
</td>
What is it?
Handles dynamic form fields (appending HTML, to be more precise).
How should it work?
It should add the HTML it gets from the dynamic_link variable to the designated place.
It works fine with other rows.
Rows have multiple input boxes and checkboxes.
What it does right now?
The alert gives out [object NodeList].
What I have tried till now?
Iterated the NodeList. It doesn't return the HTML (I am not sure that it even does that task).
NOTE: The form is really a big one. There are many dynamic_link type variables which stores HTML. I have also compared character by character between the working and the not working LOC.
Edit: $j is just the $ of jQuery. It's been defined with jQuery.noConflict.
first of all you can use jQuery instaed of $j . that way you don't need to add jQuery.noConflict
then another point
instead of using
dynamic_link = $j('#dynamic_link_add_btn').parent().parent().parent().parent().children('tbody').html();
very easily you can use
dynamic_link = jQuery('#dynamic_link_add_btn').parents('.class_name').children('tbody').html();
class_name is the class name of your parent element that you want to select.
then you can try
jQuery('#dynamic_link_add_btn').live('click',function(){
var dynamic_link = jQuery(this).parents('.class_name').children('tbody').html();
alert(dynamic_link);
jQuery(this).parents('.class_name').children('tbody').append(dynamic_link);
});
to give a specific solution , you should post your HTML
Related
I'm using Javascript to create more form fields, to be more specific I'm using jQuery append() to create copies of form fields I already have when a button is pressed.
For example there is an exercise form field, then when someone presses the + button they get another form field to add a second exercise. Now I have to get all these exercises into a PHP file, with no limit so someone could add a 1000 exercises and they would all get sent to my PHP.
I have it setup so jQuery gives them all a name tag with exercisex, the 2nd x being the number of the form field, so the original is exercise1, the second one exercise2, etc.
Now I submit the form and it gets send to another file, submitted.php.
In this file I have it setup for the original form field like this:
$exercise1 = $_POST['exercise1'];
and to put it in an array
$arrExercise = array (
>"exercise1" => $exercise1 );
What I'm looking is for a way that PHP automatically adds this:
$exercise2 = $_POST['exercise2'];
$exercise3 = $_POST['exercise3'];
and adds to the array
"exercise2" => $exercise2
"exercise3" => $exercise3
etc. for all the numbers ofcourse
Now obviously I can't add a unlimited amount into this myself so I was wondering how to get PHP to add them automatically according to how many were added.
I see the obvious risk that someone could spam it by adding a million exercises but that's not a concern for the environment this will be used in.
I tried a for loop but got stuck eventually:
I don't remember the exact code but I tried to add a variable, lets call it n, this variable would get a +1 everytime I pressed the + button so if n=1 at the start, pressing the button once makes it 2, then 3, then 4 etc. and then I got stuck thinking I'd still need to add an infinite amount of
$exercise + n = $_POST['exercise' + n];
if that would even work anyways.
Thanks for any help in advance.
I just solved a similar issue yesterday - here's how.....
The 'key' is to get the form names setup before sending to PHP.
(as you didn't give examples of your form, I will use mine for example - easy enough to port over to your project)
In my project, the user is allowed to add custom menu (nav bar) items as well as links under it, etc.
The way I solved it was to name things where PHP would get a nicely formed array in the $_POST;
<input type="text" name="menu1[Name]" value="">
<input required type="text" name="menu1[data][1][text]" value="">
<input required type="text" name="menu1[data][1][link]" value="">
'rinse/repeat' for all the form values that get added (replacing the '1' in the name with your variable) - you would also replace all 'menu1' with your 'exerciseX'
Now, put a 'Submit' button on the page;
<button type="button" id="custommenusave">Save Changes</button>
A bit of jQuery makes simple work of it....
$("#custommenusave").click(function () {
update_custom_menus();
});
function update_custom_menus() {
var form = $("#form_custom_menus");
$.post("../data/ajax.php", 'function=set_custom_menu&' + form.serialize(), function (data) {
form.submit();
});
}
PHP gets a nice array to work with (I've done a json_encode to make it simpler to see....)
{"menu1":{"Name":"'my menu #1'","data":{"1":{"text":"first","link":"https:\/\/example.com","options":"tab"},"2":{"text":"the second link","link":"http:\/\/example2.com","options":"tab"}}},"menu2":{"Name":"'menu #2!!!!'","data":{"1":{"text":"link in menu #2","link":"https:\/\/example.com","options":"tab"}}}
Then, pull your user's answers and work with them (of course, you should clean any data that comes from a user - no matter how much you 'trust' them!)
This should give you an idea of at least one way (with working code) that you can go.
name of your input should be an array so you can add multiple inputs by same name
<input required type="text" name="exercise[]">
$count = 1;
$finalArray = array();
if(is_array($_POST) && count($_POST) > 0){
foreach ($_POST as $value) {
$finalArray['exercise'.$count] = $value;
$count++;
}
}
print_r($finalArray);
Overview:
I am creating a dynamic web invoicing system,
Most of the page are textareas and I have used tables to nest as they will post data into seperate tables after the form is submitted. When the "Nested" Add a Row is selected, it should add a row inside with form field that has details on which row and which position so it can be gathered in a for loop when it is posted.
Image:
Problem:
Adding a row in the circled area does not add it in the last row, It add's it as it is in the image. Additionally it only works on the first item, the second add a row does not even register a click.
I am unsure how to get the variables to create the form name[][] in this particular index size and the parents index number (located in javascript line 2-3)
Relevent Code:
Javascript
$("#additemrow").click(function(){
var currentListItem = $(this).length;
var currentJobItem = $(this).parents('#items').index('#items');
currentListItem++;
$("#listitem:last").after(/*Blank Form Row*/);
bind();
})
PHP
<table id="items">
<tr class="item-row"><td>/*form elements*/</td></tr>
<tr class="list-row">
<td colspan=5>
<table class="itemlist">
<?php
$itemCount = 0;
foreach($jobListItem as $items) {
foreach($items as $item) {
if($problem['item_id'] == $item['item_id']) {
?>
<tr id="listitem">
<td class="list-item">
<div class="delete-wpr">
<textarea class="item" name="item[/*A PARENT ITEM NUMBER*/][<?php echo $itemCount;?>][item]"></textarea>
<a class="deleteitem" href="javascript:;" title="Remove row">X</a>
</div>
</td>
</tr>
<?php
}
$itemCount++;
}
}
?>
<tr>
<td colspan="5"><a id="additemrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
</table>
//NEXT ITEMLIST GOES HERE
</table>
EDIT: Foreach Loop is just used to get variables from a array.
Please let me know if you need more details or bits of code as im not sure if I have given enough information.
Regarding the problem where your row gets insertet at the top:
Like Bertrand Lefort already said: in JQuery you can append nodes to the end of another (parent) node by calling parent_node.append(child_node) (more information here)
You can also add elements before/after another element by calling another_element.before(element) / another_element.after(element) or (be aware of reversed syntax!) element.insertBefore(another_element) / element.insertAfter(another_element)
Regarding the problem where only the first "add a row" registers a click:
You're selecting by id. Id's are (or should be) unique, so when you call $("#additemrow").click(function(){ ... }) the onClick-function will only be attached to the first element that matches the given id (as far as I remember).
If you want to attach the same onClick-function to multiple elements use class instead. However, if you do so, you got to make sure you insert the new element relative to the clicked element (eg. by using .parent(), .siblings() or similar functions).
Regarding your problem #2, I don't really know what you're trying to do, but this is what I noticed:
currentListItem and currentJobItem seem to be unused in their scope, since you are declaring them as local variables but not using them
.parents('#items').index('#items') is redundant because .parents('#items') already selects only the parent elements that match '#items'. If you want to get the index of the matched element, use index() (without parameters, see jquery API for more)
Some other notes:
If you have the time (and the need of a clean project) I recommend using template engines like Smarty to separate your logic from the output. This improves the readability of your code and also makes it easier to find/eliminate bugs.
I hope this helped a little bit. If you provide more information on what you're trying to do and what doesn't work as you expext, I will try to provide further help and update my answer.
You could add an id to the parent html element, then in your click handler:
$("#additemrow").click(function(){
$("#parent").append(/*Blank Form Row*/);
})
Specific questions are at the end of this (very long) pre-amble. Sorry, I tried to make it as short as poss. (took over an hour to write the question).
A .php file uses a (php) function to read rows in a SQL db and dynamically create an HTML table.
For each row, the SQL data is returned via $book['id'], $book['code'], $book['description'], etc.
The $book['code'] is a two-char alpha-numeric ID, eg. B7 or DW
In the HTML for each row is a <td></td> containing an anchor tag with an onclick= event that runs a JQuery script (to show/hide elements for that row).
Suppose a couple or rows were clicked and a couple of elements were hidden by the embedded JQuery script (which is working correctly, by the way)
When the user views a different page and then returns to this one, hidden elements (that were hidden by the JQuery script) are no longer hidden.
I wish to preserve a string of $book['code'] values for each clicked row an d, upon return to the first page, parse that string to reset the hidden elements.
<?php
function render_row_from_mysql() {
$output .= '
...create header row...
foreach ($books as $book)
{
create table row cells 1, 2, 3, 4
after cell 4:
<td>
<a id="addToShelf.php" onclick="
jQuery.ajax(\'./addToShelf.php?id='.$book['id'].'ats'.'\');
jQuery(addToShelfLink'.$book['id'].')[0].style.display = \'none\';
jQuery(rfs'.$book['id'].')[0].style.display = \'block\';
jQuery(mt'.$book['id'].')[0].style.display = \'none\';
jQuery(grn'.$book['id'].')[0].style.display = \'block\';
return false;
">
add to bookshelf
</a>
</td></tr>' ;
}
}
Questions:
Why doesn't the JQuery code above, which works correctly, need closing parentheses?
What is the syntax for creating/updating a var, in the anchor tag, that would preserve the cumulative clicked-row data? I ask because my many attempts all break the code.
Should the var be initialized at the top of the function, before the foreach loop?
I tried using PHP to create/update a cookie by inserting the following code after "return false;" (see below). The below php code does create a cookie when pasted into a separate script for testing.) The php code does not fire. Why?
The answers are:
1) Still not sure, just syntax.
2) As mentioned in Q4, I had been entering code AFTER the "return false;" statement, which is what concludes the onclick event. Therefore, any code placed after "return false;" would not fire as part of the onclick event... and there was nothing else to MAKE it fire.
3) Irrelevant
4a.) The above code is created within a PHP code block -- one cannot create a PHP code block inside JQuery inside HTML that is being created by (i.e. already inside) PHP.
4b.) Further to answer (2), my alert() tests would not fire because they followed the "return false;" statement,
4c.) Any new PHP code must be moved out of the HTML and placed back with the rest of the PHP, such as above the function(render_row_from_mysql){}.
It is now "back to the drawing board" to figure out how to preserve the "clicked items" data between when a user leaves this page and when he returns back to it. At this time, I suspect that will be some kind of a FORM $POST event, but having never done one before I'm not sure what that will look like.
I completely agree with Bjorn comment from 22 minutes ago. You need to remove all that onclick code and add a identifying class to your anchor tags. You sure also make sure that each HTML element has a unique id, it is a W3C validation requirement. If each book's id is unique system wide I would use that, see Example below:
<?php
function render_row_from_mysql() {
$output .= '
foreach ($books as $book)
{
//create table row cells 1, 2, 3, 4
//after cell 4:
<td>
<a id="'.$book['id'].'" class="addToShelf">
add to bookshelf
</a>
</td></tr>' ;
}
}
Add this javascript code to the bottom of your HTML code.
jQuery(document).ready(function($) {
// bind event to all anchor tags with class addToShelf
$('a.addToShelf').click(function() {
var book_id = this.id;
$.ajax('addToShelf.php?id='+book_id, function() {
// execute code after the ajax request is complete...
$('addToShelfLink'+book_id).hide();
$('rfs'+book_id).show();
$('mt'+book_id).hide();
$('grn'+book_id).show();
});
return false;
});
});
In PHP, in a particular CMS I am using a custom field, which works like google suggest.
As in, for each letter I type an SQL query is performed and matching records are displayed. When clicking on a record it fills the field with that record.
I am fairly certain this is all done with JavaScript.
I need to know how I can access the resultant content of that field, with the text placed through JS, before it is submitted so I can explode() it.
The CMS I am using is using mootools, so a solution relying on mootools would be ideal.
(This answer assumes that you have control over the markup of your forms (the form that requires a string "explosion" before submit) and/or you feel comfortable tinkering with whatever plugins you're using.)
first, make sure that you aren't submitting your form using an actual submit button (). We'll need to submit the form using javascript after fiddling with the field's contents.
next, make sure that your input box (the one you're grabbing text from) and your hidden inputs have unique ids. This will make it easier to query the DOM for the data we need.
Inside your form, in place of a "real" submit button, create a form button:
<form action="something.php" name="myform">
<input type="hidden" id="hiddenItem">
// SOME STUFF
<input type="text" id="autocomplete_field" value="whatever"/>
// SOME OTHER STUFF
<input type="button" value="Submit" onclick="processForm(this)"/>
</form>
Then, write a javascript function to process the string and submit the form:
processForm = function(el){
text = $('autocomplete_field').get('value');
// Lets assume the strings separates words (what you're exploding apart) using spaces
// something like 'DOGS CATS BIRDS PETS'
var array = text.split(' ');
// returns ['DOGS','CATS','BIRDS','PETS']
$('hiddenItem').set('value',array[0]);
// #hiddenItem now has the value 'dogs'
//SUBMIT THE FORM
el.getParent('form').submit();
};
Hope this helps!
You could try to use JS to send the field on some event (onkeyup?) to your php script. After it does it's part, store the result as a session variable and you can retrieve that later.
Try using jquery's get function.
Was that your question?
Here's the issue I'm running into. I have a list of names, if a name is clicked on, I need jQuery to pass the variable to another page.
This is what I have, but of course it only pulls the first name.
$('.nameLink').live('click', function() {
var coachName = $('.coachName').val();
$('#grayBorder').load('/team.php?coachName='+coachName);
});
And the php code that generates the coaches names:
while($row=mysql_fetch_assoc($query)){
echo '<a class="nameLink">
<input type="hidden" class="coachName" value="'.$row['coach'].'" />
'.$row['coach'].'
</a>';
}
Is there anyway to write this so that it will get the correct name?
Instead of $('.coachName') you should have $('.coachName', this)
Currently, you are searching the entire page for elements with class coachName, but you really only want to find element below the clicked element. By passing the jQuery function a context (in your case this), you tell it only to search within this scope.
Try:
var coachName = $(this).children('.coachName').val();