How do I append html to another page from the current page? - javascript

I am making an interactive ticket system. I have two pages: ticket.php and myaccount.php.
On the 'myaccount' page is a ticket management system where a admin can assign themselves tickets. What I want to do is when an admin views the ticket and makes a response and updates the status of the ticket on ticket.php, I want myaccount.php to reflect the update of the status (without refreshing the page of course).
As of now, my ajax call works and it gets the POST value from another page. However, I want to update the div in myaccount.php FROM ticket.php.
Here is the ajax which is stored in a file called action.js, this function is being called in ticket.php and I want it to update a div in myaccount.php:
function current_ticket() {
$.ajax({
type: "POST",
url: '../user/phpfunc/ajax.php',
data:{current_ticket: 'current_ticket_list'},
success:function(html) {
alert(html);
//This function is called in ticket.php. I want it to update a div
//in myaccount.php
}
});}
Here is the button being pressed that calls current_ticket() in ticket.php:
<input type="submit" name="submit" value="submit" onclick="current_ticket();">
Here is ajax.php as requested:
if(isset($_POST['current_ticket'])) {
echo 'test';}
I have looked for an answer and I can only find code which gets content FROM a div, but I want to send content TO a div in another file. Help is appreciated, thank you!!

$("#div").append(YOUR_RETURN_HTML); would do the job.
Moreover, you have set the type='submit' and you have added an event onclick as well.
Either disable the default submission or change the type to button.

Related

Laravel Mews captcha_img() does not return on refresh

I'm using Mews/Captcha package with a Laravel 5.5. application.
I'm implementing a contact form where the user fills it out, enters in Captcha data, and submits it. All of that works. If you go to the form, the captcha image appears. If you refresh the page, a new captcha image appears. If you try to submit the form without the captcha or an incorrect captcha, it fails. If you submit with the correct captcha it succeeds.
The issue I am having is with the refresh button in case the user wants to change the image. For the life of me, I can't get it to return the image, even though I've seen numerous examples that claim to work that are using similar code. What happens is that the current captcha image is replaced by blank space.
Here's the code for the button:
<script>
$(document).ready(function(){
$('#reload').on('click', function(){
$.ajax({
type: 'GET',
url: '/reload-captcha',
success: function(data) {
$("#captchadiv").html(data.captcha);
}
});
});
});
</script>
Here's the code further down the page where the captcha image and buttons are:
<tr>
<td><button type="button" class="button reload" id="reload">Refresh</button></td>
<td><div id="captchadiv">{!! captcha_img('flat') !!}</div></td>
</tr>
<tr>
<td><label for="captcha">Captcha</label></td>
<td><input type="text" id="captcha" class="form-control" placeholder="Enter Captcha" name="captcha">
#if ($errors->has('captcha'))
<span class="textRed">
<strong>{{ $errors->first('captcha') }}</strong>
</span>
#endif</td>
</tr>
Here's the code for the response:
public function reloadCaptcha()
{
return response()->json(['captcha'=> captcha_img('flat')]);
}
Now, if I replace captcha_img('flat') with some text and click the button, it behaves as expected and replaces the previous image with the text. Also, if the text supplied is html code that calls a static image from a path in the public directory, it also works.
So either one of two things is going on:
the captcha_img() function is failing during the response step. So nothing returns.
the javascript in the form is failing to extract the image from the returned json object.
I'm guessing the issue is #1. Somehow the controller is unable to call the captcha_img() function while the main php/html can. And I have no idea why that would be.
Note that in my experiments, I put in an alert which showed the data and the status, and the data displayed an "object" and the status was "success".
Update
I gave up. For whatever reason, I just can't get it to work and I can't afford to spend any more time on it right now. I ended up going with making the button reload the entire page rather than try to generate just a new captcha image to insert into the html.
Change return function reload captcha to this:
public function reloadCaptcha()
{
return captcha_img('flat');
}
And then change refresh event script to this:
<script>
$(document).ready(function(){
$('#reload').on('click', function(){
$.ajax({
type: 'GET',
url: '/reload-captcha',
success: function(data) {
$("#captchadiv").html(data);
}
});
});
});

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>

Sending dynamic POST data with Javascript

