CODEWITHSUNDEEP
phpjavascriptjqueryhtmljquery-plugins
Alexander Grosse
Alexander Grosse

Reputation: 287

JavaScript popup opening external page

I am struggeling to implement a function to open a new window with an external link. I am creating dynamic content and would like to write a function that opens up a pop/up window with the given link. Please help. I like jquery dialog boxes, and lightwindo etc. But am unable to implement any of these, any help would be gerat, am stuck and frustrated with this supposingly small issue . . . No option has worked for em so far. here the code of how i display my results, and how i think I have to call the function to open a new window. So the second function here is the one I would need some help with, to open a nice pop-up window displaying the information..

// --------------------- display the course results -> structuring the returned array, to output all information into a table ----------------------
function displayCourses()
{

    var str = ' <table border="0" width="530">' +
                '<tr>' +
                    '<td width="150">Title / course code</td>' +
                    '<td>INFO</td>' +
                '</tr>';

    if(curCourseList == null)
    {
        str = str + '<tr><td colspan="2"><div id="msgDips"></div></td></tr>';
    }
    else
    {
        for (var i = 0; i < curCourseList.length; i++)
        {
            str = str + '<tr><td valign="top" width="150"><a style="cursor:pointer;" onclick="showCourse(\''+curCourseList[i][0]+'\')" >' + curCourseList[i][0] + ' <br /> </a>' + curCourseList[i][1] +'<br>'+ curCourseList[i][3] +'<br /><br />'+ curCourseList[i][4] +'</td><td>' + curCourseList[i][2] +'</td></tr>';
        }
    }

    str = str + '</table>';

    document.getElementById("courseContainer").innerHTML = str;
    if(curCourseList == null)
    {
        getLangToken('99');
    }

}    
function showCourse(code)
{
    //alert(1)
    $.ajax({
        async:false,
        type: "POST",
        url: 'formPostsUser.php?reqtype=getCourse',
        data:'coursecode='+ code,
        success: function(data) 
        {
            newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
        }
    });
}

And seriously any help will be greatly ap[preciated. am in such deep shit atm

EDIT---------------

It is the window.open bit i would liek to replace to open a nice fancy pop-up, not new browser window or page

Upvotes: 1

Views: 2032

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

I do not know WHY you say a dialog does not work or specifically if jQuery UI dialog does not work for you, but just in case:

$(function() {
    $("<div id='helpDialog' style='display:none' />").appendTo(document);
    $("#helpDialog").dialog({
        autoOpen: false
    });
    $("#helpDialog").dialog('option', 'buttons', {
        "Close": function() {
            $(this).dialog("close");
        }
    })
});

function helpPopUp(page, height, width) {
    $("#helpDialog").dialog('option', 'height', height);
    $("#helpDialog").dialog('option', 'width', width);
    $('#helpDialog').load(page);
    $('#helpDialog').dialog("open");
}
helpPopUp('#helpDialog', 'Help/Summary.html', 550, 750);

You could of course, modify the .load(page) to be custom IF needed referencing the page in your url.

Here is a simple sample of the above with a slight mod to load your table instead of the page: http://jsfiddle.net/MarkSchultheiss/ABqrD/1/

Upvotes: 1

Armatus
Armatus

Reputation: 2191

If you don't want to use a real popup, you could try to create a <div> which 'hovers' above the page with something like

.hoverwindow {
     position:absolute; 
     width: ...px; 
     height:...px; 
     margin:auto;
     z-index:10; /*ensure that it's displayed on top*/
}

You could do this with a small modification of your function:

function showCourse(code)
{

$.ajax({
    async:false,
    type: "POST",
    url: 'formPostsUser.php?reqtype=getCourse',
    data:'coursecode='+ code,
    success: function(data) 
    {
        var newwindow = $('<div class="hoverwindow" />');
        newwindow.html(data).appendTo('body');
    }
});
}

Although frankly this is pretty much what plugins for "popups" do so all of this should be readily available online if you search for it. Hence why I have not bothered to actually try and test this code - it is simply to give an idea of what you could do.

Upvotes: 0

trickyzter
trickyzter

Reputation: 1591

If your triggering the window opening via anything other than user interaction it will most likely be blocked. Have you checked for notices pertaining to this?

Upvotes: 0

Related Questions