Click and load multiple links with different GET parameters (which auto submits) - javascript

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"
});
}

Related

JQuery .on("click") event not triggering

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>";

Wordpress use ajax on page load from url get parameters

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() {
}
});
});

Javascript to Post Inside a Div

I have this code bellow and I need it to make a post inside a div.
<script type="text/javascript">
$(function() {
$(".loader").click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#content').load($(this).attr('href'));
});
});
</script>
<form method="post">
some random inputs and checkbox's goes here
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
</form>
When submiting, the javascript is sucessfully loading the consulta_produto.php inside a div called "content", however, I need to adapt the script to make it possible to POST too
Someone at other topic said to Use $(".loader").parent("form").submit instead of $(".loader").click, however i didnt understood what he meant, I tried changing it in a lot of different ways, but none of them worked
I researched a few topics about how to post with javascript, but I could adapt none of them to keep the function to load consulta_produto.php inside the div "content"
So I wonder, how can I adapt my javascript to keep loading consulta_produto.php inside content div while posting the data from some inputs and check boxs?
First of all, you need to either:
Place all of your <script> code after the relevant HTML has been loaded, OR
Wrap it all in a $(document).ready(function() {...}); to achieve the same effect
Then, instead of executing code at your inputs click() event, you can do it upon your forms submit() event. (This is basically what you mentioned someone told you in another topic). I changed your submit input to a submit button, doesn't really matter.
So, instead of loading the href attribute, you load the action attribute of the form itself into the div.
Of course you want to submit actual data along with the form - no problem. You just use an AJAX method. This is in order to stop the page from reloading.
First you do the preventDefault() to stop the usual page reload. Then you initialize the $.ajax() method.
Data: The first parameter 'data' contains all the form data to pass
along.
Type: Represents the type of request (POST)
URL: This is the form action (/consulta/consulta_produto.php).
Success: Finally, the 'success' parameter contains a function
which loads it all into the specified <div>.
AJAX is essential when avoiding page reloads in PHP, play around with it!
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(event) {
event.preventDefault();
$.ajax({ //AJAX Method
data: $(this).serialize(), //Gets data from form
type: $(this).attr('method'), //Gets the method, in your case POST
url: $(this).attr('action'), //Gets the form action
success: function(r) {
$('#content').html(r); //Loads data into div
}
}); //End of AJAX Method
}); //End of form submit event
});
</script>
And here is your HTML:
<div id="content" style="width:100%; height:500px; ">
</div>
<form id="form" action="/consulta/consulta_produto.php" method="post">
some random inputs and checkbox's goes here
<button type="submit">Consultar<button>
</form>

Can I submit a form using jquery/ajax to a php script that returns a file?

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?

how can i clean the cached data from browser using javascript

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();
}
});
}
});

Categories