We Keep Coding

jquery-modal keeps last input

I want to use the jquery-modal plugin to make comments for several form elements. Its working fine, as long there is no keyboard input. Otherwise it remembers the last input and keeps that in the textarea, even if I empty it before.
This is the form that is shown in the modal window.
<a title="" href="#" onclick="getRechKomm('12345'); return false;" class="edit_komm">Kommentar</a>
<form id="RechKommForm" class="none">
<h3></h3>
<p><textarea name="kommentar" id="ptrRechKomm"></textarea></p>
<p><input type="hidden" name="rechid" id="ptrRechKommID" value=""></p>
</form>
<script>
function getRechKomm(rechnr){
$('#ptrRechKomm').html('');
$.ajax({
type: "POST",
url: "ptr_getrechkomm.php",
data: {rechnr: rechnr},
success: function(data){
readSession();
$('#ptrRechKomm').html(data);
$('#ptrRechKommID').val(rechnr);
$('#RechKommForm').modal({
escapeClose:false,
clickClose: false,
fadeDuration:500
});
}
});
}
$('#RechKommForm').on($.modal.BEFORE_CLOSE, function(event, modal) {
$.ajax({
type: 'POST',
url: 'ptr_putrechkomm.php',
cache: false,
data: $("#RechKommForm").serialize(),
success: function (data) {
$('#ptrRechKomm').html('');
$('#ptrRechKommID').val('');
}
});
});
</script>
So if call the comment for the ID 12345 and write a comment "Komm 12345", everything is fine. After that I call the comment for ID 23456, that may be already "Komm 23456". It is loaded from the database and put into the textarea #ptrRechKomm, but the first text is still there. So in the textarea is "Komm 12345Komm 23456".
Where is the old content coming from and how to delete it?
Update: Forget that all! Don't know why, but I thought that a textarea has to be filled by html(). Thats working, but only once. Filling it by val() is the correct way!

Populating razor text input from ViewData

Im trying to pre populate an input text box in a modal. Currently i click the edit button which calls a jQuery function that makes an ajax call
<script>
$(document).ready(function(){
$(".selectRow").click(function(e)
{
e.preventDefault();
var row = $(this).closest("tr"),
tds = row.find("td:nth-child(1)").first();
var textval = tds.text();
$.ajax({
url: "EditApplication?handler=GetRowInfo",
type: "POST",
dataType: "json",
data: { textval },
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function () {
alert("success");
},
complete: function () {
$('#editAppModal').modal('show');
},
failure: function () {
alert("failure");
}
})
});
});
</script>
On completion i show the modal. This jQuery function calls a method in the code behind called GetRowInfo which grabs a cell from a table.
GetRowInfo
public void OnPostGetRowInfo(string textval)
{
Console.WriteLine("-----------------"+textval);
DutyWeb dutyWebManager = new DutyWeb();
textval = textval.Trim();
Console.WriteLine("-----------------NEW-"+textval);
selectedRow = dutyWebManager.SearchByApplication(textval);
ViewData["appName"] = textval;
}
I assign the text value sent into the ViewData as appName
I then assign the textbox input value to be the ViewData["appName"
<div class="modal-body">
<input type="text" name="appName" id="appName" value='#ViewData["appName"]'>
<input type="text" name="appShortName" style="width:15%">
<br>
</div>
I dont know if im doing this wrong but it seems right to me. The modal is inside of a form element. Stepping through revealed that the ViewData is indeed storing the correct value, but its not being displayed in the textbox
I would like to avoid using jQuery to do this. I feel like ViewData is a much easier way of accomplishing the same task

jquery event (on submit) is affecting all my divs and not the only one where the button was clicked?

what's up guys? look... I have a comment system for my web page... and I've been dealing with this little problem for a entire week. I really need some help here x_x ... the thing is that when a user leave a comment on my page, this comment is showed automatically thanks to ajax, that's ok...
each comment can be voted. and here's my problem... these divs that contain the forms for voting are build dynamically and the thing is that when I do click on the button for sending the form in any comment... the resulting data appears in all the comments! instead of appear in the specific one where the submit button was clicked, so I don't know what to do at this point, I hope you can give me a hand. this is my code
the form:
<label > Vote </label>
<form action="vote.php" method="POST" class="form-vote" id="form-vote">
<button class="icon-thumbs-up" id="icon-thumbs-up"></button>
<input hidden="hidden" type="text" name="num-comment" id="num-comment" value="'.$d['id'].'" >
<input hidden="hidden" type="text" name="point" id="point" value="'.$d['point'].'" >
<p id="actual-points" class="actual-points"> '.$d['point'].'</p>
<div id="result" class="result"> </div>
</form>
the script:
<script type="text/javascript">
$(document).ready function() {
$('.form-vote')on('submit', function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('.actual-points').hide();
$('.result').html(data).fadeIn('slow');
}
})
return false;
});
})
</script>

