I need to take data from a JavaScript site in real-time and I use:
while (True):
WebElement.get_attribute('innerHTML')
My code:
from selenium import webdriver
from selenium.webdriver.common.by
import By options = webdriver.ChromeOptions()
options.add_argument('--headless')
browser = webdriver.Chrome(options=options)
browser.get('s3-eu-west-1.amazonaws.com/lmax-widget3/…)
time.sleep(10)
find_bid_price=browser.find_element(By.XPATH,"/html/body/div[3]/div[2]/div[3]/div[2]/div[1]/div[6]/div[2]")
while (True):
price=find_bid_price.get_attribute('innerHTML')
You were pretty close. You need to induce WebDriverWait for the visibility of an element on the page and you can use the following solution:
Code Block:
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
options = webdriver.ChromeOptions()
options.add_argument("start-maximized")
options.add_argument('disable-infobars')
driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
driver.get("https://s3-eu-west-1.amazonaws.com/lmax-widget3/website-widget-quote-vwap-flex.html")
WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[#class='lw_body']/div[#class='lw_book_title' and contains(., 'ORDER BOOK')]")))
print(driver.page_source.encode("utf-8"))
Console Output:
b'<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6 ie">\n<![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7 ie">\n<![endif]--><!--[if IE 8]> <html class="no-js lt-ie9 ie8 ie"> <![endif]--><!--[if IE 9]> <html class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" class="no-js lang-en" lang="en"><!--<![endif]--><head>\n <title>LMAX quotes widget</title>\n\t<meta http-equiv="refresh" content="1200" />\n\t<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n\t<style>\n\t\t#loader {\n\t\t background: #FFFFFF;\n\t\t display: block;\n\t\t\twidth: 290px;\n\t\t\theight: 225px;\n\t\t\tpadding: 2px 7px;\n\t\t left: 0;\n\t\t margin: 6px;\n\t\t position: absolute;\n\t\t top: 0;\n\t\t z-index: 101;\n\t\t}\n\t</style>\n\t<link media="screen" type="text/css" href="media/widget/css/widget-flexible.min.css" rel="stylesheet" />\n <!--[if lt IE 9]>\n <script type="text/javascript" src="media/widget/js/html5.js"></script>\n <![endif]-->\n <!--[if lt IE 8]>\n\t \xc2\xa0<script type="text/javascript" src="media/widget/js/json2.min.js"></script>\n\t<![endif]-->\n\t<script async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" src="media/widget/js/faye-client.js" style="color: rgb(85, 85, 85);"></script>\n\t<script type="text/javascript" src="media/widget/js/lmax-widget-quotes-v2-extras.js"></script>\n\t<script type="text/javascript" src="media/widget/js/lmax-widget-quotes-v2.min.js"></script>\n<script type="text/javascript" src="https://data-fix.smt-data.com/lmax?message=%5B%7B%22channel%22%3A%22%2Fmeta%2Fhandshake%22%2C%22version%22%3A%221.0%22%2C%22supportedConnectionTypes%22%3A%5B%22websocket%22%2C%22eventsource%22%2C%22long-polling%22%2C%22cross-origin-long-polling%22%2C%22callback-polling%22%5D%2C%22id%22%3A%221%22%7D%5D&jsonp=__jsonp1__"></script></head>\n<body class="lw_hide_charts lw_show_vwap" style="line-height: 150px; font-size: 150px;">\n<div id="loader" style="height: 100%; width: 100%;">\n\t<div></div>\n\t<img src="media/widget/images_multi/prof/logo.svg" alt="LMAX Professional" />\n\t<!--[if IE]>\n\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/logo.swf" id="logo" name="logo">\n\t\t<param name="movie" value="media/widget/images_multi/prof/logo.swf" />\n\t\t<param name="quality" value="high" />\n\t\t<param name="allowFullScreen" value="false" />\n\t\t<param name="wmode" value="transparent" />\n\t\t<param name="allowscriptaccess" value="always" />\n\t</object>\n\t<![endif]-->\n</div>\n<div id="lw_alert" style="display: none;">\n\t<div class="lw_alert_error_title" id="lw_alert_error_title">LIVE PRICES</div>\n\t<div class="lw_alert_close_title" id="lw_alert_close_title">Markets closed</div>\n\t<div class="lw_alert_error_msg1" id="lw_alert_error_msg1">temporary connection error</div>\n\t<div class="lw_alert_error_msg2" id="lw_alert_error_msg2">reconnecting again automatically</div>\n\t<div class="lw_alert_close_msg1" id="lw_alert_close_msg1">view last week\xe2\x80\x99s spreads<br />\n\t\tview recent latency figures<br />\n\t\tview latest news</div>\n\t<div class="lw_alert_error_icon">\t\n\t\t<img id="lw_alert_error_icon" src="media/widget/images_multi/prof/error.svg" alt="" />\n\t\t<!--[if IE]>\n\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/error.swf" id="error-swf" name="error-swf">\n\t\t\t<param name="movie" value="media/widget/images_multi/prof/error.swf" />\n\t\t\t<param name="quality" value="high" />\n\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t<param name="wmode" value="transparent" />\n\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t</object>\n\t\t<![endif]-->\n\t</div>\n\t<div class="lw_alert_slogan">\n\t\t<img id="lw_alert_slogan" src="media/widget/images_multi/prof/slogan.svg" alt="The Professional FX Exchange" />\n\t\t<!--[if IE]>\n\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/.swf" id="slogan-swf" name="slogan-swf">\n\t\t\t<param name="movie" value="media/widget/images_multi/prof/.swf" />\n\t\t\t<param name="quality" value="high" />\n\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t<param name="wmode" value="transparent" />\n\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t</object>\n\t\t<![endif]-->\n\t</div>\n\t<div class="lw_alert_bg">\n\t\t<img id="lw_alert_bg" src="media/widget/images_multi/prof/alert.svg" alt="" />\n\t\t<!--[if IE]>\n\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/alert.swf" id="alert-swf" name="alert-swf">\n\t\t\t<param name="movie" value="media/widget/images_multi/prof/alert.swf" />\n\t\t\t<param name="quality" value="high" />\n\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t<param name="wmode" value="transparent" />\n\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t</object>\n\t\t<![endif]-->\n\t</div>\n</div>\n<div class="lw_main">\n\t<div id="dummy"></div>\n <div class="lw_inner_container">\n <div class="lw_header">\n\t\t\t<div id="lw_brand"><img id="lw_brand_bg" src="media/widget/images_multi/prof/lmax-digital.svg" alt="" /></div>\n\t\t\t<div class="lw_book_title" id="lw_topbook_title">TOP OF BOOK</div>\n \t<div class="lw_tl_ribbon" id="lw_tlBanner" style="display: none;"></div>\n\t\t\t<div class="lw_instru_logo">\n\t\t\t\t<img id="lw_instru_logo" src="media/widget/images_multi/prof/topleft-logo.svg" alt="" />\n\t\t\t\t<!--[if IE]>\n\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/topleft-logo.swf" id="topleft-logo" name="topleft-logo">\n\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/topleft-logo.swf" />\n\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t</object>\n\t\t\t\t<![endif]-->\n\t\t\t</div>\n <div class="lw_instru_name">EUR/USD</div>\n <div class="lw_instru_symbol" style="display: none;">EURUSD</div>\n <div class="lw_instru_spread_value spread_price gradient">0.00</div>\n <div class="lw_instru_arrow">\n <img id="lw_instru_arrow" src="media/widget/images_multi/prof/arrow_right.svg" alt=">" />\n\t\t\t\t<!--[if IE]>\n\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/arrow_right.swf" id="arrow_right" name="arrow_right">\n\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/arrow_right.swf" />\n\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t</object>\n\t\t\t\t<![endif]-->\n </div>\n <div class="lw_instru">\n <div class="lw_hide_chart_label">\n\t\t\t\t\t<img id="lw_hide_chart_label" src="media/widget/images_multi/prof/close.svg" alt="X" />\n\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/close.swf" id="close" name="close">\n\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/close.swf" />\n\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t</object>\n\t\t\t\t\t<![endif]-->\n </div>\n <div class="lw_instru_dropdown_label">CHOOSE INSTRUMENT</div>\n <div class="lw_instru_list_overlay mCustomScrollbar _mCS_1 mCS_no_scrollbar" style="top: 149px;"><div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0" style="max-height: 771px;"><div id="mCSB_1_container" class="mCSB_container mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">\n\t\t\t\t\t<ul class="lw_instru_list"></ul>\t\n </div><div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 23.26px; display: none; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>\n </div>\n </div>\n\t\t<div class="lw_vwap block">\t\t\t\n\t\t\t<div class="lw_vwap_top" id="lw_vwap_main_title">VWAP</div>\n\t\t\t<div class="lw_vwap_left">\n\t\t\t\t<div class="lw_vwap_name">\n\t\t\t\t\t<label class="lw_vwap_label" id="lw_vwap_amount_label" for="lw_vwap_amount">AMOUNT</label>\n\t\t\t\t\t<input class="lw_vwap_value" type="text" value="1M" id="lw_vwap_amount" />\n\t\t\t\t</div>\n\t\t\t\t<div class="lw_vwap_name">\n\t\t\t\t\t<div class="lw_vwap_label" id="lw_vwap_bid_label">BID</div>\n\t\t\t\t\t<div class="lw_vwap_value" id="lw_vwap_bid">0.00000</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class="lw_vwap_right">\n\t\t\t\t<div class="lw_vwap_name">\n\t\t\t\t\t<div class="lw_vwap_label" id="lw_vwap_ask_label">ASK</div>\n\t\t\t\t\t<div class="lw_vwap_value" id="lw_vwap_ask">0.00000</div>\n\t\t\t\t</div>\n\t\t\t\t<div class="lw_vwap_name">\n\t\t\t\t\t<div class="lw_vwap_label" id="lw_vwap_spread_label">SPREAD</div>\n\t\t\t\t\t<div class="lw_vwap_value" id="lw_vwap_spread">0.00000</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n <div class="lw_body">\n\t\t\t<div class="lw_book_title" id="lw_orderbook_title">ORDER BOOK</div>\n <div class="lw_body_column lw_column_left">\n <div class="lw_body_top">\n <div class="lw_bid_arrow lw_ask_arrow_up">\n \t<img id="lw_ask_arrow_up" src="media/widget/images_multi/prof/up.svg" alt="\xe2\x86\x91" />\n\t\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/up.swf" id="askup" name="askup">\n\t\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/up.swf" />\n\t\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t\t</object>\n\t\t\t\t\t\t<![endif]-->\n\t\t\t\t\t</div>\n <div class="lw_bid_arrow lw_ask_arrow_down">\n \t<img id="lw_ask_arrow_down" src="media/widget/images_multi/prof/down.svg" alt="\xe2\x86\x91" />\n\t\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/down.swf" id="askdown" name="askdown">\n\t\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/down.swf" />\n\t\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t\t</object>\n\t\t\t\t\t\t<![endif]-->\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="lw_bid_arrow lw_ask_arrow_right">\n \t<img id="lw_ask_arrow_right" src="media/widget/images_multi/prof/right.svg" alt="\xe2\x86\x92" />\n\t\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/right.swf" id="askright" name="askright">\n\t\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/right.swf" />\n\t\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t\t</object>\n\t\t\t\t\t\t<![endif]-->\n\t\t\t\t\t</div>\n <div class="lw_bid_label" id="lw_bid_label">BID</div>\n <div class="clear"></div>\n <div class="lw_row">\n <div class="lw_amount lw_bid_amount bid_amount_0">0</div>\n <div class="lw_price bid_price_0">0.00000</div>\n <div class="clear"></div>\n <input class="old_price" type="hidden" value="0" />\n </div>\n <hr />\n </div>\n <div class="lw_body_list" id="lw_body_list_bid">\n <div class="lw_row">\n <div class="lw_amount lw_bid_amount bid_amount_1">0</div>\n <div class="lw_price bid_price_1">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row even">\n <div class="lw_amount lw_bid_amount bid_amount_2">0</div>\n <div class="lw_price bid_price_2">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row">\n <div class="lw_amount lw_bid_amount bid_amount_3">0</div>\n <div class="lw_price bid_price_3">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row even">\n <div class="lw_amount lw_bid_amount bid_amount_4">0</div>\n <div class="lw_price bid_price_4">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_5">0</div>\n <div class="lw_price bid_price_5">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_6">0</div>\n <div class="lw_price bid_price_6">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_7">0</div>\n <div class="lw_price bid_price_7">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_8">0</div>\n <div class="lw_price bid_price_8">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_9">0</div>\n <div class="lw_price bid_price_9">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_10">0</div>\n <div class="lw_price bid_price_10">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_11">0</div>\n <div class="lw_price bid_price_11">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_12">0</div>\n <div class="lw_price bid_price_12">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_13">0</div>\n <div class="lw_price bid_price_13">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_14">0</div>\n <div class="lw_price bid_price_14">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_15">0</div>\n <div class="lw_price bid_price_15">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_16">0</div>\n <div class="lw_price bid_price_16">0.00000</div>\n <div class="clear"></div>\n </div>\t\t\t\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_17">0</div>\n <div class="lw_price bid_price_17">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_bid_amount bid_amount_18">0</div>\n <div class="lw_price bid_price_18">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_bid_amount bid_amount_19">0</div>\n <div class="lw_price bid_price_19">0.00000</div>\n <div class="clear"></div>\n </div>\n </div>\n </div>\n <div class="lw_body_column lw_column_right">\n <div class="lw_body_top">\n <div class="lw_bid_arrow lw_bid_arrow_up">\n \t<img id="lw_bid_arrow_up" src="media/widget/images_multi/prof/up.svg" alt="\xe2\x86\x91" />\n\t\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/up.swf" id="bidup" name="bidup">\n\t\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/up.swf" />\n\t\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t\t</object>\n\t\t\t\t\t\t<![endif]-->\n\t\t\t\t\t</div>\n <div class="lw_bid_arrow lw_bid_arrow_down">\n \t<img id="lw_bid_arrow_down" src="media/widget/images_multi/prof/down.svg" alt="\xe2\x86\x93" />\n\t\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/down.swf" id="biddown" name="biddown">\n\t\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/down.swf" />\n\t\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t\t</object>\n\t\t\t\t\t\t<![endif]-->\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="lw_bid_arrow lw_bid_arrow_left">\n \t<img id="lw_bid_arrow_left" src="media/widget/images_multi/prof/left.svg" alt="\xe2\x86\x90" />\n\t\t\t\t\t\t<!--[if IE]>\n\t\t\t\t\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/left.swf" id="askleft" name="askleft">\n\t\t\t\t\t\t\t<param name="movie" value="media/widget/images_multi/prof/left.swf" />\n\t\t\t\t\t\t\t<param name="quality" value="high" />\n\t\t\t\t\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t\t\t\t\t<param name="wmode" value="transparent" />\n\t\t\t\t\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t\t\t\t\t</object>\n\t\t\t\t\t\t<![endif]-->\n\t\t\t\t\t</div>\n <div class="lw_ask_label" id="lw_ask_label">ASK</div>\n <div class="clear"></div>\n <div class="lw_row">\n <div class="lw_price ask_price_0">0.00000</div>\n <div class="lw_amount lw_ask_amount ask_amount_0">0</div>\n <div class="clear"></div>\n <input class="old_price" type="hidden" value="0" />\n </div>\n <hr />\n </div>\n <div class="lw_body_list" id="lw_body_list_ask">\n <div class="lw_row">\n <div class="lw_price ask_price_1">0.00000</div>\n <div class="lw_amount lw_ask_amount ask_amount_1">0</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row even">\n <div class="lw_price ask_price_2">0.00000</div>\n <div class="lw_amount lw_ask_amount ask_amount_2">0</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row">\n <div class="lw_price ask_price_3">0.00000</div>\n <div class="lw_amount lw_ask_amount ask_amount_3">0</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row even">\n <div class="lw_price ask_price_4">0.00000</div>\n <div class="lw_amount lw_ask_amount ask_amount_4">0</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_ask_amount ask_amount_5">0</div>\n <div class="lw_price ask_price_5">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_ask_amount ask_amount_6">0</div>\n <div class="lw_price ask_price_6">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra">\n <div class="lw_amount lw_ask_amount ask_amount_7">0</div>\n <div class="lw_price ask_price_7">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_ask_amount ask_amount_8">0</div>\n <div class="lw_price ask_price_8">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_ask_amount ask_amount_9">0</div>\n <div class="lw_price ask_price_9">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_ask_amount ask_amount_10">0</div>\n <div class="lw_price ask_price_10">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_ask_amount ask_amount_11">0</div>\n <div class="lw_price ask_price_11">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_ask_amount ask_amount_12">0</div>\n <div class="lw_price ask_price_12">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra">\n <div class="lw_amount lw_ask_amount ask_amount_13">0</div>\n <div class="lw_price ask_price_13">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_ask_amount ask_amount_14">0</div>\n <div class="lw_price ask_price_14">0.00000</div>\n <div class="clear"></div>\n </div>\n\t\t\t\t\t<div class="lw_row extra">\n <div class="lw_amount lw_ask_amount ask_amount_15">0</div>\n <div class="lw_price ask_price_15">0.00000</div>\n <div class="clear"></div>\n </div>\n <div class="lw_row extra even">\n <div class="lw_amount lw_ask_amount ask_amount_16">0</div>\n <div id="lw_footer_main" class="lw_footer">\n <span class="lw_footer_main">1 FX contract = 10,000 notional - for CFD contracts click <a target="_blank" href="http://www.lmax.com/instruments/cfd-trading">here</a></span><br />\n\t\t\t<span class="lw_footer_info">(LMAX Professional open Order Book - first 5 levels only displayed)</span>\n </div>\n </div>\n</div>\n<div class="lw_range lw_range_alt">\n\t<div class="lw_range_icon">\n\t\t<img id="lw_range_icon_alt" src="media/widget/images_multi/prof/spreads.svg" alt="SPREADS" />\n\t\t<!--[if IE]>\n\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/spreads.swf" id="spreads" name="spreads">\n\t\t\t<param name="movie" value="media/widget/images_multi/prof/spreads.swf" />\n\t\t\t<param name="quality" value="high" />\n\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t<param name="wmode" value="transparent" />\n\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t</object>\n\t\t<![endif]-->\n\t</div>\n\t<div class="lw_range_arrow">\n\t\t<img id="lw_range_arrow_alt" src="media/widget/images_multi/prof/arrow_right.svg" alt=">" />\n\t\t<!--[if IE]>\n\t\t<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/widget/images_multi/prof/arrow_right.swf" id="arrow_right2" name="arrow_right2">\n\t\t\t<param name="movie" value="media/widget/images_multi/prof/arrow_right.swf" />\n\t\t\t<param name="quality" value="high" />\n\t\t\t<param name="allowFullScreen" value="false" />\n\t\t\t<param name="wmode" value="transparent" />\n\t\t\t<param name="allowscriptaccess" value="always" />\n\t\t</object>\n\t\t<![endif]-->\n\t</div>\n\t<div class="lw_range_name today_symbol" id="lw_chart_today_alt">Today</div>\n\t<div class="lw_range_name week_symbol" id="lw_chart_week_alt">Week</div>\n\t<div class="lw_range_name month_symbol" id="lw_chart_month_alt">Month</div>\n</div>\n<div id="lw_footer_alt" class="lw_footer lw_footer_alt">\n\t<span class="lw_footer_main" id="lw_vwap_footer_main">1 FX contract = <span id="lw_footer_lotsize">10000</span> notional - for CFD contracts click <a target="_blank" href="http://www.lmax.com/instruments/cfd-trading">here</a></span><br />\n\t<span class="lw_footer_info"></span>\n</div>\n\n</body></html>'
Related
import React, { useEffect } from "react";
import SpringModal from "../../components/Modal/Modal";
import { StyledWithdraw } from "./StyledWithdraw";
import bitcoin from "../../assets/img/Bitcoin.png";
import card from "../../assets/img/card.png";
import paypal from "../../assets/img/PayPal.png";
import skrill from "../../assets/img/skrill.png";
import western from "../../assets/img/western.png";
import wire from "../../assets/img/wire.svg";
import Inputs from "../../components/inputs/Inputs";
import { Form, Formik } from "formik";
import Button from "../../components/Button/Button";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
const initialValues = {
paymentmethod: "",
account: "",
amount: "",
};
const Witdraw = () => {
const token = localStorage.getItem("user");
const onSubmit = async (values) => {
console.log(values);
try {
axios
.post(
"http://localhost:8660/v1/auth/add/withdraw",
{
...values,
},
{
headers: {
authorization: `${token}`,
},
}
)
.then((response) => {
if (response.status === 200) {
console.log(response);
}
})
.catch((err) => {
console.log(err);
});
} catch (error) {}
};
return (
<StyledWithdraw>
<div className="wit_top">
<p>Make A Withdrawal Request</p>
</div>
<div className="wit_bal my-4">
<div className="av_bal">
<p>Available Balance</p>
</div>
<div className="av_bal">
<p>$0.00</p>
</div>
</div>
<div className="wit_bal my-4">
<div className="av_bal">
<p>Withdrawal</p>
</div>
<div className="av_bal">
<p>$0.00</p>
</div>
</div>
<div className="grid grid-cols-3 gap-10">
<SpringModal imageUrl={bitcoin} details="Bitcoin (Recommended)">
<div className="flex justify-center">
<img src={bitcoin} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<Inputs
value="bitcoin"
label={""}
type={"hidden"}
name={"paymentamount"}
id={"paymentamount"}
/>
<div className="mt-4">
<div className="">
<Inputs
label={"Input Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Wallet Address"}
type={"text"}
name={"account"}
id={"account"}
/>
</div>
</div>
<div className="reg_btn flex justify-center mt-8">
<button
type="submit"
className="btn"
style={{
backgroundColor: "black",
border: "3px solid #FDE338",
color: "white",
padding: "0.7rem 2.3rem",
borderRadius: "20px",
}}
>
Proceed{" "}
</button>
</div>
</Form>
</Formik>
</SpringModal>
<SpringModal imageUrl={card} details="Transfers">
<div className="flex justify-center">
<img src={card} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik>
<Form>
<div className="mt-4">
<div className="">
<Inputs
label={"Full Name"}
type={"text"}
name={"name"}
id={"name"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Account Number"}
type={"number"}
name={"account"}
id={"account"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Bank Name"}
type={"text"}
name={"bank"}
id={"bank"}
/>
</div>
<div className="">
<Inputs
label={"Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
</div>
<div className="mt-4">
<Button
outline={false}
text={"Proceed"}
styles={"text-center"}
/>
</div>
</Form>
</Formik>
</SpringModal>
<SpringModal imageUrl={paypal} details="Paypal">
<div className="flex justify-center">
<img src={paypal} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik>
<Form>
<div className="mt-4">
<div className="">
<Inputs
label={"Full Name"}
type={"text"}
name={"name"}
id={"name"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Phone Number"}
type={"text"}
name={"phone"}
id={"phone"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Address"}
type={"text"}
name={"address"}
id={"address"}
/>
</div>
<div className="">
<Inputs
label={"Postal Code"}
type={"number"}
name={"postal"}
id={"postal"}
/>
</div>
<div className="">
<Inputs
label={"Account Number"}
type={"number"}
name={"acc_number"}
id={"acc_number"}
/>
</div>
<div className="">
<Inputs
label={"Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
</div>
<div className="mt-4">
<Button
outline={false}
text={"Proceed"}
styles={"text-center"}
/>
</div>
</Form>
</Formik>
</SpringModal>
<SpringModal imageUrl={skrill} details="Skrill">
<div className="flex justify-center">
<img src={skrill} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik>
<Form>
<div className="mt-4">
<div className="">
<Inputs
label={"Full Name"}
type={"text"}
name={"name"}
id={"name"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Phone Number"}
type={"number"}
name={"phone"}
id={"phone"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Email Address"}
type={"text"}
name={"email"}
id={"email"}
/>
</div>
<div className="">
<Inputs
label={"Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
</div>
<div className="mt-4">
<Button
outline={false}
text={"Proceed"}
styles={"text-center"}
/>
</div>
</Form>
</Formik>
</SpringModal>
<SpringModal imageUrl={western} details="Western Union">
<div className="flex justify-center">
<img src={western} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik>
<Form>
<div className="mt-4">
<div className="">
<Inputs
label={"Full Name"}
type={"text"}
name={"name"}
id={"name"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Phone Number"}
type={"number"}
name={"phone"}
id={"phone"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Address"}
type={"text"}
name={"address"}
id={"address"}
/>
</div>
<div className="">
<Inputs
label={"Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
</div>
<div className="mt-4">
<Button
outline={false}
text={"Proceed"}
styles={"text-center"}
/>
</div>
</Form>
</Formik>
</SpringModal>
<SpringModal imageUrl={wire} details="Wire Transfer">
<div className="flex justify-center">
<img src={wire} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik>
<Form>
<div className="mt-4">
<div className="">
<Inputs
label={"Full Name"}
type={"text"}
name={"name"}
id={"name"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Phone Number"}
type={"number"}
name={"phone"}
id={"phone"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Email Address"}
type={"text"}
name={"email"}
id={"email"}
/>
</div>
<div className="">
<Inputs
label={"Date Of Birth"}
type={"date"}
name={"dob"}
id={"dob"}
/>
</div>
<div className="">
<Inputs
label={"Bank Name"}
type={"text"}
name={"bank"}
id={"bank"}
/>
</div>
<div className="">
<Inputs
label={"Account Number"}
type={"number"}
name={"acc_number"}
id={"acc_number"}
/>
</div>
<div className="">
<Inputs
label={"Routine Number"}
type={"text"}
name={"route"}
id={"route"}
/>
</div>
<div className="">
<Inputs
label={"Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
<div className="">
<Inputs
label={"Address"}
type={"text"}
name={"address"}
id={"address"}
/>
</div>
<div className="">
<Inputs
label={"Postal Code"}
type={"number"}
name={"postal"}
id={"postal"}
/>
</div>
</div>
<div className="mt-4">
<Button
outline={false}
text={"Proceed"}
styles={"text-center"}
/>
</div>
</Form>
</Formik>
</SpringModal>
</div>
</StyledWithdraw>
);
};
export default Witdraw;
import * as React from 'react'; import PropTypes from 'prop-types'; import Backdrop from '#mui/material/Backdrop'; import Box from '#mui/material/Box'; import Modal from '#mui/material/Modal'; import Button from '#mui/material/Button'; import Typography
from '#mui/material/Typography'; // web.cjs is required for IE11 support import { useSpring, animated } from 'react-spring'; import { StyledModal } from './StyledModal'; const Fade = React.forwardRef(function Fade(props, ref) { const { in: open, children,
onEnter, onExited, ...other } = props; const style = useSpring({ from: { opacity: 0 }, to: { opacity: open ? 1 : 0 }, onStart: () => { if (open && onEnter) { onEnter(); } }, onRest: () => { if (!open && onExited) { onExited(); } }, }); return (
<animated.div ref={ref} style={style} {...other}>
{children}
</animated.div>
); }); Fade.propTypes = { children: PropTypes.element, in: PropTypes.bool.isRequired, onEnter: PropTypes.func, onExited: PropTypes.func, }; const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400,
bgcolor: 'background.paper', boxShadow: 24, p: 4, maxHeight:'95vh', overflowX:'scroll' }; export default function SpringModal({imageUrl,details,children,}) { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const
handleClose = () => setOpen(false); return (
<StyledModal>
<div className="mod_card" onClick={handleOpen}>
<div className="mod_img">
<img src={imageUrl} alt="" />
</div>
<div className="mod_text">
<p>{details}</p>
</div>
</div>
<Modal aria-labelledby="spring-modal-title" aria-describedby="spring-modal-description" open={open} onClose={handleClose} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500, }}>
<Fade in={open}>
<Box sx={style}>
{children}
</Box>
</Fade>
</Modal>
</StyledModal>
); }
Gooday stack overflow, I am a rookie in React and Nodejs and i am creating a project using react and nodejs. i am creating a withdrawal page with different means of payment options for users to choose from, how do i do it such that the different forms all act independently and then pass the data to the admin.. enter code here
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section class="home">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'img/slide-1.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-2.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-3.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
custom.css
.carousel-item {
height: 24rem;
background: #000;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
opacity: 0.5;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption{
bottom: 25%;
}
.carousel-caption h5{
font-size: 30px;
margin-bottom: 20px;
}
.carousel-caption p{
font-size: 20px;
}
To make testing easier i added some grey color to the background (you can remove it later).
What I think you are missing, is to add the Bootstrap scripts, you can see the code for an example.
Here you have how to do it, from Bootstrap documentation.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
>>>>>>>>>> SCRIPTS HERE <<<<<<<<<<<<<
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
>>>>>>>>>>> UP HERE <<<<<<<<<<<<<<<<<
<title></title>
</head>
<body style="background-color: gray">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="IMAGE 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Regarding your question about "where" to put the text, after the images will be ok.
Here you have a working example (from one of my portfolio projects):
<!-- Testimonials -->
<section id="testimonials" class="colored-section">
<div id="testimonials-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
</html>
Please, mark the answer as accepted ;)
below things worked for me
<div class="carousel-caption d-block">
Instead of
<div class="carousel-caption d-none d-md-block">
read here display properties
I'm trying to make a 2 columns layout with bootstrap 4.5
It should display as 2 columns when seen on larger display, then in smaller display the different divs should be stacked in 1 column. I followed the "Nesting columns" section of this example: https://getbootstrap.com/2.3.2/scaffolding.html
This is my aspx code:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="MainPage.aspx.vb" Inherits="Efesto_2.MainPage" ValidateRequest="false" Culture="it-IT" UICulture="it-IT" MaintainScrollPositionOnPostback="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efesto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="Content/bootstrap.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<script src="Scripts/jquery-3.5.1.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="Content/fontawesome-all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" EnablePartialRendering="false"></asp:ScriptManager>
<nav class="navbar navbar-expand-md navbar-light fixed-top text-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="MainPage.aspx" runat="server" id="MenuHome">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Clienti.aspx" runat="server" id="MenuClienti">Clienti</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuChiamate" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chiamate
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="RichiesteEmail.aspx">Richieste Email</a>
<asp:LinkButton class="dropdown-item" runat="server" ID="lnkNuovaChiamata" UseSubmitBehavior="false" OnClientClick="javascript:window.open('chiamata.aspx?RFRic=0&id=0&azione=inserisci','_blank','left=20,top=20,width=620,height=700,status=no, menubar=no, toolbar=no,scrollbars=yes,resizable=1');">INSERISCI NUOVA</asp:LinkButton>
<a class="dropdown-item" href="ElencoChiamate.aspx">Elenco chiamate</a>
<a class="dropdown-item" href="kanban.aspx">Attività</a>
<a class="dropdown-item" href="Interventi.aspx">Interventi</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuMagazzino" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Magazzino
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="GestioneProdotti.aspx">Gestione prodotti</a>
<%--<asp:LinkButton runat="server" ID="LinkButton1" UseSubmitBehavior="false" OnClientClick="javascript:window.open('chiamata.aspx?RFRic=0&id=0&azione=inserisci','_blank','left=20,top=20,width=620,height=700,status=no, menubar=no, toolbar=no,scrollbars=yes,resizable=1');">INSERISCI NUOVA</asp:LinkButton>
<a class="dropdown-item" href="ElencoChiamate.aspx">Elenco chiamate</a>
<a class="dropdown-item" href="kanban.aspx">Attività</a>
<a class="dropdown-item" href="Interventi.aspx">Interventi</a>--%>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="VulcanoPage.aspx">Vulcano</a>
</li>
<li class="nav-item">
<asp:LinkButton class="nav-link" Text="Logout" runat="server" ID="btnLogout" OnClick="btnLogout_Click" />
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuStrumenti" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-right: 8em;">Strumenti
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ModuloServizi.aspx" target="_blank">Modulo Servizi</a>
</div>
</li>
</ul>
<%--<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>--%>
</div>
</nav>
<div class="alert alert-danger alert-dismissible" runat="server" id="divAlert" style="display: none;">
×
<asp:Label runat="server" ID="lblAlertTitolo" Font-Bold="true"></asp:Label><br />
<asp:Label runat="server" ID="lblAlertMessaggio"></asp:Label>
</div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="conditional">
<ContentTemplate>
<div style="padding: 2rem; padding-top: 6rem;">
<div class="row">
<div class="span9">
<div class="col9">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Chiamate giorno</h4>
</div>
<div class="card-body">
<div>
<asp:TextBox runat="server" ID="txtData" Type="date" ToolTip="Data" required="required" AutoPostBack="true" autocomplete="off"></asp:TextBox>
<asp:DropDownList ID="ddlUtenti" runat="server" AppendDataBoundItems="true" CssClass="tendina tendina-auto" ToolTip="Scegli tecnico" AutoPostBack="true" OnSelectedIndexChanged="ddlUtenti_SelectedIndexChanged">
<asp:ListItem Value="-1">Tutti</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<div class="content">
<div id="divChiamateGiorno" class="scrollDiv">
<asp:GridView ID="grdChiamateGiorno" runat="server" AutoGenerateColumns="False" DataKeyNames="idchia,dalle,alle,idstato" DataSourceID="SqlChiamateGiorno" AllowSorting="True" CssClass="tablestyle">
<AlternatingRowStyle BackColor="WhiteSmoke" CssClass="altrowstyle altezzaMinima" Height="50px" Width="100%" />
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<HeaderStyle Font-Bold="True" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" Height="30px" CssClass="headerstyle" />
<RowStyle CssClass="rowstyle altezzaMinima" Height="50px" />
<Columns>
<asp:BoundField DataField="tecnico" HeaderText="Tecnico" SortExpression="tecnico" />
<asp:BoundField DataField="ragsoc" HeaderText="Cliente" SortExpression="ragsoc" ItemStyle-Width="30%" />
<asp:BoundField DataField="rdescr" HeaderText="Richiesta" SortExpression="rdescr" ItemStyle-Width="50%" />
<asp:BoundField DataField="prior" HeaderText="Priorità" SortExpression="prior" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="app" HeaderText="Appuntamento" SortExpression="app" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="assremota" HeaderText="Remoto" SortExpression="assremota" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Classif" HeaderText="Class." SortExpression="Classif" ItemStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="idchia" HeaderText="idchia" InsertVisible="False" ReadOnly="True" SortExpression="idchia" Visible="false" />
<asp:BoundField DataField="tipo" HeaderText="tipo" SortExpression="tipo" Visible="false" />
<asp:BoundField DataField="rforo" HeaderText="rforo" SortExpression="rforo" Visible="false" />
<asp:BoundField DataField="dalle" HeaderText="dalle" SortExpression="dalle" Visible="false" />
<asp:BoundField DataField="alle" HeaderText="alle" SortExpression="alle" Visible="false" />
<asp:BoundField DataField="idstato" HeaderText="idstato" SortExpression="idstato" Visible="false" />
<asp:BoundField DataField="Bloccato" HeaderText="Bloccato" SortExpression="Bloccato" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="" ItemStyle-Width="5%">
<ItemTemplate>
<div class="tooltip">
<i id="collapse3" runat="server" class="fa fa-caret-square-o-left fa-lg" aria-hidden="true"></i>
<span class="tooltiptext" style="width: 170px;" id="litGestioneGiorn" runat="server"></span>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlChiamateGiorno" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="select utenti.nome as tecnico, Richieste.IDRic as idchia, richieste.descr as rdescr, ISNULL(richieste.assistremota,0) as assremota, Clienti.RagSociale as ragsoc, richieste.descr as descr, richieste.priorita as prior, richieste.tipo as tipo, richieste.rforologio as rforo, ISNULL(statoric.appuntamento,0) as app, ISNULL(statoric.oradalle,0) as dalle, ISNULL(statoric.oraalle,0) as alle, statoric.ID as idstato, left(isnull(Clienti.punta,''),2) as classif, right(left(isnull(Clienti.punta,''),3),1) as Bloccato from clienti inner join richieste on clienti.idcliente = richieste.rfcliente inner join statoric on statoric.rfric = richieste.idric inner join stati on stati.idstato = statoric.rfstato inner join utenti on utenti.idutente=statoric.rftecnico where statoric.attuale = 1 and (statoric.rfstato < 14 or statoric.rfstato=41) and statoric.dataass = #data and (#tecnico = -1 or statoric.rftecnico = #tecnico) order by app desc, oraalle asc, prior desc"><%--statoric.dataass between #data and coalesce(#data2, #data)--%>
<SelectParameters>
<asp:ControlParameter ControlID="txtData" DefaultValue="17/01/2017" Name="data" PropertyName="Text" Type="DateTime" />
<asp:ControlParameter ControlID="ddlUtenti" DefaultValue="0" Name="tecnico" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<p>
</p>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td></td>
<td align="right">
<asp:Button runat="server" name="Stampa" type="button" class="gbutton" ID="btnStampa" Text="Stampa" />
<%--onclick="printdiv('divChiamateGiorno');" --%>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Calendario</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Consuntivazione rapida</h4>
</div>
<div class="card-body">
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Chiamate aperte</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Attività</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<%-- PER APRIRE I MENU DELLA NAVBAR SUL MOUSEOVER --%>
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown, .btn-group").hover(function () {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<script>
function chiudiAlert() {
__doPostBack('chiudiAlert');
}
</script>
and this is what I get:
and this what I want:
Ok I ended up using container-fluid and col-lg
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 4 years ago.
Can any one help me out of my problem? though i have been seen semilar problem from this site but i'm unable to fix my problem. here is my code..
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device.width, initial-scale=1"/>
<meta http-equiv="X-UA-Conpatible" content="IE=edge"/>
<h:outputStylesheet library="css" name="bootstrap.css"/>
<link href="resources/css/w3.css" rel="stylesheet" type="text/css"/>
<link href="resources/css/w3-theme-teal.css" rel="stylesheet" type="text/css"/>
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading">Student Wise Fees Collection Details</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="panel panel-info" >
<div class="panel-heading">Payment Details</div>
<div class="panel-body">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-top: 4%">
<h:form id="form1">
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1" style="color: blue;">Student Id:</span>
<p:inputText id="student_id" value="#{controllerBean.selectedfee.stuId}" type="text" readonly="true" style="width: 85%; color: blue;" class="form-control" placeholder="Student Id"/>
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Name:</span>
<p:inputText id="stname" type="text" readonly="true" value="#{controllerBean.selectedfee.name}" class="form-control" placeholder="Name of the student" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Program:</span>
<p:inputText id="pname" type="text" readonly="true" value="#{controllerBean.selectedfee.program}" class="form-control" placeholder="Program Name" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Session:</span>
<p:inputText id="s_name" type="text" readonly="true" value="#{controllerBean.selectedfee.session}" class="form-control" placeholder="Session Name" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Recept No:</span>
<p:inputText id="recptno" type="text" value="#{controllerBean.selectedfee.recptNo}" readonly="true" class="form-control" placeholder="Recept Number" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Amount:</span>
<p:inputText id="a_mnt" type="text" value="#{controllerBean.selectedfee.amount}" readonly="true" class="form-control" placeholder="Paid Amount" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1" style="color: green;">Voucher:</span>
<p:inputText id="voucher" type="text" value="#{controllerBean.selectedfee.AIBLVoucher}" readonly="true" style="color: green;" class="form-control" placeholder="AIBL Voucher Number" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 4%;">
<span class="input-group-addon" id="sizing-addon1" style="color: red;">AUB Token:</span>
<p:inputText id="aub_token" type="text" value="#{controllerBean.selectedfee.stud_pay_rec_mid}" style="color: red;" readonly="true" class="form-control" placeholder="AUB TXN ID Number" />
</div>
</h:form>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9" >
<div class="col-lg-12 col-md-12 col-sm-12" >
<div class="panel panel-info">
<div class="panel-heading">Student's Payment Record</div>
<div class="panel-body">
<h:form id="form2">
<input type="text" class="form-control" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Tasks" />
<p:dataTable class="table table-hover" value="#{controllerBean.listofunifees}" var="FEES_COLLECTION" selection="#{controllerBean.selectedfee}" id="task-table" rowKey="#{FEES_COLLECTION.stud_pay_rec_mid}" selectionMode="single" paginator="true" paginatorPosition="bottom" rows="7" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" >
<p:ajax event="rowSelect" update=":form1" />
<p:column headerText="StuId" width="11%">
<h:outputText value="#{FEES_COLLECTION.stuId}" />
</p:column>
<p:column headerText="Student Name">
<h:outputText value="#{FEES_COLLECTION.name}" />
</p:column>
<p:column headerText="Program" width="15%">
<h:outputText value="#{FEES_COLLECTION.program}" />
</p:column>
<p:column headerText="Session" width="11%">
<h:outputText value="#{FEES_COLLECTION.session}" />
</p:column>
<p:column headerText="Rcpt No" width="10%">
<h:outputText value="#{FEES_COLLECTION.recptNo}" />
</p:column>
<p:column headerText="Amount" width="10%">
<h:outputText value="#{FEES_COLLECTION.amount}" />
</p:column>
<p:column headerText="Voucher" width="11%">
<h:outputText value="#{FEES_COLLECTION.AIBLVoucher}" />
</p:column>
</p:dataTable>
</h:form>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-top: 0px;">
<div class="col-lg-4 col-md-4 col-sm-4">
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h:form id="form3">
<button type="button" class="btn btn-success btn-sm col-lg-5 col-md-5 col-sm-5">Save</button>
<div class="col-lg-2 col-md-2 col-sm-2"></div>
<button type="button" class="btn btn-danger btn-sm col-lg-5 col-md-5 col-sm-5">Cancel</button>
</h:form>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
</div>
</div>
</div>
</div>
</div>
</ui:composition>
When i run this code, it shows javax.faces.FacesException: Cannot find component with expression ":form1:st_id" referenced from "centrepage:form2:task-table".
Now i've got my answer. The should be ":centrepage:form1:st_id, .., ..." and so on. bottom line is update="centrepage:form1:st_id". thanks for every one
I am creating an app similar to LeanKit's Kanbanize app. LeanKit
Here is my HTML Code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign In</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
</head>
<script>
var onDragEnter = function(event) {
event.preventDefault();
$("#dropzone").addClass("dragover");
},
onDragOver = function(event) {
event.preventDefault();
if(!$("#dropzone").hasClass("dragover"))
$("#dropzone").addClass("dragover");
},
onDragLeave = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
},
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
console.log(event.originalEvent.dataTransfer.files);
};
$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);
</script>
<body style="margin:0; background-color: #F2F2F2;">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Welcome to Kanban View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" style="width:900px; height:500px;padding-top:70px;">
<div class="row">
<div class="col-md-3">
<h4>Ready to Start</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test1">Test 1</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test2">Test 2</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test3">Test 3</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test4">Test 4</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<div class = "col-md-3">
<h4>In Progress</h4>
<div id='dropzone'><ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Search Results Page</div>
</div>
</div>
</li>
</div> </div>
<div class = "col-md-3">
<h4>Ready for Review</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Welcome Page</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "col-md-3">
<h4>Recently Finished</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Login Functionality</div>
</div>
</div>
</li>
</ul></div>
</div>
</div>
<!--Footer-->
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div> <!-- container-->
</div> <!-- navbar navbar-default navbar-fixed-bottom" -->
</div>
</body>
</html>
I added the drag and drop code based on this question. I can see by cards are dragging but cannot drop to In Progress section. The functionality is I should be able to drag a card from anywhere and drop to any of the 4 sections, based on the number of cards, each section should be responsive so they can fit the new card. Any advice would really be appreciated. Thank you so much.
You need to actually move the DOM element. Here's one way you could do it:
https://jsfiddle.net/z3o28qut/
var dragItem;
// You should make this selector more specific to your card elements
$("div")
.on("dragstart", function(event) {
dragItem = $(event.currentTarget).find('li') && $(event.currentTarget).find('li')[0];
});
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
var ul = $(this).find('ul')[0];
if (dragItem) {
ul.appendChild(dragItem);
}
};