I have a function below where the if statement works when it comes to adding content into a single textarea when clicking the "Add" button:
function addwindow(questionText) {
if(window.console) console.log();
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainTextarea').val(questionText);
} else {
$(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(questionText);
}
$.modal.close();
return false;
}
The problem is the else statement is not working when it comes to adding content within one of the appended textareas. What I want is that if a user clicks on a Plus button and adds a content by clicking on the "Add" button, the textarea which belongs in the same row as the plus button which was clicked on will add the content. What do I need to change in order to do this?
Below is the code whch shows the textareas and plus buttons which are appended:
var plusbutton_clicked;
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$question.append($questionText);
});
$('.plusimage').each( function() {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
}
Below is the php code where it displays the "QuestionContent" and "Add" button for each row. When user clicks on the "Add" button it adds the "QuestionContent" into the single textarea on top but not in the multiple textareas which are appended.
<?php
$output = "";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
<tr>
<td class='addtd'><button type='button' class='add' onclick='parent.addwindow();'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
?>
You can view application here. Please follow the steps to use the application:
Click on "Add Question" button, then will add a textarea within a new row.
Click on the "Green Plus" button within the table row you just added, a modal window will appear.
In modal window it displays a search bar, in search bar type in "AAA" and click on "Search" button
Results will appear of your search, click on "Add" button to add a row. You will find out modal window is closed but the content from the "Question" field is not added in the textarea within the row you clicked on the green plus button
If you did the steps in the top textarea (the one above the horizontal line), then it does work, it just doesn't work for textarea which you have just added
One of your errors:
$('.plusimage').live('click', function() {
plusbutton($(this));
});
You're using jQuery 1.7 in your page, the .live method has been deprecated since jQuery 1.7. You should use .on instead.
You're also triggering your plusbutton function in your generated links:
<a value="" name="plusbuttonrow[]" onclick="return plusbutton();">
Which isn't passing any element as parameter to your plusbutton function be stored in your global var plusbutton_clicked which you are expecting. There's no reference to the clicked element then, therefore it doesn't find any element when you use the plusbutton_clicked var in the addwindow function.
Either keep the .on method or the onclick calls above to prevent the function from being fired twice.
There might be other errors as well (e.g. You're checking for id attributes which do not exist for the dynamically generated elements), but this is the main one. Also, I wonder if you don't have any deadline to finish this, it's the 10th time I see this question in the previous 3 weeks.. At least you made some progress, congratz.
Related
I have fetched the values(card details) from an array and put them in an html table, I have also added the delete button for deleting the particular card.
I am deleting this through ajax. When i click on the delete button of the first row, it works perfect but when i click on the other delete buttons from 2nd or 3rd row, there is no action.
Please suggest the correct path to sort out this problem.
Thanks in advance
Here is my code
<tr>
<td><?php echo $val['last4'];?></td>
<td><?php echo $val['exp_month'];?></td>
<td><?php echo $val['exp_year'];?></td>
<td><button id = "del">Delete</button></td>
</tr>
Ajax part
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('#del').click(function() {
//var a=document.getElementById("").value;
var val0 = $('#id').val();
var val01 = $('#cust').val();
var fade = document.getElementById("fade");
var show = function(){
fade.style.display = "block";
}
show();
$.ajax({
type: 'POST',
url: 'mywebsite.com/deleting.php',
data: { card_id: val0,cust_id: val01 },
success: function(response) {
fade.style.display = "none";
// alert(response);
mystring = response.replace(/^\s+|\s+$/g, "");
$('#result11').html(mystring);
}
});
});
</script>
You have the same id on your buttons. Id's must be unique within the html document and can not be shared between multiple elements. Read more about the html id attribute
Change the button to use a class instead:
<td><button class="del">Delete</button></td>
Then change your jQuery to bind to that class instead:
$('.del').click(function(e) {
// Since we're using ajax for this, stop the default behaviour of the button
e.preventDefault();
// Get the value from the clicked button
var val0 = $(this).val();
I also added the event e in the function call, and stopped the default behaviour of the button (which is to submit the form) when it's clicked.
You need to give delete buttons a class and bind event on that class not with id. Then on bind function select values from that row elements and then pass them to Ajax.
I have jQuery code that works beautifully for clicking a row in a table that exists at page-load and getting redirected to a new page:
$(document).ready(function() {
$("#myTable").on('click','tr',function() {
var href = $(this).find("a").attr("href");
if(href)
{ window.location = href; }
});
});
I have a second table that gets generated by a jQuery POST and is added dynamically and I know it works because I can alert() myself when I click on a row of a dynamically-created table:
$(document).on('click', '#myDynamicTable tr', function(e) {
var href = $(this).find("a").attr("href");
alert(href);
});
Obviously, href is undefined. So what code can I use to replace the alert() line with an actual redirect to the link that's in that particular TR?
Update with HTML code:
A sample HTML code that is returned via POST to the main page where the user clicks TRs:
<table id='myDynamicTable' border="1" cellspacing="0" cellpadding="10">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
Again, the only difference between this dysfunctional table row clicking and other tables on the same page is the fact that myDynamicTable is generated dynamically via jQuery based on a search string put into an input type="Text" by the user.
If you just want to change the browser URL, just set window.location:
Presumably your have anchors inside TDs inside your TRs (you should show sample HTML too).
$(document).on('click', '#myDynamicTable tr', function(e) {
var href = $(this).find("a").attr("href");
window.location = href;
});
Technically you are meant to set window.location.href, but all browsers allow the shortcut. Javascript: Setting location.href versus location
User This
<table id='myDynamicTable'>
<tr>
<td>
redirect to
</td>
</tr>
your jquery code is true
$(document).on('click', '#myDynamicTable tr', function(e) {
var href = $(this).find("a").attr("href");
window.location=href;
});
I have an html form with radio buttons. Each button has the following onclick command.
onclick='position(); this.form.submit();'
position is a function that is defined in a js functions sheet included via php at the top of the page.
function position(){
var p = $(document).scrollTop();
var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "scroll";
hidden.value = p;
var f = document.getElementById("quiz");
f.appendChild(hidden);
}
The position function passes along the scroll position to a page that process the form and then returns the user to the part of the page they last visited.
The first time the page loads the position function does not get written. (looking at source code through browser).
onclick='this.form.submit();'
After the form has been submitted once the function does show up, and each time afterwards.
onclick='position(); this.form.submit();'
The input radio buttons are being written with php if that makes any impact.
echo "<div class='ans'><input type ='radio' onclick='position(); this.form.submit();' class='radio' name = 'question" . $num . "' value = 'A' checked> " . $row['op1'] . "</input></div>";
Any help would be appreciated!!
Thanks
Ditch the onlick='position(); this.form.submit()' and do this on page load:
$(function() {
$('.ans .radio').click(function() {
position();
$(this).closest('form').submit();
});
});
That should work. You might want to be a bit more specific on the selectors as this will bind a click event to all radio buttons with class='radio' in a div with cöass='ans'
I was wondering how it would be possible to attach an HTML form's text box value to a link. For instance, I have 3 links and each link goes to a different PHP file, however, I need to pass a variable. Because of the design of my page, I cannot use buttons. So, I created a form with a text field. How do I send that Text Fields value with the links?
EG:
<form>
<input type="text" name="test1" id="test1"></input></form>
Link 1
Link 2
Link 3
I hope this makes sense as to what I am trying to do.
EDIT:
I tried to do this dynamically, but:
OK, I made a function like this:
<script>
function awardcode()
{ var awamount = document.getElementById("awardamount");
document.write('<?php $awardvar = ' + awamount.value + '; ?>');
};
</script>
Then, I made the link via PHP that looks like this:
echo '<a id=awlink3 name=awlink3 href="index.php?siteid=gmaward&type=xp&post=' . $posts_row['posts_id'] . '&handle=' . $posts_row['handle'] . '&varamount=' . $awardvar . '">Award XP</a>';
However, that didn't work. This is my input box code:
<form><input type=text name='awardamount' id='awardamount' onchange='awardcode()' style:'width:10px;'></form>
When I put the number and then tab, it loads an empty page.
How can I adjust that?
You'll need to dynamically change the link using JavaScript. Here's one approach:
$('a').on('click',function(e) {
e.preventDefault();
var url = $(this).attr('href').split('$')[0];
window.location = url + $('#test1').val();
});
But it might be better to add an onchange event to the textbox itself, so that the HREF changes instantly and the user can see the intended destination on mouseover:
$('#test1').on('change', function () {
var val = $(this).val();
$('a[href*=\\?id\\=]').each(function (i, el) {
$(el).attr('href', function (j, str) {
return str.split('?')[0] + "?id=" + val;
});
});
});
Usually with PHP and editing you click on a link that goes to a separate PHP page that has the "ID" of the entry you want to edit, you get the ID and populate your form base on this.
I would like to know how to do this if I am using a modal form? How do I get the ID get the records associated with it then populate the modal form.
sort of like this
//dropdown behavior for resp task and sub_task
$('#r_task_id').change(function() {
var selected_task_id = $('#r_task_id').val();
$.post("Assignment/populateSubTaskDropDown", { 'selected_task_id' : selected_task_id },//$_POST['selected_task_id']
function(data){
$('#r_sub_task_id').empty();
$.each(data, function(val, text) {
$('#r_sub_task_id').append(
$('<option></option>').val(val).html(text)
);
});}, "json");
});//task
PHP code is:
$this->session->set_userdata('selected_sub_task_id', $this->input->post('selected_sub_task_id'));
$json_resp_user = $this->assignmentModel->getResponsibleUsers($this->session->userdata('selected_sub_task_id'));
$json = array();
$json[0] = "-Select-";
if( count($json_resp_user) >= 1 ){ //if there is more in the result than the -Select-
foreach($json_resp_user as $detail){
//$json[$detail->user_id] = $detail->first_name." ".$detail->middle_name." ".$detail->last_name;
$json[$detail->user_id] = $detail->first_name." ".$detail->last_name;
}
}
echo json_encode($json);
but for the whole form not just a dropdown.
When you open the modal window set the id of the record in a public javascript variable, and on submit of the modal form pass the id parameter through url.
Another way is to have a hidden variable inside the form in the modal window and set it with the while opening the modal window. So it will be get passed the update form on the modal window is submitted.
<script>
id ='' //Set this when opening the modal window
function appendId(myform)
{
myform.action = myform.action + "/" + id;
return true;
}
</script>
<div id='modalWindow'>
<form onsubmit='return appendId(this)'>
//other elements
</form>
</div>
I had a quick read of $.post() of jQuery and apparently that was what I meant =p
the part on your script with
id ='' //Set this when opening the modal window
was where I was stuck on how to read that.
http://api.jquery.com/jQuery.post/
sorry if I wasn't clear but thank you for taking the time and trouble to answer me.