Popup not working on asp.net and vb.net web page - javascript

I have taken over a web application from a previous developer which is built on asp.net and vb.net
I am trying to create a simple popup with javascript but the popup is not working.
the asp.net code was
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status"
data-bind="attr: { 'href':'update-status_popup.aspx?i='
+ Id + '&c=' + StatusId }">
<i class="icon icon-random"></i>
</a>
The link is opening on a different page. when opening link it's also getting the ID from the database.
The requirement is now to open the link in a popup window.
I have created a javascript function call popup(). The code is like below:
<script type="text/javascript" charset="utf-8">
function popup() {
var url = 'update-status_popup.aspx?i=' + Id + '&c=' + StatusId;
window.open(url);
}
</script>
and edited the html code as below:
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status"
databind = "attr: { 'href = javascript: popup()' }">
<i class="icon icon-random"></i>
</a>
When i click on the link nothing happens.
I have also tried:
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status" onclick ="javascript: popup()">
<i class="icon icon-random"></i>
</a>
and:
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status" href ="javascript: popup()">
<i class="icon icon-random"></i>
</a>
The result is the same.
The popup must not disable the parent screen.
The website is using another popup by colorbox which disables the screen.
Appreciate your kind response.

It appears that you may be having an issue with building the Query String in your popup() JavaScript function. What you should do is break this task into two steps:
Get the Window.Open working first (without the Query String):
<a class="hover-glow"
data-placement="bottom"
rel="tooltip"
title="change status"
href="javascript: popup()">
<i class="icon icon-random"></i>
</a>
<script type="text/javascript" charset="utf-8">
function popup()
{
//var url = 'update-status_popup.aspx?i='+Id+'&c='+StatusId;
var url = 'update-status_popup.aspx';
window.open(url);
}
</script>
Then once the popup() function is working, build out the dynamic Query String. There are a number of ways to handle this. Please refer to the answers here: How to pass a query string variable?

I would assume that the popup function doesn't work. You might want to look at your browsers console window and see what the error is.
You could try putting all the js in the href.
data-bind="attr: { 'href': 'javascript: window.open(\'update-status_popup.aspx?i=' + Id + '&c=' + StatusId + '\')' }"
Or have a generic popup function that takes the url as a parameter.
data-bind="attr: { 'href': 'javascript: popup(\'update-status_popup.aspx?i=' + Id + '&c=' + StatusId + '\')' }"
function popup(url) {
window.open(url);
}
I think Id and StatusId are server variable and are not available on the client side.

To implement a "pop-up" (not a new browser tab) then you should consider implementing the jQuery.UI Dialog. Here is a link to an answer that shows how to implement it:
How to display an IFRAME inside a jQuery UI dialog
And here is a link to the jQuery UI Dialog documentation: https://jqueryui.com/dialog/

Related

Problem with selenium, closing the main window when opening the popup. How get href from this link?

My problem is that when you click on the link, a pop-up window opens, but when working with selenium, it opens, but closes the main window. I open the link using .click()
Here's the html:
<a class="do do-task btn btn-sm btn-primary btn-block" href="javascript:;"
data-task-id="13054765" data-do-class="do-task"
data-getcomment-href="/tasks/getcomment/" data-check-count="0"
data-max-check-count="2" data-point-text="10 points">
<i class="far FA-star"></I> 10 points</a>
Function for click:
driver = webdriver.Chrome('chromedriver.exe')
def click_tasks():
tasks = driver.find_elements_by_class_name('btn-block')[7:]
print(tasks[0].text)
tasks[0].click()
You can find out the href, but I don't know how.
Help me find out how to get href or make the main window not close when you open the pop-up window. I will be grateful.
Assuming you've initialised a driver like driver = webdriver.Chrome(), one way of getting the href based on the html you posted is:
your_href=driver.find_element_by_class_name('do do-task btn btn-sm btn-primary btn-block').get_property('href')

Twitter share custom text via API via twitter web intent - works only once

