I have this small function:
$('#part[en]').keyup(function(){
//console.log($(this).val());
$slug = slugify($(this).val());
$('#part_slug').val($slug);
})
It doesn't work. After some try and error, I understood the problem is with the ID (part[en]). If I change it to "part" (and change it in HTML too) it works.
My problem is that I need to use part[en] since I need to work them as an array with PHP.
How can I achieve this?
Also, I need to do the exact same thing with 2 ID's (keyup or change). There's any way to make something link
part[en].keyup OR part2[en].keyup
Or I need to create two seperate functions?
Thanks in advance.
Related
I'm trying to make it so some of the file type inputs on my website would only accept images using JavaScript.
As per my understanding I need to give selected file type inputs the attribute accept with the value image/*. I'm trying to use Element.setAttribute() for this but can't get it to work as I'm new to JavaScript and don't know the fundamentals and the correct structure the code should be in.
I tried making it work for at least one of the file type inputs like so:
function myFunction() {
var element = document.getElementById("woo_message_attachment");
element.setAttribute("accept", "image/*");
}
It didn't work. I would appreciate if someone could please explain why and show me the proper way to achieve what I'm trying to achieve.
So it seems the issue is that you are not actually calling myFunction() anywhere, and are not sure when/where to call it since you don't have full control over what pages this script is on.
One possible solution is to have the function trigger after the page has loaded. Then you would check to make sure that element exists on the page, and lastly change the 'accept' attribute.
Try adding something like this to your global javascript in wordpress:
window.addEventListener("load", function() {
if(document.getElementById("woo_message_attachment") !== null) {
document.getElementById("woo_message_attachment").setAttribute("accept", "image/*");
}
});
I've spent a while going through numerous similar questions, but based on the answers given, I'm lead to believe I have this setup correctly - but it's not working, and I'm not sure why.
I'm a newbie with Javascript/jQuery, so it's very possible (or probable!) that I'm missing something completely obvious here.
I have a page with a large 'main' div, and I'm loading content into that using jQuery .load via the navigation. That all works fine. However, some of the target pages are data-heavy, so I'm trying to integrate something in between to indicate to the user that the page is loading. Because there are numerous navigation elements, rather than having multiple functions (i.e one for each navigation element) I'm trying to do it in a single function, like so...
<script type="text/javascript">
function loadPage(pgurl) {
$('#main').html('<p align="center">Loading...</p>');
$('#main').load(' +pgurl+ ');
}
</script>
The problem I have is the onclick within the navigation. Prior to this, I had the .load within the onclick (i.e onclick="$('#main').load('/pages/testpage/');") and that worked fine. Now I'm firing the loadPage function via onclick, it's loading a black page (which firebug tells me is the site root).
Here's my onclick code;
<a onclick="loadPage('/pages/testpage/');return false;">Test</a>
I get no errors returned. I can only assume that the loadPage function is getting a zero value, rather than /pages/testpage/ - but I have no idea why!
Pointers much appreciated - much head scratching going on here!
It's already a string:
$('#main').load(pgurl);
$('#main').load(' +pgurl+ ');
needs to be
$('#main').load(pgurl);
You should probably write it as one line to prevent the second look up.
function loadPage (pgurl) {
$('#main').html('<p align="center">Loading...</p>').load(pgurl);
}
Is that a typo? Try changing:
$('#main').load(' +pgurl+ ');
to
$('#main').load(pgurl);
Because it seem you're not using the pgurl parameter, this thing in the load brackets is string a text of the variable name :)
$('#main').load(' +pgurl+ ');
use that instead
$('#main').load(pgurl);
Maybe you should look at that if you're not familiar with string concatenation http://www.youtube.com/watch?v=n17aX2TdQRk
You have to change following line // you pass string not a variable //
$('#main').load(' +pgurl+ ');
to
$('#main').load(pgurl);
It could be a rookie mistake, but I've gone over my code enough times doing things such as; pre-pending .select-delete with div, attempted to use document.write("Hello") to see if the event was firing or not.
Here's a link to my jsFiddle: http://jsfiddle.net/gPF8X/5/
I really have no idea what's going on :(.
Any help would be greatly appreciated!
Edit: Linked to the incorrect JSFiddle, relinked to the correct one.
There is no - in your div class name.
<div id="1" class="selectdelete"></div>
$('.select-delete').click( function() {
Got it - id needs to be wrapped in quotes.
var value = $(this).attr('id');
The trigger is firing, but your code is not running because of an error - you're not quoting the string 'id' so it's an undefined value. Use your browser's debugger tool - it will help for this sort of thing.
Beyond that though, I can't say anything further because it's not clear what the desired result is.
Edit There's another issue as well - the selector is not working. You can't use the [ and ] character unquoted inside a jQuery comparison like that. The simplest solution is just not to have those characters in your input names. But you can also use escaping like so: $('select[name=g_country\\['+value+'\\]]').
I know you already accepted my other answer, but I just want to add for the record that there is another way to do it. Specifically, this seems like one of those cases where jQuery is less helpful rather than more. What I would do is change your HTML so the element names were also given as IDs, and then write it like so:
document.getElementById('g_country['+value+']').disabled = true;
document.getElementById('g_url['+value+']').disabled = true;
I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.
The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.
I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.
More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.
I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.
What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!
Use "#" to select by id, use "." to select by class...
I'm trying to dynamically add some textboxes (input type=text) to a page in javascript and prefill them. The textboxes are coming up, but they are coming up empty. What is the proper way to pre-fill a textbox. Ideally I'd love to use the trick of creating a child div, setting the innerhtml property, and then adding that div to the parent main div but that didn't work. Then I thought I'd use the dom but setting textboxname.value before or after insertion won't work and doing txttextbox.setattribute('value','somevalue') won't work either. Works fine in firefox. What gives? This has to be possible? Here is my code. I know I'm only using string literals, but these will be replaced with the results of a web service call eventually. Below is some code. Oh and how do you format code to show up as you type it? I thought it said to indent four spaces, and I did that but the code is still on one line. Sorry about that.
var table=document.createElement('table');
var tbody=document.createElement('tbody');
var row=document.createElement('tr');
row.appendChild(document.createElement('td').appendChild(document.createTextNode('E-mail')));
var txtEmail=document.createElement('input');
row.appendChild(document.createElement('td').appendChild(txtEmail));
tbody.appendChild(row);
table.appendChild(tbody);
//document.getElementById('additionalEmails').innerHTML="";
document.getElementById('additionalEmails').appendChild(table);
txtEmail.value = 'my text'
Does not work?
You can also use Prototype to do this easily:
document.body.insert(new Element("input", { type: "text", size:20, value:'hello world' }))
I've encountered problems similar to this in the past, and while my memory is a bit fuzzy on why it was happening exactly, I think you may need to make sure the element is actually added to the DOM before modifying its value. e.g:
var txtEmail=document.createElement('input');
document.getElementById('someElementThatAlreadyExists').appendChild(txtEmail);
txtEmail.value = 'sample text';
I ended up solving this problem by injecting the html directly into a page via a child div. That did work, it's just that I am blind and the software I use to read the screen for some stupid reason failed to see the text in the textbox. Go figure. Thanks for the tip on prototype though, if I ever decide not to cheat and add the eleements to the dom directly, I'll do it that way.