I am loading another html page from an index page, then I would like to get an element from that loaded page, but the page seems not loaded yet since the element resulted to null, even if there is a function call back with in the ajax load function:
$(document).ready(function() {
$('#btnEdit').click(function(){
$('#contents').load("abcd.html",showNewcontents())
function showNewcontents() {
alert("" + document.getElementById("make").value);
}
return false;
});
});
in body:
<body>
CLICK ME
<div id="contents"></div>
</body>
in abcd.html:
<div id="contents">
<form>
<input type="hidden" id="make" name="make" value="make">
</form>
</div>
Any clue as to how to modify this to get the element?
load expects to receive a function as an argument.
showNewcontents() calls a function.
You are passing the return value of the call to showNewcontents, not the showNewcontents function.
Remove the ().
Related
Play framework 2.4.x. A button is pressed on my home page that executes some code via Ajax, and returns its results beneath the button without loading a new page. The results wait for a user to input some text in a field and press "submit". Those results Look like this:
<li class="item">
<div>
<h3>Email: </h3>
<a>#email.tail.init</a>
<h3>Name: </h3>
<a>#name</a>
</div>
<div>
<h3>Linkedin: </h3>
<form class="linkedinForm" action="#routes.Application.createLinkedin" method="POST">
<input type="number" class="id" name="id" value="#id" readonly>
<input type="text" class="email" name="email" value="#email" />
<input type="text" class="emailsecondary" name="emailsecondary" value="" />
<input type="text" class="name" name="email" value="#name" />
<input type="text" class="linkedin" name="linkedin" value="" />
<input type="submit" value="submit" class="hideme"/>
</form>
</div>
<div>
<form action="#routes.Application.delete(id)" method="POST">
<input type="submit" value="delete" />
</form>
</div>
</li>
Along with some jquery that slides up a li after submission:
$(document).ready(function(){
$(".hideme").click(function(){
$(this).closest('li.item').slideUp();
});
});
However, since a form POST goes inside an Action that must a return an Ok(...) or Redirect(...) I can't get the page to not reload or redirect. Right now my Action looks like this (which doesn't compile):
newLinkedinForm.bindFromRequest.fold(
errors => {
Ok("didnt work" +errors)
},
linkedin => {
addLinkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
if (checkURL(linkedin.url)) {
linkedinParse ! Linkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
Ok(views.html.index)
}else{
Ok(views.html.index)
}
}
)
Is it possible to return Ok(...) without redirecting or reloading? If not how would you do a form POST while staying on the same page?
EDIT: Here is my attempt at handling form submission with jquery so far:
$(document).ready(function(){
$(".linkedinForm").submit(function( event ) {
var formData = {
'id' : $('input[name=id]').val(),
'name' : $('input[name=name]').val(),
'email' : $('input[name=email']).val(),
'emailsecondary' : $('input[name=emailsecondary]').val(),
'url' : $('input[name=url]').val()
};
jsRoutes.controllers.Application.createLinkedin.ajax({
type :'POST',
data : formData
})
.done(function(data) {
console.log(data);
});
.fail(function(data) {
console.log(data);
});
event.preventDefault();
};
});
This is an issue with the browser's behavior on form submission, not any of Play's doing. You can get around it by changing the behavior of the form when the user clicks submit.
You will first want to attach a listener to the form's submission. You can use jQuery for this. Then, in that handler, post the data yourself and call .preventDefault() on the event. Since your javascript is now in charge of the POST, you can process the data yourself and update your page's HTML rather than reloading the page.
What you need is use ajax to submit a form, check this: Submitting HTML form using Jquery AJAX
In your case, you can get the form object via var form = $(this), and then start a ajax with data from the form by form.serialize()
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
alert('ok');
}
});
In order to accomplish this task, i had to use play's javascriptRouting
This question's answer helped a lot.
I'm not experienced with jquery so writing that correctly was difficult. For those that find this, here is my final jquery that worked:
$(document).ready(function(){
$("div#results").on("click", ".hideme", function(event) {
var $form = $(this).closest("form");
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();
var email = $form.find("input[name='email']").val();
var emailsecondary = $form.find("input[name='emailsecondary']").val();
var url = $form.find("input[name='url']").val();
$.ajax(jsRoutes.controllers.Application.createLinkedin(id, name, email, emailsecondary, url))
.done(function(data) {
console.log(data);
$form.closest('li.item').slideUp()
})
.fail(function(data) {
console.log(data);
});
});
});
Note that my submit button was class="hideme", the div that gets filled with results from the DB was div#results and the forms were contained within li's that were class="item". So what this jquery is doing is attaching a listener to the static div that is always there:
<div id="results">
It waits for an element with class="hideme" to get clicked. When it gets clicked it grabs the data from the closest form element then sends that data to my controller via ajax. If the send is successful, it takes that form, looks for the closest li and does a .slideUp()
Hope this helps
I am having an issue where when a page is loaded via Ajax, I don't have a value in my search input. Here is my HTML:
<form id="searchForm" action="javascript:;" method="post">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
<input type="submit" data-mini="true" value="Search" />
</div>
</form>
The reason we have an input button is because of a request from the client as they found people having scenarios where they would click "Done" on the IOS keyboard rather than "Search" which wouldn't submit the form. here is my Javascript that handles the submit:
$(document).on('submit', '#searchForm', function () {
var text = $("#search-mini").val();
text = encodeURIComponent(text);
window.location.href = "/Mobile/Browse/Text?text=" + text;
return true;
});
This all runs fine if I refresh the page so the content is not loaded via AJAX. It only fails when linking between pages and they are loaded by AJAX. Alerting out "text" has a blank value in this scenario.
I have read about using JQM initialization events such as 'PageInit' instead of DOM ready() I just need an example implementing this with my code if this is the correct approach?
Regards,
Danny
HTML CODE
<form id="product_form" action="" method="post">
<input type="hidden" name="wpsc_ajax_action" value="add_to_cart">
<input type="hidden" name="product_id" value="8191">
<div class="current-items">
<div id="903" class="wpsc_select_variation">
<div id="902" class="wpsc_select_variation">
<div id="903" class="wpsc_select_variation">
<div id="875" class="wpsc_select_variation">
</div>
</form>
jQUERY CODE
jQuery("#product_form").live('submit', function(){
$wpsc_select_variation= $(".current-items > div").attr("id");
$wpsc_ajax_action = $("input[name='wpsc_ajax_action']").val();
$product_id = $("input[name='product_id']").val();
form_values = 'variation[480]='+$wpsc_select_variation+'&wpsc_ajax_action='+$wpsc_ajax_action+'&product_id='+$product_id;
jQuery.ajax({
type:"POST",
url: "wp/products-page/500ml-600ml-colours/krink-k750/index.php?ajax=true",
data:form_values ,
success: function(returned_data){
//$("#response").html(data);
eval(returned_data);
jQuery('div.wpsc_loading_animation').css('visibility', 'hidden');
if(jQuery('#fancy_notification') != null) {
jQuery('#loading_animation').css("display", 'none');
//jQuery('#fancy_notificationimage').css("display", 'none');
}
}
});
return false;
});
if have 4 child div of inside .current-items class div so i want to send 4 Ajax request and pass different id of child class in every loop in this line of code
$wpsc_select_variation= $(".current-items > div").attr("id");
Code is working with one requert
So plz help me make loop in jquery base on child div of inside of .current-items class div
Wrap ajax request inside .each().
$(".current-items > div").each(function(){
//ajax call.
$wpsc_select_variation= $(this).attr("id");
//after work done as asked in comment add below code.
$(this).remove(); //to hide use $(this).hide();
});
I have a form inserted by jQuery Ajax to a page's div (say, 'content') and when the user finishes filling the form and hits 'submit' button, the result will be shown for further verification. The html and ajax code are as follows:
HTML:
<form id="userForm" action="..." method="post">
...
...
</form>
Ajax:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#content').html(returnData);
}
});
});
The 'returnData' is the filled form (without input fields) for further confirmation. Now, how do I implement a 'back' button such that the user may go back and modify the previously entered data?
I am working on Google App Engine with Python. Thanks.
I wouldn't replace the form with new HTML.
I would rather hide the form with display: none and add the new HTML for viewing alongside. If you want to go back, then you can just hide the "viewing div" and show again the form, without the need to refill any input elements.
Something along these lines should work
HTML:
<div id="content">
<div id="user-form-container">
<form id="userForm" ...>...</form>
</div>
<div id="viewing-container"></div>
</div>
CSS:
#viewing-container {
display: none;
}
The viewing part contains some sort of back-button, which hides the viewing area and shows the form again
jQ:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#viewing-container').html(returnData);
$('#user-form-container').hide();
$('#viewing-container').show();
$('#viewing-container #back-button').click(function() {
$('#user-form-container').show();
$('#viewing-container').hide();
});
}
});
});
I'm sure this is a common question but I have an input field and a button. Whenever the button is pressed an ajax call is performed returning a string. I understand that if you attach it to a div in the original file, that div will erase any strings or numbers in it and replace with the returned string. What would be the most efficient way to allow for every single callback to be displayed on the screen real time? I attempted it but it appears that dynamically changing the javascript variable that assigns which div tag the ajax callback inserts into does not work. Does anyone know either what is wrong with this code or a more efficient way to write this code, i.e. with php, etc.
<div id="part1">
<input type="text" id="text"/>
<input type="button" value="button" id="button"/>
</div>
<div id="hidden" class="2"></div>
<div id="part2"></div>
<div id="part3"></div>
<div id="part4"></div>
<div id="part5"></div>
<script type="text/javascript" >
$('#button').click(function () {
var text = $('#text').val();
$.post('ajaxskeleton.php', {
red: text
}, function(){
var number = $('#hidden').attr("class");
$('#part' + number).html(text);
var number = number+1;
var class_name = $('#hidden').attr('class')
$('#hidden').removeClass(class_name);
$('#hidden').addClass(number);
$('#text').val('');
});
});
</script>
Instead of erasing its contents with .html(), you could append the new results to an existing div . For example, suppose you want to append the results to a div with id results:
$('#button').click(function () {
var text = $('#text').val();
$.post('ajaxskeleton.php', { red: text }, function() {
$("<li>" + text + "</li>").appendTo($("#results"));
});
});
Here's a DEMO.
I think something like the following would work.
<div id="container">
<input type="text" id="text"/>
<input type="button" value="button" id="button"/>
</div>
<ol id="responses"></ol>
$("#button").click(function() {
$.post('ajaxskeleton.php', {red:text}, function(data) {
$("#responses").append("<li>" + data + "</li>");
});
});
This just builds up an ordered list with the responses that come back from the Ajax calls, which I think is what your aiming to do.