jQuery Forum

How to close the current tab using jQuery?
[1Reply]
- 03-Apr-2018 12:37 AM
- Forum: Using jQuery
Please guide me,

To close the current tab using jQuery.

function closeCurrent() {

var x = confirm('Are You sure want to exit:');
if(x) {
//window.open('invalidUrl.html', '_self', ''); // not works
//window.open('invalidUrl.html', '_self', ''); // not works
//window.open('invalidUrl.html', '_self', ''); // not works
window.close();
}
}
<button onClick="closeCurrent();">CLOSE WINDOW</button>

Thanks,
Surendar

How to append both single and double quotes in same function
[2Replies]
- 02-Nov-2017 09:54 AM
- Forum: Using jQuery
Hi,

I am trying to append the single quote and double quote in the same function, but I am unsuccessful. Please help me in doing this.

HTML:

<input type="button" value="click" id="clickc" onclick="helloMan()"/>
<div id="mainDiv"></div>

JAVASCRIPT:

function helloMan(){
      var dialogue = "I'am Suren and I asked him a question, for which he replied, "I don't know !"";
      getName(dialogue);
}

function getName(name){
      $("#mainDiv").append("<div>"+name+"</div>");
}

Thanks in advance,
Surendar

Upload file and JSON data in the same POST request using jquery ajax?
[4Replies]
- 09-Aug-2017 08:58 AM
- Forum: Using jQuery
Hi,
I am trying to send a POST request using jQuery Ajax, where I would like to upload a file and some json data. Please find below code,

var logoImg = $('input[name="logoImg"]').get(0).files[0];

var formData = new FormData();
formData.append('logo', logoImg);

var objArr = [];

objArr.push({"id": id, "name": userName});

var obj = [{"objArr":objArr, "formData":formData}] ;

$.ajax({
type:"POST",
url :url,
dataType:"json",
data : JSON.stringify(obj),
contentType:"application/json",
cache : false,
async : false,
complete: function(data){
alert("success");
}
});

But I am getting "Internal server error: 500" and the backend API is not called.

Please help me to send a file and an array obj in same AJAX request. Thanks in advance

jQuery dialog not working properly
[2Replies]
- 27-Feb-2013 01:59 AM
- Forum: Getting Started
Hi,

I am facing this problem for quite long time.
$(this).dialog('close') working fine first time but not second time.

I am using ajax, so there is no page refresh occurs. Until ajax call is successful dialog closing properly.
And once ajax call is made its not closing even if submit/save button is clicked.
Here is my code,

CODE:

jQuery.noConflict();

function submitDetails()
{

var inptUserName = document.getElementById('username').value;
var inptPassword = document.getElementById('password').value;
var inptFullname = document.getElementById('fullname').value;
var inptEmailId = document.getElementById('emailId').value;

var i = document.getElementById("selOptions").selectedIndex;
var selRoleType = document.getElementById("selOptions").options[i].value;

var url="editUsersAction.action?oper=add&userName="+inptUserName+"&password="+inptPassword+"&fullName="+inptFullname+"&emailId="+inptEmailId+"&roleName="+selRoleType;
if(inptUserName=="" || inptPassword==""||inptFullname==""||inptEmailId=="")
{
alert("Invalid inputs");
}
else
{
jQuery.get(
url,
"",
function(data) {

jQuery('#UserData').html(data);
//jQuery('#myclickdialog').empty();
},
"html"
);

myclose();

}

}

function myclose()
{

alert("hello");
document.getElementById('username').value="";
document.getElementById('password').value="";
document.getElementById('fullname').value="";
document.getElementById('emailId').value="";

jQuery('#myclickdialog').dialog('close');

//location.reload();
}

HTML:

<sj:dialog
   id="myclickdialog"
   autoOpen="false"
   buttons="{
   'Save':function() { submitDetails(); },
   'Cancel':function() { myclose(); }
   }"
   modal="true"
   title="Add User"
   width="600"
   cssStyle="display:none"
