I am using Delphi XE2 + TWebbrowser,the web page source code like below:
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var loaded = 0;function ScriptLoaded() { ++loaded; if(loaded == 2) ARSystemInit(); }
var ReportSelForm="ReportSelection", RelContextPath='../../../../',AbsContextPath=null;</script>
<link rel="stylesheet" href="../../../../resources/stylesheets/7.1.00 Patch 009 201002230034/ARSystem.css">
<link rel="stylesheet" href="../../../../resources/stylesheets/7.1.00 Patch 009 201002230034/ARSystem_zh.css">
<script type="text/javascript" src="../../../../resources/javascript/7.1.00 Patch 009 201002230034/LocalizedMessages_zh_CN.js" defer></script>
<script type="text/javascript" src="../../../../resources/javascript/7.1.00 Patch 009 201002230034/locale/zh_CN.js" defer></script>
<script type="text/javascript">function DVFsf(){return "\x3cHTML\x3e\x3c/HTML\x3e";} function DVFol(){}</script>
<script type="text/javascript" src="../../../../resources/javascript/7.1.00 Patch 009 201002230034/ClientCore.js" defer></script>
<script type="text/javascript" src="form.js/f7a68ba8.js" defer></script>
<script type="text/javascript">document.write('\x3cscript src="userdata.js?winname=ar05UltraProcess%3AITIL_Incident'+encodeURIComponent(name)+'" defer\x3e\x3c/'+'script\x3e');</script>
</head>
<body onload="ScriptLoaded()" draghandler="BodyDrag" style="display:none">
<div id="Toolbar"><div class="TBTopBarStatus">当前模式： <span class="TBTopBarStatusMode"></span></div><a class="btn TBTopBarBox" href="javascript:"><img class="tbright" src="../../../../resources/images/tb_right.gif" alt="显示工具栏" /><img class="tbdown" src="../../../../resources/images/tb_down.gif" alt="隐藏工具栏" /></a><table cellpadding=0 cellspacing=0 class="Toolbar"><tbody><tr><td nowrap class="TBGroup TBGroup0">
<a class="searchsavechanges btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBsearchsavechanges">搜索</div>
</a>
</td>
<td nowrap class="TBGroup TBGroup1">
<a class="newsearch btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBnewsearch"><img src="../../../../resources/images/tb_search.gif" alt="新搜索" /> 新搜索</div>
</a>
<a class="newrequest btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBnewrequest"><img src="../../../../resources/images/tb_request.gif" alt="新请求" /> 新请求</div>
</a>
<a class="modifyall btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBmodifyall"><img src="../../../../resources/images/tb_modall.gif" alt="全部修改" /> 全部修改</div>
</a>
</td>
<td nowrap class="TBGroup TBGroup2">
<a class="savedsearches btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBsavedsearches"> 多项搜索</div>
</a>
<a class="advancedsearch btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBadvancedsearch">高级搜索</div>
</a>
<a class="clear btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBclear">清除</div>
</a>
<a class="settodefaults btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBsettodefaults">设置为默认值</div>
</a>
<a class="statushistory btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBstatushistory">状态历史记录</div>
</a>
</td>
<td nowrap class="TBGroup TBGroup3">
<a class="logout btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBlogout">注销</div>
</a>
<a class="help btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBhelp">帮助</div>
</a>
<a class="home btn btn3d tbbtn" href="javascript:" style="position:static">
<div id="TBhome">主页</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="ResultsList">
<div arid=1020 artype="Table" ardbn="CustomResultsList" class="arfid1020 ardbnCustomResultsList" style="top:0; left:0; width:0; height:0;visibility:hidden;z-index:0;" arcols="2147483647" arcolws="1575" arcoldlen="254" ardrill=1 arserver="#" arschema="#" armaxrows=0 ardtype=1 arcsize=0 arfixhdr=1 arselrows=0 arselinit=0 arselrefresh=0 arautofit=0 arsort="" arqual="{qual:"", ids:[],extids:[]}"><img src="../../../../resources/images/menu_down.gif" alt="" class="TableSortImgUp" arindom=1 /><img src="../../../../resources/images/menu_up.gif" alt="" class="TableSortImgDown" arindom=1 /><div class='TableHdr'><table class='TableHdr' cellpadding=0 cellspacing=0><tbody><tr><td nowrap valign=middle class='TableHdrL'></td><td nowrap valign=middle class='TableHdrR'></td></tr></tbody></table></div><div class='TableInner'></div><div class='TableFtr'><table class='TableFtr' cellpadding=0 cellspacing=0><tbody><tr><td nowrap valign=middle class='TableFtrL'></td><td nowrap valign=middle class='TableFtrR'></td></tr></tbody></table></div></div>
</div>
<div id="Splitter" draggable=1 dragoriginal=1>
</div>
<div id="FormContainer" arcs=1 style="background-color:">
<div style="top:0;left:0;width:1173;height:869"> </div>
<div arid=700000002 artype="Char" ardbn="BaseName" class="df dfro arfid700000002 ardbnBaseName" style="z-index:994;top:2; left:9; width:100; height:25;">
<span style="top:0; left:0; width:100; height:0;"><label class="label f9" for="x-arid700000002" style="width:100px;left:0px;bottom:25px;color:;text-align:center;"></label></span><textarea class="text sr f2 dat" wrap="off" id="arid700000002" cols="20" maxlen=254 style="top:0; left:0; width:100; height:25;" readonly rows=1></textarea>
</div>
<a href="javascript:" arid=700040001 artype="Control" ardbn="Btn_Chart" class="btn btnurl arfid700040001 ardbnBtn_Chart" style="top:5; left:842; width:54; height:20;visibility:hidden;z-index:998;background-color:transparent;"><div class="btntextdiv" style="top:0; left:0; width:54; height:20;"><div class="f7" style=";width:54">流 程 图</div>
</div>
</a>
<a href="javascript:" arid=809041101 artype="Control" ardbn="Btn_AddDate" class="btn btnurl arfid809041101 ardbnBtn_AddDate" style="top:5; left:916; width:65; height:20;visibility:hidden;z-index:1004;background-color:transparent;"><div class="btntextdiv" style="top:0; left:0; width:65; height:20;"><div class="f7" style=";width:65">补充资料</div>
</div>
</a>
<a href="javascript:" arid=700040078 artype="Control" ardbn="Btn_Shengchengzhishi" class="btn btnurl arfid700040078 ardbnBtn_Shengchengzhishi" style="top:31; left:841; width:65; height:20;visibility:hidden;z-index:1003;background-color:transparent;"><div class="btntextdiv" style="top:0; left:0; width:65; height:20;"><div class="f7" style=";width:65">生 成 知 识</div>
</div>
</a>
**<a href="javascript:" arid=700040002 artype="Control" ardbn="Btn_Edit" class="btn btn3d btnd arfid700040002 ardbnBtn_Edit" style="top:32; left:916; width:65; height:20;visibility:hidden;z-index:999;"><div class="btntextdiv" style="top:0; left:0; width:65; height:20;"><div class="f1" style=";width:65">处 理</div>
</div>
</a>**
<div arid=700000003 artype="Char" ardbn="BaseSN" class="df dfro arfid700000003 ardbnBaseSN" style="z-index:995;top:7; left:592; width:198; height:20;">
<label class="label f6" for="x-arid700000003" style="top:4; left:0; width:51; height:16;">流水号：</label><textarea class="text sr dat" wrap="off" id="arid700000003" cols="20" maxlen=254 style="top:0; left:52; width:146; height:20;" readonly rows=1></textarea>
</div>
<div arid=700000004 artype="Char" ardbn="BaseCreatorFullName" class="df dfro arfid700000004 ardbnBaseCreatorFullName" style="z-index:996;top:7; left:252; width:122; height:20;">
<label class="label f6" for="x-arid700000004" style="top:4; left:0; width:60; height:16;">建单人名：</label><textarea class="text sr dat" wrap="off" id="arid700000004" cols="20" maxlen=254 style="top:0; left:61; width:61; height:20;" readonly rows=1></textarea>
</div>
<div arid=806000100 artype="Char" ardbn="Status" ardcf=1 class="df dfro arfid806000100 ardbnStatus" style="z-index:1002;top:7; left:110; width:134; height:20;">
<label class="label f6" for="x-arid806000100" style="top:4; left:0; width:38; height:16;color:;">状态：</label><textarea class="text sr dat" wrap="off" id="arid806000100" cols="20" maxlen=254 style="top:0; left:39; width:95; height:20;" readonly rows=1></textarea>
</div>
<div arid=700000006 artype="Time" ardbn="BaseCreateDate" class="df dfro arfid700000006 ardbnBaseCreateDate" style="z-index:997;top:7; left:386; width:194; height:20;">
<label class="label f6" for="arid700000006" style="top:4; left:0; width:60; height:16;">登记时间：</label><input id="arid700000006" class="text dat" type="text" style="top:0; left:61; width:133; height:20;" readonly ds=0 />
</div>
<div arid=700030001 artype="PageHolder" armaxh=22 class="PageHolder arfid700030001 ardbnPag_Main" style="top:52; left:12; width:973; height:419;background-color:white;z-index:1000;">
<div class="TabChildMissingBorder" style="visibility:hidden;top:22;width:973">
</div>
<div style="visibility:hidden;height:22;width:973" class="OuterTabsDiv">
<div class="ScrollingTab" style="position:relative;float:left;">
<span class="TabLeftRounded"> </span>
<span class="Tab"><<
</span>
<span class="TabRightRounded"> </span>
</div>
<div class="TabsViewPort" style="position:relative;overflow:hidden;float:left;width:5000;height:22">
<div style="overflow:visible;float:left;width:5000;top:0;left:0">
<dl class="OuterOuterTab">
<dd class="OuterTab" artabid=700030002><span class="TabLeftRounded"> </span>
<span class="Tab">基 本
</span>
<span class="TabRight"> </span>
</dd>
<dd class="OuterTab" artabid=806842007><span class="TabLeft"> </span>
<span class="Tab">事件信息
</span>
<span class="TabRight"> </span>
</dd>
<dd class="OuterTab" artabid=700030094><span class="TabLeft"> </span>
<span class="Tab">流程记录
</span>
<span class="TabRightRounded"> </span>
</dd>
</dl>
</div>
</div>
Look page source BOLD part , it is a BUTTON on the web page(arid=700040002 artype="Control" ardbn="Btn_Edit" ) . When this page is full loaded , i want to push the BUTTON in delphi .
This should do it:
procedure ClickElementByContent(Document : IDispatch; TagFilter : WideString; Content: WideString);
var Doc : IHTMLDocument3;
El : IHTMLElement;
Elements : IHTMLElementCollection;
Index : Integer;
begin
Doc := Document as IHTMLDocument3;
if Assigned(Doc) then
begin
Elements := Doc.getElementsByTagName(TagFilter);
for Index := 0 to Pred(Elements.length) do
begin
El := Elements.item(EmptyParam, Index) as IHTMLElement;
if ContainsText(El.innerText, Content) then
begin
El.Click;
Break;
end;
end;
end;
end;
how to use:
procedure clickthebutton;
begin
ClickElementByContent(Webbrowser1.Document, 'DIV', 'DEAL');
end;
procedure TTrackITOrderForm.Btn_DealClick(Sender: TObject);
var
Document : IHTMLDocument2 ;
ButtonDiv , temp : IHTMLElement ;
ElementCount , I : Integer ;
begin
Document := wb1.Document as IHTMLDocument2 ;
ElementCount := Document.all.length ;
for i := i to ElementCount-1 do
begin
temp := Document.all.item(i,'') as IHTMLElement ;
lst1.Items.Add(temp.id+'-->'+temp.innerText) ;
if (temp.tagName = 'DIV') and (temp.innerText = '处理') then
begin
ShowMessage(temp.innerText);
ButtonDiv := temp ;
Break ;
end;
end;
if ButtonDiv <> nil then
ButtonDiv.click ;
end;
Related
I have been trying to delete specific clone data using JQuery -UI. i had to change my functions recently since then the remove button doesn't work. Please help me find my error.
My whole function that includes, Multidimensional Arrays along with form cloning! check out my remove function which i think has no problem in it.
$(function() {
var questionHolder = $('.question').clone(true);
$("#addQuestion").on('click', function(e) {
e.preventDefault();
var str = $("p.number:last").text(),
newValue = parseInt(str, 10) + 1;
var newQ = questionHolder.clone();
newQ.find('input, textarea')
.each(function() {
this.name = this.name.replace(/\[(\d+)\]/, '[' + newValue + ']');
})
.end()
.find('.number')
.html(newValue)
.end()
.appendTo('#questioncontainer')
.after('<br><button class="addQuestion_delete btn btn-danger" type="button">Remove Parent Clone</button><br>');
$(".addQuestion_delete").click(function(e) {
$(this).closest("#questioncontainer").remove();
e.preventDefault();
});
});
$('body').on('click', '.addAnswer', function(e) {
e.preventDefault();
var group = $(this).parent();
parent = $(this).parent().parent();
group.find(".answer:last")
.clone(true)
.find('input, textarea')
.each(function() {
this.name = this.name.replace(/\[(\d+)\]$/,
function(str, p1) {
return '[' + (parseInt(p1, 10) + 1) + ']';
});
})
.end()
.appendTo(
group.find('.answerContainer'))
.after('<button class="addAnswer_delete btn btn-danger" type="button"><i class="fa fa-minus"></i>Remove Child clone</button><br><br><br>');
$(".addAnswer_delete").click(function(e) {
$(this).closest(".answerContainer").remove();
e.preventDefault();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- parent container -->
<div id="questioncontainer">
<!-- parent that clones -->
<div style="border:1px solid black; width:400px; padding:20px; margin-bottom:10px;" class="question border p-5 mt-3 shadow">
<!-- clone items inputs/textareas/files -->
<div class="row">
<div class="col-lg-6">
<!-- Educational Institute -->
<input oninput="checkCompany()" id="company" name="employer[1]" type="text" class="input-form track track_exp_qua" data-score=20>
<span class="bar"></span>
<label class="input-label"> Company <span id="text" class="required"> </span></label>
<!-- Educational Institute -->
<p class="validate text-danger pt-2" id="company_error"></p>
</div>
<div class="col-lg-6">
<!-- Job title -->
<input oninput="checkJobTitle()" id="job_title" name="job_title[1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label"> Job Title <span id="text" class="required"> </span></label>
<!-- Job title -->
<p class="validate text-danger pt-2" id="job_title_error"></p>
</div>
</div>
<div class="justify-content-center pb-4">
<h4>Below is the child clone</h4>
</div>
<!-- child container -->
<div style="border:1px solid red; padding:20px;" class="answerContainer">
<div class="answer">
<div class="row">
<!-- best project url -->
<div class="col-lg-6">
<input name="best_project[1][1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label">Best Project<small style="color:#FFBF00;"> (URL's Only) </small> <span id="text" class="optional"> </span></label>
</div>
<!-- best project url -->
</div>
<br>
</div>
</div>
<!-- clone items inputs/textareas/files end-->
<br>
<button class="addAnswer btn btn-info" href="#"><i class="fa fa-plus"></i> Add Child</button>
</div>
<!-- parent that clones end-->
</div>
<!-- parent container end -->
<br>
<button id="addQuestion" class="btn btn-success" href="#"> <i class="fa fa-plus"></i> Add Parent </button>
Some of your objects were too ambigous, so things were not going to work as you expected.
Consider the following example.
$(function() {
function updateName(i, n) {
i = $(i);
var o = i.attr("name");
if (n != undefined) {
i.attr("name", o.replace(/\[(\d+)\]/, '[' + n + ']'));
} else {
i.attr("name", o.replace(/\[(\d+)\]$/,
function(str, p1) {
return '[' + (parseInt(p1, 10) + 1) + ']';
}));
}
return true;
}
function makeDel(cnt, pClass, tObj) {
return $("<button>", {
class: pClass + " btn btn-danger",
type: "button"
}).html(cnt).insertAfter(tObj);
}
function addQuestion(event) {
var self = $(event.target);
event.preventDefault();
var newValue = $(".question").length + 1;
var newQ = $(".question").eq(0).clone(true);
$("input, textarea", newQ).each(function() {
updateName(this, newValue);
});
newQ.appendTo("#questioncontainer");
var newD = makeDel("Remove Parent Clone", "addQuestion_delete", newQ);
newD.click(function(e) {
e.preventDefault();
newQ.remove();
$(this).remove();
});
}
function addAnswer(event) {
var self = $(event.target);
event.preventDefault();
var group = self.parent().find(".answerContainer");
var newA = $(".answer:last", group).clone(true);
$("input, textarea", newA).each(function() {
updateName(this);
});
newA.appendTo(group);
var newD = makeDel("<i class='fa fa-minus'></i> Remove Child clone", "addAnswer_delete", group);
newD.click(function(e) {
e.preventDefault();
newA.remove();
$(this).remove();
});
}
$("body").on("click", "#addQuestion", addQuestion);
$('body').on('click', '.addAnswer', addAnswer);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- parent container -->
<div id="questioncontainer">
<!-- parent that clones -->
<div style="border:1px solid black; width:400px; padding:20px; margin-bottom:10px;" class="question border p-5 mt-3 shadow">
<!-- clone items inputs/textareas/files -->
<div class="row">
<div class="col-lg-6">
<!-- Educational Institute -->
<input oninput="checkCompany()" id="company" name="employer[1]" type="text" class="input-form track track_exp_qua" data-score=20>
<span class="bar"></span>
<label class="input-label"> Company <span id="text" class="required"> </span></label>
<!-- Educational Institute -->
<p class="validate text-danger pt-2" id="company_error"></p>
</div>
<div class="col-lg-6">
<!-- Job title -->
<input oninput="checkJobTitle()" id="job_title" name="job_title[1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label"> Job Title <span id="text" class="required"> </span></label>
<!-- Job title -->
<p class="validate text-danger pt-2" id="job_title_error"></p>
</div>
</div>
<div class="justify-content-center pb-4">
<h4>Below is the child clone</h4>
</div>
<!-- child container -->
<div style="border:1px solid red; padding:20px;" class="answerContainer">
<div class="answer">
<div class="row">
<!-- best project url -->
<div class="col-lg-6">
<input name="best_project[1][1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label">Best Project<small style="color:#FFBF00;"> (URL's Only) </small> <span id="text" class="optional"> </span></label>
</div>
<!-- best project url -->
</div>
<br>
</div>
</div>
<!-- clone items inputs/textareas/files end-->
<br>
<button class="addAnswer btn btn-info" href="#"><i class="fa fa-plus"></i> Add Child</button>
</div>
<!-- parent that clones end-->
</div>
<!-- parent container end -->
<br>
<button id="addQuestion" class="btn btn-success" href="#"> <i class="fa fa-plus"></i> Add Parent </button>
Objects are created and referenced a bit better, so it's easier to manipulate them and remove them as needed. Anytime you are doing the same thing multiple times, you could consider creating a function for it.
As you can see in the picture below I have a form for adding notes and a form for editing notes on my page. What I want to do is: When I click edit button ("Düzenle" in my page), I want to open the window on the right as a pop-up.
The part codes on the left side of the picture ProjeListPartial.cshtml:
#model List<tbl_Not>
#if (Model.Any())
{
<div class="col-md-12 col-sm-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption caption-md">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase"><a>Proje Notları Toplam: #Model.Count() </a></span>
</div>
</div>
<div class="portlet-body">
<div class="scroller" style="height: 338px;" data-always-visible="1" data-rail-visible1="0" data-handle-color="#D7DCE2">
<div class="general-item-list">
#foreach (var item in Model)
{
<div class="item">
<div class="item-head">
<div class="item-details">
<a class="item-name primary-link">#item.Adi</a>
<br />
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-label">#item.tbl_Kullanici.Adi</span>
}
<span class="item-label">#item.EklenmeTarihi.ToString("dd.MM.yyy")</span>
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.BirimTamYetki) || Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-status">
<!-- This is my edit code -->
Düzenle
<!-- -->
Sil
</span>
}
</div>
</div>
<div class="item-body"> #item.Icerik </div>
</div>
}
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left: 0px;">
<div class="col-md-12">
<div class="dataTables_paginate paging_bootstrap_number hidden-print" id="sample_3_paginate">
<ul class="pagination" style="visibility: visible;">
#Html.Raw(ViewBag.Sayfalama)
</ul>
</div>
</div>
</div>
}
else
{
<h3>Not Bulunmamaktadır.</h3>
}
The part codes on the right side of the picture Ekle.cshtml:
#model tbl_Not
#{
ViewBag.Title = "Not";
bool IsProjeNotu = Model.ProjeID > 0 ? true : false;
if (IsProjeNotu)
{
Layout = null;
}
}
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-file-o"></i>Not Ekle/Düzenle
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body #(IsProjeNotu?"portlet-collapsed":"")">
<form method="post" role="form" action="#Url.Action("Ekle", "Not", new { ProjeID = Model.ProjeID, BirimID = Model.BirimID, IsProjeNotu = IsProjeNotu })">
<input type="hidden" name="ID" value="#Model.ID" />
<div class="form-body">
#if (!IsProjeNotu)
{
<div class="col-lg-6 formbox pl">
<span>Birim Adı:</span>
<select name="BirimID" id="Birim" class="form-control">
#Html.Raw(ViewBag.Birim)
</select>
</div>
<div class="col-lg-6 pl pr formbox" onchange="return IlGetir();">
<span>Proje Adı:</span>
<select name="ProjeID" id="Projeler" class="form-control"></select>
</div>
}
<div class="col-md-6 pl formbox">
<span>İl/İller:</span>
<select multiple id="Iller" class="form-control">
#foreach (tbl_Il item in ViewBag.Iller)
{
<option value="#item.ID">#item.Adi</option>
}
</select>
<button id="SolaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-plus"></i> Ekle
</button>
</div>
<div class="col-md-6 formbox pr">
<span>İl Çıkar</span>
<select multiple id="SecilenIller" name="IlID" class="form-control">
#foreach (tbl_NotIlIliski item in Model.tbl_NotIlIliski.ToList())
{
<option value="#item.IlID">#item.tbl_Il.Adi</option>
}
</select>
<button id="SagaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-close"></i> Çıkar
</button>
</div>
<div class="col-md-12 formbox pr pl">
<span>Başlık:</span>
<input type="text" maxlength="250" class="form-control" style="width: 230px;" value="#Model.Adi" name="Adi" />
</div>
<div class="col-md-12 formbox pr pl">
<span>İçerik:</span>
<textarea class="mceEditor" style="width: 230px;" name="Icerik">#Model.Icerik</textarea>
</div>
</div>
<div class="col-md-12 formbox pr pl">
<span>Not Durumu:</span>
#foreach (var item in Sabitler.NotDurum)
{
<label class="mt-radio mt-radio-outline" style="margin-left: 15px;">
#item.Adi
<input #( Model.DurumID == 0 ? (item.ID == 1 ? "checked='checked'" : "") : (item.ID == Model.DurumID ? "checked='checked'" : "") ) type="radio" value="#item.ID" name="DurumID" />
<span></span>
</label>
}
</div>
<input type="submit" class="btn blue" id="Kaydet" onclick="$('#SecilenIller option').prop('selected', true);" value="Kaydet" />
</form>
</div>
When I click edit button (Düzenle), this is how a screen comes out:
I have a responsive webapp which uses bootstrap. When mobile-size a hamburger menu shows in the header.
When clicked on a pc/mac/android phone it displays correctly.. But when clicked with iOS-Safari, it shows up for a quarter of a second, and hides again. I suspect this is a height or z-index issue but I'm not sure, and I have not been able to solve it.
You can try for yourself on www.gjovikhk.no.
Anyways.. here is the HTML code for the header and menu :
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo" class="logo-placeholder">
<a href='Default.aspx'>
<img runat="server" id="imgClubLogo" src="" /></a>
</div>
</div>
<div class="navbar-collapse collapse" style="z-index:9999999999">
<ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;">
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLoginMobile" Text="Login" href="/Login" />
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/ViewAboutUs" ID="lnkAboutUsMobile" Text="Om GHK" />
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i> Trenerforum
</li>
<li class="nav">
<div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starPersonalMobile" clientidmode="Static" visible="False"> </div>
<div style="float: left">
<div class="dropdown" runat="server" id="ddlPersonalMobile" clientidmode="Static" visible="False" style="display: inline-block">
<a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important">
Mine lag
</a>
<ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1">
<asp:ListView runat="server" ID="lvCoachesTeamsMobile" ItemType="Servicelayer.Team" OnItemCommand="lvTeams_OnItemCommand">
<ItemTemplate>
<li role="presentation">
<asp:LinkButton runat="server" ID="lnkNavDep" style="color:darkgreen!important" Text='<%# Item.Name %>' CommandArgument='<%# Item.Id %>' CommandName="NavigateToTeam" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
</div>
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/TeamOverview" ID="lnkTeamOverview" Text="Lag" />
</li>
<li class="nav">
<asp:LinkButton Visible="False" runat="server" href="/AdminPage" ID="lnkAdminPage" Text="Admin" />
</li>
<li class="nav" style="display: none">
<asp:LinkButton Visible="False" runat="server" href="/EventCalendar" ID="lnkTeamOverviewMobile" Text="Eventkalender" />
</li>
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLogoutMobile" Text="Logg ut" OnClick="lnkLogoutMobile_OnClick" Visible="False" />
</li>
</ul>
</div>
<div class="navbar-icon-topright">
<div style="float: right; margin-top: -8px; margin-right: 10px">
<button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button>
<%--<img id="contacttrigger" src="Content/Images/icon-contact.png">--%>
<asp:LoginView runat="server" ViewStateMode="Disabled" ID="loginView">
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/UserConfig.aspx" title="Manage your account">
<div style="float: left">
<div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px">
<img class="avatar" runat="server" id="loginAvatar" src="" style="height: 30px; width: 30px" />
</div>
</div>
<div style="float: left; padding-left: 10px; color: #333">
Hei <%: Context.User.Identity.GetUserName() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span>
</div>
</a></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
Try this, with corresponding media queries and/or extra selectors to affect only responsive and/or only iPhone, as precise as you need:
.collapse.in {
overflow: hidden;
}
I am trying to use Fine-Uploader in a asp.net mvc core project, but nothing is being displayed, besides a box, In the inspector in google chrome , I am getting qq is not defined.
I am adding the js,css in _Layout.cshtml
CSS
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/azure.fine-uploader/fine-uploader- gallery.min.css" />
<link rel="import" href="~/lib/azure.fine-uploader/templates/gallery.html" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/azure.fine-uploader/fine-uploader-gallery.min.css" />
<link rel="import" href="~/lib/azure.fine-uploader/templates/gallery.html" />
</environment>
JS
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/azure.fine-uploader/azure.fine-uploader.min.js"> </script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
<script src="~/lib/azure.fine-uploader/azure.fine-uploader.min.js"></script>
</environment>
I have the gallery added in a cshtml as per the example on the fine-uploader site, if I remove the first script tag I get the fine-uploader box showing(See image below), but nothing else is shown.
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
<title>Fine Uploader Gallery UI</title>
<div id="uploader"></div>
<script>
var uploader = new qq.azure.FineUploader({
element: getElementById("uploader")
})
</script>
qq is not defined.
This indicates that you are not loading the fine uploader js file correctly onto your page. I suggest looking at your network requests. You will likely see that either the js file isn't loading at all, or the contents are incorrect.
I was missing a #section Scripts surrounding my script tag
<title>Fine Uploader Gallery UI</title>
<div id="uploader"></div>
#section Scripts{
<script type="text/javascript" src="~/lib/azure.fine-uploader/dist/azure.fine-uploader.min.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<script>
var uploader = new qq.azure.FineUploader({
debug: true,
element: document.getElementById("uploader"),
template: 'qq-template'
})
</script>
}
Having I am having a problem with Ionic native scrolling it does not continue to show the whole screen view
here my simple page view connected to API..
<!--Emporia Home-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<ion-view name="home-view">
<ion-nav-buttons side="left">
<button style="color:white" class="button icon button-clear" ng-click="toggleLeft()"> <font face="emporia2" style="color:white" size="5">h</font></button>
<button style="color:white" class="button icon button-clear" ng-click="toggleLeft()"> EMPORIA</font></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button style="color:white" class="button icon button-clear" ng-href="#/cart"> <font face="emporia2" style="color:white" size="5">a </font></button>
</ion-nav-buttons>
<ion-content ng-controller="homeCtrl" overflow-scroll=”true” scroll="true">
<div class="item item-image">
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" does-continue="true" show-pager="false">
<ion-slide ng-repeat="board in billboard">
<a>
<img ng-src="{{board.banner_image_url}}" onerror="this.src = 'img/ic_noimage_portrait.png';">
</a>
</ion-slide>
</ion-slide-box>
</div>
<div>
<div class="item item-image">
<a href="#/men">
<img ng-src="{{hisStyle[0].full_image_url}}" class="col col-50 hisStyle" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="hisLabel">{{hisStyle[0].name}}</p>
</a>
<a href="#/women">
<img ng-src="{{herStyle[0].full_image_url}}" class="col col-50 herStyle" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="herLabel">{{herStyle[0].name}}</p>
</a>
</div>
</div>
<div class="try item item-image">
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" does-continue="true" show-pager="false">
<ion-slide>
<a href="#/accesories">
<img ng-src="{{category[0].full_image_url}}" class="hi col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category1Label">{{category[0].name}}</p>
</a>
<a href="#/bag">
<img ng-src="{{category[1].full_image_url}}" class="hello col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category2Label">{{category[1].name}}</p>
</a>
</ion-slide>
<ion-slide>
<a href="#/clothing">
<img ng-src="{{category[2].full_image_url}}" class="hi col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category1Label">{{category[2].name}}</p>
</a>
<a href="#/eyewear">
<img ng-src="{{category[3].full_image_url}}" class="hello col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category2Label">{{category[3].name}}</p>
</a>
</ion-slide>
<ion-slide>
<div>
<a href="#/footwear">
<img ng-src="{{category[4].full_image_url}}" class="hi col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category1Label">{{category[4].name}}</p>
</a>
<a href="#/eyewear">
<img ng-src="{{category[3].full_image_url}}" class="hello col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category2Label">{{category[3].name}}</p>
</a>
</ion-slide>
<ion-slide-box>
</div>
</div>
<div>
<div collection-repeat="brand in brands" class="col col-50">
<div class="bg item item-image">
<img ng-src="{{brand.full_image_url}}" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="brand1">Brand Name</p>
</div>
</div>
</div>
</ion-content>
please guid me what to do..thank you..al most all of my page got this issue and I only give one as a example..