Sending a JQuery var into php var - php

I installed OpenCart CMS and wanted to modify some option in the admin panel mainly the look and feel of the template. I also added the jpicker script for color picking. Also i created the css file with the standard php code and it works fine
<?php header("Content-type: text/css; charset: UTF-8"); ?>
<?php
$headerColor;
$menuColor = '#121212';
$bodyColor = '#fffaaa';
?>
#header {
background-color: <?=$headerColor; ?>;
}
In order to create the color picker view you need to add the id of the div in a script
$(document).ready(function(){
$('#Expandable').jPicker(
{
window:
{
expandable: true
}
});
});
And here is the standard code for the html
<div id="Expandable"></div>
I am not very good at JQuery but i know that it can be done either with .ajax or post. What i want to do is send the hex value from the jpicker to a php variable in the css file so it can change the color. Here is the link to jpicker http://www.digitalmagicpro.com/jPicker/. I also found an example
var colorValue = '#ababab';
$.post("view/stylesheet/stylesheet-template.css", {var_value: colorValue}, function(data) {
alert(colorValue);
});
It only sends alert and the colorValue from the variable, but i still don't know how to send the colorValue to php from the jpicker.
Thanks

function sendToPhp(jCell){
$.ajax({
url: "php/ajax.php",
data: {cell: jCell, queryNr: "0"},
type: "POST",
async: false,
success: function(data){ callback(data); }
});
}
now cell and queryNr is sent to php
if u do a switch case function depending on query nr you can access multiple functions in php this way
for the comment:
function sendToPhp(jCell, phpUrl){
$.ajax({
url: phpUrl,
data: {cell: jCell, queryNr: "0"},
type: "POST",
async: false,
success: function(data){ callback(data); }
});
}
now you can hand over a specific path by calling the function like:
sendToPhp("VAR YOU WANT TO SEND TO PHP", "php/ajax.php"); // or any other path

Related

include $variable in ajax success function

I am trying to return an image when Ajax is done, but i don't know how to include a session variable in the response, this is my code:
$(document).ready(function(){
$("#process").click(function(){
$.ajax({
type: 'POST',
url: 'process.php',
success: function (msg) {
$('#new-image').html('<img src="uploads/img/$_SESSION["sess_img"];" class="img-upload" alt="new image">')
}
});
});
});
Then, I want show the image $_SESSION["sess_img"]; within the div #new-image
You can echo that image filename in process.php like this:
<?php
// using time() as the cache buster, the image will never be cache by the browser
// to solve it, you need to add condition that will check if the image has change or not.
// or maybe you need to change the filename if it changes without adding a cache buster.
echo $_SESSION['sess_img_chofer']."?v=".time();
And in your javascript code:
$(document).ready(function(){
$("#process").click(function(){
$.ajax({
type: 'POST',
url: 'process.php',
success: function (image) {
$('#new-image').html($('<img>').attr('src', 'uploads/img/' + image).attr('class', 'img-upload'));
}
});
});
});

File downloading using AJAX not working

I am creating simple file downloading script using AJAX in PHP. My script is not working. Means it displaying the content of the pdf/doc file below download link after clicking on it. Below image will illustrate the problem.
Below is my code
AJAX and HTML:
$(function() {
$(".download_link").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
$.ajax({
type: "POST",
url: "download_file.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
}
});
return true;
});
});
<a href="#" class="download_link" id="d_link">
PHP Script: (download_file.php)
<?php
ob_start();
$file = 'file.doc';
header("location:".$file);
?>
You are using $("#display").after(html); thats why its displaying the content of the file. You can download the file by following code.
$(function() {
$(".download_link").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
$.ajax({
type: "POST",
url: "download_file.php",
data: dataString,
cache: false,
success: function(html){
window.location = 'your_file.pdf';
}
});
return true;
});
});
I think your approach is incorrect.
With your script you are trying to append file.doc contents into DOM object -> browser do not know on AJAX request how to manage document's encoding, it will not work.
For downloading documents I would not use AJAX, I think would be fine if you just open a new window with the document's url and let the borwser to manage the content's response:
window.open("download_file.php");
If you just want to display documents contents in the same page, I would use an iframe as follows:
<form action="download_file.php" method="GET" target="docIframe">
<input type="submit" value="Download"/>
</form>
<iframe name="docIframe" width="600px" height="500px"/>
You need to set header content type to tell the browser how it renders the content for PDF or DOC.
<?php
//Set header for pdf
header("Content-type:application/pdf");
header("Content-Disposition:attachment;filename='file_to_download.pdf'");
readfile("original.pdf");
?>

Retrieve PHP Variable via jQuery

