I have (currently) the following bit of code in my module.blade.php:
#section('scripts')
<script type="text/javascript">
createMixin(['{{ $module }}']);
</script>
#endsection
Explanation:
$module is a variable holding a JSON packed with simple key => value, but also with key => object. It is loaded previously in a Controller and displayed in the blade.php.
Example:
{
"title":"Title",
"name":"dummy",
"file":"dummy",
"layout":"normal",
"fields": [
{
"name": "bla"
}
]
}
Function createMixin() would ideally generate a HTML out of Jade with the options inside $module (already existing).
Problem is: This does end in an error message: "htmlentities() expects parameter 1 to be string, array given"
Done so far: I have already tried several things:
#section('scripts')
<script type="text/javascript">
var fields = $.parseJSON("{!! $module !!}");
createMixin(fields);
</script>
#endsection
And:
#section('scripts')
<script type="text/javascript">
createMixin("{!! JSON.parse($module) !!}");
</script>
#endsection
And:
#section('scripts')
<script type="text/javascript">
createMixin("{!! json_encode($module) !!}");
</script>
#endsection
And:
#section('scripts')
<script type="text/javascript">
$(this).createMixin("{{ $module }}");
</script>
#endsection
I have had a look at several posts here (like this one) and in other sources, they tell the people to use the php implode method or just a simple usage of "{!! !!}". But this all ends up in the same error message.
Question: What am I overlooking here? What am I doing wrong?
Edit:
As requested my Javascript function:
//generate one jade mixin
function createMixin(module) {
//first load JSON...
var json = $.parseJSON(loadJSON(module["file"]));
//get options for mixin
var options = json.fields;
//detect jade file
var jadepath = RESOURCES_DIR + "views/jade/" + json.file + "/template.jade";
//check if file exists
$.ajax({
'url': jadepath,
'type': 'HEAD',
'error': function() {},
'success': function () {
var html = renderJade(options, jadepath);
//save html into json
json.html = html;
var tmp = new Blob([html], { type: 'plain/text;charset=utf-8' });
}
});
};
Alright, so I found the solution.
I had to first do the parameter initialisation in PHP:
<?php $json = json_encode($module); ?>
And then separately call the Javascript function via:
#section('scripts')
<script type="text/javascript">
$(document).ready(function() {
var module = {!! $json !!};
createMixin(module);
});
</script>
#endsection
So in total it would look like this:
<?php $json = json_encode($module); ?>
#section('scripts')
<script type="text/javascript">
$(document).ready(function() {
var module = {!! $json !!};
createMixin(module);
});
</script>
#endsection
Related
As I asked here I would like to know how I could pass the data from a simple JS function to php, and log it there.
I found this answer and tried to follow it. This is my code right now (both in the same file)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>
</head>
<body>
<script>
function getClientScreenResolution() {
var screenResolutionW = screen.width;
var screenResolutionH = screen.height;
console.log(screenResolutionW + ' ' + screenResolutionH)
$.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
}
</script>
<script type="text/javascript">
getScreenResolution();
</script>
</body>
</html>
<?php
$screenResolutionW = $_POST['screenResolutionW'];
$screenResolutionH = $_POST['screenResolutionH'];
if(isset($_POST['screenResolutionW'])) {
$fh = fopen('log.txt', 'a');
fwrite($fh, 'Screen res: '."".$screenResolutionW .'x'."".$screenResolutionH
."\r\n");
fclose($fh);
}
?>
However, this does not work.
I wouldn't know how to fix this, whenever I try to google this problem people use more advanced methods, that I wouldn't even know how to start with.
Edit: My PHP and HMTL are in the same file (index.php).
Edit 2: Removed old code for clarity.
This results in these error messages:
Notice: Undefined index: screenResolutionW in index.php on line 153
Notice: Undefined index: screenResolutionH in index.php on line 154
What you want to do with $.post is include your data like this:
$.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
where the first of the pair is the POST identifier (the ['screenResolutionW']) and the second of the pair is the variable value.
You will also want to change your POST identifiers to be quoted:
$screenResolutionW = $_POST['screenResolutionW'];
$screenResolutionH = $_POST['screenResolutionH'];
Otherwise, you will get a warning about constants. I have also corrected the spelling in these variables, to reflect what you're trying to write into your file.
fwrite($fh, 'Screen res: '."".$screenResolutionW .'x'."".$screenResolutionH ."\r\n");
EDIT
Part of the problem is that you never call the function to execute it. Here is your HTML with the additions I have suggested, plus calling the function:
EDIT TWO
Added an onload handler for the document:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>
</head>
<body>
<script>
function getScreenResolution() {
var screenResolutionW = screen.width;
var screenResolutionH = screen.height;
console.log(screenResolutionW + ' ' + screenResolutionH);
$.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
}
</script>
</body>
<script type="text/javascript">
$(function() {
getScreenResolution();
});
</script>
</html>
OTHER NOTES
You really should separate the PHP code and place it in a different file because when you run the page as it is now you should get one line logged that has no variables when the page initially runs, then one logged line when the JavaScript fires after the page loads.
Then once separated you should not run your PHP until you test for the existence of a variable, for example:
if(isset($_POST['screenResolutionW'])) {
// your code to write to the file here
}
EDIT THREE
I placed all of the JavaScript in the same script block in the head of the file and have tested again:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function() {
function getScreenResolution() {
var screenResolutionW = screen.width;
var screenResolutionH = screen.height;
console.log(screenResolutionW + ' ' + screenResolutionH);
$.post("post_test.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
}
getScreenResolution();
});
</script>
</head>
<body>
</body>
</html>
Here you can see the variables are being posted:
Adapting the others answers.
try it:
function getScreenResolution() {
"http://example.com/index.php", screenResolutionW + screenResolutionH
$.ajax({
url: '/index.php',
method: 'POST',
data: {
screenResolutionW : screen.width,
screenResolutionH : screen.height
},
success: function(data) { console.log(data); }
});
}
And in your PHP
$screenResolutionW = $_POST['screenResolutionW'];
$screenResolutionH = $_POST['screenResolutionH'];
echo $screenResolutionW . " - " . $screenResolutionH;
you have to use serialize the array before doing post request.
var screenResolutionW = screen.width;
var screenResolutionH = screen.height;
var serializedArr = {
width: screenResolutionW,
height: screenResolutionH
};
$.post('/index.php', serializedArr, function(response) {
// Log the response to the console
console.log("Response: "+response);
});
In the server end, you will get values in $_POST variable.
Apart of all those mistakes you have discovered thanks to other replies, you have these:
$screenResoltuionW = ...
Notice you wrote "ltuion" and in the fopen command you have it correct. screenResolutionW
Same thing with $screenResoltuionH...
That's why you don't get any value in the file, because those variables doesn't exists.
I wanted to perform jquery post to php and get the data and post to the console log. But however i cant find data on the console.log after performing post the data. my code is found below...........please help me...
student html page
<html>
<head>
<title>NEW AJAX GET</title>
<script type="text/javascript" src="/Cesium-1.34/ThirdParty/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
showData();
function showData()
{
$.post("student.php",
{
PostLastName: "Abdullah",
PostLastReligion: "Muslim"
},
function(data)
{
console.log(data);
});
});
</script>
</body>
</html>
student.php script
<?php
if ((empty($_POST["PostLastName"])) && (empty($_POST["PostLastReligion"])))
{
//Return "Posted Values are empty" if the values is empty
$post_string = 'Posted Values Are Empty';
//echo "<script>console.log(".$post_string.");</script>";
echo $post_string;
}
else
{
//Return the Post Data
$post_string= 'Post Last Name = '.$_POST["PostLastName"]."\n".' Post Last Religion = '.$_POST["PostLastReligion"].'';
//echo "<script>console.log(".$post_string.");</script>";
echo $post_string;
}
?>
I have test your code. i think check first check your loaded jquery included in header.
After change some code like below mention and test your browser console.
<html>
<head>
<title>NEW AJAX GET</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script type="text/javascript">
showData();
function showData()
{
$.post( "student.php", { PostLastName: "Abdullah", PostLastReligion: "Muslim" })
.done(function( data ) {
console.log(data);
});
};
</script>
</body>
</html>
I hope u resolve u r issue.
I am sending two values to a php page to print those values in the div.
Here is my jquery code and i have given the php page below:
Edit : I have updated the script, But the issue is i am not getting the value of $month from php file
(But i can able to print custom message intead)
Script :
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var month=$("#month").val();
var year=$("#year").val();
$.post("summaryreport_result.php",
{month: month, year: year}).done(function(data)
{
$('#stage').html(data).fadeIn(1000);
$('#stage').html(data).fadeOut(3000);
}
);
});
});
</script>
PHP Code :
<?php
$month=$_REQUEST['month'];
$year=$_REQUEST['year'];
echo $month;
?>
But if i print a custom message it is displaying the div stage
What is the mistake i am doing and how can i fix this ?
Try this POST Request
$.post("summaryreport_result.php",
{month: month, year: year}).done(function(data){
$('#stage').html(data).fadeIn(1000);
$('#stage').html(data).fadeOut(3000);
}
);
});
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var month=$("#month").val();
var year=$("#year").val();
$.post("summaryreport_result.php",
{month: month, year: year}).done(function(data)
{
$('#stage').html(data).fadeIn(1000);
$('#stage').html(data).fadeOut(3000);
});
});
});
</script>
I'm trying to load php array inside native javascript method of gwt application using ajax and display google chart. But it does not give required output...below are my codes
Server side:
$data = array();
$data [] = array("Name", "Value");
$data [] = array("PHP", 78);
$data [] = array("JAVA", 10);
$data [] = array("HTML", 120);
$table = json_encode($data);
echo $table ;
?>
Client side:
<html>
<head>
<title>Graph</title>
<!-- Load jQuery -->
<script type="text/javascript" language="javascript" src="ajax/ajax.nocache.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- Load Google JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {'packages' : ["corechart"] });
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Native javascript method
private native void generateGraph()
/*-{
$wnd.google.load("visualization", "1", {
packages : [ 'corechart' ],
callback : drawChart
});
function drawChart() {
var jsonData = $.ajax({
url: "http://localhost:8080/Ajax/get_json.php",
dataType: "json",
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = new $wnd.google.visualization.arrayToDataTable(obj);
var options = {
title: 'Graph'
};
var chart = new $wnd.google.visualization.LineChart(
$wnd.document.getElementById('chart_div'));
chart.draw(data, options);
}
}-*/;
thanks for reply!!!
Before, I had this:
<head>
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var optPrompt = "- Select One -";
var subCats;
var parentCats;
var nextBtn;
var ParentChanged = function() {
ClearDescription();
if (this.selectedIndex == 0) {
$(subCats).html($("<option>").text(optPrompt));
}
$.getJSON('<%=Url.Action("GetChildCategories") %>', { parentId: $(this).val() },
function(data) {
subCats.options.length = 0;
$("<option>").text(optPrompt).appendTo(subCats);
$(data).each(function() {
$("<option>").attr("value", this.ID).text(this.Name).appendTo(subCats);
});
});
}
var DisplayDescription = function(catId) {
$.ajax({
url: '<%=Url.Action("GetDescription") %>',
data: { categoryId: catId },
dataType: 'html',
success: function(data) {
$("p#categoryDescription").html(data);
}
});
}
var ChildChanged = function() {
var catSelected = this.selectedIndex != 0;
if (!catSelected) ClearDescription();
else DisplayDescription($(this).val());
}
var ClearDescription = function() {
$("p#categoryDescription").html('');
}
$(function() {
parentCats = $("select#Category").get(0);
subCats = $("select#Subcategory").get(0);
nextBtn = $("input#nextButton").get(0);
$(parentCats).change(ParentChanged);
$(subCats).change(ChildChanged);
});
</script>
</head>
Then I put all of my inline script into a file (myScript.js) and changed my HTML to this:
<head>
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/Scripts/myScript.js" type="text/javascript"></script>
</head>
And now nothing is working. I opened up my page in IE7 and it had a page error that read:
Line: 54
Error: Unknown name.
Line 54 happens to be the last line of my external javascript file.
What am I doing wrong?
Am I right in saying that this is ASP.Net? If it is, inline scripts like:
<%=Url.Action("GetDescription") %>
cannot go in the external JavaScript file.
Did you put the < script > tag inside your myScript.js? If yes, remove them.
Your myScript.js should start with
var optPrompt = "- Select One -";
Since you are now serving the js as a static file, rather than via your ASP, lines like
<%=Url.Action("GetChildCategories") %>
will no longer work as the server doesn't interpret them and replace them with the correct values. You'll need to hard-code them in the script, or leave those lines as inline scripts in the main page and set them as global variables which you can then reference from the external file.