>
<table class='userTable'>
<tr><td colspan='2'><span class='usertableTitle'>User Details</span></td></tr>
<tr><td><span>User Name</span></td><td><input id='username' value='' type='text' maxlength='50'/></td></tr>
<tr><td><span>Password</span></td><td><input id='password' value='' type='password' maxlength='50'/></td></tr>
<tr><td><span>Full Name</span></td><td><input id='fullname' value='' type='text' maxlength='50'/></td></tr>
<tr><td><span>EMail-Id</span></td><td><input id='emailId' value='' type='text' maxlength='50'/></td></tr>
<tr><td><span>Role</span></td><td><select id='selOptions'><option value='Super User'>Super User</option><option value='Asset Manager'>Asset Manager</option><option value='Asset Viewer (Read only)'>Asset Viewer (Read only)</option></select></td></tr>
</table>

</sj:dialog>

---CODE ENDS---

Even I tried with 'destroy' and 'remove' . None of these helped me.

Thanks in advance.

Sortable not working when the list comes from ajax
[0Replies]
- 27-Dec-2012 01:02 AM
- Forum: Using jQuery UI
Hi,

I am unable to do sortable when the list is coming from Servlet layer using ajax.

My code:

$(function() {
$( "ul.droptrue" ).sortable({
connectWith: "ul"
});

$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});

function changeSecurityConfig(securityType){

if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request");
return;
}

var contextPath = '<%=request.getContextPath()%>';
var countryName = '<%=request.getAttribute("COUNTRY_NAME")%>';

var urlQuery = "rulesconfig.action.getTypeConfiguration.event";
urlQuery += "?securityType=" +securityType;

var uri = contextPath + "/" + countryName + "/" + urlQuery;

xmlHttp.onreadystatechange = planChange;
xmlHttp.open("GET", uri, true);
xmlHttp.send(null);
}

function planChange() {

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){

$('#dragNdrop').replaceWith(xmlHttp.responseText);

$("ul.droptrue").sortable( 'refresh' )
}
}

HTML

<div id='dragNdrop' style='margin: 15px;'><div id='actual'><ul style='margin-right: 55px;' id='sortable2' class='droptrue'><li id='BodyGuards' class='ui-state-default className'>BodyGuards</li><li id='SafetyPatrol' class='ui-state-default className'>SafetyPatrol</li><li id='SecurityAgent' class='ui-state-default className'>SecurityAgent</li><li id='SecurityOfficer' class='ui-state-default className'>SecurityOfficer</li></ul></div><div id='required' class='functionality'><ul id='sortable3' class='droptrue' ><li id='Guns' class='ui-state-default className'>Guns</li><li id='SecurityGuard' class='ui-state-default className'>SecurityGuard</li></div><div><input style='float: right; margin-top: 25px; margin-right: 115px; ' onclick='saveFunction()' type='submit' value='Submit' id='submitButton' /></div></div>

Please help me in resolving this issue.

Thanks
Suren

Adding a row to a table dynamically inside another table
[5Replies]
- 28-Sep-2012 06:16 AM
- Forum: Getting Started
Hi pals,

I am new to jquery, especially this kind work.. Please help in my work.

I need to insert a row onclick a button, 'add'.

Inside that table I am having another table, which has options(three column) of the parent table.

And I am having another button called 'add options' which onclick I need to add a new row to the options table appropriate to that parent row.

This is the screeshot of the actual.

This is my HTML

<STARTS HERE>

<div id="fourthDynField" class="fieldType" style="font-family: arial; cursor: pointer; background-color: gainsboro; height: 10px; padding: 10px; font-size: 12px;">Field type : Radio button
<img style="float: right; padding-right:10px; cursor: pointer;" src="../img/expand.png" alt="" />
<input type="button" value="Add" name="addCheckBox" id="addCheckBox" onclick="javascript:addNewCheckBox()">
</div>
<div id="table">
<div id="tableDyn4">

<table id="NewCheckBox" border='1'>
<tr align="center" style="background: #f2f2f2;">
<th rowspan="2">Label</th>
<th rowspan="2">Order</th>
<th rowspan="2">Name</th>
<th colspan="4">Options</th>
<td rowspan="2"><input type="button" value="add option" onclick="addNewOption()"></td>
</tr>
<tr align="center">
<td>
<table id="testingTable1" border="1">
<tr align="center" style="background: #f2f2f2;">
<td>ID</td>
<td>Value</td>
<td>Text</td>
<td></td>

</tr>
</table>
</td>
</tr>
<<THE TEXT BOX DETAILS COMING FROM JAVA LAYER, I NEED EMPTY TEXT BOXES IN NEW ROWS>>

