send data in load data - javascript

Hı,
I have a script that loads my div tag some PHP files like this;
$(".loaddiv").click(function() {
var url = $(this).attr("id") + ".php";
$("#orta_load").load(url);
console.log("loading " + url);
});
when ı click a button; its load of some PHP files into orta_load div tag without refresh (that is the problem)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Dahili Branşlar</span>
<span>Cerrahi Branşlar</span>
<div id="orta_load">
loading page
</div>
How can send data to another page which is upload?
for example, ı have a contact page that name is contact.php.
When I press submit button I should send all data to thanks.php page without refresh the main page
I tried lot of ways but I could not do this. when I press the button the page is refreshed or it is not send the data
What should I do?

Related

DIV Refresh on a Object File

I've created a DIV that loads a text file. The goal is to update the text file and have the output correctly displayed in the browser. It works; however, when I update the text file, the contents do not display in the browser until I do a ctrl-F5 to hard refresh the page.
<div id="outage"><object width=475 data="outage.txt"></object></div>
How can I refresh the DIV or OBJECT to correctly display the data in the text file?
I think that's what you mean? Ajax can be used in this process.
If you want what has been written in the file to be moved to the 'div' immediately after the 'save' then I don't think it's possible to do it except by back-end
<div id="outage">
<object width=475 data="outage.txt"></object>
</div>
<button class="bttn">Update</button>
<script>
document.querySelector(".bttn").addEventListener("click", (e) => {
e.preventDefault()
document.querySelector('#outage').innerHTML = "";
document.querySelector('#outage').innerHTML = `<object width=475
data="outage.txt"></object>`;
});
</script>

page reload with success message php

