Hello I need change text to icon in my menu after hover on it.
I am getting data from db, so I need do it dynamically.
php in while
echo'<li style="width: ' . $row['item_width'] . 'px;">
<a href="stranky/' . $nazev . '/1/' . $row['id'] . '"
style="background-color: #' . $row['item_color'] . ';" alt="'. $row['item_name'] . '"
class="menu_data" id="search">'. $row['item_name'] . '</a>';
js
<script type="text/javascript">
$(document).ready(function(){
$(".menu_data" ).mouseover(function() {
var icon = $(this).attr('id');
$(this).html('<span class="glyphicon glyphicon-'+icon+'"></span>')
});
$(".menu_data" ).mouseout(function() {
var name = $(this).attr('alt');
$(this).html(name)
});
});
</script>
But it doesn't looks like nice. Have someon better idea?
Related
I want to show popover but I don't see it.
CODE
echo '
<a data-toggle="popover"
data-trigger="hover"
data-html="true"
data-placement="top"
data-content="HTML MARKUP"
class="cf_box popover-extra-balik ' . $this->custom_fields[ 34 ]->name . ' ' . $i->fields[ 34 ] . ' ">
';
echo '<span class="field_value">' . JText::_( 'COM_DJCLASSIFIEDS_EXTRA_BALIK_PREMIUM' ) . '</span>';
echo '</a>';
Website Link: link
Image: Image
Thanks!!
Add below Javascript in your code.
$(function () {
$('[data-toggle="popover"]').popover()
});
Example
I removed some PHP code because it's not supported here.
$(function() {
$('[data-toggle="popover"]').popover()
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<a data-toggle="popover" data-trigger="hover" data-html="true" data-placement="top" data-content="<strong>BALÍK PREMIUM obsahuje :</strong>
<ul>
<li>sezónne pneumatiky</li>
<li>najbližšiu servisnú prehliadku so zľavou</li>
<li>dezinfekcia vozidla</li>
<li>1 x čistenie a doplnenie klimatizácie počas leta zdarma</li>
<li>povinná výbava zdarma</li>
<li>zvýhodnené financovanie</li>
</ul>" class="cf_box popover-extra-balik">
<span class="field_value">BALIK_PREMIUM</span>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
This question already has answers here:
Javascript "this" reference for onclick event not working
(4 answers)
Closed 5 years ago.
<?php
//Load the database configuration file
include 'dbConfig.php';
$sql = "SELECT * FROM users ORDER BY level DESC LIMIT 500";
$result = $db->query($sql);
if ($result->num_rows > 0) {
$i = 0;
while ($row = $result->fetch_assoc()) {
echo '<ul class="list-group">
<li class="list-group-item">
<span class="badge">' . $row['level'] . '</span>
<img id="' . $i . '" onclick="image();" width="30px" height="30px" src="' . $row['picture'] . '"><strong> ' . $row['first_name'] . '
</strong></li>
<script>
function image(this) {
console.log($(this).attr("id"));
}
</script>
';
$i ++;
}
}
?>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
Why is this not working ?
Problem: Console.log is returning undefined.
Why do I get the undefined message? Is there a good way to avoid it?
Check below example. You can achieve it by jquery.
$(document).ready(function(){
$("img").click(function(){
alert($(this).attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img_123" width="30px" height="30px" src=""><strong>test </strong>
In my jQueryMobile app I'm using slider for search part of application. When slider is opened and user writes "word to search" into search panel, list view of found results is printed out in format:
<li><a id='$id'>***search result***</a></li>
its loaded from php search file. On click of this li part of list view I need to trigger onClick function redirecting into another page and create variable. But this onClick trigger is not being picked.
This is pannel with search init:
<div data-role="panel" data-theme="b" id="mypanel" data-position="right" data-position-fixed="true" data-display="overlay">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
<div id="search_results">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id="sub_cont"></ul>
</div>
</div>
Php which sends search result:
if($uname == $check_uname){
echo "<li id='search_r'>" . "<a href='#'>" . $uname . " : " . " " . $fname . " " . $sname . "</a>" . "</li>";
}else{
echo "<li id='search_r'>" . "<a href='#' id='$id' class='s_result'>" . $uname . " : " . " " . $fname . " " . $sname . "</a>" . "</li>";
}
and jQuery:
$("#cc_page").live('pageshow', function(){
$("#search_r").click(function(){
var search_r = $('.s_result').attr('id');
window.location.href = "http://imes.jzpersonal.com/app/userpanel.html#sfpp_page";
});
});
but still click function is not being triggered. Anyone same experience? Anyone found a correct working way?
Solution:
$("#cc_page").ready(function(){
$("#search_r").live('click', function(){
search_r = $(this).attr('id');
window.location.href = "http://imes.jzpersonal.com/app/userpanel.html#sfpp_page";
});
});
This is not going to work. From what you have explained when you enter "word to search" listview is dynamically populated with li items, same li items that should have a click event on them.
Here's a problem. You are binding a click event in the wrong moment. In your case click event is bind at a pageshow event, and at this point listview is not populated with search results and because of how javascript works future li elements are not going to have a click event on them. Event can not be bind retroactively.
What you should do is to bind a click event only after elements have been appended to a listview.
I have a conversations flow who is refresh with .load() of jQuery every 3 seconds.
This system work, but in each conversation I have an answer button who slide a form (textarea and submit button) with .toggle().
To display the flow, I use a while with PHP.
My issue is, when the is loading by .load(), and answer button is clicked, the form hide again and text contain too.
<div id="the_river_loading">
<?php
$sql_the_river = 'SELECT u.nickname, u.firstname, u.lastname, u.main_photo, u.locality,
id_conversation, id_messages, owner, participants, text, date
FROM users AS u
INNER JOIN the_river
ON u.nickname = owner
WHERE answer = 0
ORDER BY date DESC';
$result_the_river = mysqli_query($mysqli, $sql_the_river);
$count = 0;
while ($data_the_river = mysqli_fetch_assoc($result_the_river))
{
$count++;
echo '<div class="message_container_news">'; // Start block conversation
echo '<a href="/profile/' . $nickname . '" class="name_links" style="vertical-align: top; font-size: 16px;">
<img src="' . $main_photo . '" title="' . $name . '" class="members_actu_photo" />' . $name . '</a>
<span style="vertical-align: top">, ' . $locality . '</span><span style="float: right; font-size: 12px;">Posté le Octobre 25, 2012</span>
<p style="margin-top: 5px;">' . $data_the_river['text'] . '</p>
<div class="btnAnswer_nb">' . $count_answer . '</div> Answers
See conversation
<div class="btnAnswer_news" id="btnAnswer_news_id_' . $count . '">Reply</div>
<form method="post" id="display_form_id_' . $count . '" action="" style="display: none;">
<br />
<textarea name="answer_text"></textarea><br />
<input type="submit" name="answer_valid_id_' . $count . '" value="Post" />
</form>
</div>'; // End block conversation
}
?>
</div>
<script type="text/javascript">
$(".btnAnswer_news").live("click", function(){
var num_show = this.id.replace(/\D/g, "");
$("#display_form_id_" + num_show).toggle("fast");
});
var auto_refresh = setInterval(
function() {
$("#the_river_loading").load("/home" + " .message_container_news");
}, 3000
);
</script>
In pleasure of read you.
This is because if you load the content again into the container, the styles applied per js will get removed (because they were applied through style="" and this gets refreshed). You should move the Form and the Button to another Div, wich is not in the loading Div.
If I understand your problem correctly (you've not be very descriptive), you just want to not hide the form when clicking again, for that use show() instead of toggle() , so replace your following line:
$("#display_form_id_" + num_show).toggle("fast");
for this one:
$("#display_form_id_" + num_show).show("fast");
If you want to keep the text of the textarea, you can like so:
var auto_refresh = setInterval(
function() {
tx = $("#the_river_loading textarea[name='answer_text']").val();
$("#the_river_loading").load("/home" + " .message_container_news", function(){
$("#the_river_loading textarea[name='answer_text']").val(tx);
});
}, 3000
);
I'm trying to pass information from an unordered list, list item to an ajax request once the list item is placed in another list.
This is the JQuery that picks up the column #id the list item is dropped into, however the code for getting the $row['id'] picks up the first item in each list, not the specific item I'm sorting.
(I'm using php to iterate the list items in both lists - I've removed the unessential PHP code).
<script type="text/javascript">
$(document).ready(function(){
$(".sortable").sortable({
connectWith : ".sortable",
receive : function(){
var column = $(this).closest('div.box').attr('id');
var id = $(this).find('span').html();
$.ajax({
url: "update_column.php",
type:"POST",
data: "column="+column+"&id="+id
});
alert(column + id)
}
})
.disableSelection();
});
</script>
I'm using the alert() to give me some visual feedback. This is the HTML code:
<div id="one" class="box">
<ul class="sortable">
<li>
<div class="card">
<p>' . $row['customer'] . '</p>
<p>' . $row['ponumber'] . '</p>
<p class="hide"><b>ID:</b><span>' . $row['id'] . '</span></p>
<p class="hide">' . $row['misc'] . '</p>
</div>
</li>
</ul>
</div>
<div id="two" class="box">
<ul class="sortable">
<li>
<div class="card">
<p>' . $row['customer'] . '</p>
<p>' . $row['ponumber'] . '</p>
<p class="hide"><b>ID:</b><span id="id">' . $row['id'] . '</span></p>
<p class="hide">' . $row['misc'] . '</p>
</div>
</li>
</ul>
</div>
I'm a self taught programmer who has been programming for 3 months so I apologise for any novice mistakes.
I've updated your js, it works now. I have added comments where required.
$(document).ready(function(){
$(".sortable").sortable({
connectWith : ".sortable",
receive : function(event, ui){
//changed this to be use parent()
var column = $(this).parent().attr('id');
//get the current dragged item - as per http://jqueryui.com/demos/sortable/#event-receive
var index = ui.item.index() + 1 ;
//get the id from the span using the column we got in the first step and index we got above
var id = $("#"+column+" li:nth-child("+index+") span").html();
$.ajax({
url: "update_column.php",
type:"POST",
data: "column="+column+"&id="+id
});
}
}).disableSelection();
});