I am using ajax jquery to submit a form, it works fine but when i submit the form for more than 5 times it makes the browser very slow, i have looked to inspect element it shows me that the more than 5MB data transferred while this amount is 22KB for firs time.
the form and the result area is located in same page there is no refresh on the page. if i refresh the page it work normal but after submitting more than 5 times same thing happens again.
the code is here:
$(".btn_search").click(function(){
if($('#org option:selected' && '#dept option:selected')) {
$.ajax({
type: "POST",
url: "showReports",
data: $('#search_form').serialize(),
cache:false,
success : function(response){
$("#payroll-assign-rights").html(response);
$('#payroll-assign-rights div.box #assign-head-1').next().remove();
$('#payroll-assign-rights div.box #assign-head-1').remove();
$('#payroll-assign-rights div.box #assign-head-2').remove();
$('#payroll-assign-rights div.box #payroll-assign-rights').hide();
$("#emp-report").show();
}
});
}
});
Related
I am currently working on a "split-screen" web application. It uses selenium to retrieve the html of a webpage then sends and displays it in iframes using srcdoc. I want, when someone presses a link in the first screen, for the second screen to display a simple "Loading" while an ajax request is sent to the backend to retrieve the html of the url (as it might take a couple of seconds to load) then display the retrieved html in the second screen.
To do so, I "inject" a JQuery event code into the src code of the first screen in the backend (shown below) right before the end body tag (as the retrieved source is a string, that is easy to do). The second screen has id="oframe".
For some reason, the JQuery event wont trigger. Any ideas why?
<script>
$("a").on("click",function(e){
e.preventDefault();
if(e.target.href){
let link = e.target.href;
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
}});
</script>
Note that the event works if I only have
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
or
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
inside the if statement.Together they stop the event, I know that because preventDefault() is not working (link opens in a new tab).
Example <a> tag:
<a class="gdpr-modal-link" target="_blank" ref="http://www.politifact.com/privacy/">cookies</a>
You cannot have a line break in the middle of JavaScript string.
So, put this:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
all on one line:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>p>Loading</p></body></html>";
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() {
}
});
});
I have a PHP script that is using PHPExcel. It generates an xlsx file for download. However, this takes quite a bit of time depending on the paramters that the users selects. I am wondering if I can submit the paramaters to via ajax, show a "loader" image after submitting it, but once the file is complete, return the file for download.
Here is what I tried, but it didn't work:
$(document).ready(function(e) {
$("#reporting-export-form").submit(function(e) {
$("#loadingImage").show();
var url = "reporting-export-download.php";
$.ajax({
type: "POST",
url: url,
data: $("#reporting-export-form").serialize(),
success: function(data)
{
return data;
$("#loadingImage").hide();
}
});
e.preventDefault();
});
});
UPDATE
So I think the consenhsious is that it cant' be done. So I have another idea that is working 99% and fakes an ajax experience, but with 1 glitch. I put an iframe on the page. I then set the target of my form to be that iframe. When it submits, the page stays on it's current page and when the PHPExcel file finishes it presents the file for download. So then I added this jQuery code to my page:
$("#reporting-export-form").submit(function(e) {
$("#loadingImage").show();
});
And that works great as well. Now I want to hide the loading image once the file is either downloaded or cancelled. So I added this code to the page that outputs the file:
$(document).ready(function(e){
$('#loadingImage', window.parent.document).hide();
});
That doesn't work. If I remove the PHP code that outputs the file, then it does remove the loading image after the iframe loads, but as long as I try to output the php file in the iframe, the javascript doesn't seem to work. Any ideas?
Currently I have a page (index.php) where user can click on a link which links to another page with GET parameters (upload.php).
index.php
Content A (Link to upload.php?id=123&name=abc)
Content B (Link to upload.php?id=456&name=efg)
Content C (Link to upload.php?id=789&name=hij)
upload.php
Clicking on one of the links above will get the user to upload.php which will parse the GET parameters and put it into a HTML form, and then auto submits. Thus putting the parameters into the database.
My Question
It is troublesome to click many times just to do this auto submit.
I wish to click on a "BATCH UPLOAD" link in index.php, and it would automatically loads the 3 links in background, and upload all the parameters into the database.
Is there any way to do this using AJAX or any better way?
This should do the trick with jQuery, but you need to write the values directly to the database in upload.php not auto submit a form in between...
function batchUpload(){
$.ajax({
type: "GET",
url: "upload.php?id=123&name=abc"
});
$.ajax({
type: "GET",
url: "upload.php?id=456&name=efg"
});
$.ajax({
type: "GET",
url: "upload.php?id=789&name=hi"
});
}
i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>
Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
Presuming that you're using Ajax to change your page states, why not look at something like History.js?