Search Results

Search found 17181 results on 688 pages for 'jquery lover'.

Page 483/688 | < Previous Page | 479 480 481 482 483 484 485 486 487 488 489 490  | Next Page >

  • simplejson double escapes data causing invalid JSON string

    - by mike_hornbeck
    I have a simple form for managing manufacturers in my shop. After posting form, ajax call returns json with updated data to the form. Problem is, that the returned string is invalid. It looks like it was double-escaped. Strangely similar approach across the whole shop works without any problems. I'm also using jquery 1.6 as javascript framework. Model contains of 3 fields : char for name, text for description and image field for manufacturer logo. The function : def update_data(request, manufacturer_id): """Updates data of manufacturer with given manufacturer id. """ manufacturer = Manufacturer.objects.get(pk=manufacturer_id) form = ManufacturerDataForm(request.FILES, request.POST, instance=manufacturer) if form.is_valid(): form.save() msg = _(u"Manufacturer data has been saved.") html = [ ["#data", manufacturer_data_inline(request, manufacturer_id, form)], ["#selectable-factories-inline", selectable_manufacturers_inline(request, manufacturer_id)], ] result = simplejson.dumps({ "html": html }, cls=LazyEncoder) return HttpResponse(result) The error in console : error with invalid JSON : uncaught exception: Invalid JSON: {"html": [["#data", "\n<h2>Dane</h2>\n<div class="\&quot;manufacturer-image\&quot;">\n \n</div>\n<form action="\&quot;/manage/update-manufacturer-data/1\&quot;" method="\&quot;post\&quot;">\n \n <div class="\&quot;field\&quot;">\n <div class="\&quot;label\&quot;">\n <label for="\&quot;id_name\&quot;">Nazwa</label>:\n </div>\n \n \n <div class="\&quot;error\&quot;">\n <input id="\&quot;id_name\&quot;" name="\&quot;name\&quot;" maxlength="\&quot;50\&quot;" type="\&quot;text\&quot;">\n <ul class="\&quot;errorlist\&quot;"><li>Pole wymagane</li></ul>\n </div>\n \n </div>\n\n <div class="\&quot;field\&quot;">\n <div class="\&quot;label\&quot;">\n <label for="\&quot;id_image\&quot;">Zdjecie</label>:\n </div>\n \n \n <div>\n <input name="\&quot;image\&quot;" id="\&quot;id_image\&quot;" type="\&quot;file\&quot;">\n </div>\n \n </div>\n\n <div class="\&quot;field\&quot;">\n <div class="\&quot;label\&quot;">\n <label for="\&quot;id_description\&quot;">Opis</label>:\n </div>\n \n \n <div>\n <textarea id="\&quot;id_description\&quot;" rows="\&quot;10\&quot;" cols="\&quot;40\&quot;" name="\&quot;description\&quot;"></textarea>\n </div>\n \n </div>\n \n <div class="\&quot;buttons\&quot;">\n <input class="\&quot;ajax-save-button" button\"="" type="\&quot;submit\&quot;">\n </div>\n</form>"], ["#selectable-factories-inline", "\n <div>\n <a class="\&quot;selectable" selected\"\n="" href="%5C%22/manage/manufacturer/1%5C%22">\n L1\n </a>\n </div>\n\n <div>\n <a class="\&quot;selectable" \"\n="" href="%5C%22/manage/manufacturer/4%5C%22">\n KR3W\n </a>\n </div>\n\n <div>\n <a class="\&quot;selectable" \"\n="" href="%5C%22/manage/manufacturer/3%5C%22">\n L1TA\n </a>\n </div>\n\n"]]} Any ideas ?

    Read the article

  • Drupal's not reading correct values from DB

    - by John
    Hey Everyone, Here is my current problem. I am working with the chat module and I'm building a module that notifies users via AJAX that they have been invited to a chat. The current table structure for the invites table looks like this: |-------------------------------------------------------------------------| | CCID | NID | INVITER_UID | INVITEE_UID | NOTIFIED | ACCEPTED | |-------------------------------------------------------------------------| | int | int | int | int | (0 or 1) | (0 or 1) | |-------------------------------------------------------------------------| I'm using the periodical updater plug-in for JQuery to continually poll the server to check for invites. When an invite is found, I set the notified from 0 to 1. However, my problem is the periodical updater. When I first see that there is an invite, I notify the user, and set notified to 1. On the next select though, I get the same results before, as if the update didn't work. But, when I got check the database, I can see that it worked just fine. It's as if the query is querying a cache, but I can't figure it out. My code for the periodical updater is as follows: window.onload = function() { var uid = $('a#chat_uid').html(); $.PeriodicalUpdater( '/steelylib/sites/all/modules/_chat_whos_online/ajax/ajax.php', //url to service { method: 'get', //send data via... data: {uid: uid}, //data to send minTimeout: '1000', //min time before server is polled (milli-sec.) maxTimeout: '20000', //max time before server is polled (milli-sec.) multiplyer: '1.5', //multiply against curretn poll time every time constant data is returned type: 'text', //type of data recieved (response type) maxCalls: 0, //max calls to make (0=unlimited) autoStop: 0 //max calls with constant data (0=unlimited/disabled) }, function(data) //callback function { alert( data ); //for now, until i get it working } ); } And my code for the ajax call is as follows: <?php #bootstrap Drupal, and call function, passing current user's uid. function _create_chat_node_check_invites($uid) { cache_clear_all('chatroom_chat_list', 'cache'); $query = "SELECT * FROM {chatroom_chat_invite} WHERE notified=0 AND invitee_uid=%d and accepted=0"; $query_results = db_query( $query, $uid ); $json = '{"invites":['; while( $row = db_fetch_object($query_results) ) { var_dump($row); global $base_url; $url = $base_url . '/content/privatechat' . $uid .'-' . $row->inviter_uid; $inviter = db_fetch_object( db_query( "SELECT name FROM {users} WHERE uid = %d", $row->inviter_uid ) ); $invitee = db_fetch_object( db_query( "SELECT name FROM {users} WHERE uid = %d", $row->invitee_uid ) ); #reset table $query = "UPDATE {chatroom_chat_invite} " ."SET notified=1 " ."WHERE inviter_uid=%d AND invitee_uid=%d"; db_query( $query, $row->inviter_uid, $row->invitee_uid ); $json .= '['; $json .= '"' . $url . '",'; $json .= '"' . ($inviter->name) . '",'; $json .= '"' . ($invitee->name) . '"' ; $json .= '],'; } $json = substr($json, 0, -1); $json .= ']}'; return $json; } ?> I can't figure out what is going wrong, any help is greatly appreciated!

    Read the article

  • Vertical text inside table headers using a JavaScript-based SVG library

    - by Oleg
    I use jqGrid with many columns containing boolean information, which are displayed as checkboxes inside the table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm as an example). To display information more compactly I use vertical column headers. It works very well and works in jqGrid in all browsers (see my discussion with Tony Tomov in jqGrid forum http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), but in IE vertical text is blurred and doesn't look nice enough (open the link above in IE and you will see exactly what I mean). I was asked from users why the text displayed so strangely. So I'm thinking of using a JavaScript-based SVG library like SVG Web ( http://code.google.com/p/svgweb/ ) or Raphaël ( http://raphaeljs.com/ ). SVG is very powerful and it is difficult to find a good example. I need only to display vertical text (-90 grad, from the bottom up) and use if possible without working in mode of absolute positioning. So one more time my question: I need to have a possibility to display vertical text (-90 grad rotation) inside <td> elements of a table header. I want to use a JavaScript-based SVG library like SVG Web or Raphaël. The solution must support IE6. Does anybody have a good reference example which could help me do this? If somebody posts a whole solution of the problem I would be happy. To be exact here is my current solution: I define .rotate { -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ -moz-transform: rotate(-90deg); /* Firefox 3.5+ */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet Explorer: */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */; } define RotateCheckboxColumnHeaders function var RotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = $("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); $("thead:first tr th").height(headerHeight); headerHeight = $("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = $("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!$.browser.msie) { if ($.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); $("span", headDiv).css("left", 0); } else { headDiv.css("left", 3); } } } } }; And include a call like RotateCheckboxColumnHeaders(grid, 110); after creating jqGrid.

    Read the article

  • openDatabase Hello World - 2

    - by cf_PhillipSenn
    This is a continuation from a previous stackoverflow question. I've renamed some variables so that I can tell what are keywords and what are names that I can control. Q: Why is the deleteRow function not working? <html> <head> <title>html5 openDatabase Hello World</title> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1"); google.setOnLoadCallback(OnLoadCallback); function OnLoadCallback() { var dbo; dbo = openDatabase('HelloWorld'); dbo.transaction( function(T1) { T1.executeSql( 'CREATE TABLE IF NOT EXISTS myTable ' + ' (myTableID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' + ' Field1 TEXT NOT NULL );' ); } ); dbo.transaction(function(T2) { T2.executeSql('SELECT * FROM myTable',[], function (T6, result) { for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); $('#savedData').append('<li id="'+row.myTableID+'">' + row.Field1 + '</li>'); } }, errorHandler); }); $('form').submit(function() { var xxx = $('#xxx').val(); dbo.transaction( function(T3) { T3.executeSql( 'INSERT INTO myTable (Field1) VALUES (?);', [xxx], function(){ $('#savedData').append('<li id="ThisisWhereIneedHELP">' + xxx + '</li>'); $('#xxx').val(''); }, errorHandler ); } ); return false; }); $('#savedData > li').live('click', function (){ deleteRow(this.id); $(this).remove(); }); } function deleteRow(myTableID) { alert('trying to delete'); dbo.transaction(function(T4) { T4.executeSql('DELETE FROM myTable WHERE myTableID = ?', [myTableID], function(){ alert('Deleted!'); }, errorHandler); }); } function errorHandler(T5, error) { alert('Oops. Error was '+error.message+' (Code '+error.code+')'); // T5.executeSql('INSERT INTO errors (code, message) VALUES (?, ?);', // [error.code, error.message]); return false; } </script> </head> <body> <form method="post"> <input name="xxx" id="xxx" /> <p> <input type="submit" name="OK" /> </p> <ul id="savedData"> </ul> </form> </body> </html>

    Read the article

  • Imitate Google suggest with Ajax and php

    - by phil
    I want to imitate Google suggest with the following code, which means: step 1: When user types in search box, the query string will be processed by a server php file and query suggestion string is returned(using Ajax object). step 2:When user clicks on a query suggestion, it will fill into the search box (autocomplete). Step 1 is achieved while step 2 is not. I think the problem lies in the .click() method. My intention is to use .click() binding a onclick event to the dynamically created <li> element. Any idea? <script src="jquery-1.4.2.js"> </script> <style> #search,#suggest,ul,li{margin: 0; padding:0; width: 200px;} ul{ list-style-type: none;} .border{border: solid red 1px; } </style> <p>My first language is:</p> <input type="text" width="200px" id="search" onkeyup="main(this.value)" value="" /> <ul id="suggest"></ul> <script type="text/javascript"> function main(str) { //setup Ajax object var request=new XMLHttpRequest(); request.open("GET","language.php?q="+str,true) //core function request.onreadystatechange=function() { if ( request.readyState==4 && request.status==200) { if (str=="") {$('li').remove(); $('ul').removeClass('border');return;} $('li').remove(); array=request.responseText.split(","); for (i=0;i<array.length;i++) { //create HTML element of <li> $('#suggest').append($('<li>',{id: 'li'+i, html: array[i]})); //style ul $('ul').addClass('border'); //I THINK HERE IS THE PROBLEM! $('li'+i).click(function(){ $("#search").html(array[i]);}); } } } request.send(); } </script> PHP: <?php $q=$_GET[q]; $a[]='english'; $a[]='chinese'; $a[]='japanese'; $a[]='eeeeee'; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?>

    Read the article

  • MVC 2 Ajax.Beginform passes returned Html + Json to javascript function

    - by Joe
    Hi, I have a small partial Create Person form in a page above a table of results. I want to be able to post the form to the server, which I can do no problem with ajax.Beginform. <% using (Ajax.BeginForm("Create", new AjaxOptions { OnComplete = "ProcessResponse" })) {%> <fieldset> <legend>Fields</legend> <div class="editor-label"> <%=Html.LabelFor(model => model.FirstName)%> </div> <div class="editor-field"> <%=Html.TextBoxFor(model => model.FirstName)%> <%=Html.ValidationMessageFor(model => model.FirstName)%> </div> <div class="editor-label"> <%=Html.LabelFor(model => model.LastName)%> </div> <div class="editor-field"> <%=Html.TextBoxFor(model => model.LastName)%> <%=Html.ValidationMessageFor(model => model.LastName)%> </div> <p> <input type="submit" /> </p> </fieldset> <% } %> Then in my controller I want to be able to post back a partial which is just a table row if the create is successful and append it to the table, which I can do easily with jquery. $('#personTable tr:last').after(data); However, if server validation fails I want to pass back my partial create person form with the validation errors and replace the existing Create Person form. I have tried returning a Json array Controller: return Json(new { Success = true, Html= this.RenderViewToString("PersonSubform",person) }); Javascript: var json_data = response.get_response().get_object(); with a pass/fail flag and the partial rendered as a string using the solition below but that doesnt render the mvc validation controls when the form fails. SO RenderPartialToString So, is there any way I can hand my javascript the out of the box PartialView("PersonForm") as its returned from my ajax.form? Can I pass some addition info as a Json array so I can tell if its pass or fail and maybe add a message? UPDATE I can now pass the HTML of a PartialView to my javascript but I need to pass some additional data pairs like ServerValidation : true/false and ActionMessage : "you have just created a Person Bill". Ideally I would pass a Json array rather than hidden fields in my partial. function ProcessResponse(response) { var html = response.get_data(); $("#campaignSubform").html(html); } Many thanks in advance

    Read the article

  • No data when attempting to get JSONP data from cross domain PHP script

    - by Alex
    I am trying to pull latitude and longitude values from another server on a different domain using a singe id string. I am not very familiar with JQuery, but it seems to be the easiest way to go about getting around the same origin problem. I am unable to use iframes and I cannot install PHP on the server running this javascript, which is forcing my hand on this. My queries appear to be going through properly, but I am not getting any results back. I was hoping someone here might have an idea that could help, seeing as I probably wouldn't recognize most obvious errors here. My javascript function is: var surl = "http://...omitted.../pull.php"; var idnum = 5a; //in practice this is defined above alert("BEFORE"); $.ajax({ url: surl, data: {id: idnum}, dataType: "jsonp", jsonp : "callback", jsonp: "jsonpcallback", success: function (rdata) { alert(rdata.lat + ", " + rdata.lon); } }); alert("BETWEEN"); function jsonpcallback(rtndata) { alert("CALLED"); alert(rtndata.lat + ", " + rtndata.lon); } alert("AFTER"); When my javascript is run, the BEFORE, BETWEEN and AFTER alerts are displayed. The CALLED and other jsonpcallback alerts are not shown. Is there another way to tell if the jsoncallback function has been called? Below is the PHP code I have running on the second server. I added the count table to my database just so that I can tell when this script is run. Every time I call the javascript, count has had an extra item inserted and the id number is correct. <?php header("content-type: application/json"); if (isset($_GET['id']) || isset($_POST['id'])){ $db_handle = mysql_connect($server, $username, $password); if (!$db_handle) { die('Could not connect: ' . mysql_error()); } $db_found = mysql_select_db($database, $db_handle); if ($db_found) { if (isset($_POST['id'])){ $SQL = sprintf("SELECT * FROM %s WHERE loc_id='%s'", $loctable, mysql_real_escape_string($_POST['id'])); } if (isset($_GET['id'])){ $SQL = sprintf("SELECT * FROM %s WHERE loc_id='%s'", $loctable, mysql_real_escape_string($_GET['id'])); } $result = mysql_query($SQL, $db_handle); $db_field = mysql_fetch_assoc($result); $rtnjsonobj -> lat = $db_field["lat"]; $rtnjsonobj -> lon = $db_field["lon"]; if (isset($_POST['id'])){ echo $_POST['jsonpcallback']. '('. json_encode($rtnjsonobj) . ')'; } if (isset($_GET['id'])){ echo $_GET['jsonpcallback']. '('. json_encode($rtnjsonobj) . ')'; } $SQL = sprintf("INSERT INTO count (bullshit) VALUES ('%s')", $_GET['id']); $result = mysql_query($SQL, $db_handle); $db_field = mysql_fetch_assoc($result); } mysql_close($db_handle); } else { $rtnjsonobj -> lat = 404; $rtnjsonobj -> lon = 404; echo $_GET['jsonpcallback']. '('. json_encode($rtnjsonobj) . ')'; }?> I am not entirely sure if the jsonp returned by this PHP is correct. When I go directly to the PHP script without including any parameters, I do get the following. ({"lat":404,"lon":404}) The callback function is not included, but that much can be expected when it isn't included in the original call. Does anyone have any idea what might be going wrong here? Thanks in advance!

    Read the article

  • MVC Datatables Dialog Not staying where dialog opens

    - by Anthoney Hanks
    I have created a view that displays a datatable with a clickable link that opens a jQuery UI dialog box. The users wanted a search options (8 dropdowns to narrow the search) at top of page, followed by the datatable with the 100 viewable records. If I scroll down the datatable to the bottom viewable record, click the link to open the dialog box. The dialog opens relative to the link clicked, but the focus go back to the top of the page which causes the user to have scroll back down to the dialog box. Ok, I thought I would just set the focus to the dialog box. BUt it is being ignored which make me think that this is something within the MVC realm. I even tried to wrap the focus inside a ready function thinking it would be one of the last things process. When I define the dailog, it is pretty basic. I even tried to set the position attribute, but it did not change the problem. Has someone had this problem and can send me in the right direction? View building the datatable: <table id="navDatatables"> <tbody> @foreach (var detailsVM in Model.DetailsVMs) { <tr> <td class="standardTable"> <a href="#" onclick="return PVE_UseConfig.Options(@detailsVM.ConfigVersionId, @Model.UseConfigModeId);" class="smallLink">Options</a> </td> <td class="standardTable"> <a href="@Url.Content(@detailsVM.ViewerUrl)" target="_blank">@detailsVM.ConfigName</a> </td> <td class="standardTable">@detailsVM.ConfigType</td> <td class="standardTable">@detailsVM.ConfigVersionState</td> <td class="standardTable">@detailsVM.Organization</td> <td class="standardTable">@detailsVM.ProcessSet</td> <td class="standardTable">@detailsVM.ConfigVersionCaption</td> <td class="standardTable">@detailsVM.ConfigId</td> <td class="standardTable">@detailsVM.ConfigVersionId</td> <td class="standardTable">@detailsVM.ConfigOwnerName</td> <td class="standardTable">@detailsVM.ConfigVersionLastModified</td> </tr> } </tbody> </table> Dialog box code: Options: function (configVersionId, useConfigModeId) { var output = '#modalDialog1'; var postData = { configVersionId: configVersionId, useConfigModeId: useConfigModeId }; $('#modalDialog1').dialog("destroy"); $.ajax({ url: PVE_RootUrl + 'UseConfig/Options', type: 'POST', async: false, data: postData, success: function (result) { $(output).html(result); }, error: function (jqXHR, textStatus, errorThrown) { var text = jqXHR.responseText; var from = text.search("<body>") + 6; var to = text.search("</body>") - 7; $(output).html(text.substring(from, to)); } }); $(output).dialog({ title: "Configuration Options", modal: true, height: 550, width: 600, resizable: false, draggable: false }); },

    Read the article

  • I'm trying to return text from a .txt file using ajax

    - by saad
    I'm trying to get my first ajax script to work. The five images are all side by side. Whenever the user hovers the mouse over any of them, it sends a request to a .txt file on the server and the caption is displayed in the div#image_caption. The problem is, even when I mouse over the image, the caption does not display. I'm not quite sure what could be causing this. Here is the code <!DOCTYPE html> <html> <head> <style type="text/css"> div#images{overflow: auto;} img{float: left; width: 200px; height: 200px; margin-right: 15px;} div#image_caption {width: 1040px; height: 300px; margin-top: 30px; border: 2px black solid;} </style> <script type="text/javascript" src ="jquery-2.0.3.js"></script> <script type="text/javascript"> $(document).ready(function() { function show_caption(url) { //shows the caption once the mouse hovers over the image var asyncreq; if(window.XMLHttpRequest) { //IE 7+ and other browsers asyncreq = new XMLHttpRequest(); //define the request } else { //for IE 7- asyncreq = new ActiveXObject("Microsoft.XMLHTTP"); } asyncreq.open("GET", url, true); //give it properties asyncreq.send(); //send the request to the server asyncreq.onreadystatechange = function() { if(asyncreq.readyState == 4 && asyncreq.status == 200) { $("div#image_caption").html(asyncreq.responseText); //add the caption (response text from the file) to the box } } } //end of show_caption(url) function hide_caption() { //hides the caption once the mouse is gone $("div#image_caption").html(""); } }); </script> </head> <body> <h1>Hover over an image for more information.</h1> <div id = "images"> <img src="images/backg.jpg" mouseover = 'show_caption("backg_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/Desert.jpg"mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/Penguins.jpg" mouseover = 'show_caption("Penguins_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/Tulips.jpg" mouseover = 'show_caption("Tulips_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/odji1.jpg" mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/> </div> <div id = "image_caption"> </div> </body> </html>

    Read the article

  • change img src on select box selection

    - by user1871596
    i have a form that auto populates input fields using jquery and ajax i can not get the img url to change in the img src when i select the option from dropdown my dropdown is dynamicaly populated here is is my function <script type="text/javascript"> $(document).ready(function(){ $("#id").change(function(){ $.ajax({ url : 'get_driver_data2.php', type : 'POST', dataType: 'json', data : $('#ContactTrucks').serialize(), success: function( data ) { for(var id in data) { $(id).val( data[id] ); } } }); }); }); </script> here is get_driver_data2.php <?php include ('dbc.php'); $id_selected = $_POST['id']; // Selected Id $query = "SELECT * from admin_dispatch_records where id = '$id_selected' AND driver LIKE '%$username%'"; $result = mysqli_query($dbcon, $query); while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { $eta = $row['eta']; $time = $row['dispatch_time']; $date = $row['dispatch_date']; $name = $row['name']; $phone = $row['phone']; $vehicleyear = $row['vehicleyear']; $color = $row['color']; $make = $row['make']; $model = $row['model']; $vin = $row['vin']; $plate = $row['plate']; $mileage = $row['mileage']; $pickup = $row['pickup']; $dropoff = $row['dropoff']; $price = $row['price']; $invoice = $row['invoice']; $cash = $row['cash']; $credit = $row['credit']; $check = $row['check']; $po = $row['po']; $billed = $row['billed']; $need_to_bill = $row['need_to_bill']; $getphoto = $row['image_path']; } $arr = array( 'input#eta' => $eta, 'input#dispatch_time' => $time, 'input#dispatch_date' => $date, 'input#name' => $name, 'input#phone' => $phone, 'input#vehicleyear' => $vehicleyear, 'input#color' => $color, 'input#make' => $make, 'input#model' => $model, 'input#vin' => $vin, 'input#plate' => $plate, 'input#mileage' => $mileage, 'textarea#pickup' => $pickup, 'textarea#dropoff' => $dropoff, 'input#price' => $price, 'input#invoice' => $invoice, 'input#cash' => $cash, 'input#credit' => $credit, 'input#check' => $check, 'input#po' => $po, 'input#billed' => $billed, 'input#need_to_bill' => $need_to_bill, 'image#image_path' => $getphoto); echo json_encode( $arr ); ?> a bit of the html <td> <img id="image_path" src="????" /> </td> </tr> </table> <p><strong> <input type="submit" value="Complete Dispatch"> </strong></p> how do i if at all possible populate the src with the database vaule ajax recieved when i change the select box all other data is populated and the string is returned correctlly i have tested that by placing an input box and calling input#image_path = $getphoto. is there syntax for an img tag like the input....textarea....etc. I have tried including the get....php inline and assigning the src to $getphoto no luck there I was looking at trying to make a hidden input field with the ajax passed data and then taking that data and making it a var but can not figure that out either. thanks

    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

  • I want to use blur function instead mouseup function

    - by yossi
    I have the Demo Table which I can click on the cell(td tag) and I can change the value on it.direct php DataBase. to do that I need to contain two tags.1 - span. 2 - input. like the below. <td class='Name'> <span id="spanName1" class="text" style="display: inline;"> Somevalue </span> <input type="text" value="Somevalue" class="edittd" id="inputName1" style="display: none; "> </td> to control on the data inside the cell I use in jquery .mouseup function. mouseup work but also make truble. I need to replace it with blur function but when I try to replace mouseup with blur the program thas not work becose, when I click on the cell I able to enter the input tag and I can change the value but I can't Successful to Leave the tag/field by clicking out side the table, which alow me to update the DataBase you can see that Demo with blur Here. what you advice me to do? $(".edittd").mouseup(function() { return false; }); //************* $(document).mouseup(function() { $('#span' + COLUME + ROW).show(); $('#input'+ COLUME + ROW ).hide(); VAL = $("#input" + COLUME + ROW).val(); $("#span" + COLUME + ROW).html(VAL); if(STATUS != VAL){ //******ajax code //dataString = $.trim(this.value); $.ajax({ type: "POST", dataType: 'html', url: "./public/php/ajax.php", data: 'COLUME='+COLUME+'&ROW='+ROW+'&VAL='+VAL, //{"dataString": dataString} cache: false, success: function(data) { $("#statuS").html(data); } }); //******end ajax $('#statuS').removeClass('statuSnoChange') .addClass('statuSChange'); $('#statuS').html('THERE IS CHANGE'); $('#tables').load('TableEdit2.php'); } else { //alert(DATASTRING+'status not true'); } });//End mouseup function I change it to: $(document).ready(function() { var COLUMES,COLUME,VALUE,VAL,ROWS,ROW,STATUS,DATASTRING; $('td').click(function() { COLUME = $(this).attr('class'); }); //**************** $('tr').click(function() { ROW = $(this).attr('id'); $('#display_Colume_Raw').html(COLUME+ROW); $('#span' + COLUME + ROW).hide(); $('#input'+ COLUME + ROW ).show(); STATUS = $("#input" + COLUME + ROW).val(); }); //******************** $(document).blur(function() { $('#span' + COLUME + ROW).show(); $('#input'+ COLUME + ROW ).hide(); VAL = $("#input" + COLUME + ROW).val(); $("#span" + COLUME + ROW).html(VAL); if(STATUS != VAL){ //******ajax code //dataString = $.trim(this.value); $.ajax({ type: "POST", dataType: 'html', url: "./public/php/ajax.php", data: 'COLUME='+COLUME+'&ROW='+ROW+'&VAL='+VAL, //{"dataString": dataString} cache: false, success: function(data) { $("#statuS").html(data); } }); //******end ajax $('#statuS').removeClass('statuSnoChange') .addClass('statuSChange'); $('#statuS').html('THERE IS CHANGE'); $('#tables').load('TableEdit2.php'); } else { //alert(DATASTRING+'status not true'); } });//End mouseup function $('#save').click (function(){ var input1,input2,input3,input4=""; input1 = $('#input1').attr('value'); input2 = $('#input2').attr('value'); input3 = $('#input3').attr('value'); input4 = $('#input4').attr('value'); $.ajax({ type: "POST", url: "./public/php/ajax.php", data: "input1="+ input1 +"&input2="+ input2 +"&input3="+ input3 +"&input4="+ input4, success: function(data){ $("#statuS").html(data); $('#tbl').hide(function(){$('div.success').fadeIn();}); $('#tables').load('TableEdit2.php'); } }); }); }); Thx

    Read the article

  • How to resolve strange conflict between form post and ajax post?

    - by Oliver Hyde
    On the one page, I am trying to use ajax to edit existing values. I am doing this by using jQuery Inline Edit and posting away the new data, updating the record and returning with success. This is working fine. Next I have implemented the ability to add new records, to do this I have a form at the end of the table, which submits post data then redirects back to the original page. Each of them work individually, but after I have used the form to add a new record, the inline editing stops to work. If I close the webpage and reopen it, it works fine again until I have used the form and it goes of the rails again. I have tried a number of solutions, clearing session data, giving the form a separate name, redirecting to an alternative page (which does work, but is not ideal as I want the form to redirect back to the original location ). Here is a sample of the view form data: <?php foreach($week->incomes as $income):?> <tr> <td><?php echo $income->name;?></td> <td width="70" style="text-align:right;" class="editableSingle income id<?php echo $income->id;?>">$<?php echo $income->cost;?></td> </tr> <?php endforeach;?> <?php echo form_open('budget/add/'.$week->id.'/income/index', 'class="form-vertical" id="add_income"'); ?> <tr> <td> <input type="text" name="name" class="input-small" placeholder="Name"> <input type="text" name="cost" class="input-small" placeholder="Cost"> </td> <td> <button type="submit" class="btn btn-small pull-right"><i class="icon-plus "></i></button> </td> </tr> <?php echo form_close(); ?> This is the javascript initialisation code: $(function(){ $.inlineEdit({ income: 'budget/update_income/', expense: 'budget/update_expense/' }, { animate: false, filterElementValue: function($o){ if ($o.hasClass('income')) { return $o.html().match(/\$(.+)/)[1]; } else if ($o.hasClass('expense')) { return $o.html().match(/\$(.+)/)[1]; } else { return $o.html(); } }, afterSave: function(o){ if (o.type == 'income') { $('.income.id' + o.id).prepend('$'); } if (o.type == 'expense') { $('.expense.id' + o.id).prepend('$'); } }, colors: { error:'green' } }); }); If I can provide any more information to clarify what I have attempted etc, let me know. Temporary Fix It seems I have come up with a work around, not ideal as I still am not sure what is causing the issue. I have created a method called redirect. public function redirect(){ redirect(''); } am now calling that after the form submit which has temporarily allows my multiple post submits to work.

    Read the article

  • Failed to load resource: the server responded with a status of 406 (Not Acceptable)

    - by skip
    I am trying to send json data and get back json data as well. I've <annotation-driven /> configured in my servlet-context.xml and I am using Spring framework version 3.1.0.RELEASE. When I send the request the browser tells me that it is not happy with the data returned from the server and gives me 406 error. And when I see the response from the server I see the whole 406 page returned by tomcat 6 server. I have got following in my pom for Jackson/Jackson processor: <!-- Jackson --> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-core-asl</artifactId> <version>1.9.4</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.9.4</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-xc</artifactId> <version>1.9.4</version> </dependency> <!-- Jackson JSON Processor --> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.8.1</version> </dependency> Following is the jquery code I am using to send the json request: $(function(){$(".sutmit-button").click(function(){ var dataString=$("#app-form").serialize(); $.ajax({ type:"POST", url:"apply.json", data:dataString, success:function(data, textStatus, jqXHR){ console.log(jqXHR.status); console.log(data); $('.postcontent').html("<div id='message'></div>"); $('#message').html("<h3>Request Submitted</h3>").append("<p>Thank you for submiting your request.</p>").hide().fadeIn(1500,function(){$('#message');}); }, error:function(jqXHR, textStatus, errorThrown) { console.log(jqXHR.status); $('.postcontent').html("<div id='message'></div>"); $('#message').html("<h3>Request failed.</h3>").hide().fadeIn(1500,function(){$('#message');}); }, dataType: "json" }); return false;});}); Following is the Controller that is handling the request: @RequestMapping(method = RequestMethod.POST, value="apply", headers="Accept=application/json") public @ResponseBody Application processFranchiseeApplicationForm(HttpServletRequest request) { //... Application application = new Application(...); //... logger.debug(application); return application; } I am not able to figure out the reason why I might be getting this error. Could someone help me understand why am I getting the given error? Thanks.

    Read the article

  • Dynamically alter outter div as inner one gets bigger.

    - by Razor Storm
    I have two divs, one inside another. The outter one is called #wrapper, while the inner one is called #pad. Now #pad allows user input, and I have a javascript (jQuery) function that changes the content of #pad based on what the user input is. Sometimes, because of this function, #pad's content will cause the div to become more elongated than before. Now obviously I would wish for #wrapper to grow longer as well to accommodate this change in #pad's length. However, this does not occur. #wrapper { clear:both; padding-top:0.5em; /*padding-left:50px;*/ height: 100%; background-color: rgba(255,255,255,0.4); -moz-border-radius: 20px 20px 0px 0px; -webkit-border-radius: 20px 20px 0px 0px; border-radius: 20px 20px 0px 0px; } #pad { margin-top: 25px; -moz-border-radius: 5px; border: solid 1px #DDD; margin-left:25px; padding-left:25px; margin-right:25px; padding-right:25px; margin-bottom:2em; } This is the javascript function: function preview() { var id1=$("#input1").val(); var id2=$("#input2").val(); var id3=$("#input3").val(); var id4=$("#input4").val(); var id5=$("#input5").val(); if(id1!= null && id1!="") { if( $("#preview1").attr("src")!=id1) { $("#preview1").attr("src",id1); $("#preview1").fadeIn("slow"); } } else { $("#preview1").attr("src",""); $("#preview1").fadeOut("slow"); } if(id2!= null && id2!="") { if( $("#preview2").attr("src")!=id2) { $("#preview2").attr("src",id2); $("#preview2").fadeIn("slow"); } } else { $("#preview2").attr("src",""); $("#preview2").fadeOut("slow"); } if(id3!= null && id3!="") { if( $("#preview3").attr("src")!=id3) { $("#preview3").attr("src",id3); $("#preview3").fadeIn("slow"); } } else { $("#preview3").attr("src",""); $("#preview3").fadeOut("slow"); } if(id4!= null && id4!="") { if( $("#preview4").attr("src")!=id4) { $("#preview4").attr("src",id4); $("#preview4").fadeIn("slow"); } } else { $("#preview4").attr("src",""); $("#preview4").fadeOut("slow"); } if(id5!= null && id5!="") { if( $("#preview5").attr("src")!=id5) { $("#preview5").attr("src",id5); $("#preview5").fadeIn("slow"); } } else { $("#preview5").attr("src",""); $("#preview5").fadeOut("slow"); } setTimeout("preview()",1000); $("#wrapper").attr("height",$(document).attr("height")); } http://surveys.mylifeisberkeley.com/

    Read the article

  • reload a div after submitting a form

    - by pradeep
    i have code like this. which is actually a form .which lets user updates his ratings . once he clicks on update or save . i do a ajax and save his ratings and give him the success message. but how can i refresh this div to show his new ratings and i need to block update / save for this user for next 2 mins .how do i do it ? i use jquery framework $myresult .= ''; $myresult .= '<form name =\'form1\' id=\'form1\' method = \'POST\' action=\''.$_SERVER['php_self'] .'\'>'; /* actual rating table - start - actual rate/update */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; unset($i); /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; /*fetch ratings and comments - 1st make it to null */ $indfeature = 0; $comment = ''; $indfeature = $user_ratings['rating'.$i]; if($indfeature == NULL){ $indfeature = 0; } $comment = $user_ratings['rating'.$i.'_comment']; $myresult .= '<td width=\'22%\'>'; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature.' )'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; if(($userId != '0') && (is_array($user_ratings))) { $tocheck = $indfeature; } else { $tocheck = '0'; } for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'rating'.$i.'\' id=\'rating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' '.$disabled.' \' />'; } /* for k loop end */ $myresult .= '</td>'; $myresult .= '<td width=\'40%\'>'; $myresult .= '<input title=\'Reason for this Rating.. \'type=\'text\' size=\'25\' name=\'comment'.$i.'\' id=\'comment'.$i.'\' style=\'display:;\' maxlength=\'255\' value="'.$comment.'">'; $myresult .= '</td>'; $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; if(($userId != '0') && (is_array($user_ratings))) { $myresult .= '<input type=\'button\' id=\'update_form\' value=\'Update\'>'; } else { $myresult .= '<input type=\'button\' id=\'save_form\' value=\'Save\'>'; } $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</form>'; /*end the form to take ratings */ $myresult .= '</div>'; /*end 2nd tab */

    Read the article

  • Grabbing all <a> tags in a specific div and displaying them

    - by Taylor Swyter
    So I'v got a small problem with my portfolio site (you can see it at here) When you click on a portfolio piece, a top section opens up to reveal the details (Title, year, role, description) as well as the photos. I'v been able to get each project to replace all the text data, but I can't seem to get the images to load into the thumbnails. I have been able to get the last image i'm looking for in all of the images on the site, but not display each photo for each project. Here's the HTML i'm working with: <section id="details"> <div class="pagewrapper"> <section id="main-img"> <article id="big-img"> <img src="" alt="big-img" /> </article> <article class="small-img-container"> <a href="#"><img src="#" alt="smallimg" class="small-img" /></a> </article> </section> <section id="description"> <h3></h3> <h4></h4> <h5></h5> <p></p> </section> </div> <div class="clear"></div> </section> <section id="portfolio"> <div class="pagewrapper"> <h2 class="sectionTitle">Portfolio</h2> <div class="thumb"> <a class="small" href="#" title="David Lockwood Music" data-year="2010" data-role="Sole Wordpress Developer" data-description="David Lockwood is a musician and an educator based in New Hampshire who came to me needing a website for his musical career. I fully developed his site using Wordpress as a CMS, creating a custom template based on the design by Jeremiah Louf. Jeremiah and I worked together on the website's UX design."><img src="images_original/davidcover.png" alt="thumb" /> <div class="hide"> <a href="images/davidlockwood/homepage.png" ></a> <a href="images/davidlockwood/blog.png"></a> <a href="images/davidlockwood/shows.png"></a> <a href="images/davidlockwood/bio.png"></a> <a href="images/davidlockwood/photos.png"></a> </div> <h3>David Lockwood Music</h3> <div class="clear"></div> </a> </div><!--thumb--> and here's the jQuery: $(document).ready(function(){ var proj = {}; $('.thumb a').click(function() { $('#details').slideDown(1000); $('.hide a').each(function() { proj.img = $(this).attr("href"); $('.small-img-container img').attr('src',proj.img); }); alert("the image is " + proj.img);//is it getting the image URLS? proj.title = $(this).attr("title"); proj.year = $(this).attr("data-year"); proj.role = $(this).attr("data-role"); proj.description = $(this).attr("data-description"); $('#description h3').text(proj.title); $('#description h4').text(proj.year); $('#description h5').text(proj.role); $('#description p').text(proj.description); }); }); Anyone have any idea how I grab just the images for the specific project, display them all as thumbnails and then make those thumbnail clickable to see the bigger image? Thanks!

    Read the article

  • Sidebar with CSS3 transform

    - by Malcoda
    Goal I'm working on a collapsible sidebar using jQuery for animation. I would like to have vertical text on the sidebar that acts as a label and can swap on the animateOut/animateIn effect. Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead. Problem The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg) so that doesn't work. I then tried to set the width (hoping it would expand vertically, acting as height), but that has an odd effect of causing the width of my parent container to expand as well. Fix? Anyone know why this happens and also what the fix/workaround could be without setting max-widths and overflow: hidden? I've got a fairly good understanding of both html elements behavior and css3, but this is stumping me. Live Example Here's a fiddle that demonstrates my problem: Fiddle The collapse-pane class is what I have rotated and contains the span I have my text inside. You'll notice it has a width set, that widens the border, but also affects the parent container. The code: CSS: .right-panel{ position:fixed; right:0; top:0; bottom:0; border:1px solid #ccc; background-color:#efefef; } .collapse-pane{ margin-top:50px; width:30px; border:1px solid #999; cursor:pointer; /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .collapse-pane span{ padding:5px; } HTML <div class="right-panel"> <div class="collapse-pane"> <span class="expand">Expand</span> </div> <div style="width:0;" class="panel-body"> <div style="display:none;" class="panel-body-inner"> adsfasdfasdf </div> </div> </div> JavaScript (Thought not really relevant) $(document).ready(function(){ var height = $(".right-panel").height(); $(".collapse-pane").css({marginTop: height/2 - 20}); $('.collapse-pane').click(function(){ if($(".collapse-pane span").html() == "Expand"){ $(".panel-body").animate({width:200}, 400); $(".panel-body-inner").fadeIn(500); $(".collapse-pane span").html("Collapse"); }else{ $(".panel-body").animate({width:00}, 400); $(".panel-body-inner").fadeOut(300); $(".collapse-pane span").html("Expand"); } }); }); I hope this was clear... Thanks for any help!

    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

  • center menu within the 960 grid

    - by Kyle Monti
    I have been working on 960 grid,(http://960.gs/) and I used an old style menu i've used in the past from a few years ago and for some reason with the 960 grid, the menu is floating left and I want it centered. ul#menu { width:940px; height:61px; background: url(../images/menu_bg.png) no-repeat; list-style:none; padding-top:0; padding-left:0; margin: 0; } ul#menu li { float:left; } ul#menu li a { background: url(../images/menu_splice_color.png) no-repeat scroll top left; display:block; height:61px; position:relative; } ul#menu li a.shel { width:135px; } ul#menu li a.golf { width:84px; background-position:-135px 0px; } ul#menu li a.pro { width:119px; background-position:-219px 0px; } ul#menu li a.event { width:94px; background-position:-338px 0px; } ul#menu li a.member { width:148px; background-position:-432px 0px; } ul#menu li a.bistro { width:91px; background-position:-580px 0px; } ul#menu li a.contact { width:115px; background-position:-671px 0px; } ul#menu li a span { background: url(../images/menu_splice_color.png) no-repeat scroll bottom left; display:block; position:absolute; top:0; left:0px; height:100%; width:100%; z-index:100; } ul#menu li a.shel span { background-position:0px -61px; } ul#menu li a.golf span { background-position:-135px -61px; } ul#menu li a.pro span { background-position:-219px -61px; } ul#menu li a.events span { background-position:-338px -61px; } ul#menu li a.member span { background-position:-432px -61px; } ul#menu li a.bistro span { background-position:-580px -61px; } ul#menu li a.contact span { background-position:-672px -61px; } and my generic html markup is <div class="container_16"> <!-- Navigation Start --> <div class="grid_16"> <ul id="menu"> <li><a href="#" class="shel"><span></span></a></li> <li><a href="#" class="golf"><span></span></a></li> <li><a href="#" class="pro"><span></span></a></li> <li><a href="#" class="events"><span></span></a></li> <li><a href="#" class="member"><span></span></a></li> <li><a href="#" class="bistro"><span></span></a></li> <li><a href="#" class="contact"><span></span></a></li> </ul> </div> <div class="clear"></div> </div> And I use jquery animations to roll over the images. $(function() { $("ul#menu span").css("opacity","0"); $("ul#menu span").hover(function () { $(this).stop().animate({ opacity: 1 }, "slow"); }, function () { $(this).stop().animate({ opacity: 0 }, "slow"); }); });

    Read the article

  • Restructuring html with javascript

    - by tolborg
    I have a regular unordered list of links, which I would like to change using js <ul> <li><a href="#">Theme 1</a></li> <li><a href="#">Theme 2</a></li> <li><a href="#">Theme 3</a></li> <li><a href="#">Theme 4</a></li> <li><a href="#">Theme 5</a></li> <li><a href="#">Theme 6</a></li> <li><a href="#">Theme 7</a></li> <li><a href="#">Theme 8</a></li> <li><a href="#">Theme 9</a></li> <li><a href="#">Theme 10</a></li> <li><a href="#">Theme 11</a></li> <li><a href="#">Theme 12</a></li> </ul> I would like the following output: <div class="themes__row"> <div class="themes__item><a href="#">Theme 1</a></div> <div class="themes__item><a href="#">Theme 2</a></div> <div class="themes__item><a href="#">Theme 3</a></div> <div class="themes__item><a href="#">Theme 4</a></div> </div> <div class="themes__row"> <div class="themes__item><a href="#">Theme 5</a></div> <div class="themes__item><a href="#">Theme 6</a></div> <div class="themes__item><a href="#">Theme 7</a></div> <div class="themes__item><a href="#">Theme 8</a></div> </div> <div class="themes__row"> <div class="themes__item><a href="#">Theme 9</a></div> <div class="themes__item><a href="#">Theme 10</a></div> <div class="themes__item><a href="#">Theme 11</a></div> <div class="themes__item><a href="#">Theme 12</a></div> </div> I have tried a few different solutions back and forth, but it ends up being really messy, so I dont really have any code to show. How is this done in a clever way? The site is using jQuery 1.4.4 if that matters.

    Read the article

  • Ajax using Rails

    - by Steve
    Hi, I have a favourite and un-favourite functionality in my application and I am using jQuery. This functionality works partially. The page gets loaded, and when I click the 'favourite' button(it is inside add_favourite_div element), it sends a XHR request and the post is set as favourite. Then a new div called "remove_favourite_div" replaces its place.Now when I click the remove favourite(which is part of remove_favourite_div), it sends a normal http request inside of xhr. The structure when the page gets loaded first time <div id="favourite"> <div id="add_favourite_div"> <form method="post" id="add_favourite" action="/viewpost/add_favourite"> <div style="margin: 0pt; padding: 0pt; display: inline;"> <input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" name="authenticity_token"> </div> <input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id"> <input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id"> <input type="submit" value="Favourite" name="commit"><br> </form> </div> </div> DOM after clicking on the unfavourite button <div id="favourite"> <div id="remove_favourite_div"> <form method="post" id="remove_favourite" action="/viewpost/remove_favourite"> <div style="margin: 0pt; padding: 0pt; display: inline;"> <input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" name="authenticity_token"> </div> <input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id"> <input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id"> <input type="submit" value="UnFavourite" name="commit"><br> </form> </div> </div> In my application.js, I have two functions to trigger the xhr request $("#add_favourite").submit(function(){ alert("add favourite"); action = $(this).attr("action") $.post(action,$(this).serialize(),null,"script"); return false; }); $("#remove_favourite").submit(function(){ alert("remove favourite"); action = $(this).attr("action"); $.post(action,$(this).serialize(),null,"script"); return false; }); Here, when the post is initially not a favourite, favourite button is displayed and when i clicked on the button, $("#add_favourite").submit gets called and unfavourite form is displayed correctly, but now when I click on the un-favourite button, $("#remove_favourite").submit does not get called. The whole scenario is true in both ways, I mean favourite-Unfavourite and Unfavourite-favourite Can someone please help me to solve this Thanks

    Read the article

  • if statement to check available elements

    - by nicmare
    Hi there, i allways found an answer here just be reading the threads but now its time for my very first thread because i was unable to find related questions: this is my target code: <li> <span class="panel"> <a href="…" class="image" rel="group"> <img title="…" src="…" alt="…" width="128" height="96" /> </a> <span class="sizes"> <span class="button"> <a href="#" class="size1" rel="…" title="1">9x13</a> </span> <span class="button"> <a href="#" class="size2" rel="…" title="3">10x15</a> </span> <span class="button"> <a href="#" class="size3" rel="…" title="6">20x30</a> </span> </span> </span> <a href="…" class="image" rel="group"> <span class="added"></span> <img title="…" src="…" alt="…" width="128" height="96" class="thumbnail" /> </a> </li> i add two "span" elements through jquery: $('.sizes a').click( function (e) { e.preventDefault(); $(this).after("<span class='checked'></span><span class='remove'></span>"); } ); the maximum amount of those s are 3 times in a wrapped div. so i am trying to do is the following: $(".remove").live('click', function(){ $(this).hide(); $(this).prev().hide(); // hide checked span if ($(this).parent().parent().children().children().each().hasClass('checked')) { $(this).parent().parent().parent().next().children(".added").hide(); } } ); of course my if statement is crap. i try it in my own words: if there are more than one span(class=remove) in span(class=panel) then nothing should happen. but if there is just one span(class=remove) left in span(class=panel) THEN should be hidden how do i achieve this? there is an online demonstration of this: http://bit.ly/972be4 as you can see, every time when i hit a button below an image, the image gets marked by a label. and i want to hide this label (class=added) when no button is selected Thank you very much! best wishes from germany

    Read the article

  • Unable to .append(); without eliminating all the spaces in the code

    - by Adam
    $('#form_holder').append('<div id="spec_id_'+count+'"><div class="avail_container"> <input class="avail_fields" type="checkbox" checked="checked" name="special'+count+'" /><span class="avail_field_label">Special Date</span></div> <div class="avail_container"><div class="avail_time_container"><span class="field_label">Time</span> <select name="special'+count+'_time_from_1"> <?php for ($t = 0; $t<24; $t++){ ?> <option value="<?php echo $t; ?>"><?php echo $t; ?></option> <?php } ?> </select>: <select name="special'+count+'_time_from_2"> <?php for ($t = 0; $t<60; $t+=15){ ?> <option value="<?php if($t == 0){ echo $t . '' . $t; }else{ echo $t; } ?>"><?php if($t == 0){ echo $t . '' . $t; }else{ echo $t; } ?></option> <?php } ?> </select> <span class="field_label">to</span> <select name="special'+count+'_time_to_1"> <?php for ($t = 0; $t<24; $t++){ ?> <option value="<?php echo $t; ?>"><?php echo $t; ?></option> <?php } ?> </select>: <select name="special'+count+'_time_to_2"> <?php for ($t = 0; $t<60; $t+=15){ ?> <option value="<?php if($t == 0){ echo $t . '' . $t; }else{ echo $t; } ?>"><?php if($t == 0){ echo $t . '' . $t; }else{ echo $t; } ?></option> <?php } ?> </select> </div> </div> </div>'); I'm assuming javascript or jquery does not like breaks like I have here, because all my javascript code does not work. What would be an alternative to eliminating all the spaces, which would make viewing the code difficult?

    Read the article

  • How to hide the div on any click outside

    - by user1720527
    I am starting up on jquery and was tryin to create a simple div hide and show effect. The effects seem to work fine but i need that when user clicks on any other part of the document(i. except the hide/show box), the box should hide back. This is the jsfiddle : http://jsfiddle.net/39DzJ/. I have not styled it properly. I wanted the effects to work first. Can anyone help me out ? Here's the HTML code : <style> #mail_floater { background:#fce8bd; height:88px; width:342px; border:1px solid #b7ad02; border-radius:5px; position:absolute; left:200px; top:50px; border-top:none; z-index:100; padding:0; } #subscribe_user { width:248px; height:16px; border:1px solid #b7ad02; } #cust_care_floater { background:#fce8bd; height:12px; width:108px; border:1px solid #b7ad02; border-radius:2px; border-bottom-left-radius:2px; position:absolute; left:450px; top:30px; border-top:none; z-index:100; clear:both; font-family:Tahoma, Geneva, sans-serif; font-size:10px; font-weight:bold; color:#036f05; box-shadow:1px 1px 3px #ccc inset; } #closer { float:right; margin-right:5px; margin-top:2px; width:19px; height:19px; background:url(../images/close.png) no-repeat; } </style> </head> <body> <a href="#" id="subscribe">Subscribe</a> <a href="#" id="customer_care">Customer care</a> <div id="mail_floater"> <h5>Email</h5> <div id="closer"></div> <div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span> <input type="submit" id="subscribe_me" value="Done" /></form></div> </div> <div id="cust_care_floater"> <span style="padding:0px 10px 0 10px;">033-993-99920</span> </div> </body>? The javascript code : $(document).ready ( function() { var disp_box=$('#mail_floater'); var sub_link=$('#subscribe'); var disp_box_2=$('#cust_care_floater'); var sub_link_2=$('#customer_care'); disp_box.hide(); disp_box_2.hide(); sub_link.click ( function() { disp_box.show(); }); disp_box.find('#closer').click ( function() { disp_box.hide(); }); sub_link_2.click ( function() { disp_box_2.show(); }); });

    Read the article

< Previous Page | 479 480 481 482 483 484 485 486 487 488 489 490  | Next Page >