I know this questions has been asked in various forms, but I've been unable to find a response that squares with what I'm trying to accomplish. Total amateur, so any additional pointers are appreciated.
The Task:
Use a form on page1 to post data to PHP file, which then searches the MySQL table for rows corresponding to the $_POST[]. Then, the PHP file echoes the result as JSON_encode($variable). From there, the PHP file redirects the user back to page1, which (in theory) has a JQuery script that calls the $variable from the PHP file and create html with the data.
The Code:
PHP
<?php
ob_start();
session_start();
session_save_path('path');
mysql_connect("", "", "")or die(); mysql_select_db("db")or die();
$pname = $_POST['country'];
$result = mysql_query("SELECT * FROM project WHERE name = '$pname'");
$array = mysql_fetch_row($result);
echo json_encode($array);
header("page1.html");
?>
html/jquery/ajax
<script type="text/javascript">// <![CDATA[
$(document).ready( function() {
$.ajax({
type: 'POST',
url: 'page.php',
data: '',
dataType: 'json',
cache: false,
success: function(result) {
$('#content1').html(data);
},
});
});
// ]]></script>
<div id="content1"></div>
The php script works and echoes the JSON encoded variable, but nothing on #content1...
I have a feeling either my code is wrong, or the data is lost while posting to the PHP file and then redirecting.
You're trying to append the variable data to the content but the variable is called result. Try this:
<script type="text/javascript">// <![CDATA[
$(document).ready( function() {
$.ajax({
type: 'POST',
url: 'page.php',
data: '',
dataType: 'json',
cache: false,
success: function(result) {
$('#content1').html(result);//<- this used to be $('#content1').html(data);
},
});
});
// ]]></script>
<div id="content1"></div>
Additionally, as many have pointed out you are simply outputting the json at the moment - there is nothing in place to generate the table.
Change $('#content1').html(data) to $('#content1').html(result);

Get only part of the message and reload only one div

this is an ajax method that inserts the data into a db and should supposedly display the new content.
<script type = "text/javascript">
$(document).ready(function() {
$('#submit').live('click', function(eve) {
eve.preventDefault() ;
var form_data = {
title: $('#title').val()
};
$.ajax({
url: "http://localhost/ci/index.php/chat/comment",
type: 'POST',
data: form_data,
success: function(msg) {
alert(msg);
}
});
});
});
</script>
However in my /chat/comment, i am loading the view again, i.e, user submits a comment, load the view again and the comment should be there. My response from server is the view's HTML. However the view comes with all the divs and there are many of them. I need to retrieve only part of the div, say, #commentspace from the ajax on success.
Look at the jQuery $.load() function?
Example
Inside "firstpage.html"
$('#content').load('secondpage.html #content');

jQuery write element just after the Ajax call

Hello I have a jQuery function that will send to a php file some info. The PHP file will do the stuff it has supposed to do and will generate some HTML code. I am fine until here.
The problem is that I have then to take the HTML results generated by this PHP file and write them in the page where the Ajax call has been created, simply by appending it after a DIV or inside a DIV or whatever.
This is the jQuery function I have so far:
$(document).ready(function() {
var idGenre = $("#txtGenre option:selected").val();
var html = $.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: "id=" + idGenre,
async: false
}).responseText;
});
The DIV that must be updated with the HTML results taken from the PHP file GetSubGenreData.php is:
<div id ="divSubGenre"></div>
Now lets say the PHP file will return a select box, something like this:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
etc...
</select>
This select box must be appended just after the DIV <div id ="divSubGenre"></div> or by simply replacing this DIV with the returned Select Box. Nothing impossible for a good jQuery developer. But I am not.
I just need the function to write the HTML results from the PHP file in the right DIV.
Thanks!!
in your success callback
success:function(html){
$("#divSubGenre").append(html);
}
if you want to replace the container div with the ajax response
success:function(html){
$("#divSubGenre").replaceWith(html);
}
if the div to which you are appending the results is not empty then to insert after the div use after
success:function(html){
$("#divSubGenre").after(html);
}
so your final code may look like this
$(document).ready(function() {
var idGenre = $("#txtGenre option:selected").val();
var html = $.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: {id:idGenre},
async: false,
success:function(html){
$("#divSubGenre").append(html);
}
});
});
jquery ajax
jquery replaceWith
jquery append
jquery after
update
$("#txtGenre").change(function(){
//get the update value here
var idGenre = $("#txtGenre option:selected").val();
$.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: {id:idGenre},
async: false,
success:function(html){
$("#divSubGenre").html(html);
}
});
});
jquery change
yet another update
about the comment to show the result on page load, if i have understood the scenario well you can have two divs on the page like
<div id="divSubGenre"></div>
<div id="divonLoad"></div>
on the page load do the ajax call and append the result to #divonLoad and in the success callback of your ajax call that is inside the change event handler do this
success:function(html){
$("#divonLoad").fadeOut("slow").remove(); removes the div that was holding the result on page load
$("#divSubGenre").html(html);
}
Add an HTML dataType and a success method to your AJAX call:
// No need to return the responseText as a variable
updateSelectHtml = function() {
$.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: "id=" + idGenre,
async: false,
// Make sure the return is formatted as html
dataType: "html",
success: function(data) {
// The return HTML data is appended after the div.
$("#divSubGenre").html(data);
}
});
};
// Bind the function to #txtGenre onchange
$("#txtGenre").change(updateSelectHtml);

Categories