Retrive value from url in jquery

Posted by Klbaiju under jQuery on 3/28/2015 | Points: 10 | Views : 738 | Status : [Member] | Replies : 3

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

Hi ,

in my application i want to load a page using jquery and same time i want to pass a value and return a result.

i used following query

var id= $('#ContentPlaceHolder1_txtstid').val();
             $('#disp').show();
             $('#disp').load("GuardianForm.aspx?id="+id);

.

my requirement is in guardianForm.aspx ,retrive value of id.

as per the value of id i want to return a result.

following is code in GuardianForm.aspx

$.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "GuardianForm.aspx/BindGuardian",
                data: "{id:'"+id+"'}",
                dataType: "json",
                success: function (data) {
                    $('#txttitle').val(data.d[0].title);
                    $('#txtsname').val(data.d[0].surname);
                   

                }
            });

How it is possible

Regards
Baiju

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: A2H on: 3/28/2015 [Member] [MVP] Silver | Points: 25

0	I guess you need to read the values from Querystring and then assign it in your Javascript function. if that is the case then you can use the below code to get the values from querystring in Javascript. function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regexString = "[\\?&]" + name + "=([^&#])"; var regex = new RegExp(regexString); var found = regex.exec(window.location.search); if (found == null) return ""; else return decodeURIComponent(found[1].replace(/\+/g, " ")); } then you can use the above function in your code like given below //get the ID value var id = getParameterByName("id"); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "GuardianForm.aspx/BindGuardian", data: "{id:'" + id + "'}", dataType: "json", success: function (data) { $('#txttitle').val(data.d[0].title); $('#txtsname').val(data.d[0].surname); } }); Thanks, A2H My Blog Klbaiju, if this helps please login to Mark As Answer*. \| Alert Moderator

I guess you need to read the values from Querystring and then assign it in your Javascript function. if that is the case then you can use the below code to get the values from querystring in Javascript.


function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexString = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexString);
            var found = regex.exec(window.location.search);
            if (found == null)
                return "";
            else
                return decodeURIComponent(found[1].replace(/\+/g, " "));
        }

then you can use the above function in your code like given below

//get the ID value
                var id = getParameterByName("id");
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "GuardianForm.aspx/BindGuardian",
                    data: "{id:'" + id + "'}",

                    dataType: "json",
                    success: function (data) {
                        $('#txttitle').val(data.d[0].title);
                        $('#txtsname').val(data.d[0].surname);
                    }
                });

Thanks,
A2H
My Blog

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/28/2015 [Member] [MVP] Silver | Points: 25

0	You can check this link for more details http://onetarek.com/javascript-and-jquery/javascript-how-to-get-query-string-parameter-value-from-current-page-url/ Thanks, A2H My Blog Klbaiju, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Rajnilari2015 on: 3/31/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 25

0	Hi, sometimes back I have written a step by step tutorial on "CRUD Operation using Web API and MVC4". It is available in dotnetfunda. You can find it here http://www.dotnetfunda.com/articles/show/2340/crud-operation-using-web-api-and-mvc4. It has the sample code attached and the JQuery Ajax for performing the CRUD. That should help you. Please go through it and you will get the concept to do the stuff. GET (All the records ) / LOAD $.ajax({ url: 'http://localhost:41207/api/employee', type: 'GET', dataType: 'json', success: function (data) { WriteResponses(data); }, error: function (x, y, z) { alert(x + '\n' + y + '\n' + z); } }); GET (for single records) function GetSingleEmployee() { jQuery.support.cors = true; var empId = $('#txtSingleEmployeeId').val(); $.ajax({ url: 'http://localhost:41207/api/employee/' + empId, type: 'GET', dataType: 'json', success: function (data) { WriteResponseForSingleEmployee(data); }, error: function (x, y, z) { alert('The Employee not found in the List for the given ID'); } }); And the WriteResponse.. function is here function WriteResponseForSingleEmployee(employee) { var strResult = "<table><th>Id</th><th>Name</th><th>Gender</th><th>Age</th><th>Salary</th>"; strResult += "<tr><td>" + employee.id + "</td><td> " + employee.name + "</td><td>" + employee.gender + "</td><td>" + employee.age + "</td><td>" + employee.salary + "</td></tr>"; strResult += "</table>"; $("#divDisplaySingleEmployee").html(strResult); } ALL the BEST!!! Download source file -- Thanks & Regards, RNA Team Klbaiju, if this helps please login to Mark As Answer. \| Alert Moderator

Hi, sometimes back I have written a step by step tutorial on "CRUD Operation using Web API and MVC4". It is available in dotnetfunda. You can find it here http://www.dotnetfunda.com/articles/show/2340/crud-operation-using-web-api-and-mvc4.

It has the sample code attached and the JQuery Ajax for performing the CRUD. That should help you.
Please go through it and you will get the concept to do the stuff.

GET (All the records ) / LOAD

$.ajax({



        url: 'http://localhost:41207/api/employee',



        type: 'GET',



        dataType: 'json',



        success: function (data) {



            WriteResponses(data);



        },



        error: function (x, y, z) {



            alert(x + '\n' + y + '\n' + z);



        }



    });

GET (for single records)

function GetSingleEmployee() {



    jQuery.support.cors = true;



    var empId = $('#txtSingleEmployeeId').val();







    $.ajax({



        url: 'http://localhost:41207/api/employee/' + empId,



        type: 'GET',



        dataType: 'json',



        success: function (data) {



            WriteResponseForSingleEmployee(data);



        },



        error: function (x, y, z) {



            alert('The Employee not found in the List for the given ID');



        }



    });

And the WriteResponse.. function is here

function WriteResponseForSingleEmployee(employee) {       

        var strResult = "<table><th>Id</th><th>Name</th><th>Gender</th><th>Age</th><th>Salary</th>";

        strResult += "<tr><td>" + employee.id + "</td><td> " + employee.name + "</td><td>" + employee.gender + "</td><td>" + employee.age + "</td><td>" + employee.salary + "</td></tr>";

        strResult += "</table>";

        $("#divDisplaySingleEmployee").html(strResult);

       

    }

ALL the BEST!!!

Download source file

--
Thanks & Regards,
RNA Team

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Latest Posts