I have a pop up I am making thats intended function is to open with interactive calendar Which allows the User to input a Start date and End date using jquery datepicker. However currently on page load, I have to open and close the pop up twice before it functions as intended I am wondering why this is happening / how to fix it ? Here is the code
webpage in question
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title> {(BnB)} Market </title>
</head>
<div id= 'user_listings'>
</div>
<body>
Market BnB
</body>
<a href = '/make_listings' > Looking to show your own listing? </a>
<div id = 'table'>
<table>
<tr>
<h1> BnB-able properties </h1>
</tr>
<% #BnB.each do |record| %>
<tr>
<td class ='new_BnB'><%= record['address'] %> </td>
<td class ='code_BnB'> | <%= record['post_code']%> </td>
<br>
<a id="OpenDialog" href="#"> <img src = <%= record['photo'] %> width="300" height="200" alt='test' >
</a>
<div id="dialog" title="Property Info" style="display: none;" >
<p>
<p>Start date: <input type="text" id="datepicker"> End date: <input type="text" id="datepicker2"></p>
<input type = "submit" value='Submit'>
</p>
</div>
</tr>
</table>
<% end %>
<head>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</body>
<%# <title>jQuery UI Datepicker - Default functionality</title> %>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<script src="interface.js"></script>
</div>
interface.js
$(document).ready(function() {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 500, width: 700 });
});
});
$( function() {
$( "#datepicker" ).datepicker();
} );
$( function() {
$( "#datepicker2" ).datepicker();
} );
** what the #BnB value is **
require 'pg'
class BnBControl
attr_accessor :connection
def self.all
#connection = PG.connect(dbname: 'bnb')
listings = #connection.exec("SELECT * FROM properties")
end
------
class BnB < Sinatra::Base
enable :sessions
get '/' do
#if session[:user]
#BnB = BnBControl.all
erb :index_logged_in
# else
# erb :index
# end
end
these are seperate files just included in same code fence
you using document.ready as well as $(function() which are same and need not to be used multiple time. also, call datepicker function inside $(document).ready before popup click event handler, which should work for you.
Try below
$(document).ready(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).datepicker();
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 500, width: 700 });
});
});
Related
I am trying to figure out how to take user button clicks from buttons.html to dynamically toggle column visibility on a second userinput.html. I'm using DataTables for the userinput.html table and thought I had the solution with column.visible. In the DataTables manual there is an example of clicking a <a> and toggling column visibility. I am trying to apply that logic across html files. Unfortunately, the code I've tried is not working. Here's what I've got:
BUTTON PAGE
<!DOCTYPE html>
<html>
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>
<h1>Button page</h1>
<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
USER INPUT PAGE
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
<thead>
<tr>
<th>A</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr class="ac">
<td>
<input type="text" autofocus placeholder="e.g; " name="input" >
</td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<td>
<input type="text" placeholder="" name="P" class="h"></td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>
JS
$(document).ready( function () {
var table = $('#userinput').DataTable( {
"paging": false,
"ordering": false,
"scrollX" : true,
"scrollY" : true,
"scrollCollapse" : true,
"searching" : false,
// "stateSave" : true,
});
$('button.class1').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
});
;
There are no errors in the console on either html page. I think the error may be the use of the this keyword, but I'm not sure how to adjust the code to apply across html files.
It's not required to have the buttons on a separate page, in fact, I'd gratefully accept any constructive criticism.
Thank you in advance.
You can click button on one page to toggle (or any effect) on your another page ? So you can use webStorage(localstorage, sessionstorga) or cookies (read aboit this) or somthing like this. You click button and use script on first page but when you skip to another your js is restarting so you want to somthing to storage your data.
It basically works (slider shows up) when I run this file directly. But when i run index.html and call it by angular ui route, the slider doesnt show up anymore. it also works when using href tag to link to this file. Please help, i have been fixing this all day.
Ps. if i have to show more codes ( eg., controller or service ), you can tell me.
Thanks
<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$('#slider1').slider({
value:12,
min: 10,
max: 20,
step: 1,
slide: function( event, ui ) {
$('#font_size').val(ui.value + ' px');
$('.box').css('font-size', ui.value);
}
});
});
</script>
<div class="examples">
<h2>Text animation with jQuery and UI slider</h2>
<div class="column">
<p>
<label for="font_size">Font size:</label>
<input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider1"></div>
</div>
<div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
<div style="clear:both"></div>
</div>
I'm attempting to perform a jQuery click function inside a dynamically loaded div. I've looked and implemented many of the tactics I've run across to no avail, the last being here.
The code that I'm running to load the div:
$(window).load(function(){
function showitusers() {
$("#creatorsettingsdiv").load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php');
}
$("#creatorsettingsusersbutton").click(function() {
var usersvar = showitusers();
});
});
This loads creatorusersdiv.php with an h2 element class userstabletitle, shown here:
<html><head>
<title>Quiz Time | Creator Settings</title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="metro-icons.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Muli">
<link type="text/css" href="css/normalize.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet">
<link type="text/css" href="css/grid.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="wrapper">
<ul class="nav">
<li class="leftbutton"><a class="entypo-home" href="home.php"></a></li>
<li class="leftbutton">Create</li>
<li class="leftbutton">Take</li>
<li class="leftbutton">Scores</li>
<div class="rightnavcontainer">
<li class="rightbutton"><a class="entypo-cog" href="creator_settings.php"></a></li>
</div>
</ul>
</div>
<div class="sessionwrapper">
<div class="loginwrap">Welcome </div><div class="loginname">Ben David </div> </div>
<div class="logout">logout</div>
</div>
<!-- <div id="content"> -->
<script src="http://XX.XX.XX.XX/quizzes/js/creatorprofiledivchange.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/creatorusersdivchange.js"></script>
<div class="wrap">
<div class="primary">
<div id="sideprofile">
<ul class="leftnav">
<div>
<button id="creatorsettingsprofilebutton" class="menuButton">Profile</button>
</div>
<div>
<button id="creatorsettingsusersbutton" class="menuButton">Users
</button></div>
</ul>
</div>
</div>
<div id="creatorsettingsdiv" class="secondary">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.min.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/deleteuserwarning.js"></script>
<link href="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.css" type="text/css" rel="stylesheet">
<h2 class="userstabletitle">List of Users</h2>
<table class="userstable">
<tbody><tr class="usersheader">
<td class="tdheader">Real Name</td>
<td class="tdheader">Username</td>
<td class="tdheader">Password</td>
<td class="tdheader">Department</td>
<td class="tdheader">Role</td>
<td class="tdheader">Color</td>
<td class="tdblank"> </td>
<td class="tdblank"> </td>
</tr>
<tr class="usersbody"><td>BD</td><td>BD</td><td>notit</td><td>Pricing</td><td>creator</td><td>00FF99</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr><tr class="usersbody"><td>Julie</td><td>julieh</td><td>notit</td><td>Pricing</td><td>admin</td><td>4B088A</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr></tbody></table></div>
</div>
</body></html>
I'm then attempting to display a message when .userstabletitle is clicked with the following:
$(window).load(function(){
function showitusers() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
$('body').on('click', 'h2.userstabletitle', function() {
var usersvar = showitusers();
});
});
This is according to the answer referenced above, yet it is not working at all. Is there something incorrect in how I'm attempting to implement this?
Try this code
$(window).load(function () {
function showitusers() {
var $element = $("#creatorsettingsdiv");
$element.load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php', function () {
//this code will run after PHP text loaded
$("h2.userstabletitle", $element).on("click", function () {
// your code on click event
})
});
}
$("#creatorsettingsusersbutton").click(function () {
var usersvar = showitusers();
});
});
Put this code
$("#creatorsettingsusersbutton").click(function() {
var usersvar = showitusers();
});
after the $(window).load method
I have a webpage with tabs inside it, and when I click on a tab it should load a text editor then get the text from a file and put it inside the text editor.
However, the text doesn't load synchronously, it behaves asynchronously. Even though I made something that should be synchronous.
here's the code :
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
as requested, i tried to make a MCVE
here is be.htm , the "editor" (i took out all that wasn't necessary)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
here is bv.html, the webpage where the code must appear (the jquery script are lcoally stored on my computer so you'll have to input your own paths, sorry
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li>Onglet1</li>
<li>Onglet2</li>
<li>Onglet3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
i gave you the full javascript code i have so far.
and finally here's the php called by ajax :
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
and btw, i'm sorry if you find this code ugly, but i'm a starter as i already told.
I migrated a VS 2003 app to VS 2010.
The application has side_menu.ascx which is referenced in default.aspx.
in side_menu.ascx, a javascript function menu is invoked which is present in side_menu.js.
However, when the function menu is invoked, it gives an error during runtime - 'Cannot find function menu' This works fine in VS 2003
This is where I am getting this error - this code is in side_menu.ascx
new menu (SIDE_MENU_ITEMS, SIDE_MENU_POS, SIDE_MENU_STYLES)
This is the code in default.aspx
<!-- Side Menu -->
<td valign="top" class="page_side_menu">
<mycontrols:sidemenu id="SideMenu1" runat="server"/>
</td>
This is the code in side_menu.ascx
<%# Control Language="vb" AutoEventWireup="false" Codebehind="side_menu.ascx.vb" Inherits="TOrders.UI.Controls.SideMenu" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<table cellPadding="0" width="100%">
<tr>
<td vAlign="top" align="left" width="100%">
<table cellSpacing="10" cellPadding="0" width="100%">
<tr>
<td align="left">
<asp:Literal ID="litError" Runat="server" Text="<font color=#E0E0E0 size=1>* </font>" Visible="False"></asp:Literal><asp:label id="lblJump" runat="server" ForeColor="#E0E0E0" Font-Size="XX-Small">Jump to Telex/Order:</asp:label>
<br>
<asp:textbox id="txtJumpTo" runat="server" Width="125px" CssClass="textbox"></asp:textbox> <input type="button" value="Go" runat="server" id="btnGo" class="TabOut-Button">
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="JavaScript" src="~/library/scripts/side_menu.js" type="text/javascript"></script>
<script language="JavaScript" src="~/library/scripts/side_menu_items.js" type="text/javascript"></script>
<script language="JavaScript" src="~/library/scripts/side_menu_tpl.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
new menu (SIDE_MENU_ITEMS, SIDE_MENU_POS, SIDE_MENU_STYLES);
// -->
</script>
This is the javascript function side_menu.js
var menus = [];
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];
this.add_item = menu_add_item;
this.hide = menu_hide;
this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;
var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
try removing tilde (~) from javascript src path and make sure path is actually correct
To me it was the same and so solution is:
Change the relative path and leave them in taking away the root ~ /
before
<%# Control Language="VB" AutoEventWireup="false" CodeFile="wucDTmisc1.ascx.vb" Inherits="wucDTmisc1" %>
<%# Register Src="wucBeneficiarios.ascx" TagName="wucBeneficiarios" TagPrefix="uc1" %>
<%# Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%# Register Src="Controles/wucMoneda.ascx" TagName="wucMoneda" TagPrefix="uc1" %>
<link href="~/css/content.css" rel="stylesheet" type="text/css" />
<link href="~/css/Blue.css" rel="stylesheet" type="text/css" />
<script src="~/js/siscli.js" type="text/javascript"></script>
<script src="~/js/json2.js" type="text/javascript"></script>
<script src="~/js/date.js" type="text/javascript"></script>
after
<%# Control Language="VB" AutoEventWireup="false" CodeFile="wucDTmisc1.ascx.vb" Inherits="wucDTmisc1" %>
<%# Register Src="wucBeneficiarios.ascx" TagName="wucBeneficiarios" TagPrefix="uc1" %>
<%# Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%# Register Src="Controles/wucMoneda.ascx" TagName="wucMoneda" TagPrefix="uc1" %>
<link href="/css/content.css" rel="stylesheet" type="text/css" />
<link href="/css/Blue.css" rel="stylesheet" type="text/css" />
<script src="/js/siscli.js" type="text/javascript"></script>
<script src="/js/json2.js" type="text/javascript"></script>
<script src="/js/date.js" type="text/javascript"></script>
Also while looking for the solution, I realized that in controls is better to leave the JS code.
It worked for me, I hope you too.
What you need is maybe something as explained here. You'll have to replace the "~" with something that will follow the usercontrol where he PRESENTLY is instead of where he is landed phisicaly in the application.
<script language="javascript" type="text/javascript" src="<%=Page.ResolveUrl("~/JS/VerticalMenu.js")%>"></script>
<script language="javascript" type="text/javascript" src="<%=Page.ResolveUrl("~/library/scripts/side_menu_items.js")%>"></script>
<script language="javascript" type="text/javascript" src="<%=Page.ResolveUrl("~/library/scripts/side_menu_tpl.js")%>"></script>
RESOLVED
I finally found the solution to the problem. It was with the script tag
I rewrote it as
<script src="../library/scripts/side_menu.js" type="text/javascript" />
instead of
<script src="../library/scripts/side_menu.js" type="text/javascript"></script>