when i submit my form, only popup box appears without any query results. I have 2 submit buttons which trigger the query of my php script. The query results should be displayed in a popup box. i suppose, something should be wrong with my jquery code. here is my code:
<div class="md-modal md-effect" id="modal">
<div class="md-content" id="content">
<h3>Query Results</h3>
<div id="result"><?php include 'query/_query.php'; ?></div>
<button class="md-close">Close</button>
</div>
</div>
<div class="column">
<div align="center">
<form id="query" action="" >
<button class="md-trigger md-setperspective" name="queryM" data-modal="modal" id="queryM">Query Person</button>
<button class="md-trigger md-setperspective" name ="queryG" data-modal="modal" id="queryG">Query Order</button>
</form><br>
</div>
<script>
// formular query
$( "#query" ).submit(function( event ) {
// prevent pagerefresh
event.preventDefault();
// querym & queryg
var $form = $( this ),
term = $form.find( "button[name='queryM']" ).val(),
term = $form.find( "button[name='queryG']" ).val(),
url = $form.attr( "action" );
// post data
var posting = $.post( url, { queryM: term, queryG: term } );
// results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</div>
</div>
<script src="js/loader.js"></script>
<script src="js/modal.js"></script>
For a start, change your term variables to termM and termG both in the definition and usage respectively:
termM = $form.find( "button[name='queryM']" ).val(),
termG = $form.find( "button[name='queryG']" ).val(),
.....
var posting = $.post( url, { queryM: termM, queryG: termG } );
You can't assign two different values to a single variable and expect to retrive them. The first value will be overwritten by the second.
In the done call back, you may want to do console.log( data ) to confirm that you're getting the desired response.
Related
<script>
$(document).ready(function(){
var spinner = $( "#spinner" ).spinner();
$('#spinner').autocomplete({
source:'name.php'
});
$( "#getvalue" ).on( "click", function() {
alert( spinner.spinner( "value" ) );
});
});
</script>
<body>
<label for="spinner">To search name type here:=</label>
<input id="spinner" name="value"/>
<p>
<button id="getvalue">Get value</button>
</p>
</body>[1]
Above is the snapshot of the output and i want to get the particular value from this dropdown on get value button clicked and above is jQuery code and html code.
Value from the spinner field can be extracted like this:
$( "#getvalue" ).on( "click", function() {
.
.
value = $("#spinner").val();
alert(value);
});
I want to allow my users to sort some items with jQuery UI sort ( http://jqueryui.com/sortable/#default )
I have added all required files and it's working. I have problem with saving that new order (array) in PHP.
$(function() {
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
});
Question is: How to transport that array of IDs to PHP after submitting form?
Note: I am not very familiar with JavaScript/jQuery
If you don't actually have any other form elements except submit button, why not use Ajax instead?
Given html structure
<ul class="list">
<li id="item_1">1</li>
<li id="item_2">2</li>
<li id="item_3">3</li>
</ul>
<input type="button" id="send" value="Send" />
Here's how you "transport that array of IDs to PHP"
$(document).ready(function(e) {
$('.list').sortable();
$('#send').click(function(e) {
var sorted = $('.list').sortable("serialize");
$.get('http://www.yoururl.com', sorted, function(data)
{
console.log(data);
});
});
});
The data can be accessed from a $_GET array
<?php
print_r($_GET);
?>
Im trying to make something like this http://demos.99points.info/facebook_wallpost_system/ which is a comment system. I have the ajax code below except i don't know how to uniqely select textareas. The challenge is that the number of posts is variable so all of the posts need to be uniquely identified so that when the data is put into the database i know which post it relates to.
JQUERY:
<script type='text/javascript'>
$('document').ready(function(){
$('.commentContainer').load('../writecomment.php');
//commentContainer is a class so it applies to all of the textareas, but i need this selector to be unique
$('.submitCommentBox').click(function(){
//these are the selectors that i can't get to work right
var comment = $('').val();
var postid = $('').val();
$.post('../comment.php',
{
comment: comment,
postid: postid,
},
function(response){
$('#commentContainer').load('../writecomment.php');
$('.commentBox').val('');
}
}
return false;
}):
});
</script>
HTML/PHP
<?php while ($row=mysql_fetch_assoc($query)){
echo"
<p name='singlePost'>$post[$f]</p>
<div id='commentContainer'></div>
<textarea class='commentBox'></textarea>
<input type='button' value='submit' class='submitCommentBox'>";
}
basically the HTML/PHP generates for each post on the page as to create a textarea and subimt button for each post. therefore the user can comment on each post.
Using the markup in the link you provided, I would do something like:
var container = $(this).closest('.friends_area');
var comment = $(container).find('.commentbox').val();
var questionid = $(container).find('#hidden').val();
var answerid = $(container).find('').val();
A more correct solution would be something like:
HTML
<div id="posting">
<form method="post" action="">
<input type="hidden" name="record_id" value="123" />
<textarea name="comment"></textarea>
<button type="submit">Comment</button>
</form>
...
</div>
JS
$('#posting').on('submit', 'form', function(e) {
e.preventDefault();
var form = $(this).closest('form');
$.post($(form).attr('action'), $(form).serialize(), function() {
$('#commentContainer').load('../writecomment.php');
$('.commentBox').val('');
});
});
I've got a form that lets my user search. I'm using jQuery to append the search results lower in the page without reloading the page. So, I've got this:
isbn.php:
<form method="post" action="ajax.php" name="searchISBN" id="searchForm">
<input type="text" name="isbn" placeholder="Search..." />
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
The problem is, I need that input text search field to clear when the user hits the Search button or hits enter. Both hitting enter and the Search button execute the search, so it must clear when either action happens.
But, I'm absolutely stumped.
Any help will be greatly appreciated!!
Edit:
I've tried what Treffynnon suggested. The problem there is, I've disabled the search button from actually loading ajax.php. So, when I use that code, it stops the page from staying on isbn.php and it loads ajax.php . This is the code that loads the search results.
isbn.php:
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
});
</script>
$('#searchForm').submit(function(){
// do search loading code here and then
$('input[name="isbn"]').val('');
});
Try this based on your update:
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
$term_input = $form.find('input[name="isbn"]'),
term = $term_input.val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
$term_input.val('');
});
Add a hidden variable to achieve this as follows:
<form method="post" action="ajax.php" name="searchISBN" id="searchForm">
<input type="text" name="isbn_holder" placeholder="Search..." />
<input type="hidden" name="isbn"/>
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
$('#searchForm').submit(function(){
$('input[name="isbn"]').val($('input[name="isbn_holder"]').val());
$('input[name="isbn_holder"]').val('');
});
I've made jQuery & AJAX script that uses a PHP function to bring back results from an API. That part works great, but everytime I search for a new book, it removes the previous search results.
I want to give it a book ID, search, get results, and continue doing that. Every time I click "search", I want to populate a list with more books.
This code keeps removing my previous book and replacing it with the new book I've searched for.
Any ideas?
isbn.php:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" id="searchForm">
<input type="text" name="isbn" placeholder="Search..." />
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
<div id="result"></div>
{literal}
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).html( content );
}
);
});
</script>
ajax.php does the API call and prints the results inside of isbn.php.
if you are just trying to append the content then:
$( "#result" ).append( content );
if you want the new results to go to the top of the results div then
$( "#result" ).prepend( content );
using $( "#result" ).html( content ); tells jQuery to replace the entirety of any HTML inside #result with the new content
The problem is in your ajax success function you are rewriting the entire content of the #result block. If you changed .html to .append this should just make it additive rather than replacing.