So basically, I'm trying to send some data to a remote PHP page, via POST, with 4 static parameters and one random parameter, a number.
So far what I have done is created an HTML page with a form with 4 hidden fields and 1 empty field, in which a random number is inserted as the value via Javascript (using Math.random). Now whenever I submit this form, it takes me to the remote PHP page, and so I have to click back again (in the browser) and then submit.
So, I decided to load this form in an iFrame in another HTML Page, so after clicking submit, I can just hit refresh, and then submit again.
I want to know, is there a way I can use Javascript in the parent HTML to automatically submit the form in the iFrame, then create a new random value and submit it again?
Here is my code so far
a.html
<html>
<body>
<form method="post" action="http://awebsite.com/remotefile.php">
*some hidden fields with the static values*
<input type="text" id="mytext" name="mobile_no">
<input type="submit">
</form>
<script>//don't remember the exact code, use javascript to generate a random number which is put in the value for mytext via getElementById</script>
</body>
</html>
now this was the form which was to manually send data to the server
this is to load an iframe:
b.html
<html>
<body>
<iframe src="a.html">
</body>
</html>
Can I use javascript in b.html to resend the form multiple times, but with the value of mobile_no different each time?
Or can I simply send POST data with the parameters to the server via simple Javascript (or PHP)
You question isn't 100% clear, but it sounds like you want to asynchronously post form data. You could easily do this with a JavaScript library like jQuery without the need for an iframe. First you should add an ID attribute to your form to make it easier to reference in your jQuery code. Then you can attach an event listener to the form's submit event where you can customize the form before submission and handle the response
$('#myForm').submit(function(e) {
// prevent default form submit action from occuring
e.preventDefault();
// load values need to make AJAX request
var method = $(this).attr('method');
var action = $(this).attr('action');
// Process Ajax request
$.ajax({
type: method,
url: action,
dataType: 'html',
data: $(this).serialize(),
beforeSend: function() {
// generate and assign per form submit random number
// show loading gif
},
success: function(response) {
// AJAX POST success, insert the HTML response into the DOM
},
error: function(jqXHR, textStatus, errorThrown) {
// console.log any errors for debugging here
},
complete: function() {
// Post completion tasks, such as hide loading gif
}
});
});

form within AJAX jQuery toggle, submits at parent onClick not from submit button

Basically mysimplewebform.php form submits when the toggle is clicked, as opposed to after the form is loaded, used by user and SUBMITTED via submit button at form. Obviously I need to have form operate functionally; user fills it out, and clicks submit. I simply used AJAX to bring in the form on the template page. Now everytime toggle button is clicked 'Form is submitted with empty values' and then appears in the toggle. Making it pretty useless at this point, I have been struggling with this forever. I think this is a matter of toggling the data: below --
$(document).ready(function() {
$('#toggle3').click(function(){
var tog = $('.toggle');
$.ajax({
type: 'POST',
url: '/mysimplewebform.php',
data: $(this).closest('form').serialize(), // This was a recent suggestion
success: function (fields){
tog.html(fields);
tog.slideToggle(1000);
}
});
});
});
Branched out from: How to send external form POST data through AJAX
Ok, so you want to display an html form when a user clicks a button? In that case you can use the simplified jquery load method:
$('#yourbutton').click(function(){
$('#somediv').load('/mysimplewebform.php');
});
I know this doesnt handle your toggle requirement, but i dont think that is where you are having issues.
Now onto the php. I dont know exactly what should be in mysimplewebform so heres an example
if(isset($_POST['fname'])){
//we have a post request, lets process it
echo 'hello'.$_POST['fname'];
}?>
<form action="absolute/path/to/mysimplewebform.php" method="post" id="mysimplewebform">
<input type="text" name="fname" placeholder="Enter Name">
<input type="submit" value="submit">
</form>
Notice the action is an absolute path to the file, because a relative path will be wrong if the form is loaded into another page via ajax.
Now when this form is submitted, the browser will be redirected to mysimplewebform.php.
I expect you want to stay on the same page, in which case you could submit the form via ajax:
$('#mysimplewebform').submit(function(ev){
ev.preventDefault();//stop normal redirecting submit
$.post( $(this).attr('action'), $(this).serialize(), function(data){
$('#somediv').html(data)
});
This replaces the whole form in the dom with the output, so the hello message would be displayed.
All of the above is an attempt to help you understand where you have been going wrong in your attempts. It is not the best solution to your overall problem - i would separate the html form and processing into seperate files for a start, but it should be familiar to you.

How to check if a page's content has been modified?

1 - I have a web page, in that page there are many external links
2 - When user click on any external link then a popup should be come with the message that page has been modified by dynamic action or it not.
3 - How can I check the page status using JavaScript / jQuery?
Thanks in advance.
you can go for "onhaschange" event of window/body on change simply set some flag which you can check on click of link to show whether page is changed or not.
Add some state variable to javascript, like:
wasModified = false;
Subscribe on click event of every external link or whatever you want to react on, like that:
$('.external-link-class-selector').click(function(){
wasModified = true;
//in case click mean it was modified and you should notify user
alert('Page was modified');
});
see
$.ajax({
url: "",
type: "post",
dataType: "" ,
data: ,
}).done(function() {
//sucess
});
make a function in Javascript including above function and Post values by this method to the same page and append success message on the page.

Categories