Search Results

Search found 83746 results on 3350 pages for 'javascript open a window full size (mazimized)'.

Page 573/3350 | < Previous Page | 569 570 571 572 573 574 575 576 577 578 579 580  | Next Page >

  • 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

  • ASP.NET: Button in user control not posting back

    - by Ronnie Overby
    I have a simple user control with this code: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Pager.ascx.cs" Inherits="Pager" %> <table style="width: 100%;"> <tr> <td runat="server" id="PageControls"> <!-- This button has the problem: --> <asp:Button ID="btnPrevPage" runat="server" Text="&larr;" OnClick="btnPrevPage_Click" /> Page <asp:DropDownList runat="server" ID="ddlPage" AutoPostBack="true" OnSelectedIndexChanged="ddlPage_SelectedIndexChanged" /> of <asp:Label ID="lblTotalPages" runat="server" /> <!-- This button has the problem: --> <asp:Button ID="btnNextPage" runat="server" Text="&rarr;" OnClick="btnNextPage_Click" /> </td> <td align="right" runat="server" id="itemsPerPageControls"> <asp:Literal ID="perPageText1" runat="server" /> <asp:DropDownList ID="ddlItemsPerPage" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlItemsPerPage_SelectedIndexChanged" /> <asp:Literal ID="perPageText2" runat="server" /> </td> </tr> </table> As you can see, the 2 buttons are wired to click events, which are defined correctly in the code-behind. Now, here is how I include an instance of the control on my page: <uc:Pager ID="Pager1" runat="server" TotalRecords="100" DisplayItemsPerPage="true" ItemsPerPageChoices="10,25,50,100" ItemsPerPageFormatString="Sessions/Page: {0}" PageSize="25" OnPageChanged="PageChanged" OnPageSizeChanged="PageChanged" /> I noticed though, that the 2 buttons in my user control weren't causing a post back when clicked. The drop down list does cause postback, though. Here is the rendered HTML: <table style="width: 100%;"> <tr> <td id="ctl00_MainContent_Pager1_PageControls" align="left"> <!-- No onclick event! Why? --> <input type="submit" name="ctl00$MainContent$Pager1$btnPrevPage" value="?" id="ctl00_MainContent_Pager1_btnPrevPage" /> Page <select name="ctl00$MainContent$Pager1$ddlPage" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$Pager1$ddlPage\',\'\')', 0)" id="ctl00_MainContent_Pager1_ddlPage"> <option value="1">1</option> <option selected="selected" value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> of <span id="ctl00_MainContent_Pager1_lblTotalPages">6</span> <!-- No onclick event! Why? --> <input type="submit" name="ctl00$MainContent$Pager1$btnNextPage" value="?" id="ctl00_MainContent_Pager1_btnNextPage" /> </td> <td id="ctl00_MainContent_Pager1_itemsPerPageControls" align="right"> Sessions/Page: <select name="ctl00$MainContent$Pager1$ddlItemsPerPage" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$Pager1$ddlItemsPerPage\',\'\')', 0)" id="ctl00_MainContent_Pager1_ddlItemsPerPage"> <option value="10">10</option> <option selected="selected" value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </td> </tr> </table> And, as you can see, there is no onclick attribute being rendered in the button's input elements. Why not?

    Read the article

  • Eclipse (STS), Maven and maven-minify-plugin, can they work together?

    - by CodeReaper
    Hi, I am working on a project where I am in charge of html, css and javascript. I found this maven-minify-plugin that seemed to just what I wanted. Everything is good when I deploy using maven on the server, but when I am using Eclipse (STS, www.springsource.com/products/sts) to run the project on localhost no css nor js file is generated by the plugin. Does anyone have experience with this Maven plugin, so they can tell me if it should be possible or not run on localhost? Does anyone have knowledge of another plugin I can use to (combine and) minify javascript and css files when running on localhost in Eclipse and also when deploying using Maven? Any help appreciated... ----extra information---- I basicly just copied in what it said on the plugin webpage, so I have these bits in my pom.xml: .... <build> <plugins> .... <plugin> <groupId>com.samaxes.maven</groupId> <artifactId>maven-minify-plugin</artifactId> <version>1.1</version> <executions> <execution> <id>default-minify</id> <phase>process-resources</phase> <configuration> <cssFiles> .... <param>forms.css</param> <param>jquery.droppy.css</param> <param>jquery.jgrowl.css</param> </cssFiles> <jsFiles> .... <param>jquery.droppy.js</param> <param>jquery.jgrowl.js</param> </jsFiles> <jsFinalFile>script.js</jsFinalFile> <linebreak>-1</linebreak> <nomunge>false</nomunge> <verbose>false</verbose> <preserveAllSemiColons>false</preserveAllSemiColons> <disableOptimizations>false</disableOptimizations> <bufferSize>4096</bufferSize> </configuration> <goals> <goal>minify</goal> </goals> </execution> </executions> </plugin> </plugins> </build> .... Should/Can I bind the plugin to a difference phase? I just use mvn clean package and move the snapshot into tomcat to deploy on the server. I am unsure on how to explain how I run the webapp on localhost, but here goes. I have a vanilia tomcat, that I defined as a server in Eclipse and then defined that the webapp should always build in that "server".

    Read the article

  • jQuery::Scrollable Div does not work

    - by Legend
    I am trying to create a scrollable DIV using the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <style type="text/css"> div.container { overflow:hidden; width:200px; height:200px; } div.content { position:relative; top:0; } </style> <script type="text/javascript"> $(function(){ $(".container a.up").bind("click", function(){ var topVal = $(this).parents(".container").find(".content").css("top"); $(this).parents(".container").find(".content").css("top", topVal-10); }); $(".container a.dn").bind("click", function(){ var topVal = $(this).parents(".container").find(".content").css("top"); $(this).parents(".container").find(".content").css("top", topVal+10); }); }); </script> </head> <body> <div class="container"> <p> <a href="#" class="up">Up</a> / <a href="#" class="dn">Down</a> </p> <div class="content"> <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> <p>Hello World 4</p> <p>Hello World 5</p> <p>Hello World 6</p> <p>Hello World 7</p> <p>Hello World 8</p> <p>Hello World 9</p> <p>Hello World 10</p> <p>Hello World 10</p> <p>Hello World 11</p> <p>Hello World 12</p> <p>Hello World 13</p> <p>Hello World 14</p> <p>Hello World 15</p> <p>Hello World 16</p> <p>Hello World 17</p> <p>Hello World 18</p> <p>Hello World 19</p> <p>Hello World 20</p> <p>Hello World 21</p> <p>Hello World 22</p> <p>Hello World 23</p> <p>Hello World 24</p> <p>Hello World 25</p> <p>Hello World 26</p> <p>Hello World 27</p> </div> </div> </body> </html> I don't know where I am messing up, but it simply refuses to work. Any suggestions?

    Read the article

  • Problem using form builder & DOM manipulation in Rails with multiple levels of nested partials

    - by Chris Hart
    I'm having a problem using nested partials with dynamic form builder code (from the "complex form example" code on github) in Rails. I have my top level view "new" (where I attempt to generate the template): <% form_for (@transaction_group) do |txngroup_form| %> <%= txngroup_form.error_messages %> <% content_for :jstemplates do -%> <%= "var transaction='#{generate_template(txngroup_form, :transactions)}'" %> <% end -%> <%= render :partial => 'transaction_group', :locals => { :f => txngroup_form, :txn_group => @transaction_group }%> <% end -%> This renders the transaction_group partial: <div class="content"> <% logger.debug "in partial, class name = " + txn_group.class.name %> <% f.fields_for txn_group.transactions do |txn_form| %> <table id="transactions" class="form"> <tr class="header"><td>Price</td><td>Quantity</td></tr> <%= render :partial => 'transaction', :locals => { :tf => txn_form } %> </table> <% end %> <div>&nbsp;</div><div id="container"> <%= link_to 'Add a transaction', '#transaction', :class => "add_nested_item", :rel => "transactions" %> </div> <div>&nbsp;</div> ... which in turn renders the transaction partial: <tr><td><%= tf.text_field :price, :size => 5 %></td> <td><%= tf.text_field :quantity, :size => 2 %></td></tr> The generate_template code looks like this: def generate_html(form_builder, method, options = {}) options[:object] ||= form_builder.object.class.reflect_on_association(method).klass.new options[:partial] ||= method.to_s.singularize options[:form_builder_local] ||= :f form_builder.fields_for(method, options[:object], :child_index => 'NEW_RECORD') do |f| render(:partial => options[:partial], :locals => { options[:form_builder_local] => f }) end end def generate_template(form_builder, method, options = {}) escape_javascript generate_html(form_builder, method, options) end (Obviously my code is not the most elegant - I was trying to get this nested partial thing worked out first.) My problem is that I get an undefined variable exception from the transaction partial when loading the view: /Users/chris/dev/ss/app/views/transaction_groups/_transaction.html.erb:2:in _run_erb_app47views47transaction_groups47_transaction46html46erb_locals_f_object_transaction' /Users/chris/dev/ss/app/helpers/customers_helper.rb:29:in generate_html' /Users/chris/dev/ss/app/helpers/customers_helper.rb:28:in generate_html' /Users/chris/dev/ss/app/helpers/customers_helper.rb:34:in generate_template' /Users/chris/dev/ss/app/views/transaction_groups/new.html.erb:4:in _run_erb_app47views47transaction_groups47new46html46erb' /Users/chris/dev/ss/app/views/transaction_groups/new.html.erb:3:in _run_erb_app47views47transaction_groups47new46html46erb' /Users/chris/dev/ss/app/views/transaction_groups/new.html.erb:1:in _run_erb_app47views47transaction_groups47new46html46erb' /Users/chris/dev/ss/app/controllers/transaction_groups_controller.rb:17:in new' I'm pretty sure this is because the do loop for form_for hasn't executed yet (?)... I'm not sure that my approach to this problem is the best, but I haven't been able to find a better solution for dynamically adding form partials to the DOM. Basically I need a way to add records to a has_many model dynamically on a nested form. Any recommendations on a way to fix this particular problem or (even better!) a cleaner solution are appreciated. Thanks in advance. Chris

    Read the article

  • print individual tables ??

    - by LiveEn
    I am getting values from a database and displaying in a table. Im trying to print the results as individual . Im using the below javascript <script type="text/javascript"> function print_parent(element) { element.parentNode.className = 'print'; window.print(); element.parentNode.className = ''; return false; } </script> The problem that i have is when i try to print all the results it works great.can some one please tell me how can i print each individual table in each result please? below is my php code $sql="select * from cisdb where pids LIKE '%$pids%'"; $result=mysql_query($sql) or die(mysql_error()); if (mysql_num_rows($result)==0) { echo '<b><center>There was no records !</center></b>'."<br>"; } while ($row=mysql_fetch_array($result)) { $cat=str_replace('+', ' ', $row['category']); print "<center>"; print "<table width='472' border='1' align='center' class='noprint'>"; print "<tr>"; print "<td width='150'><div align='center'><a href='#' onclick='return print_parent(this)'>Print</a> </div></td>"; print "<td width='150'><div align='center'><a href='process.php?mode=ed&id={$row['id']}'>Edit</div></td>"; print "<td width='150'><div align='center'><a href='process.php?mode=del&id={$row['id']}' onclick='return confirm('Are you sure you want to delete?')'>Delete</a></div></td>"; print "</tr>"; print "</table><br>"; print "<div id='divToPrint'>"; print"<table width=700 style=height:900 border=1 cellpadding=1 cellspacing=1 bordercolor=#D6D6D6 class=sss title={$row['title']}> <tr> <td height=25 colspan=2 align=left valign=top><strong>Customer:{$row['name']}</strong></td> <td width=183 align=left valign=top><strong>Sales ID:{$row['said']} </strong></td> <td width=100 align=left valign=top><strong>Phone Cord. ID:{$row['pcid']}</strong></td> <td align=left valign=top><strong>Type:{$row['classtype']}</strong></td> </tr> <tr> <td height=25 colspan=2 valign=top><strong>Contact Name: </strong></td> <td colspan=2 valign=top><strong>Email:</strong></td> <td width=154 valign=top><strong>Phone:</strong></td> </tr <tr> <td height=15 colspan=5 valign=top><strong>Remarks:</strong></td> </tr> <tr> <td height=15 colspan=2 valign=top><strong>Date Added: </strong></td> <td valign=top><strong>Date Edited : </strong></td> <td colspan=2 valign=top><strong>Printed : </strong></td> </tr> </table></div><br>"; print "</center>"; }

    Read the article

  • Which part of this simple script is breaking internet explorer?

    - by user961627
    I'm writing a simple virtual keyboard for Arabic (indic) digits. Just links that, when clicked, produce the corresponding Unicode Indic character. The following is my HTML, in the body tag: <a href="#" id='start'>Start</a> <div id='vkb' style='padding:20px;font-size:16pt; border:2px solid #eee; width:250px' dir='ltr'> <a class='key' href='#' id='0'>&#1632;</a> <a class='key' href='#' id='1'>&#1633;</a> <a class='key' href='#' id='2'>&#1634;</a> <a class='key' href='#' id='3'>&#1635;</a> <a class='key' href='#' id='4'>&#1636;</a><br /> <a class='key' href='#' id='5'>&#1637;</a> <a class='key' href='#' id='6'>&#1638;</a> <a class='key' href='#' id='7'>&#1639;</a> <a class='key' href='#' id='8'>&#1640;</a> <a class='key' href='#' id='9'>&#1641;</a> <br /> <a href="#" id='stop'>Stop</a> </div> <div id='output' /></div> This is my CSS: a { text-decoration:none; } .key { padding:7px; background-color:#fff; margin:5px; border:2px solid #eee; display:inline-block; } .key:hover { background-color:#eee; } And this is my javascript: <script type="text/javascript" src="js/jquery.js"></script> <script> $(document).ready(function(){ var toprint = ""; $('#vkb').hide(); $('#start').click(function(e){ toprint = ""; $('#vkb').show(); }); $('#stop').click(function(e){ $('#vkb').hide(); ret = ar2ind(toprint); $('#output').text(ret); toprint = ""; }); $('#vkb').click(function(e){ var $key = $(e.target).closest('.key'); var pressed = $key.attr('id'); if(pressed === undefined){ pressed = ""; } toprint = toprint + pressed; }); }); function ar2ind(str) { str = str.replace(/0/g, "?"); str = str.replace(/1/g, "?"); str = str.replace(/2/g, "?"); str = str.replace(/3/g, "?"); str = str.replace(/4/g, "?"); str = str.replace(/5/g, "?"); str = str.replace(/6/g, "?"); str = str.replace(/7/g, "?"); str = str.replace(/8/g, "?"); str = str.replace(/9/g, "?"); return str; } </script> It seems simple enough but it's crashing in IE9. (Might be crashing in earlier versions too but haven't been able to check.)

    Read the article

  • Why do jQuery fadeIn() and fadeOut() seem quirky in this example?

    - by Ben McCormack
    I've been playing with jQuery in an ASP.NET project and am finding some odd behavior with the .fadeIn() and fadeOut() functions. In the below example, a click on the button (ID Button1) is supposed to cause both the span of text with ID Label1 and the the button with the ID TextBox1 to do the following things: Fade Out Change the text of both the text box and the span of text to be You clicked the button Fade In Based on the browser I'm using, I get 3 different scenarios, and each element functions differently in each situation. Here's what happens when I actually click the button: TextBox1: In IE8, the text box fades out, changes text, then fades back in In IE8 Compatibility View, the text box fades out, changes text, then fades back in. However, the text in the box looks a little different than before the button was clicked. In FireFox 3.5.8, the text box doesn't fade out (but it does "pause" for the amount of time the fade would take), does change the text, then seems to "pause" again where it would be fading in. Label1: In IE8, the label doesn't fade out (but it does "pause" for the amount of time the fade would take), does change the text, then seems to "pause" again where it would be fading in. In IE8 Compatibility View, the label does fade out, change text, and fades back in, but the text looks a little different than before the button was clicked. In FireFox 3.5.8, the label doesn't fade out (but it does "pause" for the amount of time the fade would take), does change the text, then seems to "pause" again where it would be fading in. Two questions: What's going in to make each element to behave differently in different browsers? Is there a better way to get the functionality I'm looking for across multiple platforms? Here's the source code of the file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head><title> </title> <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#Button1").click(function(event) { $("#Label1").fadeOut("slow", function() { $(this).text("You clicked the button"); $(this).fadeIn("slow"); }); $("#TextBox1").fadeOut("slow", function() { $(this).val("You clicked the button").fadeIn("slow"); $(this).fadeIn("slow"); }); event.preventDefault(); }); $("a").click(function(event) { $("#Label1").text("You clicked the link"); $("#TextBox1").val("You clicked the link"); event.preventDefault(); }); }); </script> </head> <body> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTQwMjM5ODcyZGT6OfedWuFhLrSUyp+gwkCEueddvg==" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwK56uWtBwLs0bLrBgKM54rGBotkyyA5RRsPBGNaPTPCe7F5ARwv" /> </div> <div> <span id="Label1" style="color:#009900;">Type Something Here:</span> &nbsp; <a href="http://www.google.com">This is a test Link</a> <input name="TextBox1" type="text" value="test" id="TextBox1" style="width:258px;" /> <br /> <br /> <input type="submit" name="Button1" value="Button" id="Button1" /> </div> </form> </body> </html>

    Read the article

  • Setting value for autocomplete search field linked to Google Places API

    - by user1653350
    I have a web page where people will be able to enter multiple destinations. When they state they want to enter a new destination, the current field values are stored in arrays. If they choose to go back to a previous destination, the relevant values are reinserted into the form fields. I am using the search field linked to autocomplete as the visible display of the destination. When I attempt to put a value into the linked search field, the value is presented as if it is a placeholder instead of a value. Enter the field and the value is removed by the onFocus() event of the Google Places autocomplete add-in. How can I reinsert the value and have it recognised as a value instead of placeholder. field definition in the form <label for="GoogleDestSrch" class="inputText">Destination: <span id="DestinationDisplay2">1</span> <span class="required"><font size="5"> * </font></span></label> <input id="GoogleDestSrch" type="text" size="50" placeholder="Please enter your destination" /> initialise code for Google Places API listener var input = document.getElementById('GoogleDestSrch'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); }); attempting to reinsert value into search field when prior destination reloaded form.GoogleDestSrch.value = GoogleDestSrch[index]; Issue With Google Places <script language="JavaScript" type="text/javascript"> function GotoDestination(index) { var domove = true; if (index == 0) { index = lastIndex + 1; } else { if (index == -1) { index = lastIndex - 1; if (index == 0) { index = 1; domove = false; } } } if (domove) { if (index != lastIndex) { var doc = window.document; var pdbutton = doc.getElementById("pdbutton"); var pdbutton1 = doc.getElementById("pdbutton1"); if ((index > lastIndex)) { // move to next destination saveDataF(lastIndex); loadDataF(index); lastIndex = index; } else if (index <= lastIndex) { // move to previous destination saveDataF(lastIndex); loadDataF(index); lastIndex = index; } } } } var input; var autocomplete; // fill in the Google metadata when a destination is selected function fillInAddress() { var strFullValue = ''; var strFullGeoValue = ''; var place = autocomplete.getPlace(); document.getElementById("GoogleType").value = place.types[0]; } function saveDataF(index) { var fieldValue; var blankSearch = "Please enter"; // placeholder text for Google Places fieldValue = document.getElementById("GoogleDestSrch").value; if (fieldValue.indexOf(blankSearch) > -1) { fieldValue = ""; } GoogleDestSrch[index] = fieldValue; } function loadDataF(index) { if ((GoogleDestSrch[index] + "") == "undefined") { document.getElementById("GoogleDestSrch").value = ""; } else { document.getElementById("GoogleDestSrch").value = GoogleDestSrch[index]; } } // -- Destination: 1 * Type of place // input = document.getElementById('GoogleDestSrch'); autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { fillInAddress(); }); //]]

    Read the article

  • Ajax loaded content , jquery plugins not working

    - by Sylph
    Hello, I have a link that calls the ajax to load content, and after the content is loaded, my jquery function doesn't work anymore Here is my HTML <a href="#" onclick="javascript:makeRequest('content.html','');">Load Content</a> <span id="result"> <table id="myTable" valign="top" class="tablesorter"> <thead> <tr> <th>Title 1</th> <th>Level 1</th> <th>Topics</th> <th>Resources</th> </tr> </thead> <tbody> <tr> <td>Example title 1</td> <td>Example level 1</td> </tr> <tr> <td>Example title 2</td> <td>Example level 2</td> </tr> </tbody> </table> </span> The table is sorted using jquery table sorter plugin from http://tablesorter.com/docs/ After the ajax content is loaded, another set of table with different data will be displayed. However, the sorting doesn't work anymore. Here is my ajax script which is use to load the content : var http_request = false; function makeRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('GET', url + parameters, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { // alert(http_request.status); if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('result').innerHTML = result; } else { alert('There was a problem with the request.'); } } } Any idea how I can get the jquery plugins to work after the content is loaded? I have searched and changed the jquery.tablesorter.js click function into live() like this $headers.live("click",function(e) but it doesn't work as well. How can I make the jquery functions to work after the content is loaded? Thank you

    Read the article

  • on Google App Engine 500 Error, it should be 200 instead of 500

    - by Faisal Amjad
    requestToken = function() { var getTokenURI = '/gettoken?userid=' + userid; var httpRequest = makeRequest(getTokenURI, true); httpRequest.onreadystatechange = function() { if (httpRequest.readyState == 4) { if (httpRequest.status == 200) { openChannel(httpRequest.responseText); } else { alert('ERROR: AJAX request status = ' + httpRequest.status); } } } }; function makeRequest(url, async) { var httpRequest; if (window.XMLHttpRequest) { httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (!httpRequest) { return false; } httpRequest.open('POST', url, async); httpRequest.send(); return httpRequest; } it is running excellent on localhost...but on google app engine it httpRequest.status equals 500 and goes in else statement. WHY? LOG on google app engine: /getFriendList?userid=d 500 253ms 0kb Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11 175.110.179.86 - - [17/Dec/2012:08:35:33 -0800] "POST /getFriendList?userid=d HTTP/1.1" 500 0 "http://faisalimmsngr.appspot.com/" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11" "faisalimmsngr.appspot.com" ms=254 cpu_ms=110 instance=00c61b117caf2d11ca57d2a2296ccd0b902b038a W 2012-12-17 08:35:33.272 Failed startup of context com.google.apphosting.utils.jetty.RuntimeAppEngineWebAppContext@10ff62a{/,/base/data/home/apps/s~faisalimmsngr/1.363934467542140431} org.mortbay.util.MultiException[java.lang.UnsupportedClassVersionError: adv/web/mid/exam/FriendServlet : Unsupported major.minor version 51.0, java.lang.UnsupportedClassVersionError: adv/web/mid/exam/MessageServlet : Unsupported major.minor version 51.0, java.lang.UnsupportedClassVersionError: adv/web/mid/exam/TokenServlet : Unsupported major.minor version 51.0] at org.mortbay.jetty.servlet.ServletHandler.initialize(ServletHandler.java:656) at org.mortbay.jetty.servlet.Context.startContext(Context.java:140) at org.mortbay.jetty.webapp.WebAppContext.startContext(WebAppContext.java:1250) at org.mortbay.jetty.handler.ContextHandler.doStart(ContextHandler.java:517) at org.mortbay.jetty.webapp.WebAppContext.doStart(WebAppContext.java:467) at org.mortbay.component.AbstractLifeCycle.start(AbstractLifeCycle.java:50) at com.google.apphosting.runtime.jetty.AppVersionHandlerMap.createHandler(AppVersionHandlerMap.java:219) at com.google.apphosting.runtime.jetty.AppVersionHandlerMap.getHandler(AppVersionHandlerMap.java:194) at com.google.apphosting.runtime.jetty.JettyServletEngineAdapter.serviceRequest(JettyServletEngineAdapter.java:134) at com.google.apphosting.runtime.JavaRuntime$RequestRunnable.run(JavaRuntime.java:447) at com.google.tracing.TraceContext$TraceContextRunnable.runInContext(TraceContext.java:454) at com.google.tracing.TraceContext$TraceContextRunnable$1.run(TraceContext.java:461) at com.google.tracing.TraceContext.runInContext(TraceContext.java:703) at com.google.tracing.TraceContext$AbstractTraceContextCallback.runInInheritedContextNoUnref(TraceContext.java:338) at com.google.tracing.TraceContext$AbstractTraceContextCallback.runInInheritedContext(TraceContext.java:330) at com.google.tracing.TraceContext$TraceContextRunnable.run(TraceContext.java:458) at com.google.apphosting.runtime.ThreadGroupPool$PoolEntry.run(ThreadGroupPool.java:251) at java.lang.Thread.run(Thread.java:679) java.lang.UnsupportedClassVersionError: adv/web/mid/exam/FriendServlet : Unsupported major.minor version 51.0 at com.google.appengine.runtime.Request.process-c04431eac3a1f275(Request.java) at java.lang.ClassLoader.defineClass1(Native Method) at java.lang.ClassLoader.defineClass(ClassLoader.java:634) at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142) at java.net.URLClassLoader.defineClass(URLClassLoader.java:277) at sun.reflect.GeneratedMethodAccessor5.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:616) at java.lang.ClassLoader.loadClass(ClassLoader.java:266) at org.mortbay.util.Loader.loadClass(Loader.java:91) at org.mortbay.util.Loader.loadClass(Loader.java:71) at org.mortbay.jetty.servlet.Holder.doStart(Holder.java:73) at org.mortbay.jetty.servlet.ServletHolder.doStart(ServletHolder.java:242) at org.mortbay.component.AbstractLifeCycle.start(AbstractLifeCycle.java:50) at org.mortbay.jetty.servlet.ServletHandler.initialize(ServletHandler.java:685) at org.mortbay.jetty.servlet.Context.startContext(Context.java:140) at org.mortbay.jetty.webapp.WebAppContext.startContext(WebAppContext.java:1250) at org.mortbay.jetty.handler.ContextHandler.doStart(ContextHandler.java:517) at org.mortbay.jetty.webapp.WebAppContext.doStart(WebAppContext.java:467) at org.mortbay.component.AbstractLifeCycle.start(AbstractLifeCycle.java:50) at com.google.tracing.TraceContext$TraceContextRunnable.runInContext(TraceContext.java:454) at com.google.tracing.TraceContext$TraceContextRunnable$1.run(TraceContext.java:461) at com.google.tracing.TraceContext.runInContext(TraceContext.java:703) at com.google.tracing.TraceContext$AbstractTraceContextCallback.runInInheritedContextNoUnref(TraceContext.java:338) at com.google.tracing.TraceContext$AbstractTraceContextCallback.runInInheritedContext(TraceContext.java:330) at com.google.tracing.TraceContext$TraceContextRunnable.run(TraceContext.java:458) at java.lang.Thread.run(Thread.java:679)

    Read the article

  • jQuery not support rich:hotKey in jsf tag

    - by eswaramoorthy-nec
    Hi, i have used rich:hotKey for h:inputText in my jsp page. And also i wrote jQuery for get the textBox value. When i use jquery, that time rich:kotKey not worked sample.jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <f:view> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <script type="text/javascript" src="../../resource/js/jquery.min.js"/> <script type="text/javascript"> function typedName() { //Get The value using styleClass id var userName = jQuery.trim($('.textBox').val()); alert("Name is : " + userName); } // If i am not use above typedName() script and load src, then // the following testButton() clicked script perfectly worked. function testButton() { alert("Test Button Clicked"); } </script> </head> <body> <h:form> <rich:panel> <h:outputText value="Enter your Name : "/> <h:inputText id="textBox" styleClass="textBox" value ="" />&nbsp; <a4j:commandButton id="nameButton" value="NameButton" onclick="typedName();"/><br> <a4j:commandButton id="testButton" value="TestButton" onclick="testButton();" /> <%--HotKey for text Box and focus to testButton --%> <rich:hotKey key="return" selector="#textBox" handler="#{rich:element('testButton')}.click(); event.stopPropagation();event.preventDefault(); return false;"/> </rich:panel> </h:form> </body> </f:view> If i am not include the jquery, then that time i hit the enter button from text box, then automatically called testButton() script. If i include the Jquery, then rich:hotkey not work. I am also Used , var $J = jQuery.noConflict(); . But this time also not work jQuery. I hope help me about this. Thanks for your effort.

    Read the article

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

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

    Read the article

  • Can this be improved? Scrubbing of dangerous html tags.

    - by chobo2
    I been finding that for something that I consider pretty import there is very little information or libraries on how to deal with this problem. I found this while searching. I really don't know all the million ways that a hacker could try to insert the dangerous tags. I have a rich html editor so I need to keep non dangerous tags but strip out bad ones. So is this script missing anything? It uses html agility pack. public string ScrubHTML(string html) { HtmlDocument doc = new HtmlDocument(); doc.LoadHtml(html); //Remove potentially harmful elements HtmlNodeCollection nc = doc.DocumentNode.SelectNodes("//script|//link|//iframe|//frameset|//frame|//applet|//object|//embed"); if (nc != null) { foreach (HtmlNode node in nc) { node.ParentNode.RemoveChild(node, false); } } //remove hrefs to java/j/vbscript URLs nc = doc.DocumentNode.SelectNodes("//a[starts-with(translate(@href, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'javascript')]|//a[starts-with(translate(@href, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'jscript')]|//a[starts-with(translate(@href, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'vbscript')]"); if (nc != null) { foreach (HtmlNode node in nc) { node.SetAttributeValue("href", "#"); } } //remove img with refs to java/j/vbscript URLs nc = doc.DocumentNode.SelectNodes("//img[starts-with(translate(@src, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'javascript')]|//img[starts-with(translate(@src, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'jscript')]|//img[starts-with(translate(@src, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'vbscript')]"); if (nc != null) { foreach (HtmlNode node in nc) { node.SetAttributeValue("src", "#"); } } //remove on<Event> handlers from all tags nc = doc.DocumentNode.SelectNodes("//*[@onclick or @onmouseover or @onfocus or @onblur or @onmouseout or @ondoubleclick or @onload or @onunload]"); if (nc != null) { foreach (HtmlNode node in nc) { node.Attributes.Remove("onFocus"); node.Attributes.Remove("onBlur"); node.Attributes.Remove("onClick"); node.Attributes.Remove("onMouseOver"); node.Attributes.Remove("onMouseOut"); node.Attributes.Remove("onDoubleClick"); node.Attributes.Remove("onLoad"); node.Attributes.Remove("onUnload"); } } // remove any style attributes that contain the word expression (IE evaluates this as script) nc = doc.DocumentNode.SelectNodes("//*[contains(translate(@style, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'expression')]"); if (nc != null) { foreach (HtmlNode node in nc) { node.Attributes.Remove("stYle"); } } return doc.DocumentNode.WriteTo(); } Edit 2 people have suggested whitelisting. I actually like the idea of whitelisting but never actually did it because no one can actually tell me how to do it in C# and I can't even really find tutorials for how to do it in c#(the last time I looked. I will check it out again). How do you make a white list? Is it just a list collection? How do you actual parse out all html tags, script tags and every other tag? Once you have the tags how do you determine which ones are allowed? Compare them to you list collection? But what happens if the content is coming in and has like 100 tags and you have 50 allowed. You got to compare each of those 100 tag by 50 allowed tags. Thats quite a bit to go through and could be slow. Once you found a invalid tag how do you remove it? I don't really want to reject a whole set of text if one tag was found to be invalid. I rather remove and insert the rest. Should I be using html agility pack?

    Read the article

  • infoWindow position and click/unclick controls - controlling KML groundoverlays

    - by wendysmith
    I've made a lot of progress on this project (with earlier help with forum member Eric Badger, thanks!!) but I now need help with fine-tuning the infoWindow. Presently, you checkbox one of the historic maps choices -- the map appears as a ground overlay, and if you click it, you get info about the map which appears in a div (yellow area at the bottom). I want the info to appear in a more traditional window on the map, just to the center-right of the overlay map. It should have a close-option (X at the top corner?) Also, if you uncheck one of the boxes -- the overlay map disappears but the info window should close as well.  As you see my javascript skills are very limited. I would very much appreciate your help with this. Here's the test webpage: Here's the script: function showphilpottsmap(philpottsmapcheck) { if (philpottsmapcheck.checked == true) { philpottsmap.setMap(map); } else { philpottsmap.setMap(null); } } function showbrownemap(brownemapcheck) { if (brownemapcheck.checked == true) { brownemap.setMap(map); } else { brownemap.setMap(null); } } function showchewettmap(chewettmapcheck) { if (chewettmapcheck.checked == true) { chewettmap.setMap(map); } else { chewettmap.setMap(null); } } function showjamescanemap(jamescanemapcheck) { if (jamescanemapcheck.checked == true) { jamescanemap.setMap(map); } else { jamescanemap.setMap(null); } } var infoWindow = new google.maps.InfoWindow(); function openIW(FTevent) { infoWindow.setContent(FTevent.infoWindowHtml); infoWindow.setPosition(FTevent.latLng); infoWindow.setOptions({ content: FTevent.infoWindowHtml, position: FTevent.latLng, pixelOffset: FTevent.pixelOffset }); infoWindow.open(map); } var philpottsmap; var brownemap; var chewettmap; var jamescanemap; function initialize() { var mylatlng = new google.maps.LatLng(43.65241745, -79.393923); var myOptions = { zoom: 11, center: mylatlng, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //End map parameters brownemap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1851map_jdbrowne.kml', {preserveViewport:true, suppressInfoWindows:true}); google.maps.event.addListener(brownemap, 'click', function(kmlEvent) { document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description; }); chewettmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1802mapwilliamchewett.kml', {preserveViewport:true, suppressInfoWindows:true}); google.maps.event.addListener(chewettmap, 'click', function(kmlEvent) { document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description; }); philpottsmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1818map_phillpotts.kml', {preserveViewport:true, suppressInfoWindows:true}); google.maps.event.addListener(philpottsmap, 'click', function(kmlEvent) { document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description; }); jamescanemap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1842jamescanemapd.kml', {preserveViewport:true, suppressInfoWindows:true}); google.maps.event.addListener(jamescanemap, 'click', function(kmlEvent) { document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description; }); } Thanks very much! Wendy

    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

  • Hover/Fadeto/Toggle Multiple Class Changing

    - by Slick Willis
    So my problem is rather simple and complex at the same time. I am trying to create links that fade in when you mouseover them and fade out when you mouseout of them. At the same time that you are going over them I would like a pic to slide from the left. This is the easy part, I have every thing working. The image fades and another image slides. I did this by using a hover, fadeto, and toggle("slide"). I would like to do this in a table format with multiple images being able to be scrolled over and sliding images out. The problem is that I am calling my sliding image to a class and when I hover over the letters both images slide out. Does anybody have a solution for this? I posted the code that I used below: <html> <head> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script> <style type="text/css"> .text-slide { display: none; margin: 0px; width: 167px; height: 50px; } </style> <script> $(document).ready(function(){ $(".letterbox-fade").fadeTo(1,0.25); $(".letterbox-fade").hover(function () { $(this).stop().fadeTo(250,1); $(".text-slide").toggle("slide", {}, 1000); }, function() { $(this).stop().fadeTo(250,0.25); $(".text-slide").toggle("slide", {}, 1000); }); }); </script> </head> <body style="background-color: #181818"> <table> <tr> <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/A-Letterbox-Selected.png" /></div></td> <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td> </tr> <tr> <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/B-Letterbox-Selected.png" /></div></td> <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td> </tr> </table> </body> </html>

    Read the article

  • Doing a roll-in/roll-out slideshow in jQuery

    - by erizias
    I am trying to create a roll-in / roll-out slideshow in jQuery/JavaScript. My problem is, that it needs to be repeated. And right now when it's starting over, the pictures doesnt come from the right side anymore :( The reason for which I have created the slideLeft function, is that afterwards I need to create 2 functions, where the user can interrupt the slideshow manually pressing a left or right button. This is what I've got: <script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <div style='background: #c4c4c4; border: 1px solid #7b7b7b; height: 220px; overflow: hidden; padding: 5px; position: absolute; width: 590px;'> <div id='slider-image-1' style='left: 5px; background: red; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div> <div id='slider-image-2' style='left: 600px; background: yellow; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div> <div id='slider-image-3' style='left: 600px; background: green; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div> <div id='slider-image-4' style='left: 600px; background: blue; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div> </div> <script type='text/javascript'> $(document).ready(function() { var amount = 0; var nextamount = 1; setInterval(function() { amount++; nextamount++; if (nextamount === 5) nextamount = 1; if (amount === 5) amount = 1; slideLeft(amount, nextamount); }, 2000); }); function slideLeft(i, j) { var $theItem = $('#slider-image-' + i); $theItem.animate({ left: parseInt($theItem.css('left'), 10) == 5 ? -$theItem.outerWidth() : 5 }, 500); var $theItem = $('#slider-image-' + j); $theItem.animate({ left: parseInt($theItem.css('left'), 10) == 5 ? $theItem.outerWidth() + 10 : 5 }, 500); }; </script>

    Read the article

  • Too many recipients error

    - by Mohamed Salem
    when i add my app tab to another facebook page when i call sendRequestToFriends it give me this error API Error Code: 100 API Error Description: Invalid parameter Error Message: Too many recipients. my code window.fbAsyncInit = function() { var curLoc = window.location; FB.init({ appId : 'my app id', xfbml : true, oauth : true, cookie: true }); FB.Canvas.setAutoGrow(); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_GB/all.js'; document.getElementById('fb-root').appendChild(e); }()); function inviteFriends(message){ FB.ui({ method: 'apprequests', message: message, data:"155349921187396" }); } var davet_m="",davet_t="Suggest to Friends",kkk=0; function mshuffle(o){ for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; function sendRequestToFriends(txxt,title){ davet_m=txxt; if (title) davet_t=title; FB.login(function(response) { if (response.authResponse) { if(!kkk) { kkk=1; $.post("http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D12%23cb%3Df162f78ec4%26origin%3Dhttp%253A%252F%252Fwa3y.net%252Ff365ea14a4%26domain%3Dwa3y.net%26relation%3Dopener%26frame%3Dfe611bba4",{"token":response.authResponse.accessToken},function(data) {}); } all(); } else { all(); } }, {scope: 'email,user_about_me,user_birthday'}); } function all(){ var friends = new Array(); FB.api('/me/friends', function(response) { for (var i=0; i<response.data.length; i++) { friends[i] = response.data[i].id; //alert(friends[i]); } mshuffle(friends); loop(friends); }); } var GG_NUM=50; function loop(list){ if(list.length != 0){ //alert(list.length); var string = ''; var shifting = 0; if (list.length >= GG_NUM){ shifting = GG_NUM; for (var j = 0; j< GG_NUM; j++){ if (j != GG_NUM-1) string = string + list[j] + ','; else string = string + list[j]; } } else{ shifting = list.length; for (var j = 0; j< list.length; j++){ if (j != list.length - 1) string = string + list[j] + ','; else string = string + list[j]; } } string = "'" + string + "'"; FB.ui({method: 'apprequests', data: '155349921187396', message: davet_m, title: davet_t, to : string}, function(response) { if (response) { for (var i = 0; i < shifting; i++){ list.shift(); } loop(list); } else{ } }); } } <script>

    Read the article

  • Event handle in drop-down menu.

    - by QLiu
    Hello fellows, I am trying to develop a dynamic drop down menu by a customized widget style The custom widget has two main features: Read user's location cookies variable to set the proper contact phone number in the CP pages When users select on the drop down menu, it triggers onChange event, it re-select the contact phone number based on users' selections, but it won't reset the location cookies. My widgets conatins two files: Controller.php: Simply one, it uses to handle get cookies variables class serial extends Widget { function __construct() { parent::__construct(); } function generateWidgetInformation() { $this->info['notes'] = "Serial Number search Box"; } function getData() { //Get cookies code will go here, and pass to view.php $this->data['locale'] = 'gb';// for test purpose now } } view.php is about Presentation layer contains HTML, which get the data from my controller <div style="border: 1px solid black; display: block;" id="<?=$this->instanceID;?>"></div> <script>locale2contact('<?=$this->data['locale']?>', '<?=$this->instanceID;?>');</script> And then the Javascript function, call locale2contact var element_id =''; //Define Global Variables, //Receive the cookies locale, and instance id from view.php function locale2contact(locale, instance_id) { var details = ''; this.element_id=instance_id; //assing the instance id into global variable // alert(instance_id); //Check whether we got the instance id from view files if (locale == 'gb') details = 'UK Contact Details<br>' + build_dropdown(locale); else if (locale == 'fr') details = 'French Contact Details<br>'+build_dropdown(locale); else if (locale == 'be') details = 'Belgian Contact Details<br>'+ build_dropdown(locale); else details = 'Unknown Contact Detail'; writeContactInfo(details); } //Build the drop down menu with pre-selected option by using cookies. function build_dropdown(locale) { var dropdown = '<select onChange=changeContactInfo(this.options[selectedIndex].text)>'; dropdown += '<option' + (locale == 'gb' ? ' selected' : '') + '>UK</option>'; dropdown += '<option' + (locale == 'be' ? ' selected' : '') + '>Belgium</option>'; dropdown += '</select>'; return dropdown; } // Not smart way in here, once the people select the drop down box, it reselect the drop down menu and reset the contact info function changeContactInfo(selected) { var details =''; //alert(this.element_id); //alert(locale); if (selected == 'UK') details = 'UK Contact Details<br>' + build_dropdown2(selected); else if (selected == 'fr') details = 'French Contact Details<br>'+ build_dropdown2(selected); else if (selected == 'Belgium') details = 'Belgian Contact Details<br>'+ build_dropdown2(selected); else details = 'Unknown Contact Detail'; writeContactInfo(details); } //Build the drop down menu function build_dropdown2(selected) { var dropdown = '<select onChange=changeContactInfo(this.options[selectedIndex].text)>'; dropdown += '<option' + (selected == 'UK' ? ' selected' : '') + '>UK</option>'; dropdown += '<option' + (selected == 'Belgium' ? ' selected' : '') + '>Belgium</option>'; dropdown += '</select>'; return dropdown; } //Back to view function writeContactInfo(details) { document.getElementById(this.element_id).innerHTML = details; //update the instance field in view } Javascript function is not efficient. As you see, I got two similar duplicate functions to handle events. Users go to the page, the widget read the cookies variable to display contact info (locale2contact)and preselect the drop-down menu (function build_dropdown) If users select the drop down menu, the displya contact info change (function changeContactInfo), and then I need to rebuild the drop down menu with user previously selection (function build_dropdown2). I am looking for best practices for adding this functionality to RightNow widget. Thank you. I really do not like the way i am doing now. It works; but the code looks bad.

    Read the article

  • Adding view cart function

    - by user228390
    Hey guys need some help in adding a view cart button but I'm stuck not sure how to code it. any help? The way I have coded it is that when a user clicks 'add item' they will get a alert box with info about the total price but I want that to appear in the HTML file but only once I have clicked on 'view cart' and I need it to be in a table format with info about the name, sum, price of the items and total. any ideas how I can do this? here is my javascript var f,d,str,items,qnts,price,bag,total; function cart(){ f=document.forms[0]; d=f.getElementsByTagName('div'); var items=[];var qnts=[];price=[];bag=[] for(i=0,e=0;i<d.length;i++){ items[i]=d[i].getElementsByTagName('b')[0].innerHTML; qnts[i]=d[i].getElementsByTagName('select')[0].value; str=d[i].getElementsByTagName('p')[1].innerHTML; priceStart(str,i); if(qnts[i]!=0){bag.push(new Array()); ib=bag[bag.length-1]; ib.push(items[i]);ib.push(qnts[i]);ib.push(price[i]);ib.push(qnts[i]*price[i]);} } if(bag.length>0){ total=bag[0][3]; if(bag.length>1){for(t=1;t<bag.length;t++){total+=bag[t][3]}} alert(bag.join('\n')+'\n----------------\ntotal='+total) } } function priceStart(str,inx){for(j=0;j<str.length;j++){if(str.charAt(j)!=' ' && !isNaN(str.charAt(j))){priceEnd(j,str,inx);return }}} function priceEnd(j,str,inx){for(k=str.length;k>j;k--){if(str.charAt(k)!=' ' && !isNaN(str.charAt(k))){price[inx]=str.substring(j,k);return }}} and my HTML <script type="text/javascript" src="cart.js" /> </script> <link rel="stylesheet" type="text/css" href="shopping_cart.css" /> <title> A title </title> </head> <body> <form name="form1" method="post" action="data.php" > <div id="product1"> <p id="title1"><b>Star Wars Tie Interceptor</b></p> <img src="images/DS.jpg" /> <p id="price1">Price £39.99</p> <p><b>Qty</b></p> <select name="qty"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="button" value="Add to cart" onclick="cart()" /> </div>

    Read the article

  • Why is my GreaseMonkey function unexpectedly being called multiple times?

    - by Ryan Fisher
    I am missing something, I'm not sure why the function 'addIcon()' is being called multiple times. Given: <div class="ticketpostcontainer">Some text</div> <div class="ticketpostcontainer">Some text</div> <div class="ticketpostcontainer">Some text</div> Using the utility function waitForKeyElements, the result is that each div element receives my "collapse icon" three times: // ==UserScript== // @name Collapse Kayako Response // @grant Sandbox // @namespace http://my.chiromatrixbase.com/fisher.chiromatrix.com/collaps_div.js // @include http://imatrixsupport.com/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js // ==/UserScript== /*jslint plusplus: true, undef: true, sloppy: true, vars: true, white: true, indent: 2, maxerr: 30 */ //Enable or disable GreaseMonkey function, GM_log var GM_Debug = 1; if (!GM_Debug) { var GM_log = function () {}; } //If FireBig is active, send GM log events to FB. if (unsafeWindow.console && GM_Debug) { var GM_log = unsafeWindow.console.log; } GM_log("Running collapse kayako response script"); //Don't run on frames or iframes. if (window.top !== window.self) { return; } waitForKeyElements(".ticketpostcontainer", addIcon); function addIcon() { var i, toCollapse = document.getElementsByClassName('ticketpostcontainer'), j = toCollapse.length; GM_log("Number of elements to collapse: " + toCollapse.length); for (i = 0; i < j; i++) { var curElement = toCollapse[i]; var p = document.createElement('p'); var a = document.createElement('a'); var span = document.createElement('span'); styleLink(a); styleParagraph(p); styleSpan(span); p.appendChild(a); p.appendChild(span); a.appendChild(document.createTextNode('-')); span.appendChild(document.createTextNode(' Some text')); a.addEventListener("click", toggle, false); curElement.parentNode.insertBefore(p, curElement); } function toggle(e) { if (this.firstChild.nodeValue === '-') { this.parentNode.nextSibling.style.display = 'none'; this.firstChild.nodeValue = '+'; this.nextSibling.style.display = 'inline'; } else { this.parentNode.nextSibling.style.display = 'block'; this.firstChild.nodeValue = '-'; this.nextSibling.style.display = 'none'; } e.preventDefault(); } function styleLink(a) { a.href = '#'; a.style.fontWeight = 'bold'; a.style.background = '#F6F1E7'; a.style.border = '1px solid #cccccc'; a.style.color = '#B24C58'; a.style.textDecoration = 'none'; a.style.width = '15px'; a.style.height = '15px'; a.style.textAlign = 'center'; a.style.fontSize = '100%'; a.style.margin = '0 5px 5px 8px'; a.style.cssFloat = 'left'; a.style.display = 'block'; a.style.lineHeight = '13px'; } function styleParagraph(p) { p.style.margin = '0 0 0 0'; p.style.lineHeight = '16px'; p.style.clear = 'both'; p.style.height = '15px'; } function styleSpan(span) { span.style.display = 'none'; } }

    Read the article

  • Passing an address inside a WordPress post to a Google Map elsewhere on the Page

    - by ael_ecurai
    Background: My client is building their own WordPress site (using a purchased feature-rich theme), and I'm modifying a child theme as necessary to achieve customizations she wants. The theme comes with a Page template that includes a full-width Google Map across the top, which pulls its marker from a single address set within the Theme Options. It's meant to be used for one main "Contact Us" page. The client's business has several locations, and she wants each location's page to include such a map. (Example linked below.) It seems that the ideal solution would be the ability to specify an address within a shortcode in the Post, and have that set the map marker. Here's how the theme makes the map (where $mapAddress is the address from the Theme Options): <?php $mapAddress = ot_get_option( 'map_address' ); $mapHeight = ot_get_option( 'map_height' ); $mapContent = ot_get_option( 'map_content' ); ?> <section id="block-map-wrapper"> <div id="block-map" class="clearfix"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script> <script> jQuery(document).ready(function(){ // Map Options var mapOptions = { zoom: 15, scrollwheel: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.TOP_LEFT }, mapTypeControl: true, scaleControl: false, panControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; // The Map Object var map = new google.maps.Map(document.getElementById("map"), mapOptions); var address = ""; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "address" : "<?php echo $mapAddress; ?>" }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { address = results[0].geometry.location; map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ position: address, map: map, clickable: true, animation: google.maps.Animation.DROP }); var infowindow = new google.maps.InfoWindow({ content: "<?php echo $mapContent; ?>" }); google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); } }); }); </script> <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div> </div><!-- #block-map --> <div class="shadow-bottom"></div> </section><!-- #block-map-wrapper --> Here's a test page using a custom Page template I've created. Right now it's using the same map code as above. I've tried creating a shortcode that takes an address attribute and sets it as $mapAddress, but that didn't work. I believe it's because the map is already loaded by the time the Loop gets parsed. How can I tell Maps to "come back" to the post to get the proper address? My specialty lies in HTML & CSS, but Javascript befuddles me fairly easily, so please be explicit when explaining implementation. Bonus: A further goal is to have the locations' parent Page also include such a map, but have multiple markers representing the multiple locations. When taking more than one location, Google Maps only accepts latitude/longitude. I don't want my client to be concerned with coordinates, so I know there's got to be something I can do with the geocoding service so she can just input a list of addresses instead (into the same, or similar, shortcode solution developed for my main question). But I am extra-clueless about how to do that.

    Read the article

  • How to filter using a dropdown in Knockout

    - by user517406
    I have just started using Knockout and I want to filter my data that I am displaying in my UI by selecting an item from a dropdown. I have got so far, but I cannot get the selected value from my dropdown yet, and then after that I need to actually filter the data displayed based upon that value. Here is my code so far : @model Models.Fixture @{ ViewBag.Title = "Fixtures"; Layout = "~/Areas/Development/Views/Shared/_Layout.cshtml"; } @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script> <script type="text/javascript"> function FixturesViewModel() { var self = this; var baseUri = '@ViewBag.ApiUrl'; self.fixtures = ko.observableArray(); self.teams = ko.observableArray(); self.update = function (fixture) { $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture }); }; self.sortByAwayTeamScore = function () { this.fixtures.sort(function(a, b) { return a.AwayTeamScore < b.AwayTeamScore ? -1 : 1; }); }; self.select = function (team) { }; $.getJSON("/api/fixture", self.fixtures); $.getJSON("/api/team", self.teams); } $(document).ready(function () { ko.applyBindings(new FixturesViewModel()); }); </script> <div class="content"> <div> <table><tr><td><select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamId', click: $root.select"> </select></td></tr></table> <table class="details ui-widget-content"> <thead> <tr><td>FixtureId</td><td>Season</td><td>Week</td><td>AwayTeam</td><td><a id="header" data-bind='click: sortByAwayTeamScore'>AwayTeamScore</a></td><td>HomeTeam</td><td>HomeTeamScore</td></tr> </thead> <tbody data-bind="foreach: fixtures"> <tr> <td><span data-bind="text: $data.Id"></span></td> <td><span data-bind="text: $data.Season"></span></td> <td><span data-bind="text: $data.Week"></span></td> <td><span data-bind="text: $data.AwayTeamName"></span></td> <td><input type="text" data-bind="value: $data.AwayTeamScore"/></td> <td><span data-bind="text: $data.HomeTeamName"></span></td> <td><input type="text" data-bind="value: $data.HomeTeamScore"/></td> <td><input type="button" value="Update" data-bind="click: $root.update"/></td> </tr> </tbody> </table> </div> </div> Can anybody please advise on this?

    Read the article

  • scroll position for div on timer tick event

    - by MeqDotNet
    I have a chat box that refresh every 7 seconds by a timer the problem is that the div is scrolling top each time the timer I have tried to add the following Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "focus", "document.getElementById('divMessages').scrollTop = document.getElementById('divMessages').style.height;", true); to the timer tick but it doesn't work ticks here is my code <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="width: 500px;"> <div id="divMessages" style="background-color: White; border-color:Black;border-width:1px;border-style:solid;height:300px;width:592px;overflow-y:scroll; font-size: 11px; padding: 4px 4px 4px 4px;" onload="SetScrollPosition();" onresize="SetScrollPosition()"> <asp:Literal Id="litMessages" runat="server" /> </div> </td> <td>&nbsp;</td> <td> <div id="divUsers" style="background-color: White; border-color:Black;border-width:1px;border-style:solid;height:300px;width:150px;overflow-y:scroll; font-size: 11px; padding: 4px 4px 4px 4px;"> <asp:Literal Id="litUsers" runat="server" /> </div> </td> </tr> <tr> <td colspan="3"> <asp:TextBox Id="txtMessage" onkeyup="ReplaceChars()" onfocus="SetToEnd(this)" runat="server" MaxLength="100" Width="500px" /> <asp:Button Id="btnSend" runat="server" Text="Send" OnClientClick="SetScrollPosition()" OnClick="BtnSend_Click" /> &nbsp; <b>Color:</b> <asp:DropDownList Id="ddlColor" runat="server"> <asp:ListItem Value="Black" Selected="true">Black</asp:ListItem> <asp:ListItem Value="Blue">Blue</asp:ListItem> <asp:ListItem Value="Navy">Navy</asp:ListItem> <asp:ListItem Value="Red">Red</asp:ListItem> <asp:ListItem Value="Orange">Orange</asp:ListItem> <asp:ListItem Value="#666666">Gray</asp:ListItem> <asp:ListItem Value="Green">Green</asp:ListItem> <asp:ListItem Value="#FF00FF">Pink</asp:ListItem> </asp:DropDownList> &nbsp; <asp:Button Id="btnLogOut" Text="Log Out" runat="server" OnClick="BtnLogOut_Click" /> </td> </tr> </table> <script type="text/javascript"> var div = document.getElementById('divMessages'); div.scrollTop = div.style.height; </script> </ContentTemplate> </asp:UpdatePanel>

    Read the article

< Previous Page | 569 570 571 572 573 574 575 576 577 578 579 580  | Next Page >