I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/
Related
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
I have a button that redirect me to another view, in a href tag. When I click on the button its redirect me to a href view. like:
<a ng-click="gotoChat()" /*Redirect to another view
class="item item-avatar-right item-icon-left">
<i class="icon" ng-hide="{{item.toClose}} == 0">
<button ng-click="Close('{{item.key}}')" class="button button-assertive">סגור בקשה</button>
</i>*/When I click on the button its start gotoChat() and Close() instead of only Close()
</a>
How can I do that its redirect me to button function?
Change href to div in html as follow
<div ng-click="gotoChat()" class="item item-avatar-right item-icon-left">
<i class="icon" ng-hide="{{item.toClose}} == 0"><button ng-click="Close('{{item.key}}')" class="button button-assertive">סגור בקשה</button></i>*/When I click on the button its redirect me to a href function
</div>
and in your controller
$scope.gotoChat = function(){
$state.go("STATE OF PAGE FOR REDIRECT");
}
I would like to pass a value from a slide out of JSSOR to other parts of the DOM.
Markup:
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" ><p>Caption text</p></div>
</div>
JS:
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$(".outer-caption").text(currentCaption);
});
The custom JSSOR Event, EVT_PARK, works fine. But what's missing is how to get the caption of the current slide and put it into the variable currentCaption. How to do that?
And if so, where could I have found that out on my own?
Please have a full test of following code,
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" id="caption-slide-0"><p>Slide 0 Caption</p></div>
</div>
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$("#outer-caption").text($("#caption-slide-" + slideIndex).text());
});
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
I can't bind keypress for a div that I applied overlay to.
Bellow is the code.
<div>
Content Load overlay
</div>
<div id="overlayDiv" class="overlay">
<div id="someInnerDiv">
Text
</div>
</div>
<script type="text/javascript>
function LoadOverlay()
{
$('#overlayDiv').overlay();
$('#someInnerDiv').keypress(function() { alert (' key was pressed' ); });
$('#someInnerDiv').focus();
}
$("#load").click(LoadOverlay);
</script>
Alert is not showing up.
Here is the code on jsfiddle: http://jsfiddle.net/JEmgg/4/
I am guessing that it's the overlay that catches the event, but I can't figure it out.
keypress event works if you replace that div with some textarea or input type='text' so when you type, the keypress event occurs and alert will work.
DEMO : http://jsfiddle.net/JEmgg/5/
Replace :
<div id="someInnerDiv" ></div>
with
<input type="text" id="someInnerDiv" />
The problem is that you can't insert text without a textarea, an input type text or other input element.
try this code and it works:
DEMO
<div id="overlayDiv" class="overlay">
<div id="someInnerDiv">
Text
<input type="text" name="test" id="test"/>
</div>
</div>