Search Results

Search found 2106 results on 85 pages for 'attr'.

Page 82/85 | < Previous Page | 78 79 80 81 82 83 84 85  | Next Page >

  • jQuery line 67 saying "TypeError: 'undefined' is not a function."

    - by dfdf
    var dbShell; function doLog(s){ /* setTimeout(function(){ console.log(s); }, 3000); */ } function dbErrorHandler(err){ alert("DB Error: "+err.message + "\nCode="+err.code); } function phoneReady(){ doLog("phoneReady"); //First, open our db dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000); doLog("db was opened"); //run transaction to create initial tables dbShell.transaction(setupTable,dbErrorHandler,getEntries); doLog("ran setup"); } //I just create our initial table - all one of em function setupTable(tx){ doLog("before execute sql..."); tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)"); doLog("after execute sql..."); } //I handle getting entries from the db function getEntries() { //doLog("get entries"); dbShell.transaction(function(tx) { tx.executeSql("select id, title, body, updated from notes order by updated desc",[],renderEntries,dbErrorHandler); }, dbErrorHandler); } function renderEntries(tx,results){ doLog("render entries"); if (results.rows.length == 0) { $("#mainContent").html("<p>You currently do not have any notes.</p>"); } else { var s = ""; for(var i=0; i<results.rows.length; i++) { s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>"; } $("#noteTitleList").html(s); $("#noteTitleList").listview("refresh"); } } function saveNote(note, cb) { //Sometimes you may want to jot down something quickly.... if(note.title == "") note.title = "[No Title]"; dbShell.transaction(function(tx) { if(note.id == "") tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]); else tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]); }, dbErrorHandler,cb); } function init(){ document.addEventListener("deviceready", phoneReady, false); //handle form submission of a new/old note $("#editNoteForm").live("submit",function(e) { var data = {title:$("#noteTitle").val(), body:$("#noteBody").val(), id:$("#noteId").val() }; saveNote(data,function() { $.mobile.changePage("index.html",{reverse:true}); }); e.preventDefault(); }); //will run after initial show - handles regetting the list $("#homePage").live("pageshow", function() { getEntries(); }); //edit page logic needs to know to get old record (possible) $("#editPage").live("pageshow", function() { var loc = $(this).data("url"); if(loc.indexOf("?") >= 0) { var qs = loc.substr(loc.indexOf("?")+1,loc.length); var noteId = qs.split("=")[1]; //load the values $("#editFormSubmitButton").attr("disabled","disabled"); dbShell.transaction( function(tx) { tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) { $("#noteId").val(results.rows.item(0).id); $("#noteTitle").val(results.rows.item(0).title); $("#noteBody").val(results.rows.item(0).body); $("#editFormSubmitButton").removeAttr("disabled"); }); }, dbErrorHandler); } else { $("#editFormSubmitButton").removeAttr("disabled"); } }); } Dats my code, awfully long, huh? Well anyways I got most of it from here, however I get an error on line 67 saying "TypeError: 'undefined' is not a function.". I'm using Steroids (phonegap-like) and testing dis on an iPhone simulator. I'm sure it uses some cordova for the database work. Thank you for your help :-)

    Read the article

  • Function calls not working in my page

    - by Vivek Dragon
    I made an select menu that works with the google-font-Api. I made to function in JSBIN here is my work http://jsbin.com/ocutuk/18/ But when i made the copy of my code in a html page its not even loading the font names in page. i tried to make it work but still it is in dead end. This is my html code <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <meta charset=utf-8 /> <title>FONT API</title> <script> function SetFonts(fonts) { for (var i = 0; i < fonts.items.length; i++) { $('#styleFont') .append($("<option></option>") .attr("value", fonts.items[i].family) .text(fonts.items[i].family)); } } var script = document.createElement('script'); script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts'; document.body.appendChild(script); WebFontConfig = { google: { families: ['ABeeZee', 'Abel', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Aldrich', 'Alegreya', 'Alegreya SC', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allura', 'Almendra', 'Almendra Display', 'Almendra SC', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Anaheim', 'Andada', 'Andika', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo Black', 'Archivo Narrow', 'Arimo', 'Arizonia', 'Armata', 'Artifika', 'Arvo', 'Asap', 'Asset', 'Astloch', 'Asul', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'Bad Script', 'Balthazar', 'Bangers', 'Basic', 'Battambang', 'Baumans', 'Bayon', 'Belgrano', 'Belleza', 'BenchNine', 'Bentham', 'Berkshire Swash', 'Bevan', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'Bitter', 'Black Ops One', 'Bokor', 'Bonbon', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Calligraffitti', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Capriola', 'Cardo', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Caudex', 'Cedarville Cursive', 'Ceviche One', 'Changa One', 'Chango', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chivo', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Combo', 'Comfortaa', 'Coming Soon', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Courgette', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cutive', 'Cutive Mono']} }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); $("#styleFont").change(function (){ var id =$('#styleFont option' +':selected').val(); $("#custom_text").css('font-family',id); }); </script> <style> #custom_text { font-family: Arial; resize: none; margin-top: 20px; width: 500px; } #styleFont { width: 100px; } </style> </head> <body> <select id="styleFont"> </select><br> <textarea id="custom_text"></textarea> </body> </html> How can i make it work. Whats the mistake i am making here.

    Read the article

  • jQuery custom validation for a selected radio selection

    - by Kaushik Gopal
    Hey peeps, This is my requirement: I have a bunch of radio box selections (types of workflows). If one of the radios are selected(i.e one particular type of workflow selected), I want to run a custom validation on that. This is what i tried, but it's not behaving well. Any help? jQuery part: $(document).ready(function() { // this part is to expand the child radio selection if particular parent workflow selected $("#concernedDirectorChoice").hide(); $("input[name^=workflowChoice]").change( function (){ if($(this).attr("class")=='chooseDir'){ $("#concernedDirectorChoice").show(); }else{ $("#concernedDirectorChoice").hide(); } }); // FORM VALIDATION $.validator.addMethod("dirRequired", function(value, element) { return this.optional(element) || ($("input[name^=rdDir:checked]").length); }, "That particular workflow requires a Director to be chosen. Please select Director"); $("#contExpInitiateForm").validate({ debug:true ,rules:{ RenewalNo: {required: true, number: true}, chooseDir: {dirRequired: true}, workflowChoice: {required: true} } ,errorPlacement: function(error, element) { $('.errorMessageBox').text(error.html()); } }); }); HTML form part: <!-- Pick type of workflow --> <table class="hr-table" > <tr> <td class="hr-table-label " colspan=2 >Pick Workflow Type</td> </tr> <tr> <td> <input type="radio" name="workflowChoice" value="1"> </input> </td> <td> Workflow 1 </td> </tr> <tr> <td> <input type="radio" name="workflowChoice" value="2" class="chooseDir"> </input> </td> <td> Workflow 2 (Dir selection required) </td> </tr> <tr> <td> <input type="radio" name="workflowChoice" value="3"> </input> </td> <td> Workflow 3 </td> </tr> </table> <!-- Pick Director for Workflow type 2 --> <table id="concernedDirectorChoice" name="concernedDirectorChoice" > <tr><td class="hr-table-label" colspan=2 > Choose Concerned Director</td></tr> <tr> <td><input type="radio" value='Dir1' name="rdDir" /></td> <td>Director 1</td> </tr> <tr> <td><input type="radio" value='Dir2' name="rdDir" /></td> <td>Director 2</td> </tr> <tr> <td><input type="radio" value='Dir3' name="rdDir" /></td> <td>Director 3</td> </tr> </table>

    Read the article

  • tastypie posting and full example

    - by Justin M
    Is there a full tastypie django example site and setup available for download? I have been wrestling with wrapping my head around it all day. I have the following code. Basically, I have a POST form that is handled with ajax. When I click "submit" on my form and the ajax request runs, the call returns "POST http://192.168.1.110:8000/api/private/client_basic_info/ 404 (NOT FOUND)" I have the URL configured alright, I think. I can access http://192.168.1.110:8000/api/private/client_basic_info/?format=json just fine. Am I missing some settings or making some fundamental errors in my methods? My intent is that each user can fill out/modify one and only one "client basic information" form/model. a page: {% extends "layout-column-100.html" %} {% load uni_form_tags sekizai_tags %} {% block title %}Basic Information{% endblock %} {% block main_content %} {% addtoblock "js" %} <script language="JavaScript"> $(document).ready( function() { $('#client_basic_info_form').submit(function (e) { form = $(this) form.find('span.error-message, span.success-message').remove() form.find('.invalid').removeClass('invalid') form.find('input[type="submit"]').attr('disabled', 'disabled') e.preventDefault(); var values = {} $.each($(this).serializeArray(), function(i, field) { values[field.name] = field.value; }) $.ajax({ type: 'POST', contentType: 'application/json', data: JSON.stringify(values), dataType: 'json', processData: false, url: '/api/private/client_basic_info/', success: function(data, status, jqXHR) { form.find('input[type="submit"]') .after('<span class="success-message">Saved successfully!</span>') .removeAttr('disabled') }, error: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR) console.log(textStatus) console.log(errorThrown) var errors = JSON.parse(jqXHR.responseText) for (field in errors) { var field_error = errors[field][0] $('#id_' + field).addClass('invalid') .after('<span class="error-message">'+ field_error +'</span>') } form.find('input[type="submit"]').removeAttr('disabled') } }) // end $.ajax() }) // end $('#client_basic_info_form').submit() }) // end $(document).ready() </script> {% endaddtoblock %} {% uni_form form form.helper %} {% endblock %} resources from residence.models import ClientBasicInfo from residence.forms.profiler import ClientBasicInfoForm from tastypie import fields from tastypie.resources import ModelResource from tastypie.authentication import BasicAuthentication from tastypie.authorization import DjangoAuthorization, Authorization from tastypie.validation import FormValidation from tastypie.resources import ModelResource, ALL, ALL_WITH_RELATIONS from django.core.urlresolvers import reverse from django.contrib.auth.models import User class UserResource(ModelResource): class Meta: queryset = User.objects.all() resource_name = 'user' fields = ['username'] filtering = { 'username': ALL, } include_resource_uri = False authentication = BasicAuthentication() authorization = DjangoAuthorization() def dehydrate(self, bundle): forms_incomplete = [] if ClientBasicInfo.objects.filter(user=bundle.request.user).count() < 1: forms_incomplete.append({'name': 'Basic Information', 'url': reverse('client_basic_info')}) bundle.data['forms_incomplete'] = forms_incomplete return bundle class ClientBasicInfoResource(ModelResource): user = fields.ForeignKey(UserResource, 'user') class Meta: authentication = BasicAuthentication() authorization = DjangoAuthorization() include_resource_uri = False queryset = ClientBasicInfo.objects.all() resource_name = 'client_basic_info' validation = FormValidation(form_class=ClientBasicInfoForm) list_allowed_methods = ['get', 'post', ] detail_allowed_methods = ['get', 'post', 'put', 'delete'] Edit: My resources file is now: from residence.models import ClientBasicInfo from residence.forms.profiler import ClientBasicInfoForm from tastypie import fields from tastypie.resources import ModelResource from tastypie.authentication import BasicAuthentication from tastypie.authorization import DjangoAuthorization, Authorization from tastypie.validation import FormValidation from tastypie.resources import ModelResource, ALL, ALL_WITH_RELATIONS from django.core.urlresolvers import reverse from django.contrib.auth.models import User class UserResource(ModelResource): class Meta: queryset = User.objects.all() resource_name = 'user' fields = ['username'] filtering = { 'username': ALL, } include_resource_uri = False authentication = BasicAuthentication() authorization = DjangoAuthorization() #def apply_authorization_limits(self, request, object_list): # return object_list.filter(username=request.user) def dehydrate(self, bundle): forms_incomplete = [] if ClientBasicInfo.objects.filter(user=bundle.request.user).count() < 1: forms_incomplete.append({'name': 'Basic Information', 'url': reverse('client_basic_info')}) bundle.data['forms_incomplete'] = forms_incomplete return bundle class ClientBasicInfoResource(ModelResource): # user = fields.ForeignKey(UserResource, 'user') class Meta: authentication = BasicAuthentication() authorization = DjangoAuthorization() include_resource_uri = False queryset = ClientBasicInfo.objects.all() resource_name = 'client_basic_info' validation = FormValidation(form_class=ClientBasicInfoForm) #list_allowed_methods = ['get', 'post', ] #detail_allowed_methods = ['get', 'post', 'put', 'delete'] def apply_authorization_limits(self, request, object_list): return object_list.filter(user=request.user) I made the user field of the ClientBasicInfo nullable and the POST seems to work. I want to try updating the entry now. Would that just be appending the pk to the ajax url? For example /api/private/client_basic_info/21/? When I submit that form I get a 501 NOT IMPLEMENTED message. What exactly haven't I implemented? I am subclassing ModelResource, which should have all the ORM-related functions implemented according to the docs.

    Read the article

  • Change form field options dynamically (and restore previously selected options) using jQuery

    - by Martin
    I'm fairly new to both jQuery and JavaScript so can anyone please point out what I'm missing here? I have a form with multiple pairs of select fields, where the content of the second field relies on the selection of the first one. Once a value is chosen from the first one then a piece of jQuery code empties the corresponding second select options, gets new values as JSON and inserts them as new select values. All of this works with the code I've written. However if a user has chosen a second value, I'd like to restore it if possible (meaning if the new values also include the one previously selected). I tried to do this by first saving the second value and then trying to set it once the new options have been inserted. This did not work. However when trying to debug I inserted an alert() just before restoring the second value and with that in there it does work... Am I missing something very basic here? Any help would be appreciated. HTML: <select name="party-0-first" id="id_party-0-first"> <option value="" selected="selected">---------</option> <option value="1">first_value1</option> <option value="2">first_value2</option> <option value="3">first_value3</option> <option value="4">first_value4</option> </select> <select name="party-0-second" id="id_party-0-second"> <option value="" selected="selected">---------</option> <option value="1">second_value1</option> <option value="2">second_value2</option> <option value="3">second_value3</option> <option value="4">second_value4</option> </select> <select name="party-1-first" id="id_party-1-first"> ... JavaScript: $.fn.setSecond = function() { var divName = $(this).attr("name"); divName = divName.replace('-first', ''); divName = divName.replace('party-', ''); // Save the currently selected value of the "second" select box // This seems to work properly setValue = $('#id_party-' + divName + '-second').val(); // Get the new values $.getJSON("/json_opsys/", { client: $(this).val() }, function(data){ $('#id_party-' + divName + '-second').empty(); $('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>'); $.each(data, function(i, item){ $('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>'); }); }); // Here I try to restore the selected value // This does not work normally, however if I place a javascript alert() before // this for some reason it does work $('#id_party-' + divName + '-second').val(setValue); $(document).ready(function(){ $('[id*=first]').change(function() { $(this).setSecond(); }); });

    Read the article

  • Append <ul> and <li> in recursive loop

    - by Batman
    I have a site collection. I was told I need a recursive loop to do this. This is what I've tried: When the site loads, call getSiteTree() which passes the top level website to my getSubSite() function. From there I check if there are any subsites. I have a boolean but I'm not really using it for anything yet, I've just seen it used before for this type of work. Anyways, from there I check if there are any sub sits, if not I log the end of the branch, if there are, I call the function again using the new url and repeat the process. Looking at my console, it seems to work as intended. function getSiteTree(){ var tree = $('#treeviewList'); var rootsite = window.location.protocol + "//" + window.location.hostname; var siteEnd = false; getSubSite(rootsite); } function getSubSite(url){ $().SPServices({ operation: "GetWebCollection", webURL: url, async: true, completefunc: function(xData, Status) { var siteUrl; var siteCount = $(xData.responseXML).find("Web").length; if(siteCount == 0){ console.log("end of branch"); siteEnd = true; }else{ $(xData.responseXML).find("Web").each(function() { siteUrl = $(this).attr("Url"); console.log(siteUrl); getSubSite(siteUrl); }); } } }); } My questions: now that I have my sites, I need to take those sites and create something like this but I'm not sure how to accomplish this. <li>Site 1 <ul> <li>sub 1.1</li> <li>sub 1.2</li> <li>sub 1.3</li> <ul> <li>1.3.1</li> </ul> <li>sub 1.4</li> <li>sub 1.5</li> </ul> </li> <li>Site 2 <ul> <li>sub 2.1</li> <li>sub 2.2</li> <li>sub 2.3</li> <ul> <li>2.3.1</li> <li>2.3.2</li> </ul> </ul> </li> </ul> I have this inital html: <div id="treeviewDiv" style="width:200px;height:150px;overflow:scroll"> <ui id="treeviewList"></ui> </div>

    Read the article

  • Jquery query XML document where clause

    - by user578406
    I have an XML document that I want to search a specific date and get information for just that date. My XML looks like this: <month id="01"> <day id="1"> <eitem type="dayinfo"> <caption> <text lang="cy">f. 3 r.</text> <text lang="en">f. 3 r.</text> </caption> <ref href="link" id="3"/> <thumb href="link" id="3"/> </eitem> </day> <day id="7"> <eitem type="dayinfo"> <caption> <text lang="cy">f. 5 v.</text> <text lang="en">f. 5 v.</text> </caption> <ref href="link" id="4"/> <thumb href="link" id="4"/> </eitem> </day> <day id="28"> <eitem type="dayinfo2"> <caption id="1"> <text lang="cy">test</text> <text lang="en">test2</text> </caption> <ref href="link" id="1"/> <thumb href="link" id="1"/> </eitem> </day> <day id="28"> <eitem type="dayinfo"> <caption> <text lang="cy">f. 14 v.</text> <text lang="en">f. 14 v.</text> </caption> <ref href="link" id="20"/> <thumb href="link" id="20"/> </eitem> </day> </month> My Jquery looks like this: $(xml).find('month[id=01]').each(function() { $(xml).find("day").each(function() { var day = $(this).attr('id'); alert(day); }); }); In the XML example above I only shown one month, however there are many more. In my JQuery I've tried to do 'Where month = 1' and get all the days info for that month, however that JQuery brings back days for every month. How do I do a where clause with JQuery/JavaScript on a XML document? thanks.

    Read the article

  • Custom Geo Tagging. Name to position and position to name

    - by Toni Michel Caubet
    Hello there i am implementing a custom geo tagging system, ok Array where i store the cordenades of each place /* ******Opciones del etiquetado del mapa*** */ var TagSpeed = 800; //el tiempo de la animacion var animate = true; //false = fadeIn / true = animate var paises = { "isora": { leftX: '275', topY: '60', name: 'Gran Melia Palacio de Isora' }, "pepe": { leftX: '275', topY: '60', name: 'Gran Melia de Don Pepe' }, "australia": { leftX: '565', topY: '220', name: 'Gran Melia Uluru' }, "otro": { // ejemplo leftX: '565', // cordenada x topY: '220', // cordenada y name: 'soy otro' // nombre a mostrar } /* <==> <span class="otro mPointer">isora</span> */ } /**/ this is how i check with js function escucharMapa(){ /*fOpciones*/ $('.mPointer').bind('mouseover',function(){ var clase = $(this).attr('class').replace(" mPointer", ""); var left_ = paises[clase].leftX; var top_ = paises[clase].topY; var name_ = paises[clase].name; $('.arrow .text').html(name_); /*Esta linea centra la etiqueta del hotel con la flecha. Si cambia el tamaño de fuente o la typo, habrá que cambiar el 3.3*/ $('.arrow .text').css({'marginLeft':'-'+$('.arrow .text').html().length*3.3+'px'}); $('.arrow').css({top:'-60px',left:left_+'px'}); if(animate) $('.arrow').show().stop().animate({'top':top_},TagSpeed,'easeInOutBack'); else $('.arrow').css({'top':top_+'px'}).fadeIn(500); }); $('.mPointer').bind('mouseleave',function(){ if(animate) $('.arrow').stop().animate({'top':'0px'},100,function(){ $('.arrow').hide() }); else $('.arrow').hide(); }); } /*Inicio gestion geoEtiquetado*/ $(document).ready(function(){ escucharMapa(); }); HTML <div style="float:left;height:500px;"> <div class="map"> <div class="arrow"> <div class="text"></div> <img src="img/flecha.png"/> </div> <!--mapa--> <img src="http://www.freepik.es/foto-gratis/mapa-del-mundo_17-903095345.jpg" id="img1"/> <br/> <br/> <span class="isora mPointer">isora</span> <span class="pepe mPointer">Pepe</span> <span class="australia mPointer">Australia</span> </div> </div> OK so you have vew items and when you hover one, it gets the classname, it checks the cordinades in the object and displays a cursor in those cordinades of the image, right? ok so how can i do the opposite? lets say if user hovers +-30px error margin (top and left) an area in the map the item is highlighted??? i was considering -on map image mouse over - get the offset of the mouse - if is in the margin error area -show else -no show But that does not look really efficient as long as it would have to caculate each pixel movement, no?

    Read the article

  • jquery dynamic select doesn't submit values

    - by n00b0101
    I have a form that includes three select boxes. The first one is categories, and selecting a category from it will populate the variables multi-select box with values specific to the selected category. Selecting variables and then clicking "add selected" will populate the target select box will those variables. The problem is, print_r shows that the values in the target select box aren't passed upon submit, and I don't understand why... Below is the code, and help is really appreciated Here's the html markup: <select multiple="" id="categories" name="categories[]"> <option class="category" value="Income">Income</option> <option class="category" value="Gender">Gender</option> <option class="category" value="Age">Age</option> </select> //note that i'm only showing variables for a presumably select category <select multiple="multiple" id="variables" name="variables[]"> <option value="2">Less Than $15,000</option> <option value="3">$15,000 - $19,999</option> <option value="4">$20,000 - $29,999</option> <option value="5">$30,000 - $39,999</option> <option value="6">$40,000 - $49,999</option> <option value="11">$90,000 - $99,999</option> <option value="12">$100,000 - $124,999</option> <option value="13">$125,000 - $149,999</option> <option value="14">Greater than $149,999</option> </select> <select name="target[]" id="target" multiple="multiple" height="60"> </select> And here's the jquery code: $(function(){ var opts = {}, $cats = $("#categories"), $target = $("#target"), $vars = $("#variables"); $vars.find("option").each(function(){ var $opt = $(this), cat = this.className, value = this.value, label = $opt.text(); if(!opts[cat]) { opts[cat] = []; } opts[cat].push({label: label, value: value}); $opt.remove(); }); function update_variables(){ var cat = $cats.val(), new_opts = []; $vars.empty(); $.each(opts[cat], function(){ if( $target.find('[value=' + this.value + ']').length === 0 ){ new_opts.push(option(this.value, this.label)); } }); $vars.html(new_opts.join('')); } function option(value, label){ return "<option value='" + value + "'>" + label + "</option>"; } $("#add").click(function(e){ e.preventDefault(); $vars.find(':selected').appendTo($target).attr('selected',false); update_variables(); }); $("#remove").click(function(e){ e.preventDefault(); $target.find(':selected').remove(); update_variables(); }); $cats.change(function(){ update_variables(); }).change(); })

    Read the article

  • jquery remove selected element and append to another

    - by KnockKnockWhosThere
    I'm trying to re-append a "removed option" to the appropriate select option menu. I have three select boxes: "Categories", "Variables", and "Target". "Categories" is a chained select, so when the user selects an option from it, the "Variables" select box is populated with options specific to the selected categories option. When the user chooses an option from the "Variables" select box, it's appended to the "Target" select box. I have a "remove selected" feature so that if a user "removes" a selected element from the "Target" select box, it's removed from "Target" and put back into the pool of "Variables" options. The problem I'm having is that it appends the option to the "Variables" items indiscriminately. That is, if the selected category is "Age" the "Variables" options all have a class of "age". But, if the removed option is an "income" item, it will display in the "Age Variables" option list. Here's the HTML markup: <select multiple="" id="categories" name="categories[]"> <option class="category" value="income">income</option> <option class="category" value="gender">gender</option> <option class="category" value="age">age</option> </select> <select multiple="multiple" id="variables" name="variables[]"> <option class="income" value="10">$90,000 - $99,999</option> <option class="income" value="11">$100,000 - $124,999</option> <option class="income" value="12">$125,000 - $149,999</option> <option class="income" value="13">Greater than $149,999</option> <option class="gender" value="14">Male</option> <option class="gender" value="15">Female</option> <option class="gender" value="16">Ungendered</option> <option class="age" value="17">Ages 18-24</option> <option class="age" value="18">Ages 25-34</option> <option class="age" value="19">Ages 35-44</option> </select> <select height="60" multiple="multiple" id="target" name="target[]"> </select> And, here's the js: /* This determines what options are display in the "Variables" select box */ var cat = $('#categories'); var el = $('#variables'); $('#categories option').click(function() { var class = $(this).val(); $('#variables option').each(function() { if($(this).hasClass(class)) { $(this).show(); } else { $(this).hide(); } }); }); /* This adds the option to the target select box if the user clicks "add" */ $('#add').click(function() { return !$('#variables option:selected').appendTo('#target'); }); /* This is the remove function in its current form, but doesn't append correctly */ $('#remove').click(function() { $('#target option:selected').each(function() { var class = $(this).attr('class'); if($('#variables option').hasClass(class)) { $(this).appendTo('#variables'); sortList('variables'); } }); });

    Read the article

  • BB Code Parser (in formatting phase) with jQuery jammed due to messed up loops most likely

    - by Oskar
    Greetings everyone, I'm making a BB Code Parser but I'm stuck on the JavaScript front. I'm using jQuery and the caret library for noting selections in a text field. When someone selects a piece of text a div with formatting options will appear. I have two issues. Issue 1. How can I make this work for multiple textfields? I'm drawing a blank as it currently will detect the textfield correctly until it enters the $("#BBtoolBox a").mousedown(function() { } loop. After entering it will start listing one field after another in a random pattern in my eyes. !!! MAIN Issue 2. I'm guessing this is the main reason for issue 1 as well. When I press a formatting option it will work on the first action but not the ones afterwards. It keeps duplicating the variable parsed. (if I only keep to one field it will never print in the second) Issue 3 If you find anything especially ugly in the code, please tell me how to improve myself. I appriciate all help I can get. Thanks in advance $(document).ready(function() { BBCP(); }); function BBCP(el) { if(!el) { el = "textarea"; } // Stores the cursor position of selection start $(el).mousedown(function(e) { coordX = e.pageX; coordY = e.pageY; // Event of selection finish by using keyboard }).keyup(function() { BBtoolBox(this, coordX, coordY); // Event of selection finish by using mouse }).mouseup(function() { BBtoolBox(this, coordX, coordY); // Event of field unfocus }).blur(function() { $("#BBtoolBox").hide(); }); } function BBtoolBox(el, coordX, coordY) { // Variable containing the selected text by Caret selection = $(el).caret().text; // Ignore the request if no text is selected if(selection.length == 0) { $("#BBtoolBox").hide(); return; } // Print the toolbox if(!document.getElementById("BBtoolBox")) { $(el).before("<div id=\"BBtoolBox\" style=\"left: "+ ( coordX + 5 ) +"px; top: "+ ( coordY - 30 ) +"px;\"></div>"); // List of actions $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_bold.png\" alt=\"B\" title=\"Bold\" /></a>"); $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_italic.png\" alt=\"I\" title=\"Italic\" /></a>"); } else { $("#BBtoolBox").css({'left': (coordX + 3) +'px', 'top': (coordY - 30) +'px'}).show(); } // Parse the text according to the action requsted $("#BBtoolBox a").mousedown(function() { switch($(this).children(":first").attr("alt")) { case "B": // bold parsed = "[b]"+ selection +"[/b]"; break; case "I": // italic parsed = "[i]"+ selection +"[/i]"; break; } // Changes the field value by replacing the selection with the variable parsed $(el).val($(el).caret().replace(parsed)); $("#BBtoolBox").hide(); return false; }); }

    Read the article

  • Creating an element and insertBefore is not working...

    - by sologhost
    Ok, I've been banging my head up against the wall on this and I have no clue why it isn't creating the element. Maybe something very small that I overlooked here. Basically, there is this Javascript code that is in a PHP document being outputted, like somewhere in the middle of when the page gets loaded, NOW, unfortunately it can't go into the header. Though I'm not sure that that is the problem anyways, but perhaps it is... hmmmmm. // Setting the variables needed to be set. echo ' <script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/dpShoutbox.js"></script>'; echo ' <script type="text/javascript"> var refreshRate = ', $params['refresh_rate'], '; createEventListener(window); window.addEventListener("load", loadShouts, false); function loadShouts() { var alldivs = document.getElementsByTagName(\'div\'); var shoutCount = 0; var divName = "undefined"; for (var i = 0; i<alldivs.length; i++) { var is_counted = 0; divName = alldivs[i].getAttribute(\'name\'); if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0) continue; else if(divName == "undefined") continue; else { if (divName.indexOf(\'dp_Reserved_Counted\') == 0) { is_counted = 0; shoutCount++; continue; } else { shoutCount++; is_counted = 1; } } // Empty out the name attr. alldivs[i].name = \'dp_Reserved_Counted\'; var shoutId = \'shoutbox_area\' + shoutCount; // Build the div to be inserted. var shoutHolder = document.createElement(\'div\'); shoutHolder.setAttribute(\'id\', [shoutId]); shoutHolder.setAttribute(\'class\', \'dp_control_flow\'); shoutHolder.style.cssText = \'padding-right: 6px;\'; alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]); if (is_counted == 1) { startShouts(refreshRate, shoutId); break; } } } </script>'; Also, I'm sure the other functions that I'm linking to within these functions work just fine. The problem here is that within this function, the div never gets created at all and I can't understand why? Furthermore Firefox, FireBug is telling me that the variable divName is undefined, even though I have attempted to take care of this within the function, though not sure why. Anyways, I need the created div element to be inserted just before the following HTML: echo ' <div name="dp_Reserved_Shoutbox" style="padding-bottom: 9px;"></div>'; I'm using name here instead of id because I don't want duplicate id values which is why I'm changing the name value and incrementing, since this function may be called more than 1 time. For example if there are 3 shoutboxes on the same page (Don't ask why...lol), I need to skip the other names that I already changed to "dp_Reserved_Counted", which I believe I am doing correctly. In any case, if I could I would place this into the header and have it called just once, but this isn't possible as these are loaded and no way of telling which one's they are, so it's directly hard-coded into the actual output on the page of where the shoutbox is within the HTML. Basically, not sure if that is the problem or not, but there must be some sort of work-around, unless the problem is within my code above... arrg Please help me. Thanks :)

    Read the article

  • Android refresh StateListDrawable problem

    - by Max
    Hi all, I have a strange problem with StateListDrawable or maybe (probably) I'm missing something. I created a test application for it and the same problem occurs. So, this is my StateListDrawable resourse in file test_selection.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <shape android:shape="rectangle" android:background="#ff0000"> <corners android:radius="10dp" /> <gradient android:startColor="#ff5555" android:endColor="#ff5555" android:angle="0" /> </shape> </item> <item android:state_selected="false"> <shape android:shape="rectangle" android:background="#eeeeee"> <corners android:radius="10dp" /> <gradient android:startColor="#eeeeee" android:endColor="#eeeeee" android:angle="0" /> </shape> </item> </selector> It's a very simple selector that draw a red color for selected state and a white rect for the unselected one. My main.xml template is very simple. I simply use a TextView that uses the selection as background. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" android:textSize="30dp" android:id="@+id/test_view_example" android:background="@drawable/test_selection"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/refresh" android:onClick="updateView" android:text="refresh"></Button> </LinearLayout> My Activity code is also very simple. public class TestDrawableStateActivity extends Activity { private final static int[] SELECTED_STATE = { android.R.attr.state_selected }; private final static int[] UNSELECTED_STATE = {}; private TextView textView; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); textView = (TextView) findViewById(R.id.test_view_example); } @Override protected void onResume() { super.onResume(); // Carichiamo la Drawable if(textView.getBackground().setState(SELECTED_STATE)){ textView.invalidate(); } } public void updateView(View view) { if(textView.getBackground().setState(SELECTED_STATE)){ textView.invalidate(); }; } } When Activity starts I try to set the state of my Drawable (the StateListDrawable) with the value SELECTED. It seems all very simple.... but the problem is that the state is not shown. If, later, I click a button and execute the method updateView() the state changes. Where is my problem? Where am I wrong? Thankx a lot Max

    Read the article

  • jQuery , Trigger change event on newly created elements

    - by kwhohasamullet
    Hi Guys, I have a button in a form that when clicked adds another set of form fields, In these form fields there are 2 drop downs where the contents of the 2nd dropdown rely on what is selected in the first dropdown... What i want to do is when the new form field button is clicked for the new items to be added and then the change event to be triggered on the drop down that was created so what only that drop down changes and not all the drop downs with the same name currently in that form. THe first drop down is called product Category The code for the addFormField function is: function addFormField() { var id = document.getElementById("field_id").value; $("#products").append("<table width='600' cellpadding='5' cellspacing='0' class='Add_Products' id='row" + id + "'><td width='250' class='left'><label>Select Product Category</label></td><td class='right' ><label><select name='" + id + "' id='ProductCategory'><?php foreach($categories as $key=>$category){ echo "<option value=".$key.">".$category."</option>"; } ?></select></label></td></tr><tr><td width='250' class='left'><label>Select Product Template</label></td><td class='right' ><label><select name='data[QuoteItem][" + id + "][product_id]' id='QuoteItem" + id + "product_id' class='Product' title='" + id + "'></select></label></td></tr><tr ><td class='left'>Name</td><td class='right'><label><input name='data[QuoteItem][" + id + "][name]' type='text' id='QuoteItem" + id + "name' size='50' /></label></td></tr><tr ><td class='left'>Price (ex GST)</td><td class='right'><input type='text' name='data[QuoteItem][" + id + "][price]' id='QuoteItem" + id + "price' onchange='totalProductPrice();' class='quote-item-price' value='0' /></td></tr><tr><td class='left'>Description</td><td class='right'><label><textarea name='data[QuoteItem][" + id + "][description]' cols='38' rows='5' id='QuoteItem" + id + "description'></textarea></label></td></tr><tr><td><a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a></td></tr></table>"); $('#row' + id).highlightFade({ speed:1000 }); id = (id - 1) + 2; document.getElementById("field_id").value = id; } The code that detects change in ProductCategory dropdown and triggers the AJAX is below: $("select#ProductCategory").live('change', function(){ var url = base + "/quotes/productList/" + $(this).val() + ""; var id = $(this).attr('name'); $.getJSON(url,{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; options += '<option value="0">None</option>'; $.each(j, function(key, value){ options += '<option value="' + key + '">' + value + '</option>'; }) $("select#QuoteItem" + id + "product_id").html(options); }) }).trigger('change'); I have been trying all afternoon to work this out and the closest one i got to work applied the returned ajax values to all items. Currently using the live function people can add new fields and are able to use the drops down independant of each other dropdown but its only when the field is first added that i have trouble getting is populated Thanks in advance for any help

    Read the article

  • How to properly use the .each() command in jQuery

    - by sadmicrowave
    I have a script that checks the class (integer) of a , runs a switch statement to change that integer value to text and appends the text to another in the same listitem tag. I use the .each() function because each listitem starts with class=_[user ID] -- each user can have up to 5 entries.. Enough explaining -- heres the code: <HTML> <li class='_44074'><div class='_12' style='width:380px;'><div style='width:60px; float:left;'>1st</div><div class='verify-type' style='float:left; width:160px;'></div><div style='float:left; width:120px;'>04/26/10 07:29 AM</div></div></li> <li class='_44074'><div class='_6' style='width:380px;'><div style='width:60px; float:left;'>2nd</div><div class='verify-type' style='float:left; width:160px;'></div><div style='float:left; width:120px;'>04/23/10 03:29 PM</div></div></li> <li class='_44074'><div class='_12' style='width:380px;'><div style='width:60px; float:left;'>3rd</div><div class='verify-type' style='float:left; width:160px;'></div><div style='float:left; width:120px;'>04/23/10 03:18 PM</div></div></li> <li class='_44074'><div class='_2' style='width:380px;'><div style='width:60px; float:left;'>4th</div><div class='verify-type' style='float:left; width:160px;'></div><div style='float:left; width:120px;'>04/23/10 02:28 PM</div></div></li> </HTML> when I use the .each() function to scan through each of the listitems begining with the entered user id it only finds the first value (in this case _12) and applies that to all the entries; instead of finding _12, _6, _12, _2 it finds _12, _12, _12, _12...here is the java: $("div#history-menu div#history-text li." + valueid).each(function(){ valueid = $("div#center-box input").val(); checkedvalue=""; checkedvalue = $("div#history-menu div#history-text li." + valueid + " div").attr('class'); switch(checkedvalue){ case '_2':lcCheckedMessage = "Shoes"; break; case '_4':lcCheckedMessage = "Shoe Straps"; break; case '_6':lcCheckedMessage = "Shoes & Shoe Straps"; break; case '_8':lcCheckedMessage = "Wrist Straps"; break; case '_10':lcCheckedMessage = "Shoes & Wrist Strap"; break; case '_12':lcCheckedMessage = "Shoe Straps & Wrist Strap"; break; }; $("div#history-menu div#history-text li." + valueid + " ." + checkedvalue + " .verify-type").text(lcCheckedMessage); });

    Read the article

  • AJAX Generated Select Won't Redirect

    - by James
    So, basically I have this select / drop down menu that I use AJAX to retrieve and create, though when an option is selected (so onChange) I want it to redirect! Though, this still isn't working, I don't get any errors thrown when trying, and tried to do alert() debug methods yet the alerts don't get called. jquery $("#schoolMenu").change(function() { option = $("#schoolMenu option:selected").text(); alert(option); if(option != "- Please Select -") { window.location = "http://www.itmustbecollege.com/pics/pics-from-"+$("#schoolMenu option:selected").val(); } }); This is what is used to call the AJAX // // Populate Schools // $("#state").change(function() { option = $("#state option:selected").text(); if($(this).attr("class") == "menu") { if(option != "- Please Select -") { $.ajax({ type: "GET", url: "/includes/functions.php", data: "f=school&p="+option+"&m=yes", success: function(msg) { $("#fSchool").html("<p style=\"margin-left: 20px;\">Select School:</p>"+ msg); $("#fSchool").show(); $("#school").focus(); } }); } else { $("#fSchool").html(""); $("#fSchool").hide(); } } else { if(option != "- Please Select -") { $.ajax({ type: "GET", url: "/includes/functions.php", data: "f=school&p="+option, success: function(msg) { $("#fSchool").html(msg); $("#fSchool").show(); $("#school").focus(); } }); } else { $("#fSchool").html(""); $("#fSchool").hide(); } } }); It loads perfectly, if you look at http://www.itmustbecollege.com/quotes/ on that bar where you can do "sort by" of Popular | Newest | Category | School if you hover over school a dropdown comes up, select any country and another one appears, though when that is changed nothing happens. here is the PHP for that second drop down // Get College List function getCollege($state, $m = "no", $l = "no") { // Displays Schools if($m == "yes") { $options = '<select id="schoolMenu" name="school"><option value="select" selected="selected">- Please Select -</option>'; } else if($l == "yes" || $l == "yes2") { $options = ''; } else { $options = '<select name="school"><option value="select" selected="selected">- Please Select -</option>'; } $listArray = split("\|\\\\", $list); for($i=0; $i < count($listArray); $i++) { if($m == "yes") { $options .= '<option value="'. trim(titleReplace($listArray[$i])) .'">'. trim($listArray[$i]) .'</option>'; } else if($l == "yes") { $options .= '<li><a href="/quotes/quotes-from-'. titleReplace($listArray[$i]) .'" title="'. trim($listArray[$i]) .' Quotes">'. trim($listArray[$i]) .'</a></li>'; } else if($l == "yes2") { $options .= '<li><a href="/pics/pics-from-'. titleReplace($listArray[$i]) .'" title="'. trim($listArray[$i]) .' Pictures">'. trim($listArray[$i]) .'</a></li>'; } else { $options .= '<option value="'. trim($listArray[$i]) .'">'. trim($listArray[$i]) .'</option>'; } } echo $options .='</select>'; return false; } any help would be great! EDIT: Also, the way I have those drop downs coming for the menus is a bit weird and when you hover over any other "sort by" link they disappear, this is a problem with the "sort by school" because the first select box shows the list up, and if you go and select a school then somehow float over another link it disappears, any help on how to delay that or fix that minor problem?

    Read the article

  • input field placeholder in jQuery

    - by Hristo
    I'm trying to create a Login page, not worrying about actually logging in yet, but I'm trying to achieve the effect where there is some faded text inside the input field and when you click on it, the text disappears or if you click away the text reappears. I have this working for my "Username" input field, but the "Password" field is giving me problems because I can't just do $("#password").attr("type","password"). Here's my code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- Links --> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- Scripts --> <script type="text/javascript" src="jQuery.js"></script> <script> // document script $(document).ready(function(){ // login box event handler $('#login').click(function(){ $('.loginBox').animate({ height: '150px' }, '1000' ); $('#username').show(); // add pw placeholder field $('#password').after('<input type="text" id="placeHolder" value="Password" class="placeHolder" />'); $('#password').hide(); }); // username field focus and blur event handlers $('#username').focus(function() { if($(this).hasClass('placeHolder')){ $(this).val(''); $(this).removeClass('placeHolder'); } }); $('#username').blur(function() { if($(this).val() == '') { $(this).val('Username'); $(this).addClass('placeHolder'); } }); // password field focus and blur event handlers $('#placeHolder').focus(function() { $('#placeHolder').hide(); $('#password').show(); $('#password').focus(); }); $('#password').blur(function() { if($('#password').val() == '') { $('#placeHolder').show(); $('#password').hide(); } }); }); </script> </head> <body> <div id="loginBox" class="loginBox"> <a id="login">Proceed to Login</a><br /> <div id="loginForm"> <form> <input type="text" id="username" class="placeHolder" value="Username" /> <input type="password" id="password" class="placeHolder" value="" /> </form> </div> </div> </body> </html> Right now, I can click on the password input box and type in it, but the text is not disappearing and the "type" doesn't get set to "password"... the new input field I create isn't being hidden, it just stays visible, and I'm not sure where the problem is. Any ideas? Thanks, Hristo

    Read the article

  • Is this a SEO SAFE anchor link

    - by Mayhem
    so... Is this a safe way to use internal links on your site.. By doing this i have the index page generating the usual php content section and handing it to the div element. THE MAIN QUESTION: Will google still index the pages using this method? Common sense tells me it does.. But just double checking and leaving this here as a base example as well if it is. As in. EXAMPLE ONLY PEOPLE The Server Side if (isset($_REQUEST['page'])) {$pageID=$_REQUEST['page'];} else {$pageID="home";} if (isset($_REQUEST['pageMode']) && $_REQUEST['pageMode']=="js") { require "content/".$pageID.".php"; exit; } // ELSE - REST OF WEBSITE WILL BE GENERATED USING THE page VARIABLE The Links <a class='btnMenu' href='?page=home'>Home Page</a> <a class='btnMenu' href='?page=about'>About</a> <a class='btnMenu' href='?page=Services'>Services</a> <a class='btnMenu' href='?page=contact'>Contact</a> The Javascript $(function() { $(".btnMenu").click(function(){return doNav(this);}); }); function doNav(objCaller) { var sPage = $(objCaller).attr("href").substring(6,255); $.get("index.php", { page: sPage, pageMode: 'js'}, function(data) { ("#siteContent").html(data).scrollTop(0); }); return false; } Forgive me if there are any errors, as just copied and pasted from my script then removed a bunch of junk to simplify it as still prototyping/white boarding the project its in. So yes it does look a little nasty at the moment. REASONS WHY: The main reason is bandwidth and speed, This will allow other scripts to run and control the site/application a little better and yes it will need to be locked down with some coding. -- FURTHER EXAMPLE-- INSERT PHP AT TOP <?php // PHP CODE HERE ?> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body> <div class='siteBody'> <div class='siteHeader'> <?php foreach ($pageList as $key => $value) { if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";} echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>"; } ?> </div><div id="siteContent" style='margin-top:10px;'> <?php require "content/".$pageID.".php"; ?> </div><div class='siteFooter'> </div> </div> </body> </html>

    Read the article

  • JQuery Slide Onclick

    - by everreadyeddy
    I am using the code in example http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/ I am trying to slide the div tags on a button click on the list so the current tab-content will slide in and the tab just clicked will slide out. I currently have the working example where I can switch between divs fine, but I need to slide in and out between divs. Is there any script I can do this with the current code. using .slide or .effect instead of .show() looks to display two divs at the same time. I'm not sure what I am doing wrong. <div id="v-nav"> <ul> <li tab="tab1" class="first current">Main Screen</li> <li tab="tab2">Div 1</li> <li tab="tab3">Div 2</li> <li tab="tab4">Div 3</li> <li tab="tab5">Div 4</li> <li tab="tab6">Div 5</li> <li tab="tab7">Div 6</li> <li tab="tab8" class="last">Div 7</li> </ul> <div class="tab-content"> <h4>Main Screen</h4> </div> <div class="tab-content"> <h4>Div 1</h4> </div> <div class="tab-content"> <h4>Div 2</h4> </div> <div class="tab-content"> <h4>Div 3</h4> </div> <div class="tab-content"> <h4>Div 4</h4> </div> <div class="tab-content"> <h4>Div 5</h4> </div> <div class="tab-content"> <h4>Div 6</h4> </div> <div class="tab-content"> <h4>Div 7</h4> </div> My Script looks like $(function () { var items = $('#v-nav>ul>li').each(function () { $(this).click(function () { //remove previous class and add it to clicked tab items.removeClass('current'); $(this).addClass('current'); //hide all content divs and show current one //$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show(); //$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100); $('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle(); window.location.hash = $(this).attr('tab'); }); }); if (location.hash) { showTab(location.hash); } else { showTab("tab1"); } function showTab(tab) { $("#v-nav ul li:[tab*=" + tab + "]").click(); } // Bind the event hashchange, using jquery-hashchange-plugin $(window).hashchange(function () { showTab(location.hash.replace("#", "")); }) // Trigger the event hashchange on page load, using jquery-hashchange-plugin $(window).hashchange(); });

    Read the article

  • No Method Error in Ruby

    - by JayG
    Hi, I currently have a Rails Apps that lets users drag and drop certain elements of the webpage and updates the application based on the users choice. This is done with the help of the Rails helpers and AJAX. However I keep running into a "NoMethodError" in Ruby. NoMethodError in ProjectsController#member_change undefined method `symbolize_keys' for nil:NilClass Here is the method that is being called. My trace says that error is occurring in this line: before = u.functions_for(r.authorizable_id) u.roles << r unless u.roles.include? r u.save flag_changed = true after = u.functions_for(r.authorizable_id) And here is the function being called def member_change flag_changed = false params['u'] =~ /role_(\d+)_user_(\d+)/ drag_role_id = $1 user_id = $2 params['r'] =~ /role_(\d+)/ drop_role_id = $1 if u=User.find(user_id) if r=Role.find(drop_role_id) if drag_role_id.to_i !=0 and old_r=Role.find(drag_role_id) if drag_role_id == drop_role_id #fom A to A => nothing happen flash.now[:warning] = _('No Operation...') elsif r.authorizable_id == old_r.authorizable_id #the same project? old_r.users.delete(u) unless old_r.valid? flash.now[:warning] = _('Group "Admin" CAN NOT be EMPTY.') old_r.users << u #TODO: better recovery member_edit #if flag_changed render :action => :member_edit, :layout => 'module_with_flash' return end old_r.save r.users << u unless r.users.include? u r.save flag_changed = true before = u.functions_for(r.authorizable_id) after = u.functions_for(r.authorizable_id) added = after - before removed = before - after added.each do |f| ApplicationController::send_msg(:function,:create, {:function_name => f.name, :user_id => u.id, :project_id => r.authorizable_id }) end removed.each do |f| ApplicationController::send_msg(:function,:delete, {:function_name => f.name, :user_id => u.id, :project_id => r.authorizable_id }) end flash.now[:notice] = _( 'Move User to Group' ) + " #{ r.name }" else flash.now[:warning] = _('You can\'t move User between Groups that belong to different Projects.') end else before = u.functions_for(r.authorizable_id) u.roles << r unless u.roles.include? r u.save flag_changed = true after = u.functions_for(r.authorizable_id) added = after - before added.each do |f| ApplicationController::send_msg(:function,:create, {:function_name => f.name, :user_id => u.id, :project_id => r.authorizable_id }) end flash.now[:notice] = _( 'Add User into Group' ) + " #{ r.name }" end else flash.now[:warn] = _( 'Group doesn\'t exist!' ) + ": #{ r.name }" end else flash.now[:warning] = _( 'User doesn\'t exist!' ) + ": #{ u.login }" end member_edit #if flag_changed render :action => :member_edit, :layout => 'module_with_flash' end and the JavaScript used to call the function jQuery('#RemoveThisMember').droppable({accept:'.RolesUsersSelection', drop:function(ev,ui){ if (confirm("This will remove User from this Group, are you sure?")) {jQuery.ajax({data:'u=' + encodeURIComponent(jQuery(ui.draggable).attr('id')), success:function(request){jQuery('#module_content').html(request);}, type:'post', url:'/of/projects/11/member_delete'});} }, hoverClass:'ProjectRoleDropDelete_active'}) Any ideas? Thanks,

    Read the article

  • jQuery code not working in Google Chrome...

    - by Jonathan
    Hi, I have writen a simple jQuery code to control ajax tabs navigation.. Its working in good on FireFox but in Chrome it working in one page but not in the home page I don't know why... Its really simple code just a lot of animations and callbacks and stuff like that.. here's the code: jQuery.fn.tabs = function({movieID, movieTitle}) { var tabsWrap = '#movie_details_wrap'; var tabsContent = '#tab_content'; var firstTab = '#tab_detalles'; var postPHP = 'index.php?controlador=pelicula'; //When page loads... first tab actions $('ul.tabs_nav a:first').addClass('active'); //Activate first tab nav $.get(postPHP, {"activeTab": firstTab, "movieID": movieID}, function(response){ $(tabsContent).html(response); // insert response into the faded out div $(tabsWrap).animate({ // animate the wrap div using the new container div height height: $(tabsContent).height() + "px" }, function() { $(tabsContent).fadeIn(); // fade in the div with all the info }); }); //On Click Event $('ul.tabs_nav li').click(function() { $('ul.tabs_nav a').removeClass('active'); //Remove any 'active' class $(this).find('a').addClass('active'); //Add 'active' class to selected tab var activeTab = $(this).find('a').attr('href'); //Find the href attribute value to identify the active tab + content var orgHeight = $(tabsContent).height() + 'px'; // get original height $(tabsWrap).css('height', orgHeight); // set height with css to freeze the wrap div when we hide the inner div $(tabsContent).fadeOut(200, function() { // fade out the inner div // send data by ajax (post) $.get(postPHP, {"activeTab": activeTab, "movieID": movieID , "movieTitle": movieTitle}, function(response){ $(tabsContent).html(response); // insert response into the faded out div $(tabsWrap).animate({ // animate the wrap div using the new container div height height: $(tabsContent).height() + "px" }, function() { $(tabsContent).fadeIn(); // fade in the div with all the info }); }); }); return false; }); }; Here's the HTML: <script type="text/javascript"> $(document).ready(function(){ $('.tabs_nav').tabs({movieID:'135353', movieTitle: 'Some Title'}); }); </script> <!--Navigation--> <ul id="details_nav" class="tabs_nav"> <li><a href="#tab_detalles">Detalles</a></li> <li><a href="#tab_criticas">Criticas</a></li> <li><a href="#tab_posters">Posters</a></li> <li><a href="#tab_trailers">Trailers</a></li> </ul> <div class="border_wrap"> <div id="movie_details_wrap"> <div id="tab_content"> <!--Tabs content here--> </div> </div> </div>

    Read the article

  • Get the screen height in Android

    - by Dan Bray
    How can I get the available height of the screen in Android? I need to the height minus the status bar / menu bar or any other decorations that might be on screen and I need it to work for all devices. Also, I need to know this in the onCreate function. I know this question has been asked before but I have already tried their solutions and none of them work. Here are some of the things I have tried: I have tested this code on API 7 - 17. Unfortunately, on API 13 there is extra space at bottom both horizontally and vertically and on API 10, 8, and 7 there is not enough space at the bottom both horizontally and vertically. (I have not tested on obsolete API's): Display display = getWindowManager().getDefaultDisplay(); DisplayMetrics metrics = new DisplayMetrics(); display.getMetrics(metrics); screenWidth = metrics.widthPixels; screenHeight = metrics.heightPixels; TypedValue tv = new TypedValue(); if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) screenHeight -= TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics()); } int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) screenHeight -= getResources().getDimensionPixelSize(resourceId); This does not take into account the status bar / menu bar: Display display = getWindowManager().getDefaultDisplay(); screenWidth = display.getWidth(); screenHeight = display.getHeight(); Neither does this: Point size = new Point(); getWindowManager().getDefaultDisplay().getSize(size); screenWidth = size.x; screenHeight = size.y; Nor this: Point size = new Point(); getWindowManager().getDefaultDisplay().getRealSize(size); screenWidth = size.x; screenHeight = size.y; This does not work: Display display = getWindowManager().getDefaultDisplay(); DisplayMetrics metrics = new DisplayMetrics(); display.getMetrics(metrics); // since SDK_INT = 1; screenWidth = metrics.widthPixels; screenHeight = metrics.heightPixels; try { // used when 17 > SDK_INT >= 14; includes window decorations (statusbar bar/menu bar) screenWidth = (Integer) Display.class.getMethod("getRawWidth").invoke(display); screenHeight = (Integer) Display.class.getMethod("getRawHeight").invoke(display); } catch (Exception ignored) { // Do nothing } try { // used when SDK_INT >= 17; includes window decorations (statusbar bar/menu bar) Point realSize = new Point(); Display.class.getMethod("getRealSize", Point.class).invoke(display, realSize); screenWidth = realSize.x; screenHeight = realSize.y; } catch (Exception ignored) { // Do nothing } I then used the following code to subtract the height of the status bar and menu bar from the screen height: int result = 0; int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) result = getResources().getDimensionPixelSize(resourceId); screenHeight -= result; result = 0; if (screenHeight >= screenWidth) resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android"); else resourceId = getResources().getIdentifier("navigation_bar_height_landscape", "dimen", "android"); if (resourceId > 0) result = getResources().getDimensionPixelSize(resourceId); screenHeight -= result; On API 17 it correctly calculates the height of the status bar and menu bar in portrait but not in landscape. On API 10, it returns 0. I need it to work ideally on all devices or minimum API 7. Any help would be greatly appreciated.

    Read the article

  • Getting size of a webpage before parsing it

    - by user2869844
    I am trying to parse a webpage using jsoup and all is working good using this code: class DownloadSearchResultsTask extends AsyncTask<String, Integer, ArrayList> { private String link = "link"; private String title = "title"; private String vote = "vote"; private String age = "age"; private String size = "size"; private String seeders = "seeders"; private String leechers = "leachers"; @Override protected void onPreExecute() { // TODO Auto-generated method stub super.onPreExecute(); } @Override protected ArrayList doInBackground(String... params) { // TODO Auto-generated method stub ArrayList <HashMap<String, String>> searchResult = new ArrayList<HashMap<String, String>>(); HashMap<String, String> map; String link, title, vote, age, size, seeders, leechers; try { HttpURLConnection httpURLConnection=(HttpURLConnection) new URL("http://www.facebook.com").openConnection(); Log.d("VIVZ", httpURLConnection.getContentLength()+""); } catch (MalformedURLException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } catch (IOException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } Document mDocument; try { long l1=System.nanoTime(); Log.e("VIVZ",l1+""); mDocument = Jsoup .connect(params[0]) .userAgent( "Mozilla/5.0 (Windows; U; WindowsNT 5.1; en-US; rv1.8.1.6) Gecko/20070725 Firefox/2.0.0.6") .referrer("http://www.google.com").get(); long l2=System.nanoTime(); Log.e("VIVZ",(l2-l1)+""); Elements mResults = mDocument.select("div.results dl"); for (Element result : mResults) { map = new HashMap<String, String>(); Elements elements = result.select("dt a"); for (Element linkAndTitle : elements) { link = linkAndTitle.attr("abs:href"); title = linkAndTitle.text(); map.put(this.link, link); map.put(this.title, title); } elements = result.select("dd span.v"); for (Element v : elements) { vote = v.text(); map.put(this.vote, vote); } elements = result.select("dd span.a"); for (Element a : elements) { age = a.text(); map.put(this.age, age); } elements = result.select("dd span.s"); for (Element s : elements) { size = s.text(); map.put(this.size, size); } elements = result.select("dd span.u"); for (Element u : elements) { seeders = u.text(); map.put(this.seeders, seeders); } elements = result.select("dd span.d"); for (Element d : elements) { leechers = d.text(); map.put(this.leechers, leechers); } searchResult.add(map); } Log.e("VIVZ", searchResult.toString()); return searchResult; } catch (IOException e) { // TODO Auto-generated catch block Log.e("VIVZ",e+""); } return null; } @Override protected void onPostExecute(ArrayList result) { // TODO Auto-generated method stub super.onPostExecute(result); } } The problem is i want to get the size of page before parsing it and show a Determinate progress bar please help me ..... thanx in advance

    Read the article

  • posting array of text fields using jquery and ajax

    - by tabia
    i dont want to use serialize() function please help me with this. I am a beginner html <input type='button' value='Add Tier Flavor' id='Add'> <input type='button' value='Remove Tier Flavor' id='Remove'> <div id='batch'> <div id="BatchDiv1"> <h4>Batch #1 :</h4> <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br> <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br> <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br> </div> </div> <br> </div> this is a dynamically added fields using javascript the code is: javascript <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#Add").click(function () { if(counter>5){ alert("Only 5 Tiers allow"); return false; } var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter); newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' + '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+ '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+ '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' ); newBatchBoxDiv.appendTo("#batch"); counter++; }); $("#Remove").click(function () { if(counter==1){ alert("No more tier to remove"); return false; } counter--; $("#BatchDiv" + counter).remove(); }); }); </script> i am trying to post the values in an array to post it onto next .php page i am using this var user_cupfl = $('input[name^="fl"]').serialize(); var user_cupfi = $('input[name^="fi"]').serialize(); var user_cupfr = $('input[name^="fr"]').serialize(); serialize is not passing the values. :( on second page i am trying to mail it using $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>"; $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>"; $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>"; i m posting array like this $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING); $user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING); $user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING); your replies will be highly appreciated

    Read the article

  • jQuery .find() doesn't return data in IE but does in Firefox and Chrome

    - by Steve Hiner
    I helped a friend out by doing a little web work for him. Part of what he needed was an easy way to change a couple pieces of text on his site. Rather than having him edit the HTML I decided to provide an XML file with the messages in it and I used jQuery to pull them out of the file and insert them into the page. It works great... In Firefox and Chrome, not so great in IE7. I was hoping one of you could tell me why. I did a fair but of googling but couldn't find what I'm looking for. Here's the XML: <?xml version="1.0" encoding="utf-8" ?> <messages> <message type="HeaderMessage"> This message is put up in the header area. </message> <message type="FooterMessage"> This message is put in the lower left cell. </message> </messages> And here's my jQuery call: <script type="text/javascript"> $(document).ready(function() { $.get('messages.xml', function(d) { //I have confirmed that it gets to here in IE //and it has the xml loaded. //alert(d); gives me a message box with the xml text in it //alert($(d).find('message')); gives me "[object Object]" //alert($(d).find('message')[0]); gives me "undefined" //alert($(d).find('message').Length); gives me "undefined" $(d).find('message').each(function() { //But it never gets to here in IE var $msg = $(this); var type = $msg.attr("type"); var message = $msg.text(); switch (type) { case "HeaderMessage": $("#HeaderMessageDiv").html(message); break; case "FooterMessage": $("#footermessagecell").html(message); break; default: } }); }); }); </script> Is there something I need to do differently in IE? Based on the message box with [object Object] I'm assumed that .find was working in IE but since I can't index into the array with [0] or check it's Length I'm guessing that means .find isn't returning any results. Any reason why that would work perfectly in Firefox and Chrome but fail in IE? I'm a total newbie with jQuery so I hope I haven't just done something stupid. That code above was scraped out of a forum and modified to suit my needs. Since jQuery is cross-platform I figured I wouldn't have to deal with this mess. Edit: I've found that if I load the page in Visual Studio 2008 and run it then it will work in IE. So it turns out it always works when run through the development web server. Now I'm thinking IE just doesn't like doing .find in XML loaded off of my local drive so maybe when this is on an actual web server it will work OK. I have confirmed that it works fine when browsed from a web server. Must be a peculiarity with IE. I'm guessing it's because the web server sets the mime type for the xml data file transfer and without that IE doesn't parse the xml correctly.

    Read the article

< Previous Page | 78 79 80 81 82 83 84 85  | Next Page >