I have realized a asynchronous treeview in php, now i want to add onclick event to the items in the treeview, and then make query in mysql.
Do you know how to do that?
Thanks a lot.
Edit:
Async.html:
<script type="text/javascript">
$(document).ready(function(){
$("#black").treeview({
url: "twodimen.php"
});
$("#black > li").live("click",function()){
$.get("");
})
});
</script>
<ul id="black">
</ul>
But when i add the $("#black > li").live("click", function()){}, the treeview doesn't display.
How to do that?
Well, this would be a start:
$("#treeview > li").click(function() { // this sets the onclick on your node
$.get('url_to_php_script_that_will_the_db'); // this calls an url using GET.
$.post('url_to_php_script_that_will_the_db'); // this calls an url using POST.
}
Suppose your treeview has id 'treeview', all the <li> under the treeview will have a click event. It's a rough start, but that's basically what you're looking for.
Related
I have a doubt. All right. I have a post in which users post comments and next to each post have a button belonging to each of them. Well, as I get when I click on each of these buttons me out a popup.
With that event ?. An event for several elements. But that is the same for all those buttons.
ahhh. These buttons are generated or printed with php, when the user posts something, that something has a button. Help!!!
HTML
<a id="popup" class="globes_post_giving">♠</a>
JS
<script type="text/javascript">
$(document).ready(function(){
$("#popup").on({ click:function(e){
alert('hola');
} });
});
</script>
The jQuery code seems not good.
There are syntaxes errors.
Here is my two cents :
<script type="text/javascript">
$(document).ready(function(){
$("#popup").click(function(e){
alert('hola');
});
});
</script>
In order to be used with multiple buttons you'd better use a class instead of an id and set the click event on it.
HTML
First link
Second link
Third link
JS
$(document).ready(function(){
$(".popup").click(function(e){
alert('hola');
});
});
That's all I can do without more code.
Hope it helps.
I have been making a website that has lots of pages. Hence decided to put the navigation bar in a separate php file to reduce re-work in all those pages in case of changes. So in my index.php I have included the navigation bar like:
<?php include 'navbar.php'; ?>
And the navbar.php looks like:
<div id="nav">
<ul>
<li pg="#home" >home</li>
<li pg="#pack" >packages</li>
<li pg="#about" >about</li>
</ul>
</div>
In the index.php, I have a javascript onClick function to select the <li> from navbar:
<script type="text/javascript">
var oldpg = "#home";
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
</script>
But when you click those <li> nothing happens. I think the js is not picking up the elements from the php. How can I refer to those elements in a separate php file?
You need to fix your JavaScript:
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
}); // you left off this closing
You can use Chrome DevTools or Firebug to view the console.
Use on and try. Not tested but that may be the problem here. Try
$(document).ready(function() {
$(document).on('click', '#nav ul li', function(e) {
//Your code
});
});
Also make sure that you included jQuery library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The code you showed us is correct. As long as the div with id "nav" is indeed being displayed, make sure you are including the jQuery library correctly. If it is, your error must reside inside whatever you did inside the click event handler $.click (in //here are the codes to hide/show divs).
Thanks for replying #Retsam #Campari #Chris #Ankit
As #Retsam said, I tried with Chrome console and found the error to be
Uncaught reference error: $ not defined (Firebug console didn't give any error/message)
The reason was because I had put my code before linking with the jQuery library.
So I moved my
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
above the onClick function and it worked.
Silly me ...
Thanks guys
https://www.codeigniter.com/user_guide/tutorial/index.html
Visit that link and look for the table of contents button at the upper right of the page. I want to apply that to the webpage I am making.
What do you call that design technique? Any links for tutorial on how to do it? Thank you very much.
To create that menu you can use css and jquery. Create a div with
position:absolute;top:-400px;width:auto;height:430px;
and you animate it with jquery. At click, set top:0px. You can use also animate jquery function.
LE:
$(document).ready(function(){
$('div a').click(function(){
$(this).parent().css('top','0px');
$(this).addClass('opened');
$(this).click(function() {
if($(this).hasClass('opened')){
$(this).parent().css('top','-280px');
}
})
});
});
<div style="width:100%;background-color:red;position:absolute;height:300px;top:-280px;"></div>
It's a sample code. From here you can edit it and you can animate it. Good luck!
I am facing some problem with pagination inside of jquery tabs .I have used Ajax pagination for that it works good but unfortunately when I click on any page no (in pagination) second time .Then it breaks the link .
Please look at the front view how it works:
http://kelts.wpengine.com/7664-top-o-the-morning-312/
open recent related posts->click on any page of pagination
please make sure that I am using wp-pagination();.
<script type="text/javascript">
jQuery(".larger.page").live("click", function(e) {
e.preventDefault();
var href = jQuery(this).attr("href");
show_posts(href.replace(/.*page\//, ""));
});
show_posts(1);
});
function show_posts(l) {
jQuery.get("<?php bloginfo('template_directory')?>/fetch-blog-post.php", {
pageno : l
}, function(data) {
jQuery("#show_posts").html(data).show();
});
}
</script>
Change your selector jQuery(".larger.page").live(...) to jQuery(".larger.page, .page.smaller").live(...).
Onces you visit a link the class larger is replaced by smaller that is why the link is broken in the second click.
why don't you try
$('.wp-pagenavi').on('click',function(){
// code
});
because .live is deprecated from now on.
From what I see the problem is that you get paginator itself as part of the AJAX response and don't bind events to a new DOM elements.
My End goal is to have ajax displayed content be clickable to shove whatever it's value is into a text box.
Right now I have the ajax loading but when I click on it, it doesn't work. As of now I have jquery assigned the 'a' tag so when it's clicked it puts the static text "works" in the textarea with the id=email-body.
$(document).ready(function() {
// Expand Panel
$('a').click(function(){
$('#email-body').val($('#email-body').val()+'works');
});
});
This works just fine for a tags that aren't part of the ajax content but it doesn't work for the ajax content. Is there a special pull system I should use to have jquery effect ajax content?
Also static text and clicking on an a tag isn't really want I want.
Right now my ajax is doing the following:
foreach($search_found as $search_row){
$hint=$hint . '<a>'.ucwords($search_row['email_module_name']).'</a>';
}
echo $hint;
Is there a way I can have it be:
AJAX:
<div class="module" value="'.ucwords($search_row['email_module_name']).'">
'.ucwords($search_row['email_module_name']).'
</div>
JQUERY:
$(document).ready(function() {
// Expand Panel
$('.module').click(function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
});
What you want is to delegate the events, to do this you can use .on()
$(document).ready(function() {
// Expand Panel
$(documnet).on('click', 'a', function(){
$('#email-body').val($('#email-body').val()+'works');
});
});
You need to use the .on function:
$('div').on('click', '.module', function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
This allows the 'click' function to attach to the elements that are brought in via ajax.
You can use .on() to bind an event to current and future elements.
$(document).on("click", "a", function(){
$('#email-body').val($('#email-body').val()+'works');
});
Or,
$(document).on("click", ".module", function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
$('.module').live('click', function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
I figured it out and came back on to see someone posted .on
I tried this and it did not work. What did work was .live