We Keep Coding

Convert PHP variable to JQuery

Im trying to update the src from the audio tag if i click on a button.
So i need to translate the $muziek variable to Jquery
View:
<?php
foreach ($muziek as $ms)
{
if ($ms->id == 2) {
echo '<audio id="player" controls src="data:audio/mpeg;base64,' . base64_encode($ms->audio) . '">';
echo '</audio>';
}
}
foreach ($muziek as $ms)
{
echo '<br>';
echo '<input id="'.$ms->id.'" type="button" value="' . $ms->naam . '" class = "btn btn-login login-formcontrol"/>';
}
?>
</div>
<script>
$("input").click(function () {
var test = $(this).attr("id");
console.log(test);
//Here needs to be the foreach muziek
});
</script>
Muziek variable:
This is how i fill the music variable
function getAllMuziek()
{
$query = $this->db->get('muziek');
$muziek = $query->result();
return $muziek;
}
Does someone has an idea or show me how this can be done?

I spent sometime trying to figure out what you want and from what i understood you want to return an array of all muzieks returned to your js to do whatever you wanna do with it, which you can simply get with a simple ajax request:
$.get( "base_url/your_controller/getAllMuziek" )
.done(function( muziek ) {
//Here needs to be the foreach muziek
$.each(muziek, function( index, value ) {
// whatever
});
});
with a simple modification to your method getAllMuziek:
function getAllMuziek()
{
$query = $this->db->get('muziek');
$muziek = $query->result();
header('Content-Type: application/json');
echo json_encode($muziek);
}
now when you make you ajax call you will get your result.

Convert $muziek into javascript array using json_encode
<script>
var myArray = <?php echo json_encode($muziek); ?>;
</script>

Why my jQuery show() function in php foreach loop work only for first element

I have the following problem on my wordpress project :
I have 2 div call "div_sc_1" and "div_sc_2" which are hidden on my page.
I want to show them with a jQuery function .show() if they are not "checked". "Checked" status is writen in my db.
With my actual code, If only div_sc_1 or div_sc_2 is not "checked", everything is allright BUT if both of the 2 divs are not checked, only one is displaying and I don't understand why.
This is my code :
foreach($list_id_scores as $scores){
$id_s = $scores->id_score;
$checked = $wpdb->get_var( "SQL query for 'checked' status");
if($checked == "1"){
echo " score n°".$id_s." is over<br />";
}else{
$div_id = "div_sc_".$id_s;
echo $div_id; /// this echo show me that my loop is working
?>
<script>
var div_sc = <?php echo json_encode($div_id); ?>;
jQuery(document).ready(function(){ jQuery("#"+div_sc).show(); });
</script>
<?php
}
}
What is the problem for you ? Thanks for your time

You're defining a global variable div_sc multiple times. All <script> tags share the same scope, so only one value is retained. The .ready() handler only executes after all variables have been defined (and the rest of the page has finished loading), not in between.
It might be better to do this instead:
<script>
jQuery(document).ready(function(){
<?php
foreach($list_id_scores as $scores){
$id_s = $scores->id_score;
$checked = $wpdb->get_var( "SQL query for 'checked' status");
if($checked == "1"){
echo " score n°".$id_s." is over<br />";
}else{
$div_id = "div_sc_".$id_s;
echo $div_id; /// this echo show me that my loop is working
?>
jQuery("#"+<?php echo json_encode($div_id); ?>).show();
<?php
}
}
});
</script>

(window).load(function() { ... }); making the whole page go white

I have this function that resizes a div on the basis of whether or not its scrollHeight is greater than 175. It worked fine like this:
var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}
The problem was that some generated items which contributed to the div height were not being taken into consideration, not having yet been loaded when the script is run, so I put it inside of a (window).load(function() { ...}); like so:
$(window).load(function() {
var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}
});
...and now what happens is that the content blinks on the page for like a nanosecond and then the whole window is just white.

Your problem is caused by your use of document.write(). After the page has fully loaded and the whole document has been parsed, subsequent calls to document.write() obliterate whatever was there.
You're using jQuery, so you can just use .append() to add the new content.

