I've been looking all over the web for an example or solution, but have not been successful yet. The challenge I am facing is using jQuery to select an element ID that starts with a string, but also ends with a variable passed in by a function.
Example:
.JSP file - There is a ForEach loop that creates dynamic divs and adds a variable ${number} to their 'id' as a key. This allows a button to show/hide only that unique div without impacting other divs on the same page.
<div id="success-icon${number}"></div>
<div id="success-msg${number}"><p>My Message</p></div>
<button id="success-btn${number}" onclick="showIcon(${number})">Show Button ${number}</button>
.JS file
//does not work, because it is looking for success+number
function showIcon(number){
$('[id^=success]'+number).show();
}
I need it to look for an id that starts with "success" and ends with "number" variable.
Would really appreciate any help on this and thanks in advance for your time!
You can use as selector:
$('[id^=success][id$='+number+']').show();
But beware, would match for number = 1; both divs with IDs: success-icon1 and e.g success-icon11. Now that's depend your expected behaviour.
Anyway, to 'group' some elements, you would have better to use a common class specific to each grouped element.
Related
Simple question from a newbie to javascript / jQuery I cannot figure out. Maybe someone here can answer this.
Let's say I have a php script that loads thousands of rows and displays them one per line and each row has a userid associated with it.
Each row is displayed within a div andd each div has a unique id based on the userid.
So in my while loop I have
$id = "div${userid}";
then each line would be like
<div id='$id'>some info here </div>
My question is, if I were to trap for an onclick, normally I would
$('#div123').on('click', function() {
..
..
..
But since I don't know the names of the divs, how can I create at trap for an unknown?
$('#unknown').on('click', function() {
..
..
..
Thank you for taking the time to read this.
JT
You can find elements that start with a specific string. The code below will find any id that starts with div, for example <div id="div123">
$( "[id^='div']" )
$(function () {
$(".links2lvl a").click(function () {
var page = this.hash.substr(1); /*in case of first link - works*/
/* var page = this.hash.substr(7); in case of second link - nope.jpg*/
$.get(page + ".php", function (gotHTML) {
$("#content").html(gotHTML);
});
});
});
<section class="tabs">
<ul class="links1lvl">
<li><a>About</a>
<ul class="links2lvl">
<li>Us</li>
<li>Personal</li>
So here I have two two sets of code. First is jQuery function, which extracts given PHP file and it's contents are shown in div with id="content".
The other is my 2 level list. In the second level you can see pages I'm trying refer to. The first link works just fine, jQuery successfully extracts the content and shows it given plave, but the second link in the folder about/ thats another story, the function doesn't seem to find it. The question is, how do I refer to .whatever from another file?
Most of the problems I see in code are based on attempts to solve challenges by adding more challenges to the code. :)
I would give a suggestion and I hope you don't mind: I would solve it by adding a "data-*" to each a tag to hold the reference you need to find using this.hash (or, maybe, use .each or .map) to loop through the elements and extract the proper URL to be used).
What happen is, this.hash will return "#who", but it is also a valid ID selector in jQuery (see more here). Hence this.hash will find "#who", but won't find "about/#personal" (because the hash element is not the first character of the string).
You could use string.split('#') to capture the string straight after the "#", then save it in - for instance -, the data-hash parameter at each a tag while constructing the HTML. Then it should be fairly easy to obtain the content needed for your application (once again, it is always about how to minimize challenges, instead of add them). ;)
Sadly I am no able to build a code sample now, but if you have difficulties following this idea, contact me and I will write a quick sample code for you.
I am receiving an XML data form result and using the Strophe library to convert it into html.
This gives me a chunk of HTML (form) as a variable, which I can then append to a page:
var iqHtml = iqForm.toHTML();
$("#form-result-div").append(iqHtml);
The issue is that the form which it attaches has no id, action, or anything to identify it:
<form data-type="result">
...
I have two possibilities here.
Option 1. (preferred method)
Is it possible to change the variable iqHtml, which is just raw HTML, and an ID to it? Ideally this would be done before it is appended to the page.
I've tried multiple ways to find the form tag and add the attribute using .find() and .attr() but with no success.
Option 2. (less preferable)
I can edit the library to add a random ID (say id="some-id") which I will then need to EDIT rather than creating new.
This editing will have the questions as Option 1 - how do I search the variable and then change the form's ID.
Thank you.
Kind Regards,
Gary Shergill
You could assign an id before appending it
$(iqHtml).attr('id', 'someid').appendTo("#form-result-div");
Edited: id needs to be in ''
This should work:
var iqHtml = "<form><input type='text' /></form>";
$("#form-result-div").append(iqHtml).find("form").attr("id", "myForm");
Demo: http://jsfiddle.net/AA8Cf/
You can also play with one of the child selectors to pick up a specific one, if there is more than one form.
http://api.jquery.com/category/selectors/child-filter-selectors/
My main mission: Is to get the text of the next and the previous objects to the chosen object - To display the image (and its titles) Previous & Next.
Before that I have a problem: to get text of a selected object, from an index to a variable.
The problem: Every time I pick a random object, the variable does not change but the text is added to the existing text in the index.
I made a DEMO, would appreciate your help.
$(document).ready(function hintProject(){
$('#nextProject, #prevProject').click(function(){
subtitle = null;
subtitle = $('#client-sub.active').justtext();
$('#next_target_title').text(subtitle);
alert (' text::: ' + subtitle );
});
});
It looks like jQuery simply can't find the objects you're specifying. I don't think the problem is with the snippet in the question. I think the problem is with your document ready function.
To debug, try simplifying your problem by cutting out all of the additional complexity of the setup script and just set up an HTML page that is in the state you want. It's much easier to understand 1 problem than 2 or more.
Also, try simplifying how you're specifying an active item: a single class on the portfolio item would make your life easier. Then you can specify css and such based on the parent instead of adding multiple classes to multiple things inside the each portfolio item.
I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);