I have a textarea by id "compose" and i want to get the data from that textarea before the submit button is pressed. I have another javascript function that will share the information to various other sites based on the user preferences and i need to pass the information in the textarea to that js.
function getVal(){
alert(document.getElementById("compose").value);
}
I am not getting any information and im guessing its because the information is stored else where but i dont know where that is stored.
I am using zend with this and i would like to use jQuery but i cannot get jQuery to work properly with zend. It either wrecks other components on the page or does not work at all. Any suggestions?
edit: This is where i am calling getVal(). Its just a link right now as i am trying to get the input into the text area. Then i will insert the found data into my js script.
I attached Zend because the site is made using the zend framework and after a while of stuggling with jquery i didnt want a jquery answer because i would not be able to use it.
click
edit1 It seems the engine im using has dropped jquery support for the version im using.... Thank you for your answers and help
since you tagged this as jquery I assume you use it. In that case, the simplest way would be ...
$("#compose").val()
Oh, never mind, I read now that you can't make jquery work?
In that case, did you read this post? Best way to start using jQuery in a Zend Framework 1.9 application?
You can hi-jack the submit event for the form, do your AJAX request, then submit the form normally:
$('form').on('submit', function () {
$.ajax({
url : '<URL>',
data : { compose : $('#compose').val() }
});
});
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().
Docs for .on(): http://api.jquery.com/on
Related
I've an input field in my backend where I use a jQuery colorpicker to make it easier for users to get the hex value of a color. It's working good so far.
But, as the inputfields are created with ajax, I need to get to them with an 'jQuery ajax call'.
For some reasons this gives me a javascript error 'TypeError: undefined is not an object (evaluating 'pos.top')' in the colorpicer lib js file.
Without asking you to grab thought the asset lib, is someone able to point me in the right direction as to why this error arises? I mean the calls are pretty similar, aren't they? What am I missing?
Here's my code.
Working version (after saving the page):
jQuery('.ci-js-colorpicker').click(function(){ }).ColorPicker();
Not working version (with jQuery ajax call):
jQuery(document).on('click','.ci-js-colorpicker',function(){ }).ColorPicker();
I've removed parts of the code in the function to make it easier to read.
The jQuery colorpicker lib I'm using is: http://www.eyecon.ro/colorpicker/
Try doing:
$(document).on('click', '.ci-js-colorpicker', function () {
$('.ci-js-colorpicker').colorpicker();
});
If you are displaying it in a modal, maybe you want to make the horror of:
.colorpicker-visible {z-index: 9999;}
I'm using a pretty basic jquery ajax photo upload for a page that I've created. I'm using exactly the same code as the tutorial, except I've made the few modifications explained later. The tutorial for creating it is here:
http://www.saaraan.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php
The problem I'm running into is I'm trying to convert the script to allow multiple uploads on a page. I have the page setup with multiple forms already, and the php action is ready to receive multiple photos, I'm just clueless when it comes to the jquery part. It declares myform with the id of UploadForm, but since I converted it, I now have the ids of UploadForm1, UploadForm2, UploadForm3, etc..
var myform = $("#UploadForm");
There is a short way of doing the this in jquery I'm sure, but the only solution I can come up with is just repeating the jquery function as many times as I need with the ids hard-coded. Once someone shows me how to fix the UploadForm id problem, I'll be able to fix the progressbar, progressbox, statustxt, and submitbutton ids as well.
Assign a class to each one and reference the class with $('.ClassName'). Then go through the collection with .each(function(){}).
You could allow for each photo to have an input element inside your form, and with a little JavaScript you could allow the user to add/remove rows in your form. Essentially, you are looking for multiple file upload. I've found something that might help:
How to upload multiple files using PHP, jQuery and AJAX
I got a wordpress page where users can add posts from the front_end. For this i use the WP_editor() function.
When I was trying the functions just plain in a new wordpress page I could just use
tinyMCE.activeEditor.getContent();
But now I'm setting everything up as the final product should look like, this means the editor is loaded in a modalbox (using fancybox plugin), and it initalizes fine, and it works. But I can't fetch the content the same way, it just returns me with the following error:
Uncaught ReferenceError: tinyMCE is not defined
I assume this has something to do with the modal box loading the page in an iFrame, meaning the editor isn't there when the javascript code is running. How do I solve this? Can I bind it to something like .live() ?
Seems like such an easy problem, guess I'm just to tired to be thinking clearly today.
Best Regards.
On the Front-End try to use wp_enqueue_script('tiny_mce') before.
In the WordPress version I use the JavaScript object tinymce and not tinyMCE. Try using tinymce.
I have a search box on my site that uses autocomplete to give suggestions, and it works great. Now I want to use it on several INPUT fields on a single page. However, the script uses ID tags to access the contents of the INPUT form box.
I modified this:
$('#suggest').autocomplete(
to this:
$('.suggest').autocomplete(
How do I access the INPUT box text now that I lose the ability to use getElementsById?
So, I think I know what you're asking. You have several input elements on a page, none of which have id attributes, but do have name attributes. Each input has a separate autocomplete widget attached to it, and you want to query a URL as your data source, passing in the name if the input being interacted with.
Ok.
I set up a fiddle to do what I'm describing above, which I think is what you want. See it here: http://jsfiddle.net/4GXAm/1/
The magic is here:
$(".example").autocomplete({
source: function(request, response) {
var url = "/suggest/?" + $(this.element).serialize();
alert("perform an AJAX request with " + url);
// Respond with the ajax results
response(["a", "b", "c"]);
}
});
Using .serialize() will get you a name/value pair from the input, without needing to know its id or name attribute. You can get the element being interacted with by using $(this.element) when using a callback function as your autocomplete source.
I recommend looking at an example of the autocomplete that uses a callback function as a remote data source for more details.
The jQuery UI autocomplete plugin should do the trick for you. This seems to be a scrap of what you were trying to use before, but reading the documentation should get you through it a bit better:
http://jqueryui.com/demos/autocomplete/
Just make sure to:
include the scripts and stylesheets for jquery ui on your page
make good use of $(this) to refer to the element that is being worked with. The above example is selecting all text inputs.
If you are still confused after this, I'd be glad to give more specific guidance if you can cut most of the explanation here and provide us with the actual code that isn't working, but as long as you understand the $(this) concept, I think this should get you what you need.
So i'm trying out MVC after only playing with it some time ago.
Need to find the best way to selectively show and hide sections (divs, etc) on clicking or changing a value of a control, but not having to post back, i.e. javascript?
Any suggestions.
Use jQuery. You can use a jQuery Event to detect a click and then hide or show divs.
So, You have a button called "HideDiv" and "DivToHide" is the div you wish to hide.
$("#HideDiv").click(function() {
$("#divToHide").hide();
};
It's that easy. Can't really go in-depth here but check out their tutorials: http://docs.jquery.com/Tutorials or browse this site: http://www.learningjquery.com/category/levels/beginner
jQuery actually comes with ASP.Net MVC, check the scripts folder of a new MVC project and you'll see it in there. This site using jQuery and MVC :) So your browsing a sample of what is possible with it
You can use jQuery. It is included with the standard MVC project template.
$("#myButtonId").click(function () {
$("#myDivId").toggle();
});
See more at the jQuery docs for toggle.
You can do the same way as you are doing it with normal ASP.NET application using JavaScript. I think JavaScript is best as its fast and works on client-side.
If you are having a specific requirement then please put the specific requirement here.
You can use jQuery or MooTools if you want some animation.