i am trying above but message is displayed on php page.instead of reloading on index page AND DISPLAY MESSAGE ABOVE SUBSCRIBE FORM ITS REDIRECTING TO PHP PAGE.You can check on test site link attached.Form is on index
page.I tried to reload page through jquery onload and onclick onsubmit but didn't worked.below are test which i did.
//form is on index.html page
<!-- your form here -->
<form action="forms/subscribe.php"id="form" method="post">
<input type="email" name="email" placeholder="Enter your Email">
<input type="submit" value="Subscribe">
</form>
//form is on index.html page
My php page
<?php
// My Code goes here form to email
header.location(Location: /index.html)
?>
You cannot use js variable values after reload. You need to do things without reloading the page means you just need to update the content and control your HTML tags.
The above example you mentioned. They are not reloading the page, they are getting values from input box then hide that div. After hiding the div they are showing another div with the information.
For your solutions you can do the same but remember to reset input values for every request.
You can do it in PHP with page reloads if you store a message in the session. At the top of each page make sure that the first line is
session_start()
Then on the page that receives the data set a session message
$_SESSION['message'] = 'Some Value';
Then on your page with the form you check to see if the session has a message. If it does, display it and then clear it.
if(isset($_SESSION['message']) {
echo $_SESSION['message'];
session_unset('message');
}
some silly syntax error
using onsubmit="alert()"
<script>
function alert() {
alert("Thank you for contacting us. We will be in touch with you very soon.!");
}
</script>
on subscribe pageheader('Location: /index?message=success');

Include different .php files in JS popup

I have multiple buttons which currently redirect to different pages for users to perform a single action and they would then need to click another button whilst on the confirmation page to go back where they were before. This is old school and inconvenient...
What I would like to do is create 1 single pop-up box which would get triggered (appear) when any of those buttons are clicked. Inside the box, I want the relevant .php file to appear so users can confirm their action and the page would then reload and display a confirmation message.
Example:
"Delete" button needs to trigger the confirmation-popup.php to appear with the delete.php file included in it so users can confirm the deletion.
"Cancel" button needs to trigger the confirmation-popup.php to appear with the cancel.php file included in it so users can confirm the cancellation.
Here's what I've done:
- Created the pop up and included it on their Account page (that's where all the buttons are).
- Added a JS which passes through the button ID to trigger the popup
When either of the buttons is clicked, the popup would appear fine.
I'm stuck at the stage where different "action".php files need to passed and included in the body of the popup. I know I could create multiple popups each for its relevant action, but we all know this isn't best practice and it's doubling up.
Any help would be appreciated!
Edit: Added code after the below comment
HTML:
<button class="button-small button-red" id="confirm-delete">Delete</button>
JS:
$(document).ready(function() {
$("#confirm-delete").click(function() {
if (!$(".confirm-popup").is(":visible")) {
$(".confirm-popup").fadeIn("slow");
return false;
}
});
});
PHP confirm_popup.php:
<div class="confirm-popup">
<?php include 'delete_auction.php'; ?>
</div>
You can open different iframes in the popup based on the button pressed. That will allow you to use one popup and you will just edit the iframe src attribute to the correct php page. For example you can add an HTML attribute to each button that holds the URL of the page that should be opened by the button. Then you will have some JS code that on the button press will read the attribute that holds the URL and puts it in the iframe src attribute inside the popup.
Something like this using jQuery:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"><iframe src=""></iframe></div>
<script type="text/javascript">
$('.myclass').click(function(){
$('.popup iframe').attr('src', $(this).attr('content-url'));
})
</script>
Or AJAX way:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"></div>
<script type="text/javascript">
$('.myclass').click(function(){
$.ajax({
url: $(this).attr('content-url'),
data: {},
success: function(response) {
$('.popup').html(response);
},
dataType: 'html'
});
})
</script>

How can I load PHP GET values using jquery .load()

I am trying to load data from another page. The data that I am trying to load is simple PHP $_GET value that was passed through a URL
The $_GET value should be loaded only when the following link has been clicked on.
The data only loads when I use the following href link :
<a id="pizza" href="#">Pizza</a>
However when I use this href tag
<a id="pizza" href="menu.php?test_val=1">Pizza</a> <!-- The link is on the same as the menu.php page >
The content does not get loaded. I figured out that it doesn't get loaded because I set the content to display only when the link gets clicked on like so...
<script>
$("#pizza").on("click", function(){
$("#item_description").load("item-details.php");
})
</script>
The problem is when I click on the link it starts a new XHTTP request and doesn't reach the
$("#item_description").load("item-details.php");
Because nothing is being clicked on when there is new XHTTP request.
The item-details page just echo's out the value that was sent
<?php
echo $_GET['test_val'];
?>
Can anyone please help me come up with a solution??
Thanks!!
use
<a id="pizza" href="#">Pizza</a>
to keep your link format and you can use
$("#item_description").load("item-details.php?myvar=1&mysecondvar=2");
to pass your value to your PHP script
you can read GET value by parsing :
window.location.href
if needed

call external page & load dynamic content into DIV with AJAX/Jquery

Well, I understand there is a way to change contents within the same page using Ajax call & load functions (my example page a)
What i am looking for is, is there a way to call an external page & load dynamic content unto the selected div on that external page. i guess it possible using HTTP Request Methods
but i am really a noob at that.
OK, I have page a (picture attached)
the ajax loads the content into the "RESULT" div on clicking the specific id's
here is the ajax script & the html i have come so far. this loads perfectly on the Result div on the "page a" itself.
<a href="#" id="one" /><br>
<a href="#" id="two" /><br>
<a href="#" id="three" /><br>
<div id="result" class="functions"></div>
$.ajaxSetup({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$("#one").click(function () {
var loadUrl = "content.php";
$("#result").html(ajax_load).load(loadUrl);
});
$("#two").click(function () {
var loadUrl = "content1.php";
$("#result").html(ajax_load).load(loadUrl);
});
$("#three").click(function () {
var loadUrl = "content2.php";
$("#result").html(ajax_load).load(loadUrl);
});
so the Query is, i have "page b" & certain buttons, on clickin the button, i want to load "page a" & load the selected content unto the result DIV.
the concept is, on page b, the id is clicked, it LOADS page a in a new tab & loads the selected content on "RESULT" div. both pages are on the same server
Would really appreciate any assistance or tips. thank you.

Categories

Resources