So i am building a search on website, and main search form is on home page where user can input information's like, interests, books, movies.
And that form should submit to another page where search will be displayed.
So it's similar like any other search, but on search page, i should keep parameters in url, so it's not going to be POST, it would be GET.
Home page is something like mywebsite.com
And when form is submitted it's posted with GET parameters so user can keep search results in his url. Submitted post should lead to something like.
mywebsite.com/search?interests=sports&books=harry+potter&movies=moviename
And because it can take some time to search and load results i would like to load the page and than do an ajax post to search function and populate search results once ajax responds.
I've built in past some ajax content loading and post and load data with ajax, but all that while keeping on same page, i never built when you submit content from one page to another in wordpress.
Any suggestions how can i do that and make ajax grab the content ?
I found the answer, and it's actually quite easy, instead triggering ajax with function, for example function with button click.
Just trigger ajax on page load, and don't enqueue script anywhere else except on that page, this would help a bit.
if ( is_page_template('template-search.php') ) {
wp_enqueue_script('ajax_search');
}
This will ensure script is loaded only on that template page, and as for script it self, just load ajax on page ready:
jQuery(document).ready(function($) {
jQuery.ajax({
dataType: 'json',
url: search_flight.ajaxurl,
data: {
action: 'search_flight',
},
beforeSend: function() {
},
success: function(data) {
console.log(data);
},
error: function() {
}
});
});
Related
I have been reading and researching how to support the back button on my site while using jquery ajax in wordpress. I have read about implementing hashes but there is still something I am not quite understanding. I am not really sure how implement it into my current code base.
ajax.js
jQuery(document).ready( function ($) {
$(".product-cat").click(function(e) {
e.preventDefault;
$.ajax({
url: ajaxproducts.ajax_url,
type: 'post',
data: {
action: 'ajax_product_load',
datavar: $(this).data( 'id' )
},
success: function ( result ) {
$("#main").empty();
$("#main").html( result );
}
})
})
});
plugin-functions.php
Product Category Name
When a user clicks the link, all data is retrieved through ajax just fine and loads all the products for that selected category. However, if the back button is pressed, it does not go back to the product category's page rather it goes back to the home page. I want it to be able to go back to categories page and if a user wants to bookmark the product page that they selected they should be able to.
Any help trying to figure this out would be appreciated.
I have a button call this script, so it does the post in the background, but I need to reload the current page to display an updated php query, I realize there was probably a better way in jquery to the query part, but its crunch time, and all I want to do is get a successful page refresh.
Because the buttons were generated in php, the javascript code is at the end of the body.
I've tried location.href, window.location.reload(true);, document.write which only wrote to the page, document.location.href did nothing.
We are using jQuery/jQuery mobile, I was not on front end dev team, so I'm desperate to get this to work. to clarify, I need a page refresh after the $.post() command, within this code, which does work
<script type="text/javascript">
$('#reserveBook').click(function () {
var isbn = sessionStorage.getItem('isbn');
$.post(
"../inventory/postpage.php",
{ isbn: isbn }
);
});
</script>
There's no point in using AJAX if you need a page refresh regardless. As Dan Bracuk said in his comment, you'd be better off just doing a traditional form submission.
However, if you're set on having the page refresh, just add window.location.reload() in the success handler for your AJAX call:
$.post(
"../inventory/postpage.php",
{ isbn: isbn },
function(response) {
window.location.reload();
}
);
i am new in Django and this things, and i need some tips or solutions to adding spinner.
Iam using spin.js, which i show it on this way:
var target = document.getElementById('spin');
var spinner = new Spinner(opts).spin(target);
spinner.stop();
function spin_stop()
{
spinner.stop();
}
function spin_start()
{
spinner.spin(target);
}
This code is copied from some example on web.
I show spinner with <div id...>
Now there is a problem.
I have an app in Django with name testScript. That app connects to different page to verify login information. This is "long" process, it takes about 10sec.
In that time, i want on my login page add a spinner.
In template i have a form:
<form class="form-signin" action="/testScript/" method="post">
and if i want to add onclick event in my button in this form, my spinner freeze.
How can i show spinner, when my testScript is processing?
Thanx
The spinner freezes because the browser has changed the page and is waiting for the new page to respond.
You could try using an animated gif as a spinner instead of spin.js, but that would probably freeze too.
If your verification process really needs to take 10+ seconds, then your best option is to submit the POST using Ajax, and then redirect or display the response once the server responds.
How you do it with Ajax depends on your workflow. The easiest way to POST by Ajax is with jQuery, if you don't mind an extra library. Once it responds show the response in a div on the page or redirect to another view.
$.ajax({
url: "/testScript/",
method: "POST",
data: { //form data
},
success: function(data) {
//Display response here
},
complete: function() {
//Hide spinner here
}
});
This is pretty barebones since I don't have enough details about your application or markup, but there are lots of similar solutions on here to help you.
I have an issue on a website where a page content (results) are updated via AJAX. Contained within this AJAX returned content is a script tag which renders the LinkedIN "share" button.
When the page first loads with the initial resultset the layout looks like this:
Each of these buttons is within a left-floated div, and the HTML looks like this in Chrome developer tools:
As you can see the script tag is appearing where it is supposed to be, in the div, and the dynamically generated span containing the button is just above.
Now, when i append more results via an AJAX request, things go a bit haywire, and look like this:
As you can see the LinkedIN button is way out of place, and the reason is apparent when looking at the HTML in developer tools:
The script tag is not within the div where it appears in the code file, instead appearing after the closing tr tag - and the span with the button is just above.
So, why is this, and more importantly what can be done to ensure that the script tag is where it belongs so that the layout is correct?
FYI - At the foot of the body is javascript which loads the LinkedIn .js file and after the AJAX request for more results completes there is an invocation of the LinkedIn .parse() method which is supposed to parse the full document and render the buttons.
EDIT
The application is built using ASP.NET MVC and the response returned uses the same .ascx control to format the results as the initial page load does.
EDIT - AJAX request used to retrieve extra data
function LoadMore(uri, last, loader, end)
{
isLoading = true;
$(loader).show();
$.post(uri, function(data)
{
if (data != "")
{
$(last).after(data);
isLoading = false;
// re-do social media share initialisation on the new AJAX-added content
gapi.plusone.go('container');
twttr.widgets.load();
FB.XFBML.parse();
IN.parse(document.body);
}
else
{
$(end).show();;
}
$(loader).hide();
});
}
EDIT
The actual HTML returned from the server is correct. Viewing the source shows the script tag in the correct location, but viewing the page in Chrome developer tools, as shown in the images above, shows the script in the wrong place in the DOM. This occurs in both IE9 and Chrome.
Are you building the html dynamically ? Maybe it has something to do with misconfigured callbacks. If you are using $.ajax({...}), make sure that the next iteration is specified into the "success:" property to prevent unordered render.
Use ajax call like this
$.ajax({ url: 'url',
type: 'POST',
data: json,
dataType: 'json',
contentType: 'text/html',
success: function (data) {
//you response will be data
}
});
I have a search script written in jQuery. To submit a query a user presses enter and then a URL for the results page is created which is something like #search/QUERY/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be?
My jQuery code is:
$(document).ready(function(){
$("#search").keyup(function(e){
if(e.keyCode==13){
var search=$(this).val();
var query=encodeURIComponent(search);
var yt_url='search.php?q='+query;
window.location.hash='search/'+query+'/';
document.title=$(this).val()+" - My Search Script";
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(response){
$("#result").html(response);
}
});
}
});
});
When a user reloads the javascript, all variables and functions are reinitialized. JavaScript does not pass variables from page to page. You either need a server side solution, or use JavaScript storage. The later may not work in all browsers.
This is because you are loading the search results dynamically with an AJAX call. If the page gets reloaded, that information gets lost.
A possible solution would be to store the search query and/or results in the user session. Then you will be able to automatically add the content on page reloads.