</table>

</div>
</div>

<ENDS HERE>

I am confused how to start itself.

Please help me in this issue.

Thanks in advance

Surendar

Onclick of an image, dropdown hide
[0Replies]
- 22-Aug-2012 01:42 AM
- Forum: Using jQuery
Hi,

I am need of a help regarding onclick image in a dropdown.

When I click any of this dropdown, I am able to show the dropdown. When an user click any image inside the dropdown, I can able to replace the dropdown arrow with that selected image.
But user need to click the next arrow two times to show the dropdown.

This is screen shot of the actual,

First Screenshot:

Second Screenshot:

Third Screenshot:

My JS:

-----------------------------Starts here--------------------------------

var icon ;

function display()
{
    assetName = '<%=request.getParameter("assetName")%>';
    paramName=$('#dropDownId').val();
    // var newdiv = document.createElement('div');
    var icons=document.getElementById("divId").innerHTML;
    parameterManager.getPossibleValuesForParam(assetName,paramName,null,function(data)
    {
        document.getElementById("placeHolder");
        var tempStr="<div><table class='param_values'><div style='margin-left:15px; margin-right:5px;padding: 5px 5px 5px 0px;width:auto;clear:both;'><div style='width:30px; float:left;';</div></div>";
        for (var i = 0; i < data.length; i++)
            {

                tempStr = tempStr+"<tr><td>Choose Icon for "+ data[i]+"</td><td class='parameter'>"+icons+"</td></tr>";

            }
        alert(icons);
        document.getElementById("placeHolder").innerHTML=tempStr+"</table></div>";
        // document.getElementById("divForPI").appendChild(newdiv1);
    });
}
/* $(document).ready(function ()
        {
    $('#test').hide();
}); */
      function myfunction(obj)
                    {
                     icon=obj;
                    var X=$(this).attr('id');
                    if(X==1)
                    {
                    $("#dropdownStyle").hide();
                    $(this).attr('id', '0');
                    }
                    else
                    {
                    $("#dropdownStyle").show();
                    $(this).attr('id', '1');
                    }
                    }
      $(document).ready(function(){
                    //Mouseup textarea false
                    $("#dropdownStyle").mouseup(function ()
                    {
                    return false;
                    });
                    $(".dropdownarrowIcon").mouseup(function()
                    {
                    return false;
                    });

                    //Textarea without editing.
                    $(document).mouseup(function()
                    {
                    $("#dropdownStyle").hide();
                    $(".dropdownarrowIcon").attr('id', '');
                    });


        $('table img').click(function()
        {
        $(this).each(function ()
        {
        var srcImgs = $(this).attr('src');
        $(icon).attr('src', srcImgs);
        $("#dropdownStyle").hide();

        });
        });
        });

---------------------------Ends here-----------------------------------

HTML :

--------------------------Starts here----------------------------------

<div id="placeHolder"></div>

(Just using this div inside my html)*

-------------------------Ends here------------------------------------

Please help me in this issue.
Thanks in advance

Onclick of an image, dropdown hide
[2Replies]
- 22-Aug-2012 01:18 AM
- Forum: Getting Started
Hi,

I am need of a help regarding onclick image in a dropdown.

When I click any of this dropdown, I am able to show the dropdown. When an user click any image inside the dropdown, I can able to replace the dropdown arrow with that selected image.
But user need to click the next arrow two times to show the dropdown.

This is screen shot of the actual,

First Screenshot:

Second Screenshot:

Third Screenshot:

My JS:

-----------------------------Starts here--------------------------------

var icon ;

