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.
Related
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.
I have a form with one text box that is part of a div tag. I want it to change the contents of that div tag to another page based on the contents of a textbox in a php GET request.
for example if you type hell into the textbox it will load goto.php?location=hell into the div.
so far this is the code i have below, and due to it being my first time with jquery sucks more than a hoover vacuum cleaner.
<div id="city"></div>
<form name="goto" action="/">
<input type="text" id="city">
<input type="submit" name="submit" class="button" id="submit_btn" value="New City" />
</form>
<script>
/* attach a submit handler to the form */
$("#goto").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
city = $form.find( 'input[name="city"]' ).val(),
/* Send the data using post and put the results in a div */
$('currentwxdiv').load('http://www.jquerynoob.bomb/hell.php?location=' + city);
});
</script>
Currently instead up updating the contents of the div it reloads the entire page in the browser and then appends it with ?submit=New+City
UPDATE This is what I have now and its still doing the full page refresh with the appended ?submit=New+City
<script>
/* attach a submit handler to the form */
$$('form[name="changewx"]').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
city = $('#city').val()
/* Send the data using post and put the results in a div */
$('#currentwxdiv').load('http://api.mesodiscussion.com/?location=' + city);
});
</script>
You have created your form like this:
<form name="goto" action="/">
But the selector only matches the element with an id goto. So it should be:
$('form[name="goto"]').submit(function(event) {
You also made a mistake the other way around:
$form.find( 'input[name="city"]' ).val()
Should be:
$('#city').val()
Another thing:
$('currentwxdiv') // this matches a tag called currentwxdiv
Should be:
$('.currentwxdiv') // for element with class currentwxdiv, or $('#currentwxdiv') to match based on id
And instead of doing e.stopPropagation(); you should do return false; at the end of the function.
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 coded some jquery & AJAX to call a PHP function I made that goes and gets some API data and brings it without refreshing the page. It appends, so you can have multiple searches without losing results.
What I need to do now is, I want to give the user the ability to change his mind on any one of the results. Maybe a little "X" at the end of each row. They click the "X" and that particular result is gone.
I've googled this, but I don't know what I'm looking for. Send me in the right direction, please?
Here's what I've got, so you know what I'm looking for:
<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>
<form name="buyback" method="post" action="isbn.php">
<table id="result" class="myaccount" border=0 cellspacing=5 cellpadding=4>
<tr><td>
<strong>ISBN:</strong>
</td><td>
<strong>Price:</strong>
</td>{if $userlevel == 5}<td>
<strong>Full FCB Price</strong>
</td>{/if}
</tr>
</table>
<input name="doBuy" type="submit" value="Buy"><br>
</form>
<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>
EDIT:
Yes, it just returns data in this format:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td></tr>
This really depends on what type of html is returned by the ajax call. But you could wire up a .live() event that removes whatever you need to get rid of.
$('.removeItem').live('click', function(e) {
// remove whatever you want. maybe the previous element?
$(this).closest('tr').remove();
});
// clicking that link will remove everything returned by the ajax.php call
var content = $(data);
content.append("<a class='removeItem'>X</a>");
$("#result").append(content);
or you could just add the anchor into the results that are generated by your ajax.php file.
EDIT:
You could just use the live event and modify your html like this:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td><td>
X
</td></tr>
First of all.. is this possible? I work&create a var in javascript (jquery ui framework) and then when I click on the "Submit" button of my form it should this variable?
HTML & Javascript (Jquery UI):
<script>
$(document).ready(function() {
var slider1 = $( "#slider1" ).slider( "value" );
var slider2 = $( "#slider2" ).slider( "value" );
});
</script>
pseudo: HTML & PHP:
<?php echo slider1 ?>
How can I echo the value of #slider1 ??
You cannot assign a variable from javascript to php, but you can set a javascript variable to a form input element before you send the form, then you can get the values via the $_POST or $_GET (or the $_REQUEST) superglobal arrays, based on your method ().
http://php.net/manual/en/reserved.variables.get.php
http://php.net/manual/en/reserved.variables.post.php
For example:
Javascript:
$(document).ready(function(){
var test = "test";
$('#someinput').value(test);
});
Html:
<form action="some.php" method="post">
<input type="hidden" id="someinput" name="someinput"/>
<input type="submit" value="send"/>
</form>
PHP:
<?php
var_dump($_POST['someinput']);
?>
Mike you cannot mix server side code with client side code. They are completely seperate!
What you can do is just before the form posts put some value inside a hidden input and check it on the server side
add it to hidden input in your form
like
$('#hidden_field').val(slider1)
You are misunderstanding how PHP and Javascript work. PHP runs on the server, JavaScript runs on the browser. When JavaScript runs, PHP is already done generating the document.
If you have a JavaScript variable, you need to use JavaScript to alter the element.
For example:
<div id="slider_value"></div>
<script>
$(document).ready(function() {
var slider1 = $( "#slider1" ).slider( "value" );
var slider2 = $( "#slider2" ).slider( "value" );
// Assign value to DIV
$("#slider_value").html("Value: "+slider1);
});
</script>