Search Results

Search found 26887 results on 1076 pages for 'jquery ui widget factory'.

Page 556/1076 | < Previous Page | 552 553 554 555 556 557 558 559 560 561 562 563  | Next Page >

  • dynatree: how can i select child node programmatically

    - by Muhammad Adeel Zahid
    hello everyone i m using jquery's dynaTree in my application and i want to select the all the child nodes programmably when a node is selected. the structure of my tree is as follows <div id = "tree"> <ul> <li>package 1 <ul> <li>module 1.1 <ul> <li> document 1.1.1</li> <li> document 1.1.2</li> </ul> </li> <li>module 1.2 <ul> <li>document 1.2.1</li> <li>document 1.2.2</li> </ul> </li> </ul> </li> <li> package 2 <ul> <li> module 2.1 <ul> <li>document 2.1.1</li> <li>document 2.1.1</li> </ul> </li> </ul> </li> </ul> </div> now what i want is that when i click on tree node with title "package 1" all its child nodes i.e (module 1.1, document 1.1.1, document 1.1.2, module 1.2, document 1.2.1, document 1.2.2) should also be selected below is the approach i tried to use $("#tree").dynatree({ onSelect: function(flag, dtnode) { // This will happen each time a check box is selected/deselected var selectedNodes = dtnode.tree.getSelectedNodes(); var selectedKeys = $.map(selectedNodes, function(node) { //alert(node.data.key); return node.data.key; }); // Set the hidden input field's value to the selected items $('#SelectedItems').val(selectedKeys.join(",")); if (flag) { child = dtnode.childList; alert(child.length); for (i = 0; i < child.length; i++) { var x = child[i].select(true); alert(i); } } }, checkbox: true, onActivate: function(dtnode) { //alert("You activated " + dtnode.data.key); } }); in the if(flag) condition i get all the child nodes of element that is selected by user and it gives me the correct value that i can see from alert(child.length) statement. then i run the loop to select all the children but loop never goes beyond the statement var x = child[i].select(true); and i can never see the statement alert(i) being executed. the result of above statement is that if i select package 1, module 1.1 and document 1.1.1 is also selected but never does it execute alert(i) statement neither other children of package 1 are selected. in my view when first time child[i].select(true) statement is executed it also triggers the on select event of its children thus making a recursion kind of thing is my thinking correct? no matter recursion or what why on earth does it not complete the loop and execute very next instruction alert(i). please help me in solving this problem. i m dying to see that alert any suggestion and help is highly appriciated thanks Adeel

    Read the article

  • "'0.offsetWidth' is null or not an object" - Coda Slider - Javascript Error Question

    - by bgadoci
    I implemented the Coda Slider tutorial successfully that is located here: http://jqueryfordesigners.com/coda-slider-effect/ The slider works great but I am getting a javascript error that I am not sure how to fix. The error says: '0.offsetWidth' is null or not an object coda-slider.js, line 19 character 3 Not sure how to fix it. Anyone have any ideas? Here is my js and css (don't think I need to upload the HTML but let me know if that helps). JS (coda-slider.js) // when the DOM is ready... $(document).ready(function () { var $panels = $('#slider .scrollContainer > div'); var $container = $('#slider .scrollContainer'); // if false, we'll float all the panels left and fix the width // of the container var horizontal = true; // float the panels left if we're going horizontal if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' // IE fix to ensure overflow is hidden }); // calculate a new width for the container (so it holds all panels) $container.css('width', $panels[0].offsetWidth * $panels.length); <------line 19 } // collect the scroll object, at the same time apply the hidden overflow // to remove the default scrollbars that will appear var $scroll = $('#slider .scroll').css('overflow', 'hidden'); // apply our left + right buttons $scroll .before('<img class="scrollButtons left" src="/images/layout/navigation/scroll_left.png" />') .after('<img class="scrollButtons right" src="/images/layout/navigation/scroll_right.png" />'); // handle nav selection function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('#slider .navigation').find('a').click(selectNav); // go find the navigation link that has this target and select the nav function trigger(data) { var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('ul.navigation a:first').click(); } // offset is used to move to *exactly* the right place, since I'm using // padding on my example, I need to subtract the amount of padding to // the offset. Try removing this to get a good idea of the effect var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, // the element that has the overflow // can be a selector which will be relative to the target items: $panels, navigation: '.navigation a', // selectors are NOT relative to document, i.e. make sure they're unique prev: 'img.left', next: 'img.right', // allow the scroll effect to run both directions axis: 'xy', onAfter: trigger, // our final callback offset: offset, // duration of the sliding effect duration: 500, // easing - can be used with the easing plugin: // http://gsgd.co.uk/sandbox/jquery/easing/ easing: 'swing' }; // apply serialScroll to the slider - we chose this plugin because it // supports// the indexed next and previous scroll along with hooking // in to our navigation. $('#slider').serialScroll(scrollOptions); // now apply localScroll to hook any other arbitrary links to trigger // the effect $.localScroll(scrollOptions); // finally, if the URL has a hash, move the slider in to position, // setting the duration to 1 because I don't want it to scroll in the // very first page load. We don't always need this, but it ensures // the positioning is absolutely spot on when the pages loads. scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); }); CSS #slider { margin-left: 35px; position: relative; width: 875px; } .scroll { position: relative; width: 875px; height: 268px; overflow: auto; /* fix for IE to respect overflow */ background: #FFFFFF scroll 0; } .scrollContainer div.panel { position: relative; height: 210px; width: 875px; /* change to 560px if not using JS to remove rh.scroll */ } .scrollButtons { position: absolute; top: 115px; cursor: pointer; } .scrollButtons.left { left: -20px; } .scrollButtons.right { right: -20px; }

    Read the article

  • Populate google.visualization.DataTable for a AnnotatedTimeLine using JSON

    - by Lucifer
    Hi I have a HttpHandler which returns some JSON in (i think) the correct format for a google.visualization.DataTable, but the AnnotatedTimeLine fails to work? This is the JSON returned by the Handler: {cols: [{id: 'DATE', label: 'Date', type: 'date'}, {id: 'KEYWORD51', label: 'vw cheltenham', type: 'number'}, {id: 'KEYWORD52', label: 'volkswagen cheltenham', type: 'number'}, {id: 'KEYWORD61', label: 'vw dealer cheltenham', type: 'number'}], rows: [{c: [{v: new Date(2010, 3, 13)}, {v: 20}, {v: 1}, {v: 2}]}, {c: [{v: new Date(2010, 3, 14)}, {v: 19}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 15)}, {v: 19}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 16)}, {v: 18}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 17)}, {v: 17}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 18)}, {v: 17}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 19)}, {v: 12}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 20)}, {v: 13}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 21)}, {v: 11}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 22)}, {v: 10}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 23)}, {v: 10}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 24)}, {v: 8}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 25)}, {v: 6}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 26)}, {v: 6}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 27)}, {v: 5}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 28)}, {v: 4}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 29)}, {v: 4}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 30)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 1)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 2)}, {v: 1}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 3)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 4)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 5)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 6)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 7)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 8)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 9)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 10)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 11)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 12)}, {v: 2}, {v: 1}, {v: 1}]}]} This is the Javascript, I used JQuery to get the JSON, have also tried $.getJSON() google.load('visualization', '1', { 'packages': ['annotatedtimeline'] }); google.setOnLoadCallback(loadGraph); function loadGraph() { $.get("/GraphDataHandler.axd", function(response) { drawGraph(response); }); } function drawGraph(response) { var visualization = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); var data = new google.visualization.DataTable(response, 0.6); visualization.draw(data, { title: 'Rankings', titleX: 'Date', titleY: 'Position', displayAnnotations: false, allowRedraw: true }); } But, if I write the same JSON to the page like below it works fine!? <script type="text/javascript"> //<![CDATA[ var gData = {cols: [{id: 'DATE', label: 'Date', type: 'date'}, {id: 'KEYWORD51', label: 'vw cheltenham', type: 'number'}], rows: [{c: [{v: new Date(2010, 3, 13)}, {v: 20}]}, {c: [{v: new Date(2010, 3, 14)}, {v: 19}]}, {c: [{v: new Date(2010, 3, 15)}, {v: 19}]}, {c: [{v: new Date(2010, 3, 16)}, {v: 18}]}, {c: [{v: new Date(2010, 3, 17)}, {v: 17}]}, {c: [{v: new Date(2010, 3, 18)}, {v: 17}]}, {c: [{v: new Date(2010, 3, 19)}, {v: 12}]}, {c: [{v: new Date(2010, 3, 20)}, {v: 13}]}, {c: [{v: new Date(2010, 3, 21)}, {v: 11}]}, {c: [{v: new Date(2010, 3, 22)}, {v: 10}]}, {c: [{v: new Date(2010, 3, 23)}, {v: 10}]}, {c: [{v: new Date(2010, 3, 24)}, {v: 8}]}, {c: [{v: new Date(2010, 3, 25)}, {v: 6}]}, {c: [{v: new Date(2010, 3, 26)}, {v: 6}]}, {c: [{v: new Date(2010, 3, 27)}, {v: 5}]}, {c: [{v: new Date(2010, 3, 28)}, {v: 4}]}, {c: [{v: new Date(2010, 3, 29)}, {v: 4}]}, {c: [{v: new Date(2010, 3, 30)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 1)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 2)}, {v: 1}]}, {c: [{v: new Date(2010, 4, 3)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 4)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 5)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 6)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 7)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 8)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 9)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 10)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 11)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 12)}, {v: 2}]}]}; //]]> </script> Please advise how I can get it to work correctly using a the JSON calls? Thanks

    Read the article

  • MVC 2 Ajax.Beginform passes returned Html 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

  • Getting values from Dynamic elements.

    - by nCdy
    I'm adding some dynamic elements to my WebApp this way : (Language used is Nemerele (It has a simple C#-like syntax)) unless (GridView1.Rows.Count==0) { foreach(index with row = GridView1.Rows[index] in [0..GridView1.Rows.Count-1]) { row.Cells[0].Controls.Add ({ def TB = TextBox(); TB.EnableViewState = false; unless(row.Cells[0].Text == "&nbsp;") { TB.Text = row.Cells[0].Text; row.Cells[0].Text = ""; } TB.ID=TB.ClientID; TB.Width = 60; TB }); row.Cells[0].Controls.Add ({ def B = Button(); B.EnableViewState = false; B.Width = 80; B.Text = "?????????"; B.UseSubmitBehavior=false; // Makes no sense //B.OnClientClick="select(5);"; // HERE I CAN KNOW ABOUT TB.ID //B.Click+=EventHandler(fun(_,_) : void { }); // POST BACK KILL THAT ALL B }); } } This textboxes must make first field of GridView editable so ... but now I need to save a values. I can't do it on server side because any postback will Destroy all dynamic elements so I must do it without Post Back. So I try ... <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> function CallPageMethod(methodName, onSuccess, onFail) { var args = ''; var l = arguments.length; if (l > 3) { for (var i = 3; i < l - 1; i += 2) { if (args.length != 0) args += ','; args += '"' + arguments[i] + '":"' + arguments[i + 1] + '"'; } } var loc = window.location.href; loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Report.aspx" : loc; $.ajax({ type: "POST", url: loc + "/" + methodName, data: "{" + args + "}", contentType: "application/json; charset=utf-8", dataType: "json", success: onSuccess, fail: onFail }); } function select(index) { var id = $("#id" + index).html(); CallPageMethod("SelectBook", success, fail, "id",id); } function success(response) { alert(response.d); } function fail(response) { alert("&#1054;&#1096;&#1080;&#1073;&#1082;&#1072;."); } </script> So... here is a trouble string : var id = $("#id" + index).html(); I know what is ID here : TB.ID=TB.ClientID; (when I add it) but I have no idea how to send it on Web Form. If I can add something like this div : <div id="Result" onclick="select(<%= " TB.ID " %>);"> Click here. </div> from the code it will be really goal, but I can't add this element as from CodeBehind as a dynamic element. So how can I transfer TB.ID or TB.ClientID to some static div Or how can I add some clickable dynamic element without PostBack to not destroy all my dynamic elements. Thank you.

    Read the article

  • Vertical textes inside of table headers with respect of a JavaScript based on SVG library

    - by Oleg
    I use jqGrid with many columns contains Boolean information, which are displayed as checkboxes inside of table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm as an example). To display information more compact 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 texts looks not nice enough. I was asked from users why the texted displayed so strange. So I think about 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 is not very easy. I need only display vertical texts (-90 grad, from bottom to up) and use if possible without working in mode of absolute position. So one more times my question: I need have a possibility to display vertical texts (-90 grad rotation) inside of <td> element of table header. I want use a JavaScript based SVG library like SVG Web or Raphaël. The solution must support on IE6. Have somebody a good reference to example which could help me to do this? If somebody post 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, Chrome */ -moz-transform: rotate(-90deg); /* Firefox */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet Explorer: */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 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

  • How can I make a div expand on click with only one open at a time?

    - by imHavoc
    As shown in here: http://www.learningjquery.com/2007/03/accordion-madness. But I need help to edit it so that it will work for my circumstances. Sample HTML <div class="row even"> <div class="info"> <div class="class">CK1</div> <div class="teacher_chinese">??</div> <div class="teacher_english">Teacher Name</div> <div class="assistant_chinese">??</div> <div class="assistant_english">Assistant Name</div> <div class="room">Room 00</div> <div class="book"></div> </div> <div class="chapters"> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=1"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=2"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=3"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=4"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=5"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=6"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=7"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=8"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=9"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=10"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=11"><span class="chapter">??</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=12"><span class="chapter">??</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=13"><span class="chapter">??</span></a> </div> </div> JQUERY [Work In Progress] $(document).ready(function() { $('div#table_cantonese .chapters').hide(); $('div#table_cantonese .book').click(function() { var $nextDiv = $(this).next(); var $visibleSiblings = $nextDiv.siblings('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('fast', function() { $nextDiv.slideToggle('fast'); }); } else { $nextDiv.slideToggle('fast'); } }); }); So when the end-user click on div.book, div.chapters will expand. And only one div.chapters will be shown at a time. So if a div.chapters is already open, then it will close the open one first before animating the one the user clicked on.

    Read the article

  • .animate question/help

    - by Josh
    So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking. Currently, when you hover over each of the links they drop down (padding is increased). Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on. I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly. Here is what I've been working on, ANY help would be appreciated! Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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="jquery.js"></script> <script type="text/javascript"> $(function() { $("#nav li > a").hover(function() { $(this).stop().animate({paddingTop: "100px"}, 100); }, function() { $(this).stop().animate({paddingTop: "10px"}, 200); }); }); </script> <style type="text/css"> #nav { position: absolute; top: 0; left: 60px; padding: 0; margin: 0; list-style: none; } #nav li { display: inline; } #nav li a { float: left; display: block; color: #555; text-decoration: none; padding: 10px 30px; background-color: #d1d1d1; border-top: none; } </style> </head> <body> <div id="wrap"> <ul id="nav"> <li><a href="">test1</a></li> <li><a href="">test2</a></li> <li><a href="">test3</a></li> <li><a href="">test4</a></li> </ul> </div> </body> </html>

    Read the article

  • Can overlay work with a portion of a page that has codebehind functionallity?

    - by rolando
    i have a complete DIV in wich a have a gridview and a multiview with codebehind action: <cc3:CRDataSource EnableViewState="true" ID="DsOpciones" runat="server" SQLSelect="CartelElectronico,OpcionSeleccion_Todos"> <Parameters> <asp:QueryStringParameter Name="@FactorEvaluacionId" QueryStringField="FactorEvaluacionId" Type="String" /> </Parameters> </cc3:CRDataSource> <cc3:CRGridView ID="gvTipoFactorSeleccion" runat="server" DataKeyNames="OpcionSeleccionID" AllowPaging="false" AllowSorting="False" AutoGenerateColumns="False" Titulo="Opciones de Factor de Evaluacion" NoRowsMsg="No se encontraron Opciones para el factor de evaluación" CssClass="Table" AllowExport="False" AllowFilter="False" AllowCollapse="True" EnableViewState="False" PageSize="1000000000" DataSourceID="DsOpciones" OnRowUpdating="gvTipoFactorSeleccion_RowUpdating" OnRowDeleting="gvTipoFactorSeleccion_RowDeleting"> <Columns> <asp:BoundField DataField="Nombre" HeaderText="Nombre" SortExpression="Nombre" ItemStyle-HorizontalAlign="Left" /> <asp:BoundField DataField="Puntos" HeaderText="Puntos" ItemStyle-HorizontalAlign="Center" /> <asp:CommandField ButtonType="Link" ShowDeleteButton="true" DeleteText="Eliminar" ShowEditButton="true" EditText="Modificar" UpdateText="Actualizar" CancelText="Cancelar" /> <asp:TemplateField Visible="false"> <ItemTemplate> </ItemTemplate> </asp:TemplateField> </Columns> </cc3:CRGridView> <br /> <table> <tr valign="baseline"> <td class="contratacionTablaSubrayadoTitulosLineas"> <label class="contratacionEtiquetas"> Opción&nbsp;(*) :</label> </td> <td class="contratacionTablaSubrayadoContenidoLineas"> <asp:TextBox ID="tbOpcion" runat="server" ToolTip="Nombre del Factor de la metodología de evaluación" TabIndex="1" MaxLength="100"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ControlToValidate="tbOpcion" ErrorMessage="&nbsp;Debe digitar un nombre para la Opción" Display="Dynamic" CssClass="inlineError" ValidationGroup="InsertarTipoFactorSeleccion" SetFocusOnError="false"></asp:RequiredFieldValidator> </td> </tr> <tr valign="baseline"> <td colspan="2" align="right"> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="contratacionVinculos" ValidationGroup="InsertarTipoFactorSeleccion" OnClick="lbInsertarTipoFactorSeleccion_Click">Insertar</asp:LinkButton>&nbsp;|&nbsp; <asp:LinkButton ID="LinkButton2" runat="server" OnClick="lbCancelarInsertarTipoFactorSeleccion_Click" CssClass="contratacionVinculos" CausesValidation="false">Cancelar</asp:LinkButton> .... Thats just a portion of the div, my question is How can I show that DIV in a jquery overlay without loosing its functionallity? i'm asking because i manage to get it working but when i do a "that-div-postback" the screen loses the DIV and keeps only the background of the overlay. a couple more information: <button class="modalInput button" rel="#prompt"> Buscar</button> <script type="text/javascript"> function pageLoad() { var triggers = $("button.modalInput").overlay({ // some expose tweaks suitable for modal dialogs expose: { color: '#333', loadSpeed: 200, opacity: 0.3, zIndex: 99 }, top: '25%', closeOnClick: true }); } </script> Thanks in advance ;)

    Read the article

  • OpenID and Iframes

    - by Phood
    hey guys, I'm having a little bit of trouble making OpenID work from within an iframe. basically I have some heavy handed content loaded on the main page and I want to build a log in system where the page doesn't need to be reloaded (and thus reload all of that content again). I fell in love with OpenID from using stack exchange websites, and have intergrated it relatively well into other projects. I feel to do what I want to do I would like to try and use an iframe (because new windows make me cry), however I have stumbled at some form of hurdle somewhere near the middle and for the life of me can't work out whats going on... basically I have a form in a jQuery generated DIV and openID form that seems to work to dynamically load an iframe. something along these lines: <script type="text/javascript"> contentboxs = 0; function contentbox() { if (contentboxs == 0){ $('#mainpage').append("<div id='contentbox'><div style='clear:both;' id='oritext'></div><div id='f_content'><iframe src ='' name='framedcontent' width='580' height='600' scrolling='false'></iframe></div></div>"); $('#f_content').hide(); contentboxs++; } else { $('#contentbox-wipe').remove(); $('#contentbox').remove(); contentboxs--; } } function loginpanel(){ contentbox(); if (contentboxs == 1){ $('#oritext').append("<form method='post' action='login.php' name='oidform' target='framedcontent'>Please Select your OpenID Provider: <br/><input type='text' name=\"id\" id='openidbox' /><br /><input type='submit' name='submit' value='Log In' onclick='loginsubmit();' ></form>"); } } function loginsubmit() { $('#oritext').html(''); $('#contentbox').animate({'height':'600px', 'width':'700px', 'margin-top' : '-300px', 'margin-left' : '-350px'},500, 'linear', function() { $('#f_content').show(); }); } </script> <a href='javascript:loginpanel();'>login</a> and as far as I can tell this all works fine. my problem comes in my re-direction to the openID remote sites (again doing it with JS along these lines:) echo("<div><p><center>Redirecting...</center></div>"); echo "<script type='text/javascript'> function delayer() { this.location = '".$url."' } setTimeout('delayer()', 3000) </script>"; sorry this is a bit long winded, but here is my problem (finally): this works fine for some of the OID sites that I have tried, but some are giving me problems: Google won't load at all, Yahoo and mySpace open fine in the iframe then instantly redirect the full window to the home page and the OID page respectively, and wordpress returns an error. I'm assuming that this is a counter measure put in place to stop me stealing login details (thats not what i'm trying to achieve btw, hence the preamble), and thats fair enough, but still bloody aggravating. is there any thing here that i'm doing retardedly, is there some way round this, and if neither of the above, is my only other options to create new windows or build my own login/registration. If you have got this far thank you very much for your time, and I hope you didn't mind too much the spelling mistakes.

    Read the article

  • reuse div container to load images

    - by user295927
    Hi All; What I would like to do: use a single container to load images. As it is now: I have eleven (11) containers in HTML mark-up each with its own div. each container holds 4 images (2 images side by side top and bottom) when link in anchor tag is clicked div with images fades in. /*-- Jquery accordion is used for navigation typical example is below --*/ <li> <a class="head" href="#">commercial/hospitality</a> <ul> <li><a href="#" projectName="project1" projectType="hospitality1" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 1</a> </li> <li><a href="#" projectName="project2" projectType="hospitality2" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 2</a> </li> <li><a href="#" projectName="project3" projectType="hospitality3" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 3</a> </li> </ul> </li> Typical <div> container used for image insertion currently there are 11 of them: <div id="hospitality1" class="current"> <div id="image1"><img src="images/testImage.jpg"/></div> <div id="image2"><img src="images/testImage.jpg"/></div> <div id="image3"><img src="images/testImage.jpg"/></div> <div id="image4"><img src="images/testImage.jpg"/></div> </div> Here is the code I am using at this point, it does work, but is there a better way to do this that will only re-use a single div container for loading the images? $(document).ready(function(){ $('#navigation a').click(function (selected) { var projectType = $(this).attr("projectType"); //projectType var projectName = $(this).attr("projectName"); //projectName var image1 = $(this).attr("image1"); //anchor tag for image number 1 var image2 = $(this).attr("image2"); //anchor tag for image number 2 var image3 = $(this).attr("image3"); //anchor tag for image number 3 var image4 = $(this).attr("image4"); //anchor tag for image number 4 console.log(projectType); //returns type of project console.log(projectName); //returns name of project console.log(image1); //returns 1st image console.log(image2); //returns 2nd image console.log(image3); //returns 3rd image console.log(image4); //returns 4th image $(function() { $(".current").hide(); // hides previous selected image $("#" + projectType ).fadeIn("normal").addClass("current"); }); }); As you can, see the mark up getting quite large. Any help is appreciated. ussteele

    Read the article

  • AJAX Password Change without Refresh

    - by Richard
    I'm trying to implement password change functionality into my website. I've got all the password changing script, validation, etc done. But now I need to prevent the page from going to the script page or refreshing. When the user clicks the submit button, I want nothing to change except a message displaying successfully changed or error. So here's my html: <form id="change_Pass" action="" method="post"> Current Password<input type="password" id="change_password" name="change_password"><br> New Password<input type="password" id="new_password" name="new_password"><br> Verify Password<input type="password" id="verify_password" name="verify_password"><br> <input type="submit" value="Submit" id="change_pass_submit"> </form> And my jquery: $('#change_pass_submit').click(function(){ var $this = $(this); $.ajax({ data: $this.serialize(), // get the form data type: "POST", // GET or POST url: "/Private/change_password.php", // the file to call success: function() { // on success.. //$('#success_div).html(response); // update the DIV alert("good"); }, error: function() { // on error.. //$('#error_div).html(e); // update the DIV alert("bad"); } }); return false; //so it doesn't refresh when submitting the page }); And my php: <?php session_start(); require_once '../classes/Bcrypt.php'; ini_set('display_errors', 'On'); error_reporting(E_ALL | E_STRICT); $usr = $_SESSION["username"]; $old_pwd = $_POST["change_password"]; $new_pwd = $_POST["new_password"]; $new_pwd = Bcrypt::hash($new_pwd); try { $link = new PDO('mysql:host=*;dbname=*;charset=UTF-8','*','*'); $query = "SELECT * FROM Conference WHERE Username = :un"; $stmt = $link->prepare($query); $stmt->bindParam(':un', $usr); $stmt->execute(); $row = $stmt->fetchAll(); $hash = $row[0]["Password"]; $is_correct = Bcrypt::check($old_pwd, $hash); if($is_correct) { $query = "UPDATE Conference SET `Password`=:new_pwd WHERE Username = :usr"; $stmt = $link->prepare($query); $stmt->bindParam(':new_pwd', $new_pwd); $stmt->bindParam(':usr', $usr); $stmt->execute(); return true; } else return false; } catch(PDOException $e) { print "Error!: " . $e->getMessage() . "<br/>"; die(); } But for some reason, when I hit the submit button, the page STILL goes to change_password.php. I have no idea why, i've looked at so many tutorials and my code matches theirs but for some reason mine won't stay on the same page. Where did I go wrong?

    Read the article

  • How to get the selected option value of a drop down box in PHP code

    - by Angeline Aarthi
    I have a dropdown box which lists a set of logos,like flower,butterfly etc. <p class="title1">Logo</p> <select name="logoMenu" class="select" size="7"> <?php foreach($logos as $logo):?> <option id="<?php echo $logo['Subproperty']['id'];?>" value="<?php echo $logo['Subproperty']['values'];?>"><?php echo $logo['Subproperty']['values'];?> </option> <?php endforeach;?> </select> Suppose If I select the logo 'Flower' from the drop down box, I want the flower pic to be displayed in a div.This is the div that I have to display the pictures. <div id="theme_logos" class="float_left spaceleft" style="display:none;"> <?php foreach($defaultLogos as $logo): //if($logo['Subproperty']['values']==clicked option value){?> <img height="50" width="50" src="/FormBuilder/app/webroot/img/themes/<?php echo $logo['Subproperty']['images'];?>" class="float_left user_profile_image user_profile_image" alt="Default50"/> <?php endforeach;?> </div> The problem with this code is that it displaya all the pictures found in the table. Because im My controller code, I give only the property id as that of 'Logo',but do not give which logo. $this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>"Flower")))); Here I have hard coded as 'flower' so that I get the flower picture alone.. If I select the logo from the drop down box, how to pass that selected value to the controller code? Or if I get the selected logo name thro' jquery,how to use that value in the if condition inside the for each loop? someone help me out with this.. I'm using CakePHP framework. $("#logoMenu option").click(function(){ selectedLogo=$(this).attr("value"); $('#subproperty_id').val($(this).attr("id")); if(selectedLogo=="Your logo"){ $("#themes_upload").show(); } else{ alert(selectedLogo); $("#themes_upload").hide(); $("#theme_logos").show(); } }); EDIT Now I have tried an ajax post where I pass the selected logo to the same action of the controller. I get the value when I alert the passed value in the success function of the ajax function. I the picture doesn't appear. $("#logoMenu option").click(function(){ selectedLogo=$(this).attr("value"); $('#subproperty_id').val($(this).attr("id")); if(selectedLogo=="Your logo"){ $("#themes_upload").show(); } else{ alert(selectedLogo); $.ajax({ type: "POST", url: "http://localhost/FormBuilder/index.php/themes/themes/", async: false, data: "selectedLogo="+selectedLogo, success: function(msg){ alert( "Data Saved: " + msg); } }); $("#themes_upload").hide(); $("#theme_logos").show(); } }); function themes(){ $this->set('themes',$this->Theme->find('all')); $logo=$this->params['form']['selectedLogo']; echo "logo:".$logo; $this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>$logo)))); } But when I trry to display the img in the page,it doesn't appear. Is it because the div show command is after the ajax request?

    Read the article

  • <div> of images, retrieved by getJSON, disappear after append()

    - by Midiane
    Hi all I'm working on a GMaps application to retrieve images, via getJSON(), and to populate a popup marker. The following is the markup which I add to the marker dynamically: <div id="images"></div> <div id="CampWindow" style="display:none;width:550px;height:500px;"> <h4 id="camp-title"></h4> <p>View... (all links open in new windows)</p> <ul> <li><a id="camp-hp-link" target="_blank" href="">camp home page</a></li> <li>information: <a id="camp-av-link" target="_blank" href="">availability</a> | <a id="camp-vi-link" target="_blank" href="">vital information</li> </ul> <p id="message"></p> I've been clawing out my eyes and woohoo for the past couple of days, trying to get the images to show inside the CampWindow . Then, I decided to think laterally and to see if the images were being retrieved at all. I then moved the images outside and sure as Bob (Hope), the images were being retrieved and refreshed with every click. So, I decided to the keep the images outside and then once loaded, append it to the CampWindow . It's not working still; when I append the div to the main CampWindow div, the images won't show. I check in Firebug with the pointer thingy and it shows me the images as empty. I try it again with the images outside and it shows the images. I've tried before append and appendTo with no success. Am I missing something here? I have no more woohoo to claw out. Please, please help. marker.clicked = function(marker){ $("#images").html(''); $('#camp-title').text(this.name); $('#camp-hp-link').attr('href', this.url); $('#camp-av-link').attr('href', this.url + '/tourism/availability.php'); $('#camp-vi-link').attr('href', this.url + '/tourism/general.php'); // get resort images via jQuery AJAX call - includes/GetResortImages.inc.php $.getJSON('./includes/GetResortImages.inc.php', { park: this.park_name, camp: this.camp_name }, RetrieveImages); function RetrieveImages (data) { if ('failed' == data.status) { $('#messages').append("<em>We don't have any images for this rest camp right now!</em>"); } else { if ('' != data.camp) { $.each(data, function(key,value){ $("<img/>").attr("src", value).appendTo('#images'); }); } } } //.append($("#images")); $("#CampWindow").show(); var windowContent = $("<html />"); $("#CampWindow").appendTo(windowContent); var infoWindowAnchor = marker.getIcon().infoWindowAnchor; var iconAnchor = marker.getIcon().iconAnchor; var offset = new google.maps.Size(infoWindowAnchor.x-iconAnchor.x,infoWindowAnchor.y-iconAnchor.y); map.openInfoWindowHtml(marker.getLatLng(), windowContent.html(), {pixelOffset:offset}); } markers.push(marker); });

    Read the article

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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 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

  • 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

  • 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

  • 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

  • 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

< Previous Page | 552 553 554 555 556 557 558 559 560 561 562 563  | Next Page >