I have this code that I'm working on, and I'm trying to append instead of overwriting the #preview div. I'm using JqueryForm plugin for jquery.
$(document).ready(function() {
$('#photoimg').on('change', function() {
$("#preview").html('<img src="load.gif" alt="Uploading"/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
I'm not really sure how I can achive that.
Later edit: I have this form:
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
When I browse and select an image the ajaximage.php verifies and upload the image and if succeed it will echo a message that is shown in #preview div. The problem is that its overwriting the div even if I use append.
You're close then:
$("#preview").append('<img src="load.gif" alt="Uploading"/>');
Here's the documentation.
Edit: based on your updated question, it appears that you may need to dynamically create a target for the ajaxForm plugin to use. Here's an example:
$(document).ready(function() {
$('#photoimg').on('change', function() {
$("#preview").html('<img src="load.gif" alt="Uploading"/>');
// create a dynamic target that we'll add to #preview
var $target = $('<div />').appendTo('#preview');
$target.attr('id', 'preview-target-' + Math.ceil(Math.random()*999999));
$("#imageform").ajaxForm({
// use the new target element's id for the ajaxForm target
target: '#' + $target.attr('id')
}).submit();
});
});
jmar is right.
Here is fill-in example command for it as for future reference.
$('#idoftarget').append('<div>new stuff</div>');
Related
I created a function on jquery where the user can click the button the value goes into the db and updates the color of the body. So the whole interface changes. Now im trying to make the anchor tags with classes like Blue
Im trying to create separate .clicks() like -> $('.blue').click(function(){}); not only one function for all of them. any help would be appreciate it
Here is my code:
<?php
echo "Welcome, ".$_SESSION['username'].".<br/> ";
echo "My name is: ".$_SESSION['fname']." ";
?>
<br/>
<br/>
Blue
Red
Green
<form action='' method='POST'>
<br/><input type='submit' name='logout' value='Logout'/>
</form>
<div id="show"></div>
<script>
function Swap(color){
var url = "php/test.php";
$.post(url, {ColorVar: color}, function(data){
$("#show").html(data).show();
});
location.reload(true);
}
</script>
Try this, hope it will help
<a href="javascript:void(0)" class="change-color" data-color="blue"/>Blue</a>
<a href="javascript:void(0)" class="change-color" data-color="red"/>Red</a>
<a href="javascript:void(0)" class="change-color" data-color="green"/>Green</a>
<script>
var url = "php/test.php";
$( document ).ready(function() {
$(document).on('mousedown', '.change-color', function(){
var color = $(this).attr('data-color');
$.post(url, {ColorVar: color}, function(data){
$("#show").html(data).show();
});
location.reload(true);
})
});
</script>
THanks #user3795381 your answer helped me point myself into the right direction.
This is what I was looking for.
<script>
var url = "php/test.php";
$(document).ready(function() {
$(".change").click(function(){
var color = $(this).attr('data-color');
$.post(url, {ColorVar: color}, function(data){
$("#show").html(data).show();
});
location.reload(true);
})
});
</script>
I could give you some tips:
You can use a single class for all links which save something to your database. For example 'do-save-color'.
You can store the data you want your to save as data-* attributes. You can name those to whatever you want but they have to start with data-. For example data-save-color="blue".
Save blue!
Use a global observer which 'captures' clicks on those links
$(document).on('click', '.do-save-color', function () {
// Your saving logic here
});
In your function use jQuery to read the data attribute and then post it:
var $link = $(this),
color = $link.data('save-color'); // color is now: "blue"
// Your AJAX logic here
Does this help you?
PS: Why do a location.reload() when you are saving things using AJAX?
here is a example with some html-classes (js-*) for js ...
html:
Blue
Red
Green
<p id="js-show" class="some-text">lall</p>
js:
$(".js-switch-style").click(function() {
$.post("/", { color: $(this).data("color") }, function(data) {
$("#js-show").html(data).show();
});
});
I know this has been asked some time, but the solutions before did not help, and I do not understand if I am missing something
I have simple php/hmtl page with an index.php where I include the different content php pages with a simple GET check:
if (isset($_GET['section'], $section[$_GET['section']])) {
include $section[$_GET['section']];
} else {
include $section['home'];
}
Now one of these sections contains a form which I want to do some magical ajax/jquery action with.
In my javascript file which is loaded at the bottom of the index.php I have following jquery ajax stuff
//ajax load domain search script
$(document).ready(function(){
$('#lookup_domain').live("click", function(e) {
e.preventDefault();
searchVal = $('#domain').val();
topLevel = $('.custom_select').val();
domain = searchVal + '.' + topLevel;
$.ajax({
type: 'GET',
url: 'script_domain.php',
data: 'domain=' + domain,
dataType: 'html',
beforeSend: function() {
$('#result').html('<img style="margin-left: 80px;margin-top: 30px;" src="_assets/img/loader.gif" alt="loading..." />');
if (!searchVal[0]) {
$('#result').html('<p>Syötä domain nimi.</p>');
return false;
}
},
success: function(response) {
$('#result').html(response);
},
error: function(response) {
$('#result').html('<p>Haussa virheitä.</p>');
}
});
});
});
I thought it would be enough to use
$(document).ready(function(){
and the live method (i have jquery 1.7.1 so live should be working?)
$('#lookup_domain').live("click", function() {
but unfortunatedly this is not working, the form just sends it to itself and loads the page again.
Here is the form:
<?php
if(!defined('indexcalled')){die('Direct access not premitted');}
?>
<div id="domain_search">
<h5>hae verkkotunnusta</h5>
<form action="#" method="get" class="domain_form">
<input type="text" name="domain" class="domain_input" />
<div class="select_wrap">
<select class="custom_select">
<option value="fi">.FI</option>
<option value="com">.COM</option>
<option value="net">.NET</option>
<option value="me">.ME</option>
<option value="info">.INFO</option>
</select>
</div><!--/select wrap-->
<input type="submit" value="Syötä" class="domain_submit_btn" id="lookup_domain"/>
</form>
<div class="clear"></div>
</div><!--/domain search-->
What am I missing here? Is there any good documentation about how to use jquery with this kind of dynamical page setup?
EDIT
My original question was, how to handle these kind of elements properly with jquery, because they are included later on.
I found that I should be working with on() instead of live because its deprecated in 1.7 too. So I edited the code like this:
$(document.body).on("click", '#lookup_domain', function(e){
e.preventDefault();
$(document.body).on("click", '#domain', function(event){
alert($(this).text());
});
But the alert does not work, it does nothing. What am I missing here?
You're calling e.preventDefault(), which should keep the form from submitting, however you are not passing the event object into your click handler. Update it to this and it should work:
$('#lookup_domain').live("click", function(e) {
e.preventDefault();
...
});
Because you are using a submit button for your live click you need to disable the form submission.
There are two solutions:
1, Return false on the click event:
$('#lookup_domain').live("click", function() {
// all of your code
return false;
})
2, add an onsubmit attribute to your form:
<form action="#" method="get" class="domain_form" onsubmit="return false;">
</form>
Thanks for all guys who helped me in the chat, the correct method is to first have the document ready, then use .on() with click method with body to access the element created afterwards. Then just with normal .val() to get the values, like this:
$(document).ready(function(){
$(document.body).on("click", '#lookup_domain', function(e){
e.preventDefault();
searchVal = $('#domain').val();
I have this script thats send a post via jquery.form addon:
$(document).ready(function() {
$('#submit_btn').on('click', function(e) {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview',
success: afterSuccess //call function after
});
});
});
function afterSuccess()
{
$('#imageform').resetForm();
$('.ImgStatus').appendTo('.img');
}
and gets a html respond.
<div id="<?php echo $RandNumber; ?>" class="ImgStatus">
<input id="<?php echo $RandNumber; ?>" type="checkbox" name="<?php echo $RandNumber; ?>" />
<img src='upload/<?php echo $actual_image_name; ?>' class='preview'>
</div>
And what I'm trying to do is to remove the div that corresponds to the checkbox ID, when the delete button is clicked. And also to send a $_POST to a php page with the checked divs. Until now I have something like this but When I press the button its not removing the element...
$("#clickme").click(function(e){
var selected = $(".img input:checked").map(function(i,el){return el.name;}).get();
$(selected).remove();
});
jsfiddle.net/aHr6v/3
You can simply select the parent of the selected input field (the div), and remove it like this:
$("#clickme").click(function(e){
var selected = $(".img input:checked").parent();
$(selected).remove();
});
Here's a working example: http://jsfiddle.net/aHr6v/5/
check this: http://jsfiddle.net/aHr6v/6/
Based on what you said in your comment, I added the following line which search the div by its id and remove it
$("div#"+selected).remove();
I'd suggest:
$("#clickme").click(function (e) {
$('div.img input:checked').closest('div').remove();
});
JS Fiddle demo.
This looks at all inputs that are checked, finds the closest parent ancestor that's a div and then removes that/those elements from the DOM.
References:
closest().
remove().
selected is an array. What you want to do is pass one or more elements of that array as a selector:
$.each(selector, function(){
$('#' + this).remove();
})
Just change
$(selected).remove();
To
$('#'+selected).remove();
Edit: Or To (to remove all selected divs)
$.each(selected, function(){
$('#' + this).remove();
});
so I have a PHP iframe (ajax) file uploader. I would like to display a loading message when submit is clicked (easy on click event) and then once the file is uploaded, so when the iframe is loaded with the PHP response, vanish (jquery fadeOut) and an alert box pop up saying the file is uploaded. what would be the easiest way to go about this?
You can attach an event handler to load on the iframe and put your fade out logic in there.
Edit 2: Some sample code (changed from ready to load)
<iframe name="process"></iframe>
<form method="post" action="upload.php" target="process" enctype="multipart/form-data" onsubmit="Upload.start()">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
<script>
var Upload = function() {
$(function() {
$('iframe[name=process]').load(function() {
// finished uploading file
$('.loading-div').hide('slow', function() {
alert('Your file has been successfully uploaded.');
});
});
});
return {
start: function() {
$('.loading-div').show();
}
}
}();
</script>
I am using the following code to effect an iframe that allows an ajax file upload on submit of the form without refresh.
This works as expected
window.onload=init;
function init() {
document.getElementById('form').onsubmit=function() {
document.getElementById('form').target = 'iframe';
}
}
What i would like to do is the same thing but 'onchange' of the file field input, i.e. when the user has chosen a file, to autmatically trigger the init() function and thus upload the file. I have tried with this code:
document.getElementById('file').onchange=function(){...
This doesn't work, and i'm completely stuck. Any ideas?
Many thanks
This should work for you
<script type="text/javascript">
window.onload = function() {
// add old fashioned but reliable event handler
document.getElementById('file_input').onchange = function() {
// submit the form that contains the target element
this.form.submit();
}
}
</script>
<iframe name="my_iframe"></iframe>
<form target="my_iframe"
action="your/file.ext"
method="post"
enctype="multipart/formdata">
<input type="file" name="my_file" id="file_input">
<!-- for no js users -->
<noscript>
<br/>
<input type="submit">
</noscript>
</form>
i think something like .live() will solve your issue hopefully, comment if you want more info on how to use it...
Give the file input element an id and:
$(document).ready(function(){
$(element).change(function(e){
fileInfo = e.currentTarget.files[0];
init();
});
});