'refresh only div on form submit
I have a form:
<form method="get" action="/category/news/?newsSearch=" id="searchForm">
<input id="newsSearch" type="text" name="newsSearch" placeholder="Напишіть щось">
</form>
And I want to not refresh all page and just change this div
<div class="news" id="newsList">
<?php
global $post;
$postslist = get_posts( array( 'posts_per_page' => 200, 'category'=>'news' ) );
foreach ( $postslist as $post ){
setup_postdata($post);
?>
<div class="bl">
<div class="date">
<?php the_date(); ?>
</div>
<div class="tik">
<?php the_field('tiker'); ?>
</div>
<div class="price">
<?php the_field('price'); ?>
</div>
<div class="nnw">
<h5>
<a onclick="$('.hrs<?php the_ID(); ?>').slideToggle('slow');"><?php the_title(); ?> </a>
</h5>
<div class="src hrs<?php the_ID(); ?>">
<?php the_content(); ?>
<a href="<?php the_field('link'); ?>"><?php the_field('link'); ?></a>
</div>
</div>
<div class="site">
<a href="<?php the_field('istochnik'); ?>" target="_blank">Сайт</a>
</div>
</div>
<?php
}
wp_reset_postdata(); ?>
</div>
I find that solution Want to refresh a div after submit the form? but it didn't change anything (no console errors).
This is my variation of this 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='newsSearch']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#newsList" ).empty().append( content );
});
});
Form is changing URL to .../?newsSearch='query'and js is hiding posts that doesn't have query in their titles.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
