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();
});
}
Related
I have here Jquery code with ajax/json. First i will discuss the flow. I have 3 textboxes, my item textbox pass it's value to auto-complete.php through ajax to get it's details. The return value is post or place into mode textbox. And if the post value is 1 or 2 the number textbox should change is css into display:none. But the problem this not working, I set the number textbox into readonly. The change function is working when I change directly the value of number textbox. Why isn't working when the value is post value?
<script>
$(document).ready(function() {
$("#number").css("display","none");
$(document).on('change','#mode',function(){
if($("#mode").val() =="1"){
$("#number").css("display","");
} else if($("#mode").val() =="2"){
$("#number").css("display","");
} else {
$("#number").css("display","none");
}
return true;
});
});
</script>
<input name="item" id="item" type="text"/>
<input name="mode" id="mode" type="text"/>
<input name="number" id="number" type="text" readonly />
<script type="text/javascript">
$(document).ready(function()
{
$('#item').change(function()
{
var item= $("#item").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"item="+item,
dataType:'json',
type:'POST',
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode);
}
});
return false;
});
});
</script>
When you change the value using JavaScript it won't trigger events.
A simple fix is to trigger the event yourself after you update the value.
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode).change();
/* OR */
$('#mode').val(mode).trigger('change');
}
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.
I'm trying to create a text box that will search a mysql database, provide auto completed text below the text box and then show a confirmation tick or cross to show that the name is already in the database (or not).
I've got it to work with just one text box, but I'd like to add multiple text-boxes on the same page. eg so someone can search for 10 different names, have them all auto completed and then shown with either a green tick or red cross to confirm that they are in the database.
I'm new at this so apologies if it is something obvious that I'm doing wrong!
Thanks in advance.
This is the javascript:
<script type="text/javascript">
function check_username(){
var username = $("#username").val();
if(username.length > 2){
$.post("username.php", {
username: $('#username').val(),
}, function(response){
$('#Info').fadeOut();
setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
});
return false;
}
}
function finishAjax(id, response){
$('#'+id).html(unescape(response));
$('#'+id).fadeIn(1000);
}
$(function() {
$( "#username" ).autocomplete(
{
source:'source.php' })
});
</script>
This the the html textfield:
<td><input type="text" id="username" type="text" onblur="return check_username();"/></td>
<td><div id="Info"></div></td>
<td><input type="text" id="username2" type="text" onblur="return check_username2();"/></td>
<td><div id="Info"></div></td>
try:
$( "input#username,input#username2" ).autocomplete(
instead of
$( "#username" ).autocomplete(
I have a WordPress Advanced search that when a user selects the applicable category from the dropdown menu it navigates them to that suggested category. I'd like for it to take them to that category on submit instead of it doing it automatically once the option is selected.
Here is my JS code:
$(function(){ // bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url;
} return false;
});
});
$(function(){ // bind change event to select
$('#dynamic_select2').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url;
} return false;
});
});
And Here is my HTML:
<form class="treatment-form-procedure">
<label class="selectstyle" id="treatment-procedure-select" style="margin-top:10px;">
<select id="dynamic_select">
<option selected>Select One</option>
<option class="level-0" value="<?php bloginfo('url'); ?>/treatment/medical-dermatology/">Medical Dermatology</option>
</select>
</label>
<input type="submit" value="Search" id="treatmentSubmit" style="padding: 10px 7px;" />
Simply remove the javascript handler for the dynamic_select, and the form will no longer submit on change . . . the code you can remove or comment out is:
$(function(){ // bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url;
} return false;
});
});
Capture the form submit.
$('form.treatment-form-procedure').on('submit', function (event) {
event.preventDefault();
window.location = $('#dynamic_select').val();
});
OR (and I like this better) update the form action:
$('#dynamic_select').on('change', function () {
$(this).closest('form').attr('action', $(this).val());
});
... so the form submits to that url.
I have a message box with a submit button, when I click the submit button the content in the box should be insert in the MYSQL database, but without going to another page. The message which i just entered in the message box should be displayed in the same page after the submission. What should I do?
Use something called AJAX..
suppose this is your code :
<form id="myform" action="something" <!--Add this part-->onsubmit='return sendData()'<!--End of added part-->>
Enter Message <textarea name="msg" id="msg"></textarea>
<input type="submit" value="submit" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function sendData(){
var msgVal = $("#msg").val();
$.ajax({
data:"msg="+escape(msg),
url: $("#myform").attr("action"),
type: $("#myform").attr("method"),
success:function(){
alert( $("#msg").val() );
}
});
return false;
}
</script>
<script type="text/javascript">
function postData() {
var order = 'name='+$('#textBoxId').val();
$.post("Another_PHP_Page_Path.php", order, function(response,status, xhr){
if (status == "success") {
alert(response);
$('#divId').text(response);
}
else if (status == "error") {
alert('Something went wrong, we are working to fix it');
}
});
}
</script>
Note: name will be posted to PHP Page and after insterting into Database you can echo anything on php page or echo name, and on response this will showing back at same page. Use postData() on button onclick and button type should be button not submit.