I'm trying to add this script to my site but there are a list of the same element generated by the script "voucherCode" so am struggling here because when I test it, only the first element will 'reveal' no matter which one is clicked...
<!--EDIT-->
tried calling the script using a class which works but now all of them reveal:
Like Blazemonger said, browsers will not pick up multiple elements with the same ID. Id should be unique, and if you need something that repeats then uses classes.
Update
well first of all you need to add the class instead of ID
<div class="voucherCode">
if you use jquery (call it in the header first, google jquery)
$('.trigger_class').click(function(){
//do what you need to do here when clicked
//to access all of the voucherCode class you use $('.voucherCode').css('display', 'block');
});
Update 2:
if you only want specific ones to reveal then you need identifiers on those ones (class(2 or more) or id(only 1)) then target the ones you want to show. To make it more dynamic, you can add a rev or title attribute to the trigger anchor tag, and use jquery to grab that attribute and use it as the element you want to reveal
<a class="trigger_class" rev="reveal_class_or_ID">....</a>
then in the javascript
$('.trigger_class').click(function(){
//grab the rev from the a, this is use a class (hence the . if it is using id it would be #)
$("." + $(this).attr("rev")).css('display','block');
});
Lastly don't forget to add the reveal_class_or_ID to your items
Update:
I am not good with php but it seems like you have the option to add the iterator or index to
<div class="revealVoucher" id="reveal_dynamicID">
Reveal Code
</div>
<div class="voucherCode" id="show_dynamicID">
<?=$voucher_code?>
</div>
I don't know how iterator works in php but if you know php this should make sense
Related
I would like to make a li inputable after the page being execute. I want the li function close to word office format. I mean, when we write on first list then ENTER it, it would focus on second list and ect. and this is my code I've made before:
<div class="writeform">
<label class="subtitle">ingredients</label>
<ol>
<li><input class="formxyz globalwrite" id="ingred" name="ingred" placeholder="ingredients"></input>
</li>
</ol>
</div>
and this is the script in ajax
$('input#ingred').on('keydown',function(e){
if(e.which == 13) {
$('ol').append('<li><input class="formxyz globalwrite" id="ingred" name="ingred" placeholder="ingredients"></input></li>');
$('input#ingred').focus();
}
});
when I run this code, and write in the 1st line then I press ENTER, the second li shows up. But when I write in 2nd li and press enter, nothing appended. How can I make this append function work continously when I press ENTER key?
You cannot have duplicate uses of ID values - it is not valid HTML, and your selector for the input element would not work properly. The same thing would be true with using a class, even though it is valid to have multiple uses of a class, the selection would select all matching elements. You would need to generate a unique ID, or use a different selector to select the last input element, such as the jquery .last() selector.
If there are two ID selectors of the same name , jQuery only select the first one.
You should bind the keydown event using delegation method, like this:
Change this:
$('input#ingred').on('keydown',function(e) {
Into this:
$(document.body).on('keydown','input#ingred',function(e) {
Because the first syntax will not bind to elements which are created later (dynamically).
UPDATE
For more correct way, you should make it bind to class or name attribute rather than id, because id id originally for naming elements and should be unique.
I think this is what you need in correct way: :D
$(document.body).on('keydown','input.formxyz',function(e) {
or:
$(document.body).on('keydown','input[name="ingred"]',function(e) {
Good luck!
I am trying to create a section using dragula js just like this:
http://bevacqua.github.io/dragula/
What I want is, the drag and drop should be dynamic. So that on each drag and drop the position of each element should be saved. How can I do that?
I know it can be done with php and ajax. But no idea on how the position should be manipulated
This question can be broken down into 2 different problems.
How do I keep track of the order of elements?
From what I can tell, dragula does not have a concept of tracking positioning of elements. You will have to devise a way to identify the parent container and the draggable items element. (div in the example). If you need to create the parent containers dynamically, you will need to track their order too. If you have a predefined layout, then all you need to do is track elements order and what parent they belong too. (for example, left or right, if we use the dragula example).
Create an id for each draggable element. You will have something like this.
<div id="left">
<div id="element1">Some text</div>
<div id="element2">Some other text</div>
</div>
When an element is dropped you will need to capture the element that was dropped and it's order to the parent container. To do this, you can use the jQuery index function to find the new index relative to the parent container. You will then need to reorder the list as you have it saved on the server side.
draggableElements.on('drop',function(el)
{
var parentElId = $(el).parent().attr('id');
var droppedElIndex = $(el).index();
var droppedElId = $(el).attr('id');
$.ajax({
url: "itemDropped.php",
type: 'GET',
data: { parentIdParam: parentElId,
droppedIndexParam: droppedElIndex,
droppedIdParam: droppedElId }
}).done(function() {
//do something else
});
});
How do I save the ordering of the elements?
This depends on your requirements. If you are saving the heirarchy to a database you will need to save the parent container ID for each element, the order or position it is in and the elements ID.
To rerender the page with the elements in the same order they were dropped in you would simply loop over all the elements in each container and render them in the order they are saved.
Review this [http://codepen.io/rachelslurs/pen/EjKmLG]
Also other example mostly similar with your dragula js example
sample code for to check and customize
so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
I use this to toggle my div elements, and hide all them when the DOM is ready...
$('div[class*="showhide"]').hide();
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('div.showhide' + nr).toggle(400);
});
I have dynamically created div elements with class showhide0;showhide1;showhide2...etc...
Inside the DIV tags I have search boxes.
First when page is loaded all DIV tags hide.
I toggle one of them to show.
Start a search, so the page is reloaded with the result of the query.
Of course all DIV is hide again, because the page is reloaded. Unfortunately...
Is it possible to not hide again after I searched for something? It would be nice when I open the page, all the divs are hidden, but after then just when I toggle it...
If you need a specific element or elements to stay visible upon a page reload, then you're going to need to do something to maintain state across requests, and then modify your jQuery to utilize that state information when initializing the visible state of the elements.
This can be done in numerous ways which include but are not necessarily limited to
Include it in the query string
Include it in the URL hash
Use a cookie
Well, yeah, you just don't run the initial hide() if there's a search request. I'd just exclude that line from the output if, on the PHP level, you know you're executing a search.
We do something similar to this where I work.
We opted instead of have the class name just be hide for all elements and instead have the ids named.
So, we'd have it something like:
<div id="hide1" class="hide"> </div>
along with this CSS to hide all those divs by default
.hide {
display: none;
}
Finally, we use something like this to show them:
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('#hide' + nr).toggle(400);
});
}
This works because of CSS precedence rules. The toggle()/hide()/show() method overrides the hide class's style.
As for the unhiding part, if you pass the ID to unhide to your script, you can parse it and unhide the appropriate div.
You can read and process the query string from window.location.search. Unfortunately, you then have to manually parse it or use a plugin, such as jQuery Query String Object or jQuery URL Utils.
var id = $.query.get('unhide_id'); // This is using Query String Object
$('#' + id).show(400);