In my PHP script, I have a variable that stores the length of an array in arrayLength. I am passing that length to javascript. I will try to keep it simple, but ideally, I am trying to provide each element in the array with it's own dynamic javascript button, each button having its own function. I need to store these strings in an array, because user input prevents me from knowing how many elements there will be, and how many buttons/functions I will need to have. I was previously able to get this working when I just had one button, without an array, but now I am trying to incorporate multiple dynamic buttons on one page, each belonging to a string in the array, and each button having its own function. Is my logic that follows correct? If you could help me, that would be much appreciated.
var arrayLength = "<?php echo $arrayLength; ?>";
var click = {
click_1: function() { }
};
for (var num=2;num<=arrayLength;num++) {
var newClick = "click_" + num;
click[newClick] = function() { // controls what will happen when button is clicked };
}
Apart from the fact that it would be better to provide $arrayLength not as a string, but as an integer, and that your comment cuts off the closing } of your function, your code does work, the mistake must be somewhere else.
I tried it in this fiddle, check the output of console.log(): it returns a nice object with a bunch of empty functions as properties.
Related
I'm working on a project that involves returning the id of the checkboxes chosen as well as the text in the corresponding textarea fields for those chosen checkboxes. The data is dynamically displayed and so far my jquery pull of both the checkboxes and textareas work:
var noteList = $("textarea[name='revokeNotes']").map(function(){
return this.value;
}).get().join();
var revokeList = $("input[name='revoke']:checked").map(function(){
return this.id;
}).get().join();
but I'm getting back all of the notes fields and I'm uncertain how to best iterate through them to find the proper notes as their ids aren't sequential but rather based on their id in the table they are being pulled from. The last version of the display code is below:
<td><textarea name=\"revokeNotes\" id=\"".$v["id"]."\" cols=\"30\"rows=\"3\">".$v["notes"]."</textarea></td>
<td><input type=\"checkbox\" id=\"".$v["id"]."\" name=\"revoke\" value=\"".$v["id"]."\" /></td>
Is there a way to reach my goal from this state or should I be using another jquery function, similar to .map()? I thought about using the id field from the checkboxes to iterate through the selected notes and pushing them into an array but I'm not sure 1) if that will work and 2) how to do that.
I need the data back in some form either an array or something I can explode on in php to create an array as I'm passing one value in ajax as there is no set maximum or minimum number of rows that will be displayed per user. Map was working until I threw some commas at it. Extra points for that.
var noteList = $.map(
$("textarea[name='revokeNotes']").filter(function() {
return $(this).closest('td')
.next('td')
.find('input[type="checkbox"]')
.is(':checked');
}), function(el) {
return el.value;
}).join();
adeneo's answer is great, I'd just propose the following improvements:
If possible use class selectors (like '.revoke-notes-area') since those are faster than DOM + attr selectors
Assuming this is a table and there is one textarea checkbox combo per row, you can traverse the tree to the closest <tr> a decouple the JS from depending that the checkbox comes after the text area in the DOM.
var filterMethod = function() {
$(this).closest('tr').find('.revoke-checkbox').is(':checked');
};
var mapMethod = function(el) {
return el.value;
};
var nodeList = $.map($('.revoke-notes-area').filter(filterMethod), mapMethod);
There's no reason you cannot or should not put the filter and map methods inline, I just split them out into variables so it's easier to read here.
You can check out my codepen here: http://codepen.io/aaron/pen/eIpby.
I am working on a application which can save user-created HTML templates. Here, the user will have some HTML components at his disposal and would be able to create static HTML pages using those components.
I am auto saving the content of the page using a javascript function.
function saveContent(){
//var getContent=$('#mainWrap').children().removeAttr('id');
var $getContent=$('#mainWrap');
var $finalContent=$getContent.children().removeAttr('id');
var auto="auto";
var pageId = <?php echo $pageId;?>;
var webId = <?php echo $webId;?>;
var userId = <?php echo $userId;?>;
$.ajax({
url:"auto_save.php",
type:"POST",
dataType:"text",
data:"txtComp="+$('#mainWrap').html()+"&auto="+auto+"&pageId="+pageId+"&webId="+webId+"&userId="+userId
});
}
var interval = 1000 * 60 * 0.30; // where X is your every X minutes
setInterval(saveContent,interval);
Issue: I want to to remove the IDs from the HTML components that the user saves, because the IDs are auto generated and not needed when the user publishes the template (on his domain after creation). I have a main wrapper that wraps the entire page called id=mainWrap. If I try to remove the IDs like this $('#mainWrap').children().removeAttr('id'); they are also removed from the current context of the DOM, i.e they are removed from the page where the user is editing his template.
Question: How can I remove the IDs from the HTML elements without affecting the current context of the mainWrap object?
I tried assigning it to another object like this
var $getContent=$('#mainWrap');
var $finalContent=$getContent.children().removeAttr('id');
but still it failed.
Any comments or corrections on whether this is possible? Or am I going about this the wrong way?
Update : The issue is solved to some extent.
Next I want to add the id's back when the user comes back to the edit page.
I get the above saved content using this code
<?php
$sqlEdit = "select revisionContent from tbl_revision where revisionId='".$_SESSION['contentId']."'"; //The query to get the record
$rsEdit = $dbObj->tep_db_query($sqlEdit);//The database object to execute the query
$resEdit = $dbObj->getRecord($rsEdit);
$IdLessContent = $resEdit['revisionContent'];//Variable with the record
?>
Now,I want to use this PHP variable in javascript,so I did this.
<script language="javascript">
var getSavedContent = '<?php echo json_encode($IdLessContent); ?>';
var trimmedCont=($.trim(getSavedContent).slice(1));
//console.log(trimmedCont);
var lengthCont= trimmedCont.length;
var trimmedCont=$.trim(trimmedCont.slice(0,lengthCont-1));
var pageContent=$('<div class="addId">').append(trimmedCont); //Here I tried creating a div dynamically and appending the content to the div.But now I am not able to manipulate or work on this dyamic div and get NULL when I alert saying $('.addId').html();
$('.addId').children().attr('id', 'test'); //I tried doing this but does not work
This is not working.Can you throw some light on it
You can just cycle through the elements in your #mainWrap and remove the id like:
var getContent = $('#mainWrap');
var finalContent = getContent.parent().clone().find('*').removeAttr('id');
Example: http://jsfiddle.net/7m8g4/6/
Security wise you should realize this is a client-side script that is removing the id attributes from the html. There are ways though to manipulate the JavaScript or to bypass it by (for instance) calling the URL in your Ajax request directly with false data.
So you should never rely on your JavaScript only. Make sure your code will not cause problems if for any reason the JavaScript doesn't act as expected. You can do this for instance by searching for id attributes (use a regex) and generate an error message in case there are still some id attributes found. Another way would be to remove them server-side (in PHP) as well if any are found. To achieve this you could do a regex search and replace the matches with empty strings or by making use of substrings. Up to you!
Hope it all makes sense!
EDIT
If you want to add new id attributes back later on you can do something like:
var newContent = $(finalContent).first().wrap('<div class="addId" />');
newContent = $(newContent).parent().find('*').each(function(index, value) {
$(this).attr('id', index);
});
See that in work here.
Hi I'm trying to create a form that is pre-populated partially by form on the page before. This information is then posted to this new page which is then populated into the form on that page ready to be submitted to a database.
I'm not a developer so I'm a little out of my depth here but this is what I've got so far..
<?php
$amount = $_GET['text-386'];
$covermultiple = $_GET['radio-30'];
$coverdobd = $_GET['d-o-b-d'];
$coverdobm = $_GET['d-o-b-m'];
$coverdoby = $_GET['d-o-b-y'];
?>
<script type="text/javascript">
document.getElementById('text-386').value = "<?=$amount ?>";
document.getElementByName('radio-30').checked = "checked";
document.getElementById('d-o-b-d').value = "<?=$coverdobd ?>";
document.getElementById('d-o-b-m').value = "<?=$coverdobm ?>";
document.getElementById('d-o-b-y').value = "<?=$coverdoby ?>";
</script>
I'm getting the values out of the URL ok and can echo these out on the page fine, I've even managed to get text-386 appearing in the right place.. so thats one down! The problem is the other elements are a radio button with two options (radio-30) and a 3 select boxes with the days, months and year of a persons d-o-b. These two bits are populating.
So in a nutshell..
How can I use javascript (if that is the right way) alongside php to populate the radio and select tags on this form using information in the url? In a preferably straight forward way as possible?
The url if it helps is..
http://localhost/datacapture/form-page/radio-30=Just+for+me&text-386=%C2%A340%2C000&d-o-b-d=11&d-o-b-m=05&d-o-b-y=1977
Thats obviously on the local build I'm using so that URL wouldn't work for you. I can see when googling lots of help posting information using radio/select etc but I want the opposite, how do you populate these from a url?
Any help would be a lifesaver
I would just use an if statement.
if( $covermultiple == "Just for me" ) {
// Echo the field here
echo "<input type='radio' name='radio-30' value='Just for me' checked />";
}
else {
// Check for the next case
}
Put this block right where you want the radio buttons to be.
I think something like that will work fine. I don't think you really need javascript in this case unless you really want to use it.
Im not 100% I have an answer, but I cant find comment anywhere so I will joust post here.
You cant access PHP variables from Javascript. PHP is running on the server, and Javascript is inside users browser.
Javascript cant get $_GET and $_POST variables like PHP.
Now what you can do is this, with JavaScript you can get document.location string that holds your current URL. And you can brake that URL into parts. To do that use this function:
<script>
var $_GET = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
function decode(s) {
return decodeURIComponent(s.split("+").join(" "));
}
$_GET[decode(arguments[1])] = decode(arguments[2]);
});
alert($_GET['someVar']); // This will alert content of someVar
Now you can use $_GET['vars'] to get your URL vars.
And then you dont use PHP to echo variable content, you joust prepare your URL so it holds variables you want to insert into your form.
So you do something like this:
<script type="text/javascript">
document.getElementById('text-386').value = $_GET['urlVar'];
document.getElementByName('radio-30').checked = "checked";
document.getElementById('d-o-b-d').value = $_GET['urlVar'];
document.getElementById('d-o-b-m').value = $_GET['urlVar'];
document.getElementById('d-o-b-y').value = $_GET['urlVar'];
</script>
So as you can see, JavaScript takes variables from URL, using function $_GET you wrote and it dosent needs PHP. And you can use PHP to generate URLs you need, so they contain variables you can get using $_GET javascript function.
Hope this answers your question.
Hi all got a small problem accessing a looped php variable. My script loops through and uses x and y from a mysql database. It also loops the id out which I cannot get access to, it comes up as undefined. I am using a mouse out function to detect each separate div that has been looped and get specific id.
Help very much appreciated!
Javascript to get attributes ready for database manipulation:
$(this).mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');//alerted out returns undefined.
});
Looped PHP to get attr form:
$get_textsticky_result=mysql_query($get_textsticky_query);
while($row=mysql_fetch_assoc($get_textsticky_result)){
$x = $row['textsticky_x'];
$y = $row['textsticky_y'];
echo '<div class="textsticky" style="position: absolute; left:'.$x.'px; top:'.$y.'px;" textstickyid="'.$row['textsticky_id'].'">
<div class="textstickyvalueholder"contentEditable="true">'. $row['textsticky_text'] .'
</div><button>Like</button></div>';
}
?>
Can get other looped vars e.g. $row['textsticky_text']; and x and y for position without issue, Is there a better way to do this? I have a feeling the inline style is affecting it but not sure....
Okay, I am just going to go out on a limb here and assume your initial selector is incorrect. $(this) is the window in typical code flow.
$(this).mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');//alerted out returns undefined.
});
Should be:
$('div.textsticky').mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');//alerted out returns undefined.
});
Also, as Kris mentioned in comments, instead of inventing tags use the data attribute which is a part of html5.
<div class="textsticky" data-textstickyid="blah" />
It can then be accessed via jQuery's data method.
http://jsfiddle.net/kQeaf/
And as long as we are offering advice, if you are in jQuery 1.7+ you should be using prop instead of attr for accessing properties (unless of course you decide to use the data method) just recommended.
Your selector on the mouseout event may be wrong: (depending on the context)
$(".textsticky").mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');
});
How to get an array of all checkboxes selected on the page, and then passing it to the next page (in this case php, so it can be picked up by php _POST function). I have come up with this :
<script type="text/javascript">
var selected = new Array();
$(document).ready(function() {
$("input:checkbox:checked").each(function() {
selected.push($(this).val());
});
$('#od').submit(function() {
alert(this.selected); // *See note below
$.post('receiver.php', {'registration': selected});
return false;
});
});
</script>
But is does not seem to work :( It returns null, as if no checkboxes would have been added to the array, or maybe the post function is wrong. Can you point me in the right direction here?
I've found the following of issues:
You read the checked items on page load, thus ignoring all changes made by the user. Move that code to the submit() handler.
Your debugging code (alert(this.selected)) tries to display the value of the selected property for the form node. It isn't a reference to your JavaScript global variable selected. I suggest you use a proper debugging tool such as Firebug; alerts are highly unsuitable.
You sucessfully send the values of checked items. You just ignore the field name and rename everything to registration. That looks intended, otherwise report back:
{'registration': selected}
I suppose you can make jQuery serialize the values for you but fixing these little details in your code should do the trick anyway.
I think $("input:checkbox:checked") should be `$("input[type="checkbox"]:checked")
Or simply: $('input:checked', '#form-container');
$('#od').submit(function() {
var selected = $('input[type="checkbox"]:checked').toArray();
$.post('receiver.php', {'registration': selected});
return false;
});
The Data being posted might need to be split up.....