I have made a template that I would like to load in using jQuery .load() function. When testing I found out that it won't load any .
Here is my load code:
function open() {
history.pushState(null, null, "artiesten.php?u=user2");
$('.content').load('artiest_template.php .content');
}
Here is my template code:
<?php include('includes/connect.php') ?>
<span class="content">
<div class="right_col" role="main">
<div class="">
<script>alert("nothing")</script>
<?php
echo '<script>alert("' . $_GET['u'] . ' or nothing")</script>';
if($_GET['u']){
$t = mysqli_real_escape_string($connect,$_GET['u']);
$res = mysqli_query($connect, "SELECT * FROM artiesten WHERE Naam='" . $t . "'");
$i = mysqli_fetch_assoc($res);
echo '
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".a-titel").html("' . $i['Titel'] . '");
$(".a-naam").html("' . $i['Naam'] . '");
$(".a-over").html("' . $i['Over'] . '");
$(".a-kernmerk").html("' . $i['Kernmerk'] . '");
$(".a-email").html("' . $i['Email'] . '");
$(".a-foto").attr("src", "images/' . $i['Naam'] . '.jpg");
history.pushState(null, null, "?u=' . $i['Naam'] . '");
});
</script>';
}
?>
</div>
</div>
</span>
Can somebody help me with this?
Thanks in advance.
Should be
function open() {
history.pushState(null, null, "artiesten.php?u=Chato De Veirman");
$('.content').load('artiest_template.php');
}
not
function open() {
history.pushState(null, null, "artiesten.php?u=Chato De Veirman");
$('.content').load('artiest_template.php .content');
}
jQuery load() takes three parameters, URL, data and a function. These parameters have to be separated by a coma. Your load() has something behind your URL that is not part of the URL.
Change
$('.content').load('artiest_template.php .content');
to
$('.content').load('artiest_template.php');
Related
I'm using PHP to call a Js function with values generated by PHP.
$fp = fopen($_FILES['file']['tmp_name'], 'rb');
while(($line = fgets($fp)) !== false)
{
$split = explode(":", $line);
echo '
<script type="text/javascript">
var a = updateHashes("' . $split[0] . '", "' . $split[1] . '");
console.log(a);
</script>';
}
But my code adds some line breaks to the code, which cause errors as you can see in the following screenshot:
What could I do to fix this?
You can try to use the php trim() function on each line, that should solve.
$split = explode(":", trim($line));
Add trim()
echo '
<script type="text/javascript">
var a = updateHashes("' . trim($split[0]) . '", "' . trim($split[1]) . '");
console.log(a);
</script>';
How do i pass variables into a UIkit Modal?
The Button:
<button type="button" class="uk-button" data-uk-modal="{target:'#info',center:true}" data-added="added-test" data-modified="modified-test"><i class="uk-icon-info"></i></button>
The Modal:
<div class="uk-modal" id="info">
<div class="uk-modal-dialog">
<h4 style="margin-bottom:5px;">Added:</h4>
<div id="added"></div><br>
<h4 style="margin-bottom:5px;">Modified:</h4>
<div id="modified"></div>
<div class="uk-modal-footer">
<button type="button" class="uk-button uk-modal-close">Close</button>
</div>
</div>
</div>
The Script:
$(document).ready(function () {
$('#info').on('uk.modal.show', function (event) {
var button = $(event.relatedTarget);
var added = button.data('added');
var modified = $(e.target).data('modified');
var modal = $(this);
modal.find('.uk-modal-dialog #added').text(added);
modal.find('.uk-modal-dialog #modified').text(modified);
});
});
This is not working. I do not get a error in the console. I´ve already tried a few other ways but all of them didn´t worked as they should.
Update #1
The following jquery works partially. I´ve added the id "infotrigger" to the button.
jQuery('#info').appendTo("body");
jQuery(document).on('click', '#infotrigger', infomodal_handler);
function infomodal_handler(e)
{
var added = jQuery(e.target).data('added');
var modified = jQuery(e.target).data('modified');
jQuery('#info').on({
'show.uk.modal':function(){
jQuery('#added', jQuery(this)).text(added);
jQuery('#modified', jQuery(this)).text(modified);
}
}).trigger('show.uk.modal');
}
The Problem now is that it´s only working partially. I think the reason is that the button is in a foreach loop. Mostly i have old data when opening the modal. If i open it again i have mostly the correct data.
Any ideas how to fix that?
The problem was that sometimes the icon was presssed instead of the button itself. So the data couldn´t be fetched. To fix this the variables need to be changed from:
var added = jQuery(e.target).data('added');
to:
var added = jQuery(this).data('added');
Now the correct dom element is the target.
To use the modal inside a loop i changed everything a bit. I´ve put the modal with the script into a function where i pass the element-id through and apply it to different elements:
function info_modal( $id ) {
return "
<script>
jQuery('#info" . $id . "').appendTo('body');
jQuery(document).on('click', '#infotrigger" . $id . "', infomodal_handler" . $id . ");
function infomodal_handler" . $id . "(e)
{
console.log(e);
var added" . $id . " = jQuery(this).data('added" . $id . "');
var modified" . $id . " = jQuery(this).data('modified" . $id . "');
jQuery('#info" . $id . "').on({
'show.uk.modal':function(){
jQuery('#added" . $id . "', jQuery(this)).text(added" . $id . ");
jQuery('#modified" . $id . "', jQuery(this)).text(modified" . $id . ");
}
}).trigger('show.uk.modal');
}
</script>
<!-- Info Modal -->
<div class='uk-modal' id='info" . $id . "'>
<div class='uk-modal-dialog'>
<h4 style='margin-bottom:5px;'>" . __( 'Added on', 'easy-code-placement' ) . ":</h4>
<div id='added" . $id . "'></div><br>
<h4 style='margin-bottom:5px;'>" . __( 'Last Modified on', 'easy-code-placement' ) . ":</h4>
<div id='modified" . $id . "'></div>
<div class='uk-modal-footer uk-text-right'>
<button type='button' class='uk-button uk-modal-close'>" . __( 'Close', 'easy-code-placement' ) . "</button>
</div>
</div>
</div>
";
}
Inside the loop i´ve placed the button and also apply the element-id to it and after it i call the function (the function is only for the better code readability - the script and modal can, of course, also be placed directly inside the loop):
<button type="button" id="infotrigger<?php echo $code->id; ?>" class="uk-button" data-uk-modal="{target:'#info<?php echo $code->id; ?>',center:true}" data-added<?php echo $code->id; ?>="added" data-modified<?php echo $code->id; ?>="modified"><i class="uk-icon-info"></i></button>
<?php echo info_modal( $code->id ); ?>
I'm trying to change an input value using jQuery mouse over.
Scenario: I got 5 div having different colors and user names. When mouseover a div the input text change (and for color input the background color) data according to database values, when change div the text displays new data.
using PHP I echo the part of the script to handle the mouseover function
<?php
$myId = '1';
$uname = 'user1';
$ucolor = 'FFFFFF';
echo "<script>
$('$myId').mouseover( function () {
$('#uname').val('" . $uname . "'),
$('#ucolor').val('" . $ucolor ."'),
$('#ucolor').css('background-color', '" . $ucolor . "')
})
</script>";
This work if i change mouseover() to hover(), but display only the first element, if i do a mouse over the second element data doesn't change.
Try this:
Put your script after body tag:
<body>
<div class="hh" id="1"></div>
<input type="text" id="uname" />
<input type="text" id="ucolor" />
<div class="hh" id="2"></div>
</body>
<?php
$myId = '1';
$uname = 'user1';
$ucolor = 'FFFFFF';
echo "<script>
$('#$myId').mouseover( function () { // add # here
$('#uname').val('" . $uname . "'),
$('#ucolor').val('" . $ucolor ."'),
$('#ucolor').css('background-color', '" . $ucolor . "')
})
</script>";
$myId = '2';
$uname = 'user2';
$ucolor = 'FFF555';
echo "<script>
$('#$myId').mouseover( function () { console.log('fdgfdg')
$('#uname').val('" . $uname . "'),
$('#ucolor').val('" . $ucolor ."'),
$('#ucolor').css('background-color', '" . $ucolor . "')
})
</script>";
?>
In general the div or any DOM must have a unique ID value. Try using class selector(.) instead of ID selector(#).
I'm making a music player using php and javascript. I list the files like this:
<?php
if (isset($_GET["action"])) {
$action = htmlspecialchars($_GET["action"]);
if ($action == "listen") {
function listFolderFiles($dir) {
$ffs = scandir($dir);
echo '<ol>';
foreach($ffs as $ff){
if($ff != '.' && $ff != '..'){
echo '<li>'. $ff . '';
if (is_dir($dir . '/' . $ff)) listFolderFiles($dir . '/' . $ff);
echo '</li>';
}
}
echo '</ol>';
}
listFolderFiles("music");
}
} else {
echo '> listen';
}
?>
And I change the song like this:
<script>
function changesong(url) {
$("#audioplayer").attr("src", url);
$("#audioplayer").trigger('play');
}
</script>
The problem is that songs with quotes in them won't play (for example Don't Stop Me Now). Is there an easy way to fix this?
You should use addslashes(), like this:
echo '<li>'. $ff . '';
You can escape quotes for javascript function in HTML code like this:
Note that you probably need to escape double quotes as well, since they can interfere with HTML tag.
$link = $dir . '/' . $ff;
$link = str_replace("'", "'", $link);
$link = str_replace('"', """, $link);
echo '<li>'. $ff . '';
I would like to know how to pass multiple arguments to the the function with onmouseover event handler in HTML.
Here is the following code in PHP ,
<a href='Page2.php?user=" . $userid . "' target='_blank' onMouseOver=\"writetxt('" . $info "')\" onMouseOut=\"writetxt(0)\">"
I would like to pass 2 arguments to writetxt() function something like this :
writetxt($arg1, $arg2)
<a href='Page2.php?user=" . $userid . "' target='_blank' onMouseOver=\"writetxt('" . $info . "," . $img . "')\" onMouseOut=\"writetxt(0)\">"
Thanks
It should be like...
writetxt('" . $info . "', '" . $img . "');
^ ^
use like this
echo "<a href=\"Page2.php?user=" . $userid ."\" target=\"_blank\" onMouseOver=\"writetxt('" . $info . "','" . $img . "')\" onMouseOut=\"writetxt(0)\">" ;