Have you tried saving the 'this' object of the original event and using it inside the success function like this:
$('.form-vote')on('submit', function(e) {
e.preventDefault();
var $form = $(this); // Save here
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
// use here
$form.find('.actual-points').hide();
$form.find('.result').html(data).fadeIn('slow');
}
})
return false;
});

change this:
$('.result').html(data).fadeIn('slow');
to this:
$(this).find('.result').html(data).fadeIn('slow');

jQuery updates DOM, browser does not

I am working on a project where for example field number 3 on the webpage should be updated with values from a database when a user enters data into field number 1. This already works fine without any problems.
But if the user modifies field number 3 first and field number 1 at a later time, just the DOM gets updated (as I can tell from Firebug) but there isn't any visible change on field number 3 to the user.
I created a very basic version of this problem and still I am not able to tell what's wrong here.
HTML
<div id="container1">
<textarea id="container1.1">Entry 1.1</textarea>
<textarea id="container1.2">Entry 1.2</textarea>
<textarea id="container1.3">Entry 1.3</textarea>
</div>
jQuery
$(document).ready(function() {
$('textarea').change(function() {
var clickedObject = $(this);
var id = $(this).attr('id').substr(9);
var value = $(this).val();
var dataString = "id=" + id + "&value=" + value;
$.ajax({
type: "POST",
url: "update.php",
data: dataString,
cache: false,
success: function(Result)
{
if(Result == '-')
{
console.log('Nothing to do');
} else {
clickedObject.next().next().html(Result);
}
}
});
});
});
PHP
<?php
if ($_POST['id'] == '1.1') {
echo 'Modified string';
} else {
echo '-';
}
?>

You must set values of textarea by .val() method, instead of html().
And maybe it will be more descriptive if you will use only one id of textarea that should call request on changes.

Download a file only if a checkbox is checked and form submits

I would like a PDF to download only if a user checks a checkbox and the form submits. Right now the PDF downloads as long as they check the checkbox and hit the submit button. It doesn't matter if the form submits. The main issue is I am limited to Jquery or plain javascript. I do not have access to the backend files. Does anybody know of anyway to do this? The checkbox does not need to be required. Here is the code I have right now:
$("#formid").submit(function(ev){
ev.preventDefault();
$.ajax({
url: 'processing.cfc', // background processing procedures
type: 'get',
dataType: 'json',
data: $("#formid input, #formid select").serialize(), //pass all present input variables
success: formReturn,
failure: function(){ alert("There was an error processing your request. \nPlease try again."); return false; }
});
var $choice = $(this).find("input[name='checkbox1']:checked");//get the selected option
if ($choice.length)// if an option is selected
window.open('http://whitepaper.com/info/whitepaper/WhyBuy_WhitePaper_FinalB.pdf') ;
var $choice2 = $(this).find("input[name='checkbox2']:checked");//get the selected option
if ($choice2.length)// if an option is selected
window.open('http://brochure.com/info/brochure/welcome-kit-brochure.pdf') ;
});
And here is the HTML for the checkboxes:
<div class="chkbox">
<input type="checkbox" class="regular-checkbox" name="checkbox1"
id="checkbox-1-1"><label for="checkbox-1-1"></label>
<span class="dld">Clayton Homes guide to buying a home</span>
</div>
<div class="chkbox">
<input type="checkbox" class="regular-checkbox" name="checkbox2"
id="checkbox-1-2"><label for="checkbox-1-2"></label>
<span class="dld">Why Clayton Homes brochure</span>
</div>
Any help is appreciated.

You have to move the PDF opening the success call of the AJAX function.
The key thing here: the AJAX call is asynchronous, so the PDF will be opened right after the AJAX request was fired and not after the response arrived.
Something like this:
$("#formid").submit(function (ev) {
ev.preventDefault();
$.ajax({
url: 'processing.cfc', // background processing procedures
type: 'get',
dataType: 'json',
data: $("#formid input, #formid select").serialize(), //pass all present input variables
success: function () {
var $choice = $("#formid input[name='checkbox1']:checked"); //get the selected option
if ($choice.length) { // if an option is selected
window.open('http://whitepaper.com/info/whitepaper/WhyBuy_WhitePaper_FinalB.pdf');
} else {
var $choice2 = $("#formid input[name = 'checkbox2']:checked "); //get the selected option
if ($choice2.length) { // if an option is selected
window.open('http://brochure.com/info/brochure/welcome-kit-brochure.pdf');
}
}
},
failure: function () {
alert("
There was an error processing your request.\nPlease
try again.");
return false;
}
});
});
},
failure: function () {
alert("There was an error processing your request. \nPlease try again.");
return false;
}
});
});

`<input type="checkbox" name="checkboxG1m" id="checkbox_a" class="css-checkbox" />`
`$`("#checkbox_a").click(function(){
if($("#checkbox_a").is(':checked')){
window.open("x.pdf");
}
});