I build website with html, css, javascript and jquery.
I added content to sweet alert and add element with id
var share_friends = function(e){
swal({
title: "<i>Title</i>",
content: share_social,
button: "V <u>redu</u>",
});
}
var share_social = document.createElement("div");
share_social.id = 'share'
and I want to add piece of jquery code that when I open the alert it add dynamic content of socials shares
so i added this piece of code
$("#share").jsSocials({
shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
});
but it's not do nothing.
but when I add into my html code (hard-code) the div with the id share it works fine.
e.g
<div id = "share"></div>
How can I fix it?
Related
I've have code to add button via JQuery, It is used to remove row. Button working correctly, just It's without name like [], but should be like [X]. It looks like HTML code created as: <button class="removeRow"></button> instead of <button class="removeRow">X</button>
JQuery
$.fn.optionTest.defaults = {
removeLinkOptions: {
class: 'removeRow',
href: 'javascript:;'
}
};
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions));
removeRow = $($(removeRow).html());
row.append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);
Where should I apped this X to achieve It?
If something unclear - just ask, if needed I can create JS fiddle.
Should be in this line ,when creating button:
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions).text("X"));
I’m new with this javascript and dijit.
My problem: In my js-function I’m building up a dijit.Dialog, using parameters that has been sent to the function.
One of the parameters is a href to en external xhtml-file that contains only the text that’s supposed to be shown in the dialog. Now, I want to add a div with one more link to the dialog, in the containerNode (with a link that's supposed to be specific for every single user).
The problem is that I can se that the added div is there until I reach dialog.show, after that it disapears. The text from the xhtml takes over. If I put it in the domNode (like the button) it shows up in the wrong place.
I've also tried another approach, to let the link be in the external href (in file three), give it an id and tried to reach it that way and manipulate it. Like this:
document.getElementById("bytlosen").href="www.xxx.se";
But it doesn't work. I get "document.getElementById(...) is null.
I would be SO happy if anyone can help me how to add the div (link) to the dialog! It doesn't matter if I
have it in file three and can reach it from file two and manipulate it,
simply adds the div in the js (in file two), or
any other way?
I have three files:
file one.xhtml (calling file two):
<li>Kontakta oss</li>
file two.js:
Xxxx.contactsDialog = function(title, href, cssClass, destroy) {
if (href) {
var options = {
title: title,
href: href
};
if (cssClass)
options["class"] = cssClass;
var dialog = new dijit.Dialog(options);
var div = document.createElement("div");
var bytLosen = document.createElement("a");
bytLosen.appendChild(document.createTextNode("Byt lösenord"));
bytLosen.setAttribute("href", "https://xxxx.xxx.se/xxx/xxx/xxxx=xxxx&TARGET=xxx.xxx.se");
bytLosen.setAttribute("target", "_blank");
div.appendChild(bytLosen);
dialog.containerNode.appendChild(div);
var okButton = document.createElement("button");
okButton.setAttribute("type", "submit");
okButton.setAttribute("style", "margin-top: 10px");
okButton.innerHTML = "Ok";
dojo.addClass(okButton, "button");
dialog.domNode.appendChild(okButton);
dialog.startup();
dialog.show();
dojo.connect(okButton, "onclick", function() {
dialog.hide();
if (destroy) {
dialog.destroy();
}
});
return true;
} else
return false;
};
file three.html:
<div class="popupHeader">Synpunkter och felanmälan <span style="font-weight: normal">skickas till:</span></div>
<div>ajourhallning-xxx#xx.se</div>
<div class="popupHeader">Länkar <span style="font-weight: normal">(till xxxx's externa hemsida)</span></div>
<div>www.xxxxx.se</div>
<div>www.xxxx.se/xxx</div>
<div class="popupHeader">Byt lösenord</div>
How to create a confirm dialog box in dojo? I would like to have an ok cancel dialog to appear on button click with dojo dialog (no javascript confirm dialog).
So far i can only display a dialog on click event.
Heres my code:
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var secondDlg;
dojo.ready(function(){
// create the dialog:
secondDlg = new dijit.Dialog({
title: "Programmatic Dialog Creation",
style: "width: 300px",
draggable:false
});
});
showDialogTwo = function(){
// set the content of the dialog:
secondDlg.set("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
secondDlg.show();
}
</script>
</head>
<body class="claro" style="margin-right:10px;">
<button id="buttonTwo" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialogTwo" type="button">Show me!</button>
</body>
How can i make this ok cancel dialog box?
<script type="dojo/method" event="onClick">
var dialog = new dijit.Dialog({
title: "Delete Switch Type",
style: "width: 400px",
content : "Do you really want to delete ?????<br>"
});
//Creating div element inside dialog
var div = dojo.create('div', {}, dialog.containerNode);
dojo.style(dojo.byId(div), "float", "left");
var noBtn = new dijit.form.Button({
label: "Cancel",
onClick: function(){
dialog.hide();
dojo.destroy(dialog);
}
});
var yesBtn = new dijit.form.Button({
label: "Yes",
style : "width : 60px",
onClick : <your function here>,
dialog.hide();
dojo.destroy(dialog);
}
});
//adding buttons to the div, created inside the dialog
dojo.create(yesBtn.domNode,{}, div);
dojo.create(noBtn.domNode,{}, div);
dialog.show();
</script>
I'm using this code as inline dojo/method - on the click event of the button. you can modify anyway
The Confirm Dialog is supported since Dojo 1.10.
See the release notes and the documentation.
The solution above does not take into account the little cross at the top right of the dialog.
I had done, long ago, a little suite of dialogs, you might find some happiness here, especially ConfirmDialog.js
I just uploaded them on github today so you can take a look at them : http://github.com/PEM-FR/Dojo-Components/tree/master/dojox/dialog
They should be usable "as-is" or with minor changes
I am trying to display a fancy html popup/frame (not windows style) to the customer when a particular form is submitted. Not sure what would be the best way of doing that!
I tried something with the code below but there are 2 issues with this. Firstly the box that comes as a popup looks like a windows popup box (browser type) which I don't want. I just want a simple square box where I can add colors, image etc. Another problem is that my links within this code are not working. For eg. I want one of the links to take me to another page on the site after closing the message box, and the other link could simple be used to close the box... or may be just 2 links that could take me to 2 different pages!
<form action="do.something" method="post" onsubmit="return action_submitted();">
<script type="text/javascript">
function action_submitted() {
HTML = '';
HTML += '<html><head><title>New Action</title></head>';
HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">';
HTML += 'Congrats, your action was successful! <br/>';
HTML += 'Close Message<br/>';
HTML += 'There<br/>';
HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
HTML += '</body></html>';
var w = 500;
var h = 200;
var l = (screen.availWidth - w) / 2;
var t = (screen.availHeight - h) / 2;
actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');
if (actionwin && !actionwin.closed) actionwin.focus();
return true;
}
</script>
Please help :)
Many thanks!
try using jquery modal dialog:
var modal = "<div id='modal_pop'>" +
"<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" +
"<p>This is a fancy modal pop up.</p>" +
"</div>";
and call the modal dialog
$(modal).dialog({
modal: true,
width: 400,
height: opts.windowHeight,
closeOnEscape: false,
draggable: false,
resizable: false,
zIndex: 99999,
bgiframe: true,
title: Sample!',
buttons: {
"OK": function () {
// your action on OK clikc
$(this).dialog('close');
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
more info on this site.
I suggest you need to create popup div in HTML at bottom of body. Hide popup by default By CSS and when you want to open it, then make it visible by javascript and pass content you do want to display if you have dynamic content.
HTML
<div id="popupWrapper">
<div id="popup">
content goes here
</div>
</div>
CSS
#popupWrapper { display: none;}
jQuery
$('#button').live('click', function() {
$('#popup').text('content goes here');
$('#popupWrapper').fadeIn();
});
Because in your case you are creating poup every time you click on button. which is not good way to do it.
Also don't use any other plugin because it's not good to use third party plugin for simple stuffs like that. It's make your project more complicated and slow. Because they design for multiple situations with multiple options, and if you not need that mean it's worth to use that plugin.
I am editing the link plugin to allow staff to select links to internal content.
I have managed to add another tab to the link plugin dialog with a text input with an onKeyup event. The idea is, when they type it will list the results below where they can select the link they want. Once selected I was just going to update the info tab with the url and protocol.
Here is my code sections from the existing link plugin:
....
....
//Should update info tab with value
function AddLink(txtLink)
{
var dialog = this.getDialog();
dialog.setValueOf('info', 'url', txtLink);
dialog.setValueOf('info', 'protocol', '');
}
//called when the user types in the search box. currently just uses text for basic testing
var searchBoxChanged = function ()
{
var dialog = this.getDialog();
var href = $(this).attr('href');
var txt = dialog.getValueOf('article', 'searchWords');
$('#searchResults').html("Test Title");
}
....
....
{
//Adds extra tab to the link plugin for custom link searching
id: 'article',
label: linkLang.article,
title: linkLang.article,
elements:
[
{
type: 'text',
id: 'searchWords',
label: linkLang.articleSearch,
style: 'height:40px',
size: 29,
onKeyUp: searchBoxChanged
},
{
type: 'html',
html: '<div id="searchResults">Please start tying to get results</div>'
}
]
}
....
....
At the moment I am just using some basic static data from the textbox. The link in creating on the page ok, but when it is clicked I get the error:
CRIPT5009: 'AddLink' is undefined
Can anyone shed some light on where I am going wrong?
In my experience, ["x" is undefined] errors quite often mean there's a syntax error or, often, something in the function does not evaluate to what you think it does.
Possibly, this.getDialog() is out of context so it doesn't return anything. Then, dialog.setValueOf() won't work.