Basically I have a page that has a drop down <select> listing a number of items / models which when selected triggers an AJAX call to dynamically display a form with all the details pertaining to that model to allow editing and updating.
<script type="text/javascript">
function item_loader(x) {
req = $.ajax({
type: "GET",
url: x,
datatype: "html",
success: function(data){
$('#item_table').html(data);
}
});
}
</script>
Within the form I have a "preview" button which displays dialog popup giving a preview of how the item will be displayed.
<script>
$(function(){
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
});
</script>
Everything works as intended when the page is loaded or refreshed, but the dialog portion breaks when the original content is dynamically updated/changed via AJAX. Doing research on this I'm finding old references suggesting modifying the code to use live(), but have read that is deprecated and to use on()? I am still fairly new to all of this and from the examples I've found on the net going through trial and error has always ended up in error. Hoping someone can share a resource or possibly offer some assistance. Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Basic Page</title>
<script type="text/javascript" src="/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="/JS/tinymce/tinymce.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/intranet-theme/jquery-ui-1.10.4.custom.css"/>
<script type="text/javascript">
function item_loader(x) {
req = $.ajax({
type: "GET",
url: x,
datatype: "html",
success: function(data){
$('#item_table').html(data);
}
});
}
</script>
<script>
$(function(){
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
});
</script>
</head>
<body bgcolor='#FFFFFF'>
<form>
<select name="period_select" id="item_dropdown" onChange="javascript:item_loader(this.value);">
<option value="Item_AJAX.php?Model_ID=0"> Choose Model</option>
<option value="Item_AJAX.php?Model_ID=404">AEROCOOL 100</option>
</select>
</form>
<div id="item_table" align="center">
<!-- Start of AJAX Dynamic Content -->
<form method="POST" enctype="multipart/form-data" action="" name="model_item">
<input name="Start_Special" type="hidden" value="2014-06-01"/>
<input name="Model_ID" type="hidden" value="model_id"/>
<table border="1" width="800">
<tr>
<td colspan="3" align="center">
[Form displaying item details for editing]
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="Update_Model" value="Save Model Info"/>
<input type="submit" name="Update_Listing" value="Update Listing"/>
<input type="submit" name="Delete" value="Remove Item"/>
<button type="button" id="opener">Preview</button>
<div id="wrapper" align="center">
<!-- Start of Hidden diolog Content -->
[Hidden Preview Content]
<!-- End of Hidden dialog Content -->
</div>
</td>
</tr>
</table>
</form>
<!-- End of AJAX Content -->
</div>
</body>
</html>
Either you can rebind in success method of ajax:
success: function(data){
$('#item_table').html(data);
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
}
or you can try with event delegation:
$("#wrapper").on("click", "#opener", function() {
$("#wrapper").dialog("open");
});
i guess you have #opener in #wrapper element. if not then try to delegate to the closest parent or to $(document).
Change:
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
To:
$(document).on("click", "#opener", function() {
$("#wrapper").dialog("open");
});
$("#elem").click() only binds to the elements currently on the page. Placing the event on the document itself will allow the event to work on newly created elements.
Related
Basically i find code on the internet to test and use it.
the problem is that when i reload the page, the data disappears.
what i want to happen is for the data or the value to just stay.
Thanks guys
Here is the code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" class="btn btn-success" onclick="passData();" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function passData() {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function(data) {
$("#message").html(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}
</script>
</html>
and here is my php code
<?php
$pass=$_POST['pass'];
echo json_encode($pass);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" id="success" class="btn btn-success" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#success").click(function () {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function (data) {
$("#message").html(data);
localStorage.setItem("data",data);
},
error: function (err) {
alert(err);
}
});
}
return false;
})
$(document).ready(function () {
var someVarName = localStorage.getItem("data");
console.log(someVarName)
$("#message").html(someVarName);
});
</script>
</html>
First of all i changed your js code to use more jquery syntax, as you already have included it (i trigger the on click event on the script and i don't put it in in html). After that in order not to lose your variable after refresh on ajax success i pass the value of data to localstorage, and after refresh (on document ready) i retrieve it and display it in the label.
Of course every time you put a new value and display it, it over-writes the previous one, so after refresh you display the latest value put in your input field.
I am not sure I understand what you mean but...
Before this line:
<!DOCTYPE html>
enter
<?php session_start(); ?>
In this line add
<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">
and in your php file:
<?php session_start();
$pass=$_POST['pass'];
$_SESSION['VAL'] = $pass;
echo json_encode($pass);
?>
Hi i'm a beginner in JavaScript i have this code below that allows me to upload a file and send it to the Server to get back a response, that part works fine but the problem is that i after i get back the data i don't want to be redirected to the API link i want to make it so that i stay in the current page and get the data in the alert i'm not sure if there's anything wrong with my function but it keeps giving me this error in the console ReferenceError: $ is not defined. Any help would be much appreciated thank you!
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<form action=" API link " class="upload" id="file-upload" method="post"
enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload file" name="submit">
</form>
<script>
$(function()
{
$('#file-upload').upload({
maxFiles: 1,
acceptedFiles: ".pdf,.doc,.docx,.html",
dataType: "json",
success : function(data) {
alert(data.xhr.response);
}
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
You are referring to jQuery, after you define functions.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head></head>
<body>
<form action=" API link " class="upload" id="file-upload" method="post"
enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload file" name="submit">
</form>
NO IT IS NOT. :D Edited after the comment by #rncrtr -->
$(function()
{
$('#file-upload').upload({
maxFiles: 1,
acceptedFiles: ".pdf,.doc,.docx,.html",
dataType: "json",
success : function(data) {
alert(data.xhr.response);
}
});
});
Remember, browser always render the content in the order of Left to Right, then Top to Bottom. This means, by the time it tries to execute the jQuery snips you have written, it should know about jQuery of $. Otherwise, it will say that $ is undefined. This actually means that reference to your jQuery library file, should appear at the top of the document, that you are having jQuery snips in it.
EDIT: Moved the jQuery reference to the bottom after the suggestion by #rncrtr.
Add onclick event in button:
<input type="submit" value="Upload file" name="submit" onclick="uplaod(); return false">
Add this in Script File:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function uplaod()
{
$('#file-upload').upload({
maxFiles: 1,
acceptedFiles: ".pdf,.doc,.docx,.html",
dataType: "json",
success : function(data) {
alert(data.xhr.response);
}
});
}
</script>
This is because you are loading jquery library after the code snippet.Load it before any other code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
$('#file-upload').upload({
maxFiles: 1,
acceptedFiles: ".pdf,.doc,.docx,.html",
dataType: "json",
success : function(data) {
alert(data.xhr.response);
}
});
});
</script>
Load jQuery in head and add your script tag at the end of body tag
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
For reference https://www.w3schools.com/jquery/jquery_get_started.asp
I have an issue that is a little tricky.
First, for folks who will run my snippet first -- when you run my example and click Generate, you will first see a modal box, which (on my backend) first reads the $_GET data. My submit mechanism uses A HREF method, to which I want to add more data via form, or otherwise, to be read by the receiving page.
In HTML source below, observe:
I have a link to portal.php, which includes query parameters
clicking that link engages the modal_box mechanism
my link is a button
I need to have a way to add data (GET, or POST), that will submit upon the click of that button, and be received by the resulting page (portal.php in my example).
I want, for example, to be able to print on my receiving page that the following are true:
$_GET['p'] == 'select';
$_GET['coverpage'] == 'standard';
How?
Snippet Follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<meta charset="utf-8" />
<title>T</title>
<script>
$(document).ready(function() {
$(".modal_box").click(function() {
$("#iframe_dialog_box").attr('src', $(this).attr("href"));
$("#div_modal_box").dialog({
width: 300,
height: 200,
modal: true,
close: function() {
$("#iframe_dialog_box").attr('src', "about:blank");
}
});
return false;
});
});
</script>
</head>
<body>
<div id="div_modal_box" title="portal.php?p=select" style="display:none;">
<iframe id="iframe_dialog_box" width="100%" height="100%"></iframe>
</div>
<form METHOD="GET">
<input type="radio" name="coverpage" value="standard" checked="checked">standard
<br>
<input type="radio" name="coverpage" value="more">more
<br>
<a href="portal.php?p=select&action=print" class="modal_box">
<button type="submit">Generate</button>
</a>
<script>
$("button").button();
</script>
</form>
</body>
</html>
Your click handler should get the values from the form, and add them to the URL before assigning the iframe src:
$(document).ready(function() {
$("button").button();
$(".modal_box").click(function() {
var coverpage = $(":radio[name=coverpage]").val();
$("#iframe_dialog_box").attr('src', $(this).attr("href") + '&coverpage=' + coverpage);
$("#div_modal_box").dialog({
width: 300,
height: 200,
modal: true,
close: function() {
$("#iframe_dialog_box").attr('src', "about:blank");
}
});
return false;
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="div_modal_box" title="portal.php?p=select" style="display:none;">
<iframe id="iframe_dialog_box" width="100%" height="100%"></iframe>
</div>
<form METHOD="GET">
<input type="radio" name="coverpage" value="standard" checked="checked">standard
<br>
<input type="radio" name="coverpage" value="more">more
<br>
<a href="portal.php?p=select&action=print" class="modal_box">
<button type="submit">Generate</button>
</a>
</form>
I've been struggling with some AJAX. Here's my code, if anyone could point me in the direction of where I'm going wrong it would be a great help!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8"></meta>
<style media="print">
#goBack,
#printRow {
display: none;
}
</style>
</head>
<body id="body" class="body">
<table>
<form id="addUser" onsubmit="return false;">
<tr>
<td>Username:</td>
<td>
<input name="user" />
</td>
<td rowspan="2">
<button id="createUser" name="submit" onclick="getAddUserStatus()">Add User</button>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input name="pass" type="password" />
</td>
</tr>
</form>
</table>
<div id="container" class="container">
div contents here
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src=""></script>
<script>
function getAddUserStatus() {
$('#addUser').on('submit', function() {
var postData = $(this).serializeArray();
$.ajax({
url: 'response.php',
data: postData,
type: "POST",
}).done(function(data) {
console.debug(data);
marker = JSON.stringify(data.message);
console.debug(marker);
alert(marker);
$('.container').html(marker); // Or whatever
});
});
}
</script>
</body>
</html>
Basically where I'm asking for help is that I need to write the response of the json to the DIV, an example json response is
Object {
saved: false,
user: "discoverexcel",
message: "User already exists"
}
I've figured out how to obtain just "message" from it and throw it into an alert, but no luck with the DIV. I'm not sure where I'm going wrong at all.
Next big thing is, why is the page reloading? I was under the impression that was a good reason to use AJAX, so anything here is greatly appreciated as well!
Also, my last question is, if I was to do multiple ones of these on a page, how would I go about doing so? Nesting each one in a new function for each time they're clicked? Also, what about a loading image to appear to show the status?
Yay! I finally got it, thanks all for the supportive help! To clarify, the answer I found here:
Ajax response inside a div
The selector should be .result not #result
It's the little things, thanks all!
I am trying to use jQuery/AJAX to run a PHP file on a server. This PHP simply adds a row with some constants to a database. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit Application</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("http://.../submitApp.php");
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="javascript:doSomething()">
<p>
<label for="programName"></label>
<input type="text" name="programName" id="programName" />
</p>
<p>
<label for="greQuant"></label>
<input type="text" name="greQuant" id="greQuant" />
</p>
<p>
<label for="greVerbal"></label>
<input type="text" name="greVerbal" id="greVerbal" />
</p>
<p>
<input type="submit" name="submitApp" id="submitApp" value="Submit" />
</p>
</form>
</body>
</html>
Upon pressing the submit button on the above form, nothing seems to happen. I should mention I am running this locally via DreamWeaver. I know for a fact that the code is reaching the JavaScript method and that the PHP code is functional. Anyone know what's wrong?
Use POST instead of GET to do this work.
function doSomething() {
var programName = $('#programName').val();
var greQuant = $('#greQuant').val();
var greVerbal = $('#greVerbal').val();
$.ajax({
type: "POST",
url: "submitApp.php", //URL that you call
data: { programName: programName, greQuant:greQuant, greVerbal:greVerbal } //var in post: var from js
}).done(function(msg) {
alert(msg);//change to something to indicate action
}
});
and with your php, handle like this
<?php
$programName = $_POST['programName'];
$greQuant = $_POST['greQuant'];
$greVerbal = $_POST['greVerbal'];
//do something important
?>
this is just a simple example, you need apply some security to this php code