i have forms createds that require a value , as this this forms edits different users.
so how would i send that value from jquery? i know how to do it with combobox , but i want to do it from links :
like - name [details] when someone clicks on details the forms will pop up, so i wana mimic index.php?id=2 but with jquery, anyideas?
Do you want to display some content via JQuery with a link? Modify the selector to point to the correct DOM object, eg. an anchor tag with class "details"
$('a .details').click(function ()
{
$.get(
'index.php?id=2',
function(html)
{
$('#results').html(html);
});
});
if you want to load the content the link is pointing to, use (untested)
$('a .details').click(function ()
{
var anchor = this;
$.get(
$(anchor).attr('href'),
function(html)
{
$('#results').html(html);
});
});
if the id is stored in the li element, you can get the "id" attribute by using:
$('li').attr('id');
$('a .details').click(function ()
{ $.get( 'index.php?id=2', <--------------I need to pass that id=2 from a link thats created dynamicaly.
function(html)
{ $('#results').html(html); });});
for example, using
a
<ul id="cat" >
</ul>
i can acces , "cat" through jquery, loop through the cat elements and each li id=
will be clickable with some css
I cant figure out how to do it with normal text links!
thanks anyway dspinozzi
Related
I have list of user and their dates in PHP and onclick of specific user, I want to hide div other than one whose link is clicked
For example :
<div class='person' id='add_new_date_8' style='display:none;'>
<div class='person' id='add_new_date_9' style='display:none;'>
<div class='person' id='add_new_date_10' style='display:none;'>
<a href='javascript:void(0)' onclick="addMydate('<?PHP echo $id;?>')">Add a new Date?<a/>
So if $id = 8 then hide all div of class person which has id other than 'add_new_date_8'
Make it simple in jquery
$(document).on('click', '.person', function() {
$('.person').hide();
$(this).show();
});
access id in js function. and first hide all the div with person class and then show the which have matching id.
function addMydate(id){
$('.person').hide();
$('#add_new_date_'+id).show();
}
The other solutions so far will work, however I prefer to use .siblings()
function addMydate(id){
var selectedEl = $('#add_new_date'+id);
selectedEl.siblings().hide(); //siblings() takes all other elements of the same parent
selectedEl.show();
}
This will prevent the element itself from being hidden and then shown again, and might save you some headaches on animations, should you add those.
note: this depends on your HTML structure instead of classes, which is a bit less flexible. You can also use the following to exclude the element you want to show from the elements that get hidden:
$('.person').not('#add_new_date'+id).hide()
You can use siblings to get the siblings of the clicked element.
$(document).on('click', '.person', function() {
$(this).show().siblings('.person').hide();
});
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Docs: http://api.jquery.com/siblings
EDIT
function addMydate(userId) {
$('#add_new_date_' + userId).show().siblings('.person').hide();
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have a working jQuery function that creates a div when another div is clicked.
When this div is clicked...
<div class='col_1' data-parent_id='parent' data-child_id='1002'>List 1</div>
this div is created using the function below and some php.
<div class='col_2' data-parent_id='1002' data-child_id='1003'>List 2</div>
jQuery
$(function() {
$('.col_1').click(function(){
var parent_id = $(this).data("parent_id");
var child_id = $(this).data("child_id");
$.post("array-2.php",{parent_id: parent_id, child_id: child_id},
function(data){
$('#column_2').empty();
$('#column_2').append(data);
});
});
});
$(function() { //// New part:Trys to make the created div functional,
$('.col_2').click(function(){
var parent_id = $(this).data("parent_id");
var child_id = $(this).data("child_id");
$.post("array-2.php",{parent_id: parent_id, child_id: child_id},
function(data){
$('#column_3').empty();
$('#column_3').append(data);
});
});
});
I want the new div to function identically as the first div to make a 3rd div/list as well (and even more created columns of lists). So I added the second half of the jQuery but it doesn't seem to function. Does anyone have any ideas why this won't work, or how I could make it better? Thanks.
You can see basically what I'm trying to do here. actual project
Since the col_2 elements are created dynamically you need to use event delegation to register event handlers to these elements.
When you use $('.col_2').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements
$(function () { //// New part:Trys to make the created div functional,
$('#column_2').on('click', '.col_2', function () {
var parent_id = $(this).data("parent_id");
var child_id = $(this).data("child_id");
$.post("array-2.php", {
parent_id: parent_id,
child_id: child_id
},
function (data) {
$('#column_3').empty();
$('#column_3').append(data);
});
});
});
Instead of using $('.col_2').click(function(){..});
Try $(document).on("click",".col_2",function(){..});
Because you are trying to bind click event to an element, even when it is not present in the DOM.
Try to use this
$(document).on("click",".col_2",function(){
..............
});
rather than
$('.col_2').click(function(){
..............
});
Check this jsfiddle
I am working on a site right now and have discovered that the jquery/javascript that I have implemented for the Search applies the same effect to all search boxes on the page when I click in the input field. By default, it removes the "Search" text and clears it out so that you can type your search term. I only want it to perform this function on the search box that is clicked within, not all search boxes on the page. However, if you look at this example, you'll notice that when you click into the search field at the top of the page, it clears the text out of both. I think I could fix it with .parent() or something, but am a jQuery novice. Any help would be appreciated.
Also don't know quite why the border is showing up around my icon, but I'll fix that.
Here's the search function jQuery:
$(document).ready(function(){
$('.search-box').textdefault({'text':'Search'});
});
(function($){
$.fn.textdefault = function(settings){
var Elements = this;
var settings = $.extend({}, $.fn.textdefault.defaults, settings);
return Elements.each(function(){
if($(Elements).is("input")){ TextDefault( $(Elements) ); }
});
function TextDefault(Input){
if (Input.val().length==0) Input.val(settings.text);
Input.focus(function () {
if (Input.val()==settings.text) Input.val('');
});
Input.blur(function () {
if (Input.val().length==0) Input.val(settings.text);
});
}
};
$.fn.textdefault.defaults = {
text: 'Search'
};
})(jQuery);
Thanks!
Taylor
plugin example
here is the correction.
Elements contains all the elements that are 'passed' to this plugin.
var Elements = this;
By using $(Elements) instead of $(this) in the each function, you
used all inputs as one
return Elements.each(function() {
if ($(this).is("input")) {
TextDefault($(this));
}
});
This line of code should be called to initialize the plugin. So it should be put somewhere outside of the plugin, in a $(document).ready() {} code block for example, since you need the plugin initialized for the inputs on the load of the page.
$('.search-box').textdefault({
'text': 'Search'
});
Use a different selector. Instead of all inputs with a class of "search-box" try giving it a unique ID or class.
$("#search_default").textdefault({'text':'Search'});
or
$(".search-box.defaulttext").textdefault({'text':'Search'});
The HTML would then be
<input type="text" class="search-box defaulttext" ...
or
<input type="text" id="search_default" ...
This is the method that I use, which could also be helpful for you. It won't fire for both objects since it uses $(this) to control just the object being focused/blurred.
$(".search-box").live("focus", function(){
if ( $(this).val() == $(this).attr("rel") ){
$(this).val('');
}
}).live("blur", function(){
if ( $(this).val() == '' ) {
$(this).val( $(this).attr("rel") );
}
}).each( function(){
$(this).attr("rel", $(this).val() );
});
I would try to use a more "jQuery" way to do this. jsFiddle
$('input').focus(function(){
$(this).data('text', $(this).val()).val('');
});
$('input').blur(function(){
if( $(this).val() === "" ) $(this).val( $(this).data('text') );
});
I have a problem with the jQuery's live() function.
I'm creating the shopping basket with PHP and make a json call to the php script to add specific item to the basket. Rather than re-binding the click to the button ( tag) I've decided to use live(), however it doesn't seem to like it.
Here's my call:
if ($('.add_to_basket').length > 0) {
$('.add_to_basket').live('click', function() {
var button = $(this);
var id = $(this).attr("rel");
$.getJSON("/basket/action/add/id/" + id, function(data) {
if (!data.error) {
$('.basket_no_of_items').text(data.no_of_items);
$('.basket_items_total').text(data.total);
button.text('Remove from the basket');
}
});
return false;
});
}
Any idea what I might be doing wrong?
I've checked with firebug and it seem to post the request to only /basket/action/add - without id bit.
The whole idea of using live() is to register a function on the occurrence of an event (eg. click) on a set of elements whether they exist or not at the time of creation of the function.
Adding ($('.add_to_basket').length > 0) will check whether this particular set of elements exist or not. This is counter productive as per my description above. So, either:
Remove ($('.add_to_basket').length > 0) and this should work for all .add_to_basket elements
Change $('.add_to_basket').live('click', function() {...}); to $('.add_to_basket').click(function() {...}); and wrap it around with a $(document).ready() to ensure that all DOM elements have loaded when the function is registered to the click.
Hope this makes sense.
Sumit
Try removing the "length" check, I bet it's interfering with the .live() function.
change $.getJSON("/basket/action/add/id/" + id, function(data) {})
to $.getJSON("/basket/action/add/id/" ,{ pid : id}, function(data) {})
I've built star button to use it like "starred items". I have the code running. but i have a problem.
When i click on star it becomes a starred item and and the star image changes.
But when i click again to unstar, it just doesn't work. i need to refresh the page to unstar it.
Also even the first step doesn't work for chrome.
add star codes:
jquery
$(function() {
$(".yildiz").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "yildizekle.php",
data: dataString,
cache: false,
success: function toggle()
{
$('.yildizbutton'+id).animate({
src:"star-icon.png",
class:"yildizsizbutton"+id,
},0);
}
});
return false;
});
});
php:
<img class="yildizsizbutton'.$row['id'].'" border="0" src="star-icon.png" alt="Yildizi kaldir" width="16" height="16" />
remove star
$(function() {
$(".yildizf").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "yildizsil.php",
data: dataString,
cache: false,
success: function toggle()
{
$('.yildizsizbutton'+id).animate({
src:"star-icon-f.png",
class:"yildizbutton"+id,
},0);
}
});
return false;
});
});
php:
<img class="yildizbutton'.$row['id'].'" border="0" src="star-icon-f.png" alt="Yildiz ekle" width="16" height="16" />
To add the star, do something similar to this:
$("#"+id).find("img").attr("src", "star-icon.png");
To remove:
$("#"+id).find("img").attr("src", "sstar-icon-f.png");
You shouldn't use animate in the way you are using it at all. I also used the ID of the container, then found the image inside of it, instead of putting together that class like you were doing. That's just personal preference, though...the main takeaway is to use attr("src") to set the src of an image in jQuery.
EDIT: Here is a full solution that should work.
$(function() {
$(".star").click(function() {
var id = $(this).attr("id");
if($(this).hasClass("starred")) {
$.post("yildizekle.php", {id: id}, function(resp) {
$(this).removeClass("starred").find("img").attr("src", "star-icon-f.png");
});
}
else {
$.post("yildizsil.php", {id: id}, function(resp) {
$(this).addClass("starred").find("img").attr("src", "star-icon.png");
});
}
return false;
});
});
Notice that we are using a class to track whether or not the element is already starred. This means in your PHP you will need to add the starred class to any elements that are already starred when the page loads. Also, I used $.post instead of $.ajax since it is a simpler way of doing the same thing.
There are a few problems in your code, and both of the answers here are relevant and both are correct. Being as green as you are, I'd say you are on the road to learning well.
I'd use a separate class for ALL of the stars, one that doesn't relate to if its starred or unstarred. Maybe something like 'star'. :) You need to refresh the page to un-star it is because you never actually change it on the FRONT-end to be starred. If you use a tool like firebug of WebKit's Web inspector, you'll see that the class of the link is still "yildiz".
I'm not going to give you a complete answer because I'd be robbing you of an awesome learning experience here. Here are some pointers:
Remember which objects your click() events are connected to: $(".yildizf") and $(".yildiz")
When you click on an item, does it actually change class so that jQuery knows it's different? Essentially, you are 'starring' the same item over and over again because you never allow jQuery to see it as something it needs to un-star
If you use a 'star' class in addition to the other class (like <a class="star yildiz" ...>), then you can attach your click event to $('a.star'), and figure out in THERE if you should be starring or unstarring the item.
I hope this all makes sense.
You've defined the click event to both star and un-star the item. In the event you need to look at the current state of the item then decide if you want to star or un-star it. you need to branch inside your click event.