when clicked on the div it should be displayed on textbox and it should be editable on edit button
what should be the ajax code
i have done this with php but want to do this with ajax
<script>
function edit()
{
$.ajax({
});
}
</script>
<div id="edit1" name="edit1">edit1</div>
<div id="edit2" name="edit2">edit2</div>
<div id="edit3" name="edit3">edit3</div>
<input type="text" id="text"/>
<button onclick="edit(this.value)">Edit</button>
demo
<div>when clicked on the div it should be displayed on textbox
and it should be editable on edit button what should be the ajax code
i have done this with php but want to do this with ajax</div>
JS:
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(divClicked);
}
$(document).ready(function() {
$("div").click(divClicked);
});
Try below jquery for get your div value in text box :
$('div').click(function(){
$('input').val($(this).text());
});
Then on the baseof that you can update your textbox using ajax call.
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 have an auto-complete textbox where user can insert an actor name and it works fine. There is a button "browse movies" which should populate a dynamic dropdown showing list of movies by the actor that user has inserted in the text-box. Also, there is another button "add to the list" that if user click on it, the selected options of this dropdown (movies) whould be added to another dropdown which shows all selected movies by user.
Problem
I could populate dropdown dynamically when user clicked the button, also I could move the selected options to the new dropdown (selecteditems), but the problem is that I want to show this dropdown in a new pop-up window (not in the same page where user insert in the text-box). I really don't know how to do it.. should I make the ajax call in target.html (the new pop up window)? I appreciate if someone can let me know how I can do this.
This is what I tried:
<script type="text/javascript">
$(document).ready(function () {
$("#tags").autocomplete({
source: "actorsauto.php",
minLength: 2,
select: function (event, ui){
$("#tags").on('autocompletechange change', function (){
var selectedVal = $(this).val(); //this will be your selected value from autocomplete
// Here goes your ajax call.
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();
}
});
$('#btnRight').on('click', function (e) {
var selectedOpts = $('#movieName option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#selectedItems').append($(selectedOpts).clone());
$(selectedOpts).remove();
$("#movieName").hide();
$("#tags").val("");
e.preventDefault();
});
function openWindow() {
window.open("target.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<html>
<body>
<input type="textbox" name= "tag" id="tags" style="display:none;" placeholder="Enter an actor/actress name here" />
<input type=button onclick="javascript:openWindow()" value="Browse movies by this actor">
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style=display:none;>
<input type="button" value=">> Add to selected list >>" id="btnRight" style="display:none;" />
<select id="selectedItems" name="selectedItems[]" multiple="multiple" style="width:200px; size:10px;">
</select>
</select>
</body>
</html>
You could try something like this. Sorry for any mistakes or if it's rubbish
target.html
// this goes in target.html
$('#tags').autocomplete({
source: "actorsauto.php",
minLength: 2,
select: function (event, ui) {
$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val(); //this will be your selected value from autocomplete
// Here goes your ajax call.
// here's some magic. using window.opener allows you
// to access variables and functions defined in the parent window.
window.opener.getMovies(selectedVal);
}).change();
}
});
page.html
// this stays in your parent window
function getMovies(value) {
$.post("actions.php", { q: value}, function (response) {
console.log(response);
$("#movieName").html(response).show();
});
}
I am creating a jQuery function in which I am using one class for a button that is common in second div's button too. my html markup is
<div class="micmstabs miindex">
<h4>Manage Your Index Page Here</h4>
<textarea class="redactor_content" name="content" rows="4"><?php cms_html('index'); ?></textarea>
Save Changes
</div>
<div class="micmstabs miterms">
<h4>Manage Your Terms & Conditions Page Here</h4>
<textarea class="redactor_content" name="content" rows="4"><?php cms_html('terms'); ?></textarea>
Save Changes
</div>
In the above when we click on cms_s i try to get value of textarea based on a condition check in jQuery that if this button has this class then get me value of the textarea of div in which this button and the textarea is.
My jQuery function is
$(document).on('click', '.cms_s', function(event) {
if ($(this).hasClass('index_save')) {
var cms_page='index';
}
if ($(this).hasClass('terms_save')) {
var cms_page='terms';
}
if ($(this).hasClass('policy_save')) {
var cms_page='policy';
}
if ($(this).hasClass('mem_save')) {
var cms_page='membership';
}
alert(cms_page);
var cms_html=$(this).parents("div").find('.redactor_content').val();
alert(cms_html);
});
I am able to get the condition check for the class perfectly . But when i try to get the value of textarea based on the button i clicked no matter what button i click it gets me the value of the textarea present in the first div markup.
If you pres on the button and you want the previous textbox value. It's easier to do this:
$(document).on('click', '.cms_s', function(event) {
var val = $(this).prev("textbox").val();
// Or within the same level
val = $(this).parent().find("textbox").val();
val = $(this).siblings("textarea").val();
});
You problem occurs when because all the inputs have the class redactor_content so the .val() will get the first textarea in the array and get that value. Which is allways the first redactor_content.
var cms_html=$(this).parents("div").find('.redactor_content').val();
Try this -
var cms_html=$(this).closest("div").find('.redactor_content').val();
I have a multi-page form that was created for me. All of the pages on the form have submit button that saves the data to a database, a previous button that goes to the previous page and a next button. How do I display an image when the save button (id="save") is pressed? Right now the image pops up when either one of the buttons are pressed. I am a jQuery rookie so any help is greatly appreciated. Thanks!
The jQuery
<script>
jQuery(document).ready(function($) {
$('form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
$("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
});
});
</script>
The PHP
<div id="target"></div>
<input type="submit" name="status" value="Prev" />
<input type="submit" name="status" id="save" value="Save" />
<input type="submit" name="status" value="Next" />
<?php
if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Prev'){
//save data and redirect to previous page using header();
}
if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Next'){
//save data and redirect to next page using header();
}
if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Save'){
//save data and do whatever you want
}
?>
In your code all buttons have the type submit, hence it causes the form to submit irrespective of the button you click.
make type="submit" only to that button for which you want to submit the form and show the image.
Demo: http://jsfiddle.net/esMn2/1/
Here's a working demo of a quick mockup, not using jQuery, but to give you an idea of how it could be done.
prev = document.getElementById('prev');
save = document.getElementById('save');
next = document.getElementById('next');
form = document.getElementById('form');
prev.addEventListener('mousedown', function(e) {
e.preventDefault();
alert('Did nothing');
});
save.addEventListener('mousedown', function(e) {
e.preventDefault();
showLoading();
});
next.addEventListener('mousedown', function(e) {
e.preventDefault();
alert('Did Nothing');
});
function showLoading() {
var load = document.createElement('img');
load.src = "http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif";
document.getElementById('target').appendChild(load);
setTimeout(function() {
form.submit();
}, 5000);
}
Using jQuery though you will support IE<9, as they know to use attachEvent and not addEventListener
To get the image to only show up for the Save button, just bind the event to that button, not to the form's submit event.
jsFiddle
$('#save').click(function(e) {
e.preventDefault();
var form = $(this).closest('form');
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
$("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
});
This way, there will be no delay on submitting the form for the prev and next buttons, and the image and delay will only show for the Save button.
i want to use user input in jquery dialog input box to be used when jquery dialog ok button is pressed.
now the problem is the code after jquery dialog box also get executed withought waiting for jquery input field to be filled by user
<p id="text"> click me </p>
<div id="test" class="sandy" >
<input id="username" class="sandy1" />
</div>
$('#text').click(function(){
$('.sandy').dialog({
buttons: {
"OK": function() {
$(this).dialog('close');
}}
});
var myvalue= $("#test").val();
alert(myvalue);
})
you can check the demo at this link : http://jsfiddle.net/zCFD5/86/
please suggest me some way out to hold on to jquery dialog till user presses ok button and then move on to code after it.
Try this JS:
$('#text').click(function(){
$('.sandy').dialog({
buttons: {
"OK": function() {
if($('#username').val() == '') {
$('#username').focus();
} else {
var myvalue= $("#username").val();
$(this).dialog('close');
alert(myvalue);
}
}
}
});
});
EDIT: I also updated the code at JSFIDDLE and it works fine :-) http://jsfiddle.net/zCFD5/96/