How to select parent div of a form in JQuery? - javascript

here is what i got
<div id="right">
<from id="test">
<input type="submit">
</form>
</div>
and a lil jquery
$(document).ready(function(){
$('form').submit(function()
{
$(this).parent().html('<h1>1</h1>');
});
});
you can play with that here,
and by clicking on submit button it should put <h1>1</h1> in div#right but it don't !
Cause this is a form in this case but it works with button label or any thing else and I think that is because form is not a DOM node.
So how can I select the parent of a form, or in other words how can i select the Div that contents the form ?
Update: as it was a part of an ajax call i wanted to break it down and find the problem
but i had made a typo which cost me an hour or so, but the problem with ajax was that you $(this) inside success: is not the form any more so i did like this
`$('form').submit(function(){
form = $(this);// I set the form to a varible !!
$.ajax({
type: "POST", url: "ajax.php", data: $(this).serialize(),
success: function(data){
$(form).parent().html(data); // I used the varible i set to form before!
}});`
anyways, how can i mark this question as solved ?!

As Chowlett says, use form rather than from.
That code will then work, because the $(this) inside the submit function will select the form element, the parent of which is is the #right div.
You could use .parent('div') to make sure you select a div, and not anything else.

as it was a part of an ajax call i wanted to break it down and find the problem but i had made a typo which cost me an hour or so, but the problem with ajax was that $(this) inside success: is not the form any more so i did like this
$('form').submit(function(){
form = $(this);// I set the form to a varible !!
$.ajax({
type: "POST", url: "ajax.php", data: $(this).serialize(),
success: function(data){
$(form).parent().html(data); // I used the varible i set to form before!
}});

Related

Passing loop data as variable from JavaScript to AJAX via Bootstrap modal

My code below was used to retrieve records from a loop using JavaScript. Everything works fine. Each of the records button has a unique id that when click
should alert users_id in a Bootstrap Modal popup.
The problem is that the looped button that contains users_id is not alerting anything when each button is clicked.
Below is the code for retrieving records in JavaScript along with Bootstrap modal button:
<script>
$(document).ready(function () {
$.post('users.php', function(response){
$.each(JSON.parse(response).items, function(i,v) {
$('.userslist').append('<span>'+v.id+'</span> Profile');
});
});
});
</script>
Below is the code for posting the users_id and then alert it:
<script>
$(document).ready(function(){
$(".modalLink").click(function() {
var id = $(this).attr("id");
alert(id);
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(data) {
$("#rmm").html(data);
}
});
});
});
</script>
but if I take the Modal button outside the retrieve records in a javascript loop
it will alert users_id and everything will work fine as in code below
Profile
Can someone help me make each of the JavaScript looped button to post its own unique users_id and then alert it in a Bootstrap modal popup. I have attached a screen shot of the result obtained from the JavaScript loop.
Thanks
If I understand your question properly;
Try changing
$(".modalLink").click(function() {
to
$(document).on('click', '.modalLink', function() {
Without seeing the rest of your code or a working fiddle, I suspect your content is dynamic and JQ cannot bind the click handler, simply because there is no content to bind to. this answer does a good job of explaining the difference between .on and .click.
If you get the expected result, I would drop the document selector and use the closest parent static element.

Make ajax request and success data show in id <select></select> part

See this link..
My HTML page contains a similar multiple select drop down. Something like this -
<select id="box" data-placeholder="Choose from available option.." class="chosen-select student-select" name="classes" multiple style="width:310px;" tabindex="4">
</select>
In this select drop down, I'm trying to print <option></option> by making an Ajax request and showing the success data there.
When I used a simple <select></select> without using the chosen style, I can see the options there. But when I use the chosen style near the select (multiple selection) then is doesn't shows the options.
document.getElementById("box").innerHTML = data;
I am doing something like this.Please, help why it doesn't show me when I used that chosen effect.?
$(document).ready(function(){
$('#customer').change(function(){
var Id = $(this).val();
$.ajax({
type: "GET",
url: '../folder/page1.php',
data: "mid="+Id,
success: function( data ) {
alert(data);
document.getElementById("box").innerHTML = data;
}
});
});
});
You will need to initiate chosen after the new html has been loaded in the page via ajax.
This has been answered in this question.
Chosen not working on elements from AJAX call
You only can show the HTML output in DOM. I am assuming that you're getting options after ajax request. Just try to change like
$(document).ready(function(){
$('#customer').change(function(){
var Id = $(this).val();
$.ajax({
type: "GET",
url: '../folder/page1.php',
data: "mid="+Id,
success: function( data ) {
$("#box").html(data);
$(".chosen-select").chosen();
}
});
});
});
After AJAX call you should initialize your select box. try and share the results.

One code to turn all forms into AJAX forms?

So I use the following code to manipulate my 'login' form so that it submits it, to the url of action="" and the data responded goes into id specified by target="". The submit method is specified by method=""
I like this. It's neat. But I was wondering if there was a way of having a script that meant that all forms were submitted through Jquery, without having to re-write this code for every form every time. That's just messy.
Much appreciated!
<script type="text/javascript">
$(document).ready(function(){
$("#login").submit(function(){
var thistarget = this.target;
$(thistarget).html('Submitting...');
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
error: function() {
$(thistarget).html("Form failed to submit");
},
success: function(results) {
$(thistarget).html(results);
}
})
return false;
}
);
});
</script>
Sure, just replace "#login" with "form". It will then affect all forms that currently exist on the page (but not future forms).
$("#login").submit(function(){...
For future forms AND current forms, you would need event delegation.
$(document).on("submit","form",function(){...
If I were you I'd use the $.post method of Jquery. http://api.jquery.com/jQuery.post/
But answering your question and as Kevin B said: change #login by form

Javascript Hide Jquery Form

I have a js and html form that submits through php. Once submitted, the email is sent and php returns a success message that is appended to the bottom of the form using jquery.
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'process.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#commentForm').append(returnedData);
}
});
return false;
},
Instead, I want the js to remove and reset (hide and clear) the comment form but still append the returned data to the same location as #commentForm
The remove() function does that.
$('#commentForm').remove();
based on what #GRIGORE-TURBODISEL sayd, but with better animation you can do this
$('#commentForm').slideUp(1000, function(){
$(this).html(returnedData).show('fast');
});
first it hides the form in 1 second, when finished emptys the html, puts in returnedData and shows it again

Replace the content of a div several times

I have a select with my servers and I load information on the selected server without reloading the page. I am using ajax and ReplaceWith().
I tried using live() to replace the information several times, but it only works once, why?
<script>
$(function(){
$('select').live('change', function(){
$.ajax({
type: "POST",
url: "server.php",
data: "hostname=" + $(this).val(),
success: function(data){
$("#results").replaceWith(data);
}
})
});
});
</script>
It is because you are replacing the #results container with the data. The next time the $("#results") selector will not match any elements (because the container was replaced by the previous call).
.html() does not replace the container, but updates the content of the container.
I do not really understand why it works with html() and not with ReplaceWith(), but it works!
<script>
$(function(){
$('select').live('change', function(){
$.ajax({
type: "POST",
url: "serveur.php",
data: "hostname=" + $(this).val(),
success: function(data){
$("#results").html(data);
}
})
});
});
</script>
Sorry to answer my own question.
live() method is kind of deprecated and might work not properly. Try on() instead of.

Categories

Resources