function display()
{
    assetName = '<%=request.getParameter("assetName")%>';
    paramName=$('#dropDownId').val();
    // var newdiv = document.createElement('div');
    var icons=document.getElementById("divId").innerHTML;
    parameterManager.getPossibleValuesForParam(assetName,paramName,null,function(data)
    {
        document.getElementById("placeHolder");
        var tempStr="<div><table class='param_values'><div style='margin-left:15px; margin-right:5px;padding: 5px 5px 5px 0px;width:auto;clear:both;'><div style='width:30px; float:left;';</div></div>";
        for (var i = 0; i < data.length; i++)
            {

                tempStr = tempStr+"<tr><td>Choose Icon for "+ data[i]+"</td><td class='parameter'>"+icons+"</td></tr>";

            }
        alert(icons);
        document.getElementById("placeHolder").innerHTML=tempStr+"</table></div>";
        // document.getElementById("divForPI").appendChild(newdiv1);
    });
}
/* $(document).ready(function ()
        {
    $('#test').hide();
}); */
      function myfunction(obj)
                    {
                     icon=obj;
                    var X=$(this).attr('id');
                    if(X==1)
                    {
                    $("#dropdownStyle").hide();
                    $(this).attr('id', '0');
                    }
                    else
                    {
                    $("#dropdownStyle").show();
                    $(this).attr('id', '1');
                    }
                    }
      $(document).ready(function(){
                    //Mouseup textarea false
                    $("#dropdownStyle").mouseup(function ()
                    {
                    return false;
                    });
                    $(".dropdownarrowIcon").mouseup(function()
                    {
                    return false;
                    });

                    //Textarea without editing.
                    $(document).mouseup(function()
                    {
                    $("#dropdownStyle").hide();
                    $(".dropdownarrowIcon").attr('id', '');
                    });


        $('table img').click(function()
        {
        $(this).each(function ()
        {
        var srcImgs = $(this).attr('src');
        $(icon).attr('src', srcImgs);
        $("#dropdownStyle").hide();

        });
        });
        });

---------------------------Ends here-----------------------------------

HTML :

--------------------------Starts here----------------------------------

<div id="placeHolder"></div>

(Just using this div inside my html)*

-------------------------Ends here------------------------------------

Please help me in this issue.
Thanks in advance

How to make multiple dropdown for the same images?
[2Replies]
- 14-Aug-2012 08:09 AM
- Forum: Getting Started
Hi,

Please help in following issue,

Whenever I click the first arrow icon in below image,

I am able to get the below dropdown,

but,
My problem is, I am unable to get the dropdown when I click the remaining arrows.

I need to show dropdown menu when I click all the arrows.

help me in this issue,
thanks in adv..

Suren

On select a image in dropdown
[4Replies]
- 06-Aug-2012 02:07 AM
- Forum: Getting Started
Hi,

I am new to JQuery, please help in resolving the following issue that I am facing,

If I click the above arrow, the following images will be displayed as a dropdown

Here I want to select an image by click the same and that selected image should replace the dropdown arrow.

Please help me in this problem

Thanks in advance.
:)

Suren

Jquery dropdown with images inside
[2Replies]
- 02-Aug-2012 01:37 AM
- Forum: Using jQuery
Hi,

Please help,
I am in need of a dropdown box inside my web apps, which should contain only images.
Similar to GMAIL CHAT smiley drop up menu...

How I can do this !!! ?

Thanks in advance.

Suren

Onclick a link, want to get display div in other frame
[1Reply]
- 14-Nov-2011 01:13 AM
- Forum: Getting Started
I am using two frames,
left side frame, i am having four links...
"
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <meta name="robots" content="noindex,nofollow" />
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/reset.css" /> 
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" /> 
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/2col.css" title="2col" /> 
    <link rel="alternate stylesheet" media="screen,projection" type="text/css" href="css/1col.css" title="1col" /> 
     
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/style.css" /> 
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/mystyle.css" /> 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/switcher.js"></script>
    <script type="text/javascript" src="js/toggle.js"></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript" src="js/ui.tabs.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".tabs > ul").tabs();
    });
    </script>
    <title>Dashboard</title>
</head>

<body>

<div id="main">

    
    <div id="tray" class="box">

        <p class="cloudlogo"></p>


        <p class="f-right">User: <strong><a href="#">Administrator</a></strong>       <strong><a href="#" id="logout">Log out</a></strong></p>

    </div> 

    <hr class="noscreen" />

    

    <hr class="noscreen" />

    
    <div id="cols" class="box">

        
        <div id="aside" class="box">


            <ul class="box">
                <li id="submenu-active"><a href="#">Link1</a>     </li>
                <li id="submenu-active"><a href="#">Link2</a></li>
                <li id="submenu-active"><a href="#">Link3</a></li>
                <li id="submenu-active"><a href="#">Link4</a></li>
            </ul>

        </div> 

        <hr class="noscreen" />

        
        <div id="content" class="box">

            <h1>Styles</h1>



            
            <h3 class="tit">System Messages</h3>

            <p class="msg warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

            <p class="msg info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

            <p class="msg done">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

            <p class="msg error">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>







        </div> 

    </div> 

    <hr class="noscreen" />

    
    <div id="footer" class="box">

        <p class="f-left">© 2009 <a href="#">Your Company</a>, All Rights Reserved ®</p>



    </div> 

