Search Results

Search found 7681 results on 308 pages for 'js lim'.

Page 291/308 | < Previous Page | 287 288 289 290 291 292 293 294 295 296 297 298  | Next Page >

  • Can't parse XML from AJAX response.

    - by Pavel
    Hi everyone. I'm having some problems with parsing the xml response from my ajax script. The XML looks like this: <IMAGE> <a href="address"> <img width="300" height="300" src="image.png class="image" alt="" title="LINKING"/> </a> </IMAGE> <LINK> www.address.com </LINK> <TITLE> This <i>is title</i> </TITLE> <EXCERPT> <p> And some excerpt </p> </EXCERPT> The code for js looks like this. function loadTab(id) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; var title=""; var image=""; x=xmlDoc.getElementsByTagName("TITLE"); for (i=0;i<1;i++) { title=title + x[i].childNodes[0].nodeValue; } document.getElementById("ntt").innerHTML=title; x1=xmlDoc.getElementsByTagName("IMAGE"); for (j=0;j<1;j++) { image=image + x1[j].childNodes[0].nodeValue; } document.getElementById("nttI").innerHTML=image; } } var url = 'http://www.factmag.com/staging/page/?id='+id; xmlhttp.open("GET",url,true); xmlhttp.send(); } When I'm parsing it it pulls out the title but not the IMAGE tag contents. What I'm doing wrong? Can someone please tell me? Thanks in advance!

    Read the article

  • iPad web app: Prevent input focus AFTER ajax call

    - by Mike Barwick
    So I've read around and can't for the life of me figure out of to solve my issue effectively. In short, I have a web app built for the iPad - which works as it should. However, I have an Ajax form which also submits as it should. But, after the callback and I clear/reset my form, the "iPad" automatically focuses on an input and opens the keyboard again. This is far from ideal. I managed to hack my way around it, but it's still not perfect. The code below is run on my ajax callback, which works - except there's still a flash of the keyboard quickly opening and closing. Note, my code won't work unless I use setTimeout. Also, from my understanding, document.activeElement.blur(); only works when there's a click event, so I triggered one via js. IN OTHER WORDS, HOW DO I PREVENT THE KEYBOARD FROM REOPENING AFTER AJAX CALL ON WEB APP? PS: Ajax call works fine and doesn't open the keyboard in Safari on the iPad, just web app mode. Here's my code: hideKeyboard: function () { // iOS web app only, iPad IS_IPAD = navigator.userAgent.match(/iPad/i) != null; if (IS_IPAD) { $(window).one('click', function () { document.activeElement.blur(); }); setTimeout(function () { $(window).trigger('click'); }, 500); } } Maybe it's related to how I'm clearing my forms, so here's that code. Note, all inputs have tabindex="-1" as well. clearForm: function () { // text, textarea, etc $('#campaign-form-wrap > form')[0].reset(); // checkboxes $('input[type="checkbox"]').removeAttr('checked'); $('#campaign-form-wrap > form span.custom.checkbox').removeClass('checked'); // radio inputs $('input[type="radio"]').removeAttr('checked'); $('#campaign-form-wrap > form span.custom.radio').removeClass('checked'); // selects $('form.custom .user-generated-field select').each(function () { var selection = $(this).find('option:first').text(), labelFor = $(this).attr('name'), label = $('[for="' + labelFor + '"]'); label.find('.selection-choice').html(selection); }); optin.hideKeyboard(); }

    Read the article

  • Need simple Twitter API v1.1 example to show timeline using jQuery or C# ASP.NET

    - by Ken Palmer
    With Twitter turning off the API 1.0 faucet on 6/11/2013, we have several sites that now fail to display timelines. I've been looking for an "If you did that, now do this" example. Here was Twitter's announcement. https://dev.twitter.com/blog/api-v1-is-retired Here is what we were originally doing to show the Twitter timeline via API 1.0. <div id="twitter"> <ul id="twitter_update_list"></ul> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script> <div style="float:left;"><a href="https://twitter.com/companytwitterhandle" target="_blank">@companytwitterhandle</a> | </div> <div class="twitterimg">&nbsp;</div> </div> Initially I tried changing the version in the JavaScript reference URL like so, which did not work. <script type="text/javascript" src="http://api.twitter.com/1.1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script> Then I looked at the Twitter API documentation (https://dev.twitter.com/docs/api/1.1/overview) which lacks a clear transition example. I don't have 4 or 5 hours to delve into that, or into this disheveled FAQ (https://dev.twitter.com/docs/faq#17750). Then I found this API documentation regarding the user timeline. So I changed the URL again as shown below. https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline <script type="text/javascript" src="https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=companytwitterhandle&amp;count=1"></script> That did not work. Using jQuery or C# ASP.NET MVC, how can I transition that interface from Twitter API 1.0 to Twitter API 1.1? My first preference would be for a browser client side implementation if that is possible. Please include a code example. Thanks.

    Read the article

  • JQuery Ajax Updating MySQL Database, But Not Running Success Function

    - by myrmidon16
    I am currently using the JQuery ajax function to call an exterior PHP file, in which I select and add data in a database. Once this is done, I run a success function in JavaScript. What's weird is that the database is updating successfully when ajax is called, however the success function is not running. Here is my code: <!DOCTYPE html> <head> <script type="text/javascript" src="jquery-1.6.4.js"></script> </head> <body> <div onclick="addtask();" style="width:400px; height:200px; background:#000000;"></div> <script> function addtask() { var tid = (Math.floor(Math.random() * 3)) + 1; var tsk = (Math.floor(Math.random() * 10)) + 1; if(tsk !== 1) { $.ajax({ type: "POST", url: "taskcheck.php", dataType: "json", data: {taskid:tid}, success: function(task) {alert(task.name);} }); } } </script> </body> </html> And the PHP file: session_start(); $connect = mysql_connect('x', 'x', 'x') or die('Not Connecting'); mysql_select_db('x') or die ('No Database Selected'); $task = $_REQUEST['taskid']; $uid = $_SESSION['user_id']; $q = "SELECT task_id, taskname FROM tasks WHERE task_id=" .$task. " LIMIT 1"; $gettask = mysql_fetch_assoc(mysql_query($q)); $q = "INSERT INTO user_tasks (ut_id, user_id, task_id, taskstatus, taskactive) VALUES (null, " .$uid. ", '{$gettask['task_id']}', 0, 1)"; $puttask = mysql_fetch_assoc(mysql_query($q)); $json = array( "name" => $gettask['taskname'] ); $output = json_encode($json); echo $output; Let me know if you have any questions or comments, thanks.

    Read the article

  • Google Map lng + lat to hidden field not working

    - by user547794
    Hello, I am trying to get Marker data into hidden fields on my form. I'm not sure why this isn't working, it must be something in my js syntax: var initialLocation; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var browserSupportFlag = new Boolean(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); myListener = google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng), google.maps.event.removeListener(myListener); }); // Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); }, function() { handleNoGeoLocation(browserSupportFlag); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { alert("Geolocation service failed."); initialLocation = newyork; } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia."); initialLocation = siberia; } } function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map, draggable: true }); map.setCenter(location); } } var lat = latlng.lat(); var lng = latlng.lng(); document.getElementById("t1").value=lat; document.getElementById("t2").value=lng; <input type="hidden" name="lat" id="t1"> <input type="hidden" name="long" id="t2">

    Read the article

  • Finding open contiguous blocks of time for every day of a month, fast

    - by Chris
    I am working on a booking availability system for a group of several venues, and am having a hard time generating the availability of time blocks for days in a given month. This is happening server-side in PHP, but the concept itself is language agnostic -- I could be doing this in JS or anything else. Given a venue_id, month, and year (6/2012 for example), I have a list of all events occurring in that range at that venue, represented as unix timestamps start and end. This data comes from the database. I need to establish what, if any, contiguous block of time of a minimum length (different per venue) exist on each day. For example, on 6/1 I have an event between 2:00pm and 7:00pm. The minimum time is 5 hours, so there's a block open there from 9am - 2pm and another between 7pm and 12pm. This would continue for the 2nd, 3rd, etc... every day of June. Some (most) of the days have nothing happening at all, some have 1 - 3 events. The solution I came up with works, but it also takes waaaay too long to generate the data. Basically, I loop every day of the month and create an array of timestamps for each 15 minutes of that day. Then, I loop the time spans of events from that day by 15 minutes, marking any "taken" timeslot as false. Remaining, I have an array that contains timestamp of free time vs. taken time: //one day's array after processing through loops (not real timestamps) array( 12345678=>12345678, // <--- avail 12345878=>12345878, 12346078=>12346078, 12346278=>false, // <--- not avail 12346478=>false, 12346678=>false, 12346878=>false, 12347078=>12347078, // <--- avail 12347278=>12347278 ) Now I would need to loop THIS array to find continuous time blocks, then check to see if they are long enough (each venue has a minimum), and if so then establish the descriptive text for their start and end (i.e. 9am - 2pm). WHEW! By the time all this looping is done, the user has grown bored and wandered off to Youtube to watch videos of puppies; it takes ages to so examine 30 or so days. Is there a faster way to solve this issue? To summarize the problem, given time ranges t1 and t2 on day d, how can I determine the remaining time left in d that is longer than the minimum time block m. This data is assembled on demand via AJAX as the user moves between calendar months. Results are cached per-page-load, so if the user goes to July a second time, the data that was generated the first time would be reused. Any other details that would help, let me know. Edit Per request, the database structure (or the part that is relevant here) *events* id (bigint) title (varchar) *event_times* id (bigint) event_id (bigint) venue_id (bigint) start (bigint) end (bigint) *venues* id (bigint) name (varchar) min_block (int) min_start (varchar) max_start (varchar)

    Read the article

  • Newbie jQuery question: Need slideshow to rotate automatically, not just when clicking navigation.

    - by Justin
    Hi everyone, This is my first post, so please forgive me if this question has been asked a million times. I'm a self professed jQuery hack and I need a little guidance on taking this script I found and adapting it to my needs. Anyway, what I'm making is an image slide show with navigation. The script I found does this, but does not automatically cycle through the images. I'm using jQuery 1.3.2 and would rather stick with that than using the newer library. I would also prefer to edit what is already here rather than start from scratch. Anywho, here's the html: <div id="myslide"> <div class="cover"> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/current_Denver-skyline.jpg" /> </div> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/pepsi_center-IS42RF-0D111C.jpg" /> </div> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/columbine-2689820469_D1104.jpg" /> </div> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/ist2_10460354-RedRocks.jpg" /> </div> </div> <!-- end of div cover --> </div> <!-- end of div myslide --> And here's the jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/JavaScript"> $(document).ready(function (){ $('#button a').click(function(){ var integer = $(this).attr('rel'); $('#myslide .cover').css({left:-820*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div #mystuff (here 820) ------ */ $('#button a').each(function(){ $(this).removeClass('active'); if($(this).hasClass('button'+integer)){ $(this).addClass('active')} }); }); }); </script> Here's where I got the script: http://www.webdeveloperjuice.com/2010/04/07/create-lightweight-jquery-fade-manual-slideshow/ Again, if this question is too basic for this site please let me know and possibly provide a reference link or two. Thanks a ton!

    Read the article

  • adding results of XML request to a page

    - by user2925833
    I am trying to get a feel for adding content to a page with XMLHTTPRequest. I would like to add the results to existing page content say in a second column, but I am not having any luck. I would appreciate a shove in the right direction. Thanks for any help. <!DOCTYPE html> <html> <head> <style> #button{ float: left; } #team{ float: left; } </style> <title>XMLHTTPRequest</title> <script src="jquery-1.10.2.js"></script> <script> $(document).ready(function(){ xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200) { xmlDoc = xhr.responseXML; var team = xmlDoc.getElementsByTagName("teammember"); var html = ""; for (i = 0; i < team.length; i++){ html += xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue + "<br>" + xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue + "<br>" + xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue + "<br><br>"; } //this is the code I would like help with var team = document.getElementById("team"); team.appendChild(document.createTextNode("html")); } } xhr.open("GET", "team.xml", true); }); </script> </head> <body> <div id="button"> <button onclick="xhr.send()">Click Me!</button> </div> <div id="team"> </div> </body> </html>

    Read the article

  • Access multiple objects/arrays in JSON in jQuery $.each

    - by user2880254
    I am trying to build a simple page to view messages saved in a mysql db via JSON and jQuery. My JSON IS {"unread_msgs":[{"id":"6","title":"33333","user1":"19","timestamp":"1383747146","client_id":"Generic"},{"id":"5","title":"42142","user1":"19","timestamp":"1383740864","client_id":"Generic"}],"read_msgs":[{"id":"4","title":"test to addnrow","user1":"19","timestamp":"1383676647","client_id":"Generic"},{"id":"2","title":"kll","user1":"19","timestamp":"1383675548","client_id":"Generic"},{"id":"1","title":"jkjljklj","user1":"19","timestamp":"1382539982","client_id":"Generic"}],"urm_t":2,"rm_t":3} My JS <script type="text/javascript"> function GetClientMsgs () { $.post("assets/server/client_msgs.php",{ client_id:local_client_id } ,function(data) { var MsgData = $.parseJSON(data); console.log("Msg json data parsed"); $.each(MsgData, function(key, value) { console.log(value); $('#unread_row').append('<td><a href="#read_pm" onClick="ReadMsg('+value.unread_msgs.id+'); return false;">'+value.unread_msgs.title+'</a></td><td><a href="#profile">'+value.unread_msgs.studioname+'</a></td><td>'+value.unread_msgs.timestamp+'</td><td><a href="#delete_msg" onClick="DeleteMsg('value.unread_msgs.id+'); return false;">X</a></td>'); $('#read_row').append('<td><a href="#read_pm" onClick="ReadMsg('+value.read_msgs.id+'); return false;">'+value.read_msgs.title+'</a></td><td><a href="#profile">'+value.read_msgs.studioname+'</a></td><td>'+value.read_msgs.timestamp+'</td><td><a href="#delete_msg" onClick="DeleteMsg('+value.read_msgs.id+'); return false;">X</a></td>'); }); }); } </script> PHP $msgs = array('unread_msgs' => $dn1s, 'read_msgs' => $dn2s, 'urm_t' => $unread_msgs, 'rm_t' => $read_msgs); $json = json_encode($msgs); I am trying to post values returned such as unread_msgs.title or .id and am not able to access any of the objects. I have searched on here and could not find something specific to my structure. Thanks alot.

    Read the article

  • JQuery not copying state dropdown list 1 to DDL2 on checkbox change

    - by user1001411
    I've looked at similar posts on the subject but none of the recommended solutions have worked for me so I'm not sure where I'm going wrong. I have a billing and shipping address form with a dropdown list for the state. Upon checking/unchecking the "billing address same as shipping" everything copies over except the state dropdown list. The state dropdown list is populated from a SQLDataSource state table. Here's my code: <script type="text/javascript" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('input:checkbox[id*=chkCopy]').change(function () { if ($(this).is(':checked')) { $('input:text[id*=TextBox5]').val($('input:text[id*=TextBox1]').val()); $('input:text[id*=TextBox7]').val($('input:text[id*=TextBox2]').val()); $('input:text[id*=TextBox9]').val($('input:text[id*=TextBox3]').val()); $('input:text[id*=TextBox12]').val($('input:text[id*=TextBox4]').val()); $('select#DropDownList6').val($("select#DropDownList1").val()); $('input:text[id*=TextBox14]').val($('input:text[id*=TextBox6]').val()); } else { $('input:text[id*=TextBox5]').val(''); $('input:text[id*=TextBox7]').val(''); $('input:text[id*=TextBox9]').val(''); $('input:text[id*=TextBox12]').val(''); $('select#DropDownList6').val(''); $('input:text[id*=TextBox14]').val(''); } }); }); and here is my SQL for the DDL: <asp:DropDownList ID="DropDownList1" runat="server" DataTextField="Descr" DataValueField="ID" DataSourceID="SqlDataSource1" Width="254"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString1 %>" SelectCommand="SELECT * FROM [xrefState]"> </asp:SqlDataSource> the other one: <asp:DropDownList ID="DropDownList6" runat="server" DataTextField="Descr" DataValueField="ID" DataSourceID="SqlDataSource5" Width="254"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString1 %>" SelectCommand="SELECT * FROM [xrefState]"> </asp:SqlDataSource>

    Read the article

  • Lithium: Run filter after find() to format output

    - by Housni
    I wanted to specify the output of a field from within my model so I added a date key to my $_schema: models/Tags.php <?php protected $_schema = array( 'id' => array('type' => 'integer', 'key' => 'primary'), 'title' => array('type' => 'string'), 'created' => array('type' => 'integer', 'date' => 'F jS, Y - g:i a'), 'modified' => array('type' => 'integer') ); ?> I store my time as an unsigned integer in the db (output of time()). I want my base model to format any field that has the date key for output. I thought the best place to do that would be right after a find: extensions/data/Model.php <?php static::applyFilter('find', function($self, $params, $chain) { $schema = $self::schema(); $entity = $chain->next($self, $params, $chain); foreach ($schema as $field => $options) { if (array_key_exists('date', $options)) { //format as a date $params['data'][$field] = $entity->formatDate($field, $options['date']); } } return $entity; }); public function formatdate($entity, $field, $format, $timezone = 'Asia/Colombo') { $dt = new \DateTime(); $tz = new \DateTimeZone($timezone); $dt->setTimestamp($entity->$field); $dt->setTimezone($tz); return $dt->format($format); } ?> This doesn't seem to be working. When I execute a find all, this filter seems to get hit twice. The first time, $entity contains a count() of the results and only on the second hit does it contain the Records object. What am I doing wrong? How do I alter this so that simply doing <?= $tag->created; ?> in my view will format the date the way I want? This, essentially, needs to be an 'after filter', of sorts. EDIT If I can find a way to access the current model entity object (not the full namespaced path, $self contains that), I can probably solve my problem.

    Read the article

  • JQuery performance issue (Or just bad CODING!)

    - by ferronrsmith
    function getItemDialogContent(planItemType) { var oDialogContent = $('<div/>').append($('#cardDialogHelper').html()).addClass("card"); if (planItemType) { oDialogContent.find('#cardDialogHeader').addClass(planItemType).find('#dialogTitle').html(planItemType); oDialogContent.find('#cardDialogCustomFields').html($('#' + planItemType + 'DialogFields').html()); if (planItemType == 'announcement' || planItemType == 'question') { oDialogContent.find("#dialogPin").remove(); } } return oDialogContent; } I am doing some code cleanup for a web application I am working on. The above method lags in IE and most of our user base use IE. Can someone help me. I figure the find() method is very expensive because of the DOM traversal and I am thinking of optimizing. Any ideas anyone? Thanks in advance :D Been doing some profiling on the application and the following line seems to be causing alot of problems. help me please. is there any way I can optimize ? $('').append($('#cardDialogHelper').html()).addClass("card"); This is the ajax call that does the work. Is there a way to do some of this after the call. Please help me. (Added some functions I thought would be helpful in the diagnosis) GetAllPlansTemp = function() { $.getJSON("/SAMPLE/GetAllPlanItems",processData); } processData = function(data) { _throbber = showThrobber(); var sortedPlanItems = $(data.d).sort("Sequence", "asc"); // hideThrobber(_throbber); $(sortedPlanItems).each(createCardSkipTimelime); doCardStacks(); doTimelineFormat(); if (boolViewAblePlans == 'false') { $("p").show(); } hideThrobber(_throbber); } function createCardSkipTimelime() { boolViewAblePlans = 'false'; if (this.__Deleted == 'true' || IsPastPlanItem(this)) { return; } boolViewAblePlans = 'true'; fixer += "\n" + this.TempKey; // fixes what looks like a js threading issue. var value = CreatePlanCard2(this, GetPlanCardStackContainer(this.__type)); UpdatePlanCardNoTimeLine(value, this); } function CreatePlanCard2(carddata, sContainer) { var sCardclass = GetPlanCardClass(carddata.__type); var editdialog = getItemDialogContent(sCardclass); return $('<div/>').attr('id', carddata.TempKey).card({ 'container': $(sContainer), 'cardclass': sCardclass, 'editdialog': editdialog, 'readonly': GetCardMode(carddata) }); }

    Read the article

  • Adding the text area input to a list with jquery

    - by amylynn83
    I am making a shopping list app. When an item is added to the text input, it should be converted into a list item with a class of "tile" and added to the beginning of the list with a class of ".shopping_item_list". Here is my HTML: <section> <h1 class="outline">Shopping List Items</h1> <ul class="shopping_item_list"> <li class="tile">Flowers<span class="delete">Delete</span></li> </ul> </section> My jQuery: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); This isn't working, and I can't figure out why. I'm new to jQuery. Also, I need to add the "delete" span to the list item and am not sure how. Thanks for any help you can offer! Edited to add: Thanks to the feedback here, I was able to make it work with: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>" + item + "<span class='delete'>Delete</span>" + " </li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); However, in my jquery, I have functions for the classes "tile" and "delete" that are not working for newly added items. // hide delete button $(".delete").hide(); // delete square $(".tile").hover(function() { $(this).find(".delete").toggle(); }); $(".tile").on("click", ".delete", function() { $(this).closest("li.tile").remove(); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); // cross off list $(".tile").click(function() { $(this).toggleClass("deleteAction"); }); The new items, which have these classes applied aren't using these functions at all. Do I need to add the functions below the add item? Does the order in which they appear in my js file matter? Do I need to add some kind of function?

    Read the article

  • How do you hide an image tag based on an ajax response?

    - by Chris
    What is the correct jquery statement to replace the "//Needed magic" comments below so that the image tags are hidden or unhidden based on the AJAX responses? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>JQuery</title> <style type="text/css"> .isSolvedImage{ width: 68px; height: 47px; border: 1px solid red; cursor: pointer; } </style> <script src="_js/jquery-1.4.2.min.js" type="text/javascript"> </script> </head> <body> <div id='true1.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <div id='false1.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <div id='true2.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <div id='false2.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <script type="text/javascript"> $(function(){ var getDivs = 0; //iterate div with class isSolvedImage $("div.isSolvedImage").each(function() { alert('div id--'+this.id); // send ajax requrest $.get(this.id, function(data) { // check if ajax response is 1 alert('div id--'+this.url+'--ajax response--'+data); if(data == 1){ alert('div id--'+this.url+'--Unhiding image--'); //Needed magic //Show image if data==1 } else{ alert('div id--'+this.url+'--Hiding image--'); //Needed magic //Hide image if data!=1 } }); }); }); </script> </body> </html>

    Read the article

  • Using a large list of terms, search through page text and replace words with links

    - by dunc
    A while ago I posted this question asking if it's possible to convert text to HTML links if they match a list of terms from my database. I have a fairly huge list of terms - around 6000. The accepted answer on that question was superb, but having never used XPath, I was at a loss when problems started occurring. At one point, after fiddling with code, I somehow managed to add over 40,000 random characters to our database - the majority of which required manual removal. Since then I've lost faith in that idea and the more simple PHP solutions simply weren't efficient enough to deal with the amount of data and the quantity of terms. My next attempt at a solution is to write a JS script which, once the page has loaded, retrieves the terms and matches them against the text on a page. This answer has an idea which I'd like to attempt. I would use AJAX to retrieve the terms from the database, to build an object such as this: var words = [ { word: 'Something', link: 'http://www.something.com' }, { word: 'Something Else', link: 'http://www.something.com/else' } ]; When the object has been built, I'd use this kind of code: //for each array element $.each(words, function() { //store it ("this" is gonna become the dom element in the next function) var search = this; $('.message').each( function() { //if it's exactly the same if ($(this).text() === search.word) { //do your magic tricks $(this).html('<a href="' + search.link + '">' + search.link + '</a>'); } } ); } ); Now, at first sight, there is a major issue here: with 6,000 terms, will this code be in any way efficient enough to do what I'm trying to do?. One option would possibly be to perform some of the overhead within the PHP script that the AJAX communicates with. For instance, I could send the ID of the post and then the PHP script could use SQL statements to retrieve all of the information from the post and match it against all 6,000 terms.. then the return call to the JavaScript could simply be the matching terms, which would significantly reduce the number of matches the above jQuery would make (around 50 at most). I have no problem with the script taking a few seconds to "load" on the user's browser, as long as it isn't impacting their CPU usage or anything like that. So, two questions in one: Can I make this work? What steps can I take to make it as efficient as possible? Thanks in advance,

    Read the article

  • Rails controller not rendering correct view when form is force-submitted by Javascript

    - by whazzmaster
    I'm using Rails with jQuery, and I'm working on a page for a simple site that prints each record to a table. The only editable field for each record is a checkbox. My goal is that every time a checkbox is changed, an ajax request updates that boolean attribute for the record (i.e., no submit button). My view code: <td> <% form_remote_tag :url => admin_update_path, :html => { :id => "form#{lead.id}" } do %> <%= hidden_field :lead, :id, :value => lead.id %> <%= check_box :lead, :contacted, :id => "checkbox"+lead.id.to_s, :checked => lead.contacted, :onchange => "$('#form#{lead.id}').submit();" %> <% end %> </td> In my routes.rb, admin_update_path is defined by map.admin_update 'update', :controller => "admin", :action => "update", :method => :post I also have an RJS template to render back an update. The contents of this file is currently just for testing (I just wanted to see if it worked, this will not be the ultimate functionality on a successful save)... page << "$('#checkbox#{@lead.id}').hide();" When clicked, the ajax request is successfully sent, with the correct params, and the action on the controller can retrieve the record and update it just fine. The problem is that it doesn't send back the JS; it changes the page in the browser and renders the generated Javascript as plain text rather than executing it in-place. Rails does some behind-the-scenes stuff to figure out if the incoming request is an ajax call, and I can't figure out why it's interpreting the incoming request as a regular web request as opposed to an ajax request. I may be missing something extremely simple here, but I've kind-of burned myself out looking so I thought I'd ask for another pair of eyes. Thanks in advance for any info!

    Read the article

  • jQuery doesn't work in <head>?!

    - by Hanz
    This code is supposed to make a slideshow out of stacked list-elements (I commented out the CSS so I can see what's going on) by fading out the topmost elements until only the first one is visible, then fade in the topmost element and the rest and start anew. If I put the script below my content inside the <body> and throw out the $(function() { it works perfectly fine, but in the <head> nothing happens. I wrote this yesterday and today I still can't see the mistake, so I'm posting it here. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ul { position: relative; } ul li { /*position: absolute; left: 0; top: 0;*/ } </style> <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { var i = 0; var count = $('ul li').size(); function fade() { if (i < count-1) { $('ul li:nth-child('+(count-i)+')').fadeOut(300); i++; } else { $('ul li:nth-child('+count+')').fadeIn(300, function(){$('ul li').show();}); i = 0; } } $('button').click(function() { setInterval('fade()', 1000); }); }); </script> </head> <body> <button>Slideshow GO!</button> <ul id="slider"> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> <li><img src="4.jpg" /></li> </ul> </body> </html> Thanks

    Read the article

  • Submitting form in php file accessed by Ajax?

    - by dronnoc
    Hi people, I am trying to figure out how to submit a form in a page being accessed by Ajax? here are some code snippets to help demonstrate what i am trying to say. HTML BODY - THIS IS WHAT THE USER WILL SEE. <html> <head> <script language="javascript" src="linktoajaxfile.js"> </head> <body onLoad="gotoPage(0)"> <div id="fillThis"> </div> </body> </html> AJAX FILE var xmlhttp function gotoPage(phase) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="pageofstuffce.php"; url=url+"?stg="+phase; url=url+"&sid="+Math.random(); xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { document.getElementById("fillThis").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } PAGE OF DATA <?php $stage = $_GET['stg']; if($stage == 0) { echo '<a onClick="gotoPage(1)">click me</a>'; } elseif($stage == 1) { <form> <input type="text" name="name"> <input type="submit" name="submit"> </form> } elseif(somehow can reach here) { show data from form. } ?> Can anyone perhaps help me get past the form and display the data in the same page? Also, i have looked around, and i don't think anything around has what i need... correct me if i'm wrong though :) Thanks in advance, and i hope i didn't put in too much detail :) Dronnoc EDIT Forgot to mention what I've tried; I have tried submitting the form to itself (same file) and that destroyed the ajax link, and opened the page. i have also tried just having the button move the page onto another step, but the $_POST variable is empty... i am at a loss, so does anyone else have any ideas?

    Read the article

  • Google maps api v3: geocoding multiple addresses and infowindow

    - by user2536786
    I am trying to get infowindow for multiple addresses. Its creating markers but when I click on markers, infowindow is not popping up. Please help and see what could be wrong in this code. Rest all info is fine only issue is with infowindow not coming up. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multiple Markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="height: 800px;"></div> <script type="text/javascript"> var locations = [ ['Bondi Beach', '850 Bay st 04 Toronto, Ont'], ['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'], ['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'], ['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'], ['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8'] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(43.253205,-80.480347), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var geocoder = new google.maps.Geocoder(); var marker, i; for (i = 0; i < locations.length; i++) { geocoder.geocode( { 'address': locations[i][1]}, function(results, status) { //alert(status); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ position: results[0].geometry.location, map: map }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);}); google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();}); } else { alert("some problem in geocode" + status); } }); } </script> </body> </html>

    Read the article

  • How to use jQuery to generate 2 new associated objects in a nested form?

    - by mind.blank
    I have a model called Pair, which has_many :questions, and each Question has_one :answer. I've been following this railscast on creating nested forms, however I want to generate both a Question field and it's Answer field when clicking on an "Add Question" link. After following the railscast this is what I have: ..javascripts/common.js.coffee: window.remove_fields = (link)-> $(link).closest(".question_remove").remove() window.add_fields = (link, association, content)-> new_id = new Date().getTime() regexp = new RegExp("new_" + association, "g") $(link).before(content.replace(regexp, new_id)) application_helper.rb: def link_to_add_fields(name, f, association) new_object = f.object.class.reflect_on_association(association).klass.new fields = f.simple_fields_for(association, new_object, :child_index => "new_#{association}") do |builder| render(association.to_s.singularize + "_fields", :f => builder) end link_to_function(name, "window.add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")", class: "btn btn-inverse") end views/pairs/_form.html.erb: <%= simple_form_for(@pair) do |f| %> <div class="row"> <div class="well span4"> <%= f.input :sys_heading, label: "System Heading", placeholder: "required", input_html: { class: "span4" } %> <%= f.input :heading, label: "User Heading", input_html: { class: "span4" } %> <%= f.input :instructions, as: :text, input_html: { class: "span4 input_text" } %> </div> </div> <%= f.simple_fields_for :questions do |builder| %> <%= render 'question_fields', f: builder %> <% end %> <%= link_to_add_fields "<i class='icon-plus icon-white'></i> Add Another Question".html_safe, f, :questions %> <%= f.button :submit, "Save Pair", class: "btn btn-success" %> <% end %> _question_fields.html.erb partial: <div class="question_remove"> <div class="row"> <div class="well span4"> <%= f.input :text, label: "Question", input_html: { class: "span4" }, placeholder: "your question...?" %> <%= f.simple_fields_for :answer do |builder| %> <%= render 'answer_fields', f: builder %> <% end %> </div> </div> </div> _answer_fields.html.erb partial: <%= f.input :text, label: "Answer", input_html: { class: "span4" }, placeholder: "your answer" %> <%= link_to_function "remove", "remove_fields(this)", class: "float-right" %> I'm especially confused by the reflect_on_association part, for example how does calling .new there create an association? I usually need to use .build Also for a has_one I use .build_answer rather than answers.build - so what does this mean for the jQuery part?

    Read the article

  • Javascript returns Nan in IE, FF ok

    - by user350184
    im very new to javascript, and writing this script to add up a shopping cart and print out subtotals and totals. it works in FF but not in IE. this function is called by onclick of one of three select options with a value of 0-25. it is in a js file called in the head. what it does is get the selected values as variables, parseint them, adds and multiplies, and changes the innerHTML of the table to reflect the subtotals, and total. FF does it great, but IE gives Nan. ive tried rewriting it a number of different ways, and many translations still work in FF but not IE8. ive made sure the variables and form id's arent repeated. function gen_invoice() { var scount = parseInt(document.shopcart.studentcount.value, 10); var ycount = parseInt(document.shopcart.youthcount.value, 10); var fcount = parseInt(document.shopcart.facultycount.value, 10); //html output source is 3 selects like this, with diff ids and names: //<select name="studentcount" id="studentcount"> //<option onclick="gen_invoice()" value="0">0 </option></select> var cardcost = parseInt(document.shopcart.cardprice.value, 10); //cardcost comes from hidden input value: //<input type="hidden" id="cardprice" name="cardprice" value="25"> var totalsum = scount + ycount + fcount; var grandtotal = totalsum * cardcost; document.getElementById('s_price').innerHTML = scount * cardcost; document.getElementById('y_price').innerHTML = ycount * cardcost; document.getElementById('f_price').innerHTML = fcount * cardcost; document.getElementById('grand').innerHTML = grandtotal; //.... } ...after this there are 3 long loops for writing out some other forms, but they dont work in IE either because they depend on the selected values to be an integer. this part happens first and returns Nan, so im sure the problem is here somwhere. I have literally hit my head on the table over this. You can imagine how frustrating it is to be able to write the entire rest of the site beautifully, but then fail at adding 3 numbers together. help please!

    Read the article

  • jQuery animate slidding background image using mouse position wont stop... just keeps going

    - by simian
    I have a neat little jQuery script I am working on. Goal: parent div with overflow hidden holds a larger div with image. When I move the mouse to the left or right of the parent div, the div with image changes margin-left to move left or right. Problem is... if I move the mouse out of the parent div (left or right), the image keeps going. I need the image to stop when the mouse is not on the inside left or right edge of the parent div. Any ideas? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict (); jQuery(document).ready(function(){ jQuery('#container').mousemove(function(e){ var parentWidth = jQuery('#container').width(); var parentWidthLeft = Math.round(.1 * jQuery('#container').width()); var parentWidthRight = Math.round(jQuery('#container').width() - parentWidthLeft); var parentHeight = jQuery('#container').height(); var parentOffset = jQuery('#container').offset(); var X = Math.round(e.pageX - parentOffset.left); var Y = Math.round(e.pageY - parentOffset.top); if (X<parentWidthLeft) { jQuery('#image').animate({'left': '-' + parentWidth }, 5000); } if (X>parentWidthRight) { jQuery('#image').animate({'left': parentWidth }, 5000); } if (X<=parentWidthRight && X>=parentWidthLeft) { jQuery('#image').stop(); } if (X<1) { jQuery('#image').stop(); } }); jQuery('#container').mouseleave(function(){ jQuery('#image').stop(); }); }); // ]]> </script> </head> <body> <div id="container" style="width: 500px; height: 500px; overflow: hidden; border: 10px solid #000; position: relative; margin: auto auto;"> <div id="image" style="position: absolute; left: 0; top: 0;"><img src="http://dump4free.com/imgdump/1/Carmen-Electra_1wallpaper1024x768.jpg" alt="" /></div> </div> </body> </html>

    Read the article

  • jquery mouseent/leave to make div appears

    - by Blake
    I am looking to hover over my list item and have an effect similar to something like facebook chat is my best example..I am able to get the first div to appear but I believe this may be a selector issue because I cant get the rest working properly html <ul id="menu_seo" class="menu"> <li id="menu-seo"><span class="arrowout1"></span>SEO</li> <li id="menu-siteaudits"><span class="arrowout2"></span>Site Audits </li> <li id="menu-linkbuilding"><span class="arrowout3"></span>Link-Building</li> <li id="menu-localseo"><span class="arrowout4"></span>Local SEO</li> </ul> <div id="main_content"> <div id="menu-seo-desc"> <p>SEO management begins with a full website diagnosis of current web strategy Adjustments are made to improve your site’s ability to rank higher on search engines and draw more traffic </p> </div> <div id="menu-seo-desc2"> <p>Usability & site architecture review, Search Engine accessibility and indexing, Keyword research & targeting and Conversion rate optimization </p> </div> </div> css #menu-seo-desc { height:125px; width:210px; background-color:red; border-color:#CCC #E8E8E8 #E8E8E8 #CCC; border-style:solid; border-width:1.5px; border-radius:5px; box-shadow: 1px 0 2px 0px #888; -moz-box-shadow: 1px 0 2px 0px #888; -webkit-box-shadow: 1px 0 2px 1px #888; position:absolute; top:220px; left:350px; display:none; } js <script> $(document).ready(function(){ <script> $(document).ready(function(){ $('#menu_seo').on('#menu-seo', { 'mouseenter': function() { $('#menu-seo-desc').fadeIn(600); $('#menu-seo-desc2').fadeIn(600); }, 'mouseleave': function() { $('#menu-seo-desc').fadeOut(300); $('#menu-seo-desc2').fadeOut(300); } }); }); </script> });

    Read the article

  • Jquery ajax using asp.net does not work on IE9 during the 2nd call of the function?

    - by randelramirez1
    I have gridview that is loaded from another aspx page after an ajax call, the problem is it works on chrome/firefox/safari but using ie9 the ajax call would work fine during the first call but when i try to call the function again it throws an 304 status on the network tab of ie9 dev tool and the gridview is not refreshed. Here is the jquery code: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoadCoursesGridViewHere.aspx.cs" Inherits="CoursesGridView" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="Gridview-container"> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </div> <asp:TextBox ID="TextBox1" runat="server" ViewStateMode="Disabled"></asp:TextBox> <%-- <asp:Button Text="text" ID="btn" OnClientClick=" __doPostBack('UpdatePanel1', '')" runat="server" />--%> <input type="button" id="btn" value="insert"/> </form> <script type="text/javascript"> $("#btn").click(function () { var a = $("#TextBox1").val(); $.ajax({ url: 'WebService.asmx/insert', data: "{ 'name': '" + a + "' }", contentType: "application/json; charset=utf-8", type: "POST", success: function () { // alert('insert was performed.'); $("#Gridview-container").empty(); $("#Gridview-container").load("GridViewCourses.aspx #GridView1"); } }); }); </script> </body> </html> What happen is that after click the button it will insert the textbox value in the database through the webservice 'insert' and then reload the gridview that is placed inside a different aspx page. The problem is that when I ran it on IE9 during the 1st insert everything works properly but the succeeding inserts does reload the gridview and I noticed that it says '304' on the network tab of ie9 dev tool.

    Read the article

  • Mobile Safari text selection after input field focus

    - by Andy
    I have some legacy html that needs to work on old and new browsers (down to IE7) as well as the iPad. The iPad is the biggest issues because of how text selection is handled. On a page there is a textarea as well as some text instructions. The instructions are in a <div> and the user needs to be able to select the instructions. The problem is that once focus is placed in the textarea, the user cannot subsequently select the text instructions in the <div>. This is because the text cannot receive focus. According to the Safari Web Content Guide: Handling Events (especially, "Making Elements Clickable"), you can add a onclick event handler to the div you want to receive focus. This solution works (although it is not ideal) in iOS 6x but it does not work in iOS 5x. Does anyone have a suggestion that minimizes changes to our existing code and produces consistant user interaction. Here is sample code that shows the problem. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <!-- Resources: Safari Web Content Guide: Handling Events (especially, "Making Elements Clickable") http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1 --> </head> <body> <div style="width:550"> <div onclick='function() { void(0); }'> <p>On the iPad, I want to be able to select this text after the textarea has had focus.</p> </div> <textarea rows="20" cols="80">After focus is in the textarea, can you select the text above?</textarea> </div> </body> </html>

    Read the article

< Previous Page | 287 288 289 290 291 292 293 294 295 296 297 298  | Next Page >