Instead of document.write() which replaces everything on the page, append to the body:
var newsutff = $('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
$('body').append(newstuff);

Ajax script loading/Displaying only once

This script displaying the dynamic content for once thereafter its not working
Here is the code:
$(document).ready(function(){
$('.getmore').on('click',function(){
var last_id = $(this).attr('id');
$.ajax({
type: 'POST',
url : 'http://localhost/tech1/services/getmore.php',
data: 'last_id='+last_id,
beforeSend: function(){
$('.getmore').html('<img src="../images/loader.gif" alt="Loading..." />');
},
success: function(data){
$('.getmore').remove();
$('#comments').append(data);
}
});
});
});
Here is the complete php code:
<?php
mysql_connect('localhost','root','') or die('Error... Couldnt connect..');
mysql_select_db('mydb') or die('Error... Couldnt select the Db..');
$records = mysql_query(' SELECT * FROM `compare_post_comments` WHERE `post_id`=37 limit 5 ');
if(mysql_num_rows($records)){
echo '<div id="ajax_comment">';
echo '<ul id="comments">';
while($data = #mysql_fetch_array($records) ){
echo '<li>'.$data['comments'].'</li>';
$last_record = $data['sno'];
}
echo '<li class="getmore" id="'.$last_record.'">Get More</li>';
echo '</ul>';
echo "<span id='cmmnts'></span>";
echo '</div>';
}
?>
getmore.php code
<?php
if( ( isset($_POST['last_id'])!=null ) && $_POST['last_id']!="" ){
$last_id = $_POST['last_id'];
//echo "::".$last_id;
$qry = " SELECT * FROM `compare_post_comments` WHERE `post_id`=37 and sno > ".$last_id." limit 5 ";
//echo "::".$qry;
$comments = mysql_query($qry) or die('Error..');
if( mysql_num_rows($comments) ){
while( $data = mysql_fetch_array($comments) ){
echo "<li>".$data['comments']."</li>";
$last_id=$data['sno'];
}
echo "<li class='getmore' id='".$last_id."'>Get More</li>";
}else{
echo "<li class='nomore'>No More</li>";
}
}else{
echo "<li class='nomore'>No More</li>";
}
?>
ajax call working for once, thereafter its not clickable.
I dont have much knowledge about ajax and javascript, explanation is appreciated.

Try the deferred syntax of on instead:
$(document).on('click', '.getmore', function...
This will survive DOM changes. This answer presumes that your loaded data contains an object with class="getmore", as you are removing it from the DOM on success. If not you need to remove the remove as suggested by NewInTheBusiness, but probably replace it with empty() instead to remove the loading progress.
Note I have recently found problems with the version of on that only takes the event and function. In jQuery 1.10.3 it seems to not be firing when it should.

It's because you remove the getmore class after success.
Remove this line of code:
$('.getmore').remove();

Check your firebug console for any error
Remove this line $('.getmore').remove();
Delegate the click event to the element's static parent or to the document.
Try,
$(document).on("click",'.getmore', function( event ) {
});

Just try live or bind in-place of "on" :
$('.getmore').live('click',function(){
}
or
$('.getmore').bind('click',function(){
}

Call a Jquery function to start from php

In my PHP I am returning and updating a online users box however as it Echos each line out I also want it to activate a Jquery function. So if there is data there it will then echo it out and a Jquery function will take place.
example of php code ...
if($count1 > 0) {
foreach (user_list($user_name) as $user){
echo $user . "<br />";
};
echo ;// a message to activate a jquery function called userdisplay;
};
and the jquery code would look something like this...
function userdisplay(){
//do some amazing code like slide picture in from left fade text in at the top etc.
};
(I am not asking for help on the code which the function will do this is just an example)
Many thanks to anyone with an idea of how i should go about this my mind is completely blank.

just echo the call to the jquery function between a <script> tagfor example:
this is the page:
<html>
<head>
<script>
$(document).ready(function(){
//some jquery code here
});
//here is your function
function userdisplay(){
alert("triggered");
}
</script>
</head>
<body>
....
<?php
if($count1 > 0) {
foreach (user_list($user_name) as $user){
echo $user . "<br />";
};
echo "<script>userdisplay();</script>";
};
?>
....
</body>
</html>

if($count1 > 0) {
foreach (user_list($user_name) as $user){
echo $user . '<br />';
};
echo '<script>userdisplay();</script>';
};
You just have to make sure the function userDisplay() has been "echoed" before.