</div> 

</body>
</html>
"

On click of link1, a div should display inside the "content".
On click of link2, another div should display inside the "content".
Like this for all link, separate div should be displayed.

Please help me.!

Thanks in adv.!

On change of radio button, form should change.! Please help!
[13Replies]
- 03-Nov-2011 02:20 AM
- Forum: Getting Started
I am new to jQuery
I want to change the form on click of the appropriate radio button.
Please help me.
This is my code
<s:radio name="radioButton" list="#{'os':'OS','platform':'Platform''}" value="1" />
            <div id="OS_req">
            <s:form name="sendreqOS" action="Login" >

            <br/>

            <s:textfield name="vmNameOS" maxlength="30" size="20" label="VM Name" />


            <s:select labelposition="left" label="Template" list="temp" name="templateNameOS"/>


            <s:select labelposition="left" label="Instance Type" name="instanceTypeOS" list="#{'1':'Small','2':'Medium','3':'Large'}" />


            <s:select label="Duration of use" name="durationOS" list="#{'1':'1 week','2':'2 weeks','3':'1 month','4':'3 months','5':'6 months'}" />

            <s:submit value="Submit"></s:submit>

            </s:form>


               </div>
<div id="Plat_req">
<s:form name="sendreqPlat" action="Login" >

            <br/>

            <s:textfield name="vmNamePlat" maxlength="30" size="20" label="VM Name" />


            <s:select labelposition="left" label="Template" list="temp" name="templateNameplat"/>


            <s:select labelposition="left" label="Instance Type" name="instanceTypeplat" list="#{'1':'Small','2':'Medium','3':'Large'}" />


            <s:select label="Duration of use" name="duration
plat" list="#{'1':'1 week','2':'2 weeks','3':'1 month','4':'3 months','5':'6 months'}" />

            <s:submit value="Submit"></s:submit>
</form>
</div>
On clicking 'OS' radio button i want to get the 1st form and hide second one
and on clicking 'Platform' radio button i want the second form and hide the first one.

Please help me. Urgent

Thanks in advance

Which framework(should support JQuery) is best to develop a website in PHP.?
[1Reply]
- 11-Oct-2011 12:51 AM
- Forum: Getting Started
Hi guys,
I am new in Web developing , Please suggest me a good frame work to work with PHP.
And the frame work should support JQuery .

Thanks

How to call a username from an xml file dynamically in mobile app?
[2Replies]
- 28-Sep-2011 10:30 AM
- Forum: jQuery Mobile
Hi,
I am new to mobile app development.
Can any one help me to call a username from an XML file dynamically.

Thanks in adv.!

Button inside a grid column..!!!
[6Replies]
- 23-Sep-2011 02:21 AM
- Forum: Getting Started
Hi,
I want to put a button inside a grid column, can any one help me out...

I am using Struts jQuery Grid showcase tag.

Thanks

How to put a radio button inside a grid?
[2Replies]
- 15-Sep-2011 08:22 AM
- Forum: Using jQuery UI
Hi,

I need to put a radio button (On/Off) inside a grid column.
Can anyone please help me.

Using jQuery radio button inside a data grid!!!
[0Replies]
- 13-Sep-2011 12:59 AM
- Forum: Using jQuery UI
Can any one help me to put ON/OFF Radio button inside a Data Grid.

I made Data grid using Struts 2 jQuery plugin as in this site.

http://www.weinfreund.de/struts2-jquery-showcase/index.action

Thanks

onchange in SELECT
[5Replies]
- 09-Sep-2011 04:30 AM
- Forum: Using jQuery
I want to call a method from java class using onchange in SELECT

Please help me

thanks

Struts JQuery Mobile plugin
[0Replies]
- 31-Aug-2011 12:43 AM
- Forum: jQuery Mobile
I want to use Struts JQuery mobile plugin .! can any one help me?

Response title

Attachments

jQuery Forum

Activity Trend