I've been trying out different things for a while, but nothing seems to be working. And would probably need another kind of perspective.
For the question: I got a php foreach loop going, and every object is posting the ID of that object.
But my problem in this that when i click, the object is giving me the last number of the foreach.
Ive been trying to post the value in JSON, and just plain php.
PHP
<?php
foreach ($places as $place) {
$place_id = json_encode($place['id']);
echo "<div class='placeContainer' onClick='openMessage(\'' . $place_id .
'\')'>";
?>
Jquery
$(document).ready(function () {
$('.placeContainer').click(function () {
$(this).attr(phpvar);
var myKey = JSON.parse(phpvar);
console.log(myKey);
})
});
Thanks for the help!
Try this :
PHP Code :
<?php
foreach ($places as $place) {
$place_id = json_encode($place['id']);
echo "<div class='placeContainer' data-id='".$place_id."'>";
?>
JS Code :
$(document).ready(function () {
$('.placeContainer').click(function () {
var myKey = $(this).attr('data-id');
console.log(myKey);
})
});
Related
Regards.
I am generating an .click event for every element of my table using a php loop like this:
<?php foreach ($elements as $element){ ?>
var element_id = <?= json_encode($element['element_id']));?>;
$('#'+element_id+'_button').click(function() {
$('#'+element_id+'_interval').toggle();
if ($(this).hasClass('active')){
$(this).removeClass('active');
}
else{
$(this).addClass('active');
}
});
<?php }?>
the problem is, when $('#'+element_id+'_interval').toggle(); the element is not responding but it adds and removes the classes correctly, somebody help me please.
Use a class, makes your code a lot cleaner, however if you have to do it this way you should know that your element_id variable is constantly being rewritten.
Try something like:
<button class="toggler" data-target="#interval_1"></button>
$(".toggler").click(function (ev) {
ev.preventDefault();
var target = $(this).data("target"); // would return #interval_1
$(target).toggle();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
I would advise you to firstly separate your php from your javascript.
Otherwise (between other) it will be difficult to maintain.
As a start, you could do the loop with javascript
Put the binding events into a seperate method, and call the method in your document.ready script:
$(document).ready(function() {
bindBtns();
});
function bindBtns()
{
<?php foreach ($elements as $element){ ?>
var element_id = <?= json_encode($element['element_id']));?>;
$('#'+element_id+'_button').click(function() {
$('#'+element_id+'_interval').toggle();
if ($(this).hasClass('active')){
$(this).removeClass('active');
}
else{
$(this).addClass('active');
}
});
<?php }?>
}
I've got the following code which works only for 70 items. the moment I added the 71st item to the DB it fails to work.
$('document').ready(function() {
//autoComplete() returns a php array with all the products
<?php $productArray = autoComplete();?>
var js_products_array = <?php echo json_encode($productArray); ?>;
var result;
for(var i=0;i<js_products_array.length;i++){
result += js_products_array[i] + ', ';
}
//printing js_products_array
document.write(result);
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
...
I can see that js_products_array holds all the values but the autocomplete feature fails to work. The moment i remove the 71st item from the DB it works again.
I'm puzzled as to what's causing this. Would appreciate some help, cheers.
hmmm, try to use
json_last_error
var last_error = <?php echo json_last_error(); ?>;
http://php.net/manual/en/function.json-last-error.php
to check the problem
or
limit the number of records , it is easy to limit the number of records in database level
UPDATE
try
in your server function autoComplete() before returning the result to the view use this function to utf-8 encode the array
utf8_encode_deep($result_from_db);
function utf8_encode_deep(&$input) {
if (is_string($input)) {
$input = utf8_encode($input);
} else if (is_array($input)) {
foreach ($input as &$value) {
utf8_encode_deep($value);
}
unset($value);
} else if (is_object($input)) {
$vars = array_keys(get_object_vars($input));
foreach ($vars as $var) {
utf8_encode_deep($input->$var);
}
}
}
then you can use
json_encode($productArray);
The following piece of code fixed the problem: mysqli_set_charset($db, "utf8");
Okay, so in my <head> section i have the following:
<script>
var userDefaultInfo = '<?=$userInfo;?>';
var jGets = new Array ();
<?
if(isset($_GET)) {
foreach($_GET as $key => $val)
echo "jGets[\"$key\"]=\"$val\";\n";
}
?>
</script>
Now In my external .JS file, In the $(document).ready() section I can access userDefaultInfo fine, however, I am trying to access jGets, but not directly from there.
in the external .JS file, outside of $(document).ready(); I have the following function:
var sendGET = function () {
var data = $(this).val();
var elementName = $(this).attr("name");
var url = "zephi.php?p=home/support/admin_support.php&"+elementName+"="+data;
jQuery.each(jGets, function(i, val) {
alert(val);
});
alert(url);
window.location = url;
}
When a user changes a box, this function fires and changes the window location using the data. However, I want to add the data in the variable jGets, but I do not seem to be able to reference it at all in there.
Why is this?
You're "mis"-using an Array as an Object.
var jGets = {};
Perhaps doing either one of the following might work:
echo 'var jGets = '.(isset($_GET) ? preg_replace('/^"|"$/','',json_encode($_GET)) : '{}').';'
//or
echo 'var jGets = JSON.parse('.isset($_GET) ? json_encode($_GET); : '"{}"'.');'
This will produce an object literal, assigning everything you need to jGets, without having to mess about with loops. Since JSON stands for JavaScript Object Notation, it seems only logical/natural to use that to set the variable accordingly. Read more on json_encode here, more on JSON in PHP can be found here
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
passing variables from php to javascript
I'm dynamically generating a list. I want to make each row hover on mouseover and clickable to a link. I want the link to pass the id of the content of the row.
Basically:
foreach ($courses as $cid=>cinfo){
$univ = $cinfo['univ'];
$desc = $cinfo['desc'];
$size = $cinfo['size'];
$start = $cinfo['start'];
print "<div class='rc_desc' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
}
<script>
$(function ()
{
$('#rc_desc$cid').hover(function ()
{
$(this).toggleClass('.tr');
});
$('#rc_desc$cid').click(function ()
{
$(location).attr('href','student.php?$cid');
});
});
</script>
The issue is in the js/jquery. I want to be able to grab the $cid and pass it to the student.php page upon click. The php code above works but the js won't of course. I know the fundamental of client-side vs server-side languages. This question doesn't warrant a lecture. I know I cannot do this exactly, but it is what I want to happen ultimately. Any thoughts on how I can achieve this simply? Thanks in advance my friends!
Yes, if you include the <script> section in your PHP code, you can do something similar to the following:
<script>
var foo = <?php echo $foo; ?>;
</script>
In your case, you would be looking into the following code structure:
<script>
$(function () {
$('#rc_desc<?php echo $cid ?>').hover(function () {
$(this).toggleClass('.tr');
});
$('#rc_desc<?php echo $cid ?>').click(function () {
$(location).attr('href', 'student.php?<?php echo $cid ?>');
});
});
</script>
The reason why this is possible is because although the Javascript is run on the client-side, it's processed on the server-side first prior to being presented on the page. Thus, it'll replace all necessary instances of $cid with the one you have included.
Enjoy and good luck!
EDIT:
<script>
$(function () {
$('.rc_desc').hover(function () {
$(this).toggleClass('.tr ');
});
$('.rc_desc').click(function () {
$(location).attr('href', 'student.php?' + $(this).attr('id').split('rc_desc')[1]);
});
});
</script>
You can do it like this :
$(location).attr('href','<?php echo $cid ?>');
The javascript code doesn't know it comes from php, it appears as a constant (a literal) for it.
Yes it is possible. All you have to do is put your <?PHP echo $cid; ?> in where you need it
<script>
$(function ()
{
$('#rc_desc<?PHP echo $cid; ?>').hover(function ()
{
$(this).toggleClass('.tr');
});
$('#rc_desc$cid').click(function ()
{
$(location).attr('href','student.php?<?PHP echo $cid; ?>');
});
});
This is possible because by the time the scrip is put into the page the cid has already been replaced by the string on the server. Since PHP is server driven, before it spits back the html/script it will be just like you put it in yourself.
There is almost no way to actually communicate PHP and JavaScript. However, the best and simplest way is to set the ID within an attribute. The new HTML5 data attributes would be perfect.
For example, have a anchor tag with
<span data-id="22">some event</a>
and then:
$(this).attr('href','student.php?'+$(this).attr('data-id'));
Or just use
<?php echo $id; ?>
if it is not external JS file
Try this code
foreach ($courses as $cid=>cinfo){
$univ = $cinfo['univ'];
$desc = $cinfo['desc'];
$size = $cinfo['size'];
$start = $cinfo['start'];
print "<div class='rc_desc' data-id='$cid' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
}
<script>
$(function ()
{
$('#rc_desc$cid').hover(function ()
{
$(this).toggleClass('.tr');
});
$('.rc_desc').click(function ()
{
$(location).attr('href','student.php?' + $(this).attr("data-id"));
// if you want to redirect the page do this
// window.location.href = 'student.php?' + $(this).attr("data-id");
});
});
</script>
I think you block should be :
<script>
$(function ()
{
<?php foreach($courses as $cid=>cinfo) : ?>
$('#rc_desc<?php echo $cid; ?>').hover(function ()
{
$(this).toggleClass('.tr');
});
$('#rc_desc<?php echo $cid; ?>').click(function ()
{
$(location).attr('href','student.php?<?php echo $cid; ?>');
});
";?>
<?php endforeach; ?>
});
</script>
UPDATE
But you don't really need to do this, you have
"<div class='rc_desc' data-id='$cid' id='rc_desc$cid'>"."$desc<br/>"."<b>$univ</b><br/>".
"<span>Number of students</span>: $size<br/>".
"<span>Started at</span>: ".date('F d, Y',strtotime($start))."<br/>".
You can try this
$(function (){
$('.rc_desc').hover(function ()
{
$(this).toggleClass('.tr');
});
$('.rc_desc').click(function ()
{
attrId = $(this).attr("data-id");
$(location).attr('href','student.php?'+id);
});
});
I used this simplify examples to explain better the question.
given the following post request under ajax:
$(document).ready(function()
{
$(#submit).click(function()
{
$var = $("#result");
$code = $("#code");
$.post("ajax.php", {option : $var, code: $code}, function()
{
//Getting through the DOM could be useful if you want to analyse the answer coming from the ajax.php file
var $DOMresponse = getElementByTagName("div")[0].firstChild.data; // I would want the correct code here because this is incorrect... this is ti give you an idea
if($DOMresponse == "your code is correct")
{
$("#container1").fadeOut(400, function(){ $("#container1").html(result); });
$("#container1").fadeIn();
}
elseif($DOMresponse == "your code is incorrect. Go again trough the procedure")
{
$("#container2").fadeOut(400, function(){ $("#container2").html(result); });
$("#container2").fadeIn();
}
// In this second case I could fill the second container id="container2"
});
});
});
ajax.php example:
<?php
if($_POST['request']==1)
{
if($_POST['code']==$user['code'])
{
?><img src="...">
<div>tomatoes</div>
<div>potatoes</div>
<div id="answer">your code is correct</div> <?php
}
else
{
?><img src="...">
<div>apples</div>
<div>oranges</div>
<div>your code is incorrect. Go again trough the procedure</div> <?php
}
}
I would like to know how to get through the DOM of the ajax.php file.
how do I do this? Thanks
Do you need to do this before inserting the result to the page? If so create new element and insert the result to it. For example
var div = document.createElement('div');
var obj = $(div).html(response);
Now you have a standard jQuery object with the dom element.
Responding to the comment:
I am confused. Do you want to validate the code in php or js? It looks like your checking if what is send through post is the same as defined in $user variable. So validating the code is done in php. In that case wouldn't be simpler to use json as a response. In php script create result array with key status set to 1 or 0. In post resposne you can check response.status == 0.
Other wise it look just strange that you make the validation once in php and the twice in js after response. Besides if you set your response to be standard text then you have to create dom element and place the reponse inside to be able to search through it.
I think what you're asking is how do you get the value of $('#code') in the ajax.php file.
Here's what you're doing:
var $code = $('#code'); // jQuery object
$.post('ajax.php', { code: $code });
The problem with this is that you're passing the entire jQuery object to ajax.php. What you probably want to do is pass the value or html of the $('#code') object, like so:
var code = $('#code').html(); // if it's a non-input element
var code = $('#code').val(); // if it's an input
$.post('ajax.php', { code: code });
Then in the ajax.php file, your $_POST['code'] will equal the value of code (e.g. "ABC123"), which you can then use to compare with $user['code'] or whatever you want.
I hope I understand the problem correctly. Good luck.
EDIT: I think I understand what you're getting at now. What you want to do is this:
HTML:
Javascript:
var $option = 'request';
var $code = $('#code').val();
$.post('ajax.php', { option: $option, code: $code }, function(data) {
if (data == 'valid') {
// show valid code result here
} else {
// show invalid code result here
}
});
and ajax.php
<? if ($_POST['option'] == 'request') {
if ($_POST['code'] == '123ABC') {
echo 'valid';
} else {
echo 'invalid';
}
}
?>
Notice that the variable data comes from the function(data) part in the $.post parameter. That data variable contains the response from ajax.php (in my example, it would be 'valid'.)