I've the following issue: I've build a quote generator (freecodecamp) and need to be able to share the quote via twitter. My approach was via Twitter web intent and the text is the data I receive via the API. It only works once.
HTML:
<p>Share the wisdom</p>
<a class="twitter-share-button" href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
JS:
<script>
function myFunction() {
var firstName = document.getElementsByName("firstname")[0].value;
var trumpAPI = "https://api.whatdoestrumpthink.com/api/v1/quotes/personalized?q="+firstName;
$.getJSON(trumpAPI, function(data, status){
document.getElementById("trump").innerHTML = data.message;
$('a[href="#"]').attr("href","https://twitter.com/intent/tweet?text="+data.message+"&hashtags=trump, quoteoftheday");
});
document.getElementById("trump").classList.add("border");
}
</script>
Could it be that the text parameter in the web intent is not dynamic? Any suggestion how to fix this? thanks in advance.
I have to guess a little bit because you didn't share your complete functionality, I assume what you do is this:
You have a button of some sort, clicking which will get another quote.
Clicking that button calls your myFunction().
If that's correct, then the problem is that your <a> element no longer has href="#" after the first time the function has run; the href is now the intent link. And because of that, $('a[href="#"]') no longer selects that link on the second call. If you use $(".twitter-share-button") instead, it should work.

Creating Dynamic FTP Link in JqGrid Column

I'm creating a dynamic link on the last "column" of the jqGrid,and I'm putting an a tag inside this column,the value of "href" must be a link which is coming from my action and is an ftp address.
The problem is that despite the correct value of href,clicking the link navigates the user to the wrong url which is starting with "http"!!!
I wanna remove this extra "http"!!!
Here is the code to
'<a id="file" href="//' + rowobject.GeneratedFilePath + '" title="download"><div class="icon-details fa fa-external-link" style="display:inline-block"></div></a><span> </span>';
and here is the generated link <a> in runtime:
<a title="download" href="//ftp.test.com/Stat_On_150125_Daily.csv" id="file"><div style="display:inline-block" class="icon-details fa fa-external-link"></div></a>
and by clicking the link I'll be navigated to the following url:
http://ftp.test.com/Stat_On_150125_Daily.csv
The solution was really easy!!
I've found it,I have to add ftp:// in the beginning of href value
That's it.
<a title="download" href="ftp://ftp.test.com/Stat_On_150125_Daily.csv" id="file"><div style="display:inline-block" class="icon-details fa fa-external-link"></div></a>
Thanks a lot

Show waiting animation during action redirect mvc

There is some button which user clicks to be redirected to diffrent controller action. I would like to show user some nice waiting information (maybe using bootstrap?) that user knows to wait. Can you advice something? Below my curernt code:
this is part of my JS which is pasting some href url to modal bootstrap window:
...
var href = $('#details').attr('href'); // currently returns '/TransportGallery/Details/1'
href = href.slice(0, href.lastIndexOf('/') + 1) + id;
$('#details').attr('href', href);
...
this is the modal bootstrap window where above js href will be placed and will replace this one:
...
<a href="#Url.Action("Details", "TransportGallery", New With {.id = 1})" class="btn btn-primary" id="details">
Show pictures
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
</a>
<button type="button" class="btn btn-warning glyphicon glyphicon-off" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
...
Now when this is done there is some operation behind which is loading pictures to gallery and on that moment i would like to show user animation. How do do that?
You can use BlockUI.JS
$(function(){
$('#details').on('click',function(){
$.blockUI();
});
});
after you redirect page to somewhere else page will be automaticly unblockui.

data-content not working when clicked

There is a javascript and jquery for which I need your help:
$(document).ready(function ()
{
$( '.website' ).popover(
{
'trigger' : 'click',
'placement' : 'right'
});
});
HTML:
<a href="javascript:void(0)" data-content="www.google.com" class="website" >
Google Website
</a>
When I click on the "Google Website", it displays "www.google.com". But what I want is, when I click on "www.google.com", this URL show open in a new tab also.
What if there is 2 different website like "google.com"; and "yahoo.com"; in the same data-content, so that when clicked on anyone, it should redirect to respective page
How do I do it?
I've made some changes in the code, to keep more than on one link in a data-content, you can try it:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
<a href="javascript:void(0)" data-content='http://www.google.com,http://www.yahoo.com' class="website" >
Websites
</a>
And change your javascript like this:-
$('.website').click(function(e){
e.preventDefault();
var dataContents = $(e.target).attr('data-content').split(",");
for(var i=0; i<dataContents.length;i++){
window.open(dataContents[i], '_blank');
}
})
And if popup is blocked in your browser, you've to unblock that.
I'm trying to open the second window also in a tab rather than in a new window.
Try this:-
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank')
})
Also make some change in the html:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
You can also add another data-content in the html, and then also it'll work fine.
<a href="javascript:void(0)" data-content="www.yahoo.com" class="website" >
Yahoo Website
</a>
Fix your data-content attribute to include http://, otherwise it will open relative to the current url:
<a href data-content="http://www.google.com" class="website">
Google Website
</a>
and keep user Indra's code:
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank');
});
JSFiddle Example
http://jsfiddle.net/BM7Tc/

Categories

Resources