Posts

Showing posts with the label jquery

jQuery Validation rule based on select value

Image
Clash Royale CLAN TAG #URR8PPP jQuery Validation rule based on select value I have the following form. <form id="myform"> <select id="country" name="country"> <option value="US">United States</option> <option value="CA">Canada</option> <option value="AU">Australia</option> <option value="NZ">New Zealand</option> <option value="IE">Ireland</option> </select> <input type="text" name="zip_code" id="zip-code"> <input type="submit"> </form> I want the zip_code field to contain the digits: true rule when the selected country is United States . This is what I have tried based on this code. zip_code digits: true United States $("$myform").validate({ rules:{ zip_code: { required: true, ...

Check if input type text Contains value in div using jquery

Image
Clash Royale CLAN TAG #URR8PPP Check if input type text Contains value in div using jquery I have one div in which their are 3 input fields of type text , I want to show alert on button click if any of the 3 input fields contain value. <div id="userdiv"> <input type="text" name="username" /> <input type="text" name="company" /> <input type="text" name="area" /><br /> <button id="btn1">Search</button> </div> How can I check if any of the field contains value using jquery ? Please take a little while to try coming up with an answer on your own! If you've already tried and can't figure it out, edit your question to include your attempt(s), and we can gladly help you out. – Tyler Roper 16 secs ago ...

Use jQuery to append response to individual HTML elements without duplication

Image
Clash Royale CLAN TAG #URR8PPP Use jQuery to append response to individual HTML elements without duplication I am trying to store the result of each form submission into its own individual HTML element. My code is doing this but it's also duplicating the results. Is there a way to append the result just the once rather than to all matching classes without creating uniquely identifiable elements (e.g. card1, card2, card3). <form id='userForm' method="POST"> <input class="textbox" type='text' name='query' placeholder='Question' value="" /> <input type='submit' value='Submit' /> </form> <div class="responses"></div> <script> $(document).ready(function(){ $('#userForm').submit(function(){ var question = $(".textbox").val(); $.ajax({ type: 'POST', ...

jQuery creating a multidimensional array on the fly

Image
Clash Royale CLAN TAG #URR8PPP jQuery creating a multidimensional array on the fly I'm trying to use jQuery to create the below sample array I want to output: [["foo0","foo1"],["foo2","foo3","foo4"],["foo5"]] Code I'm trying to use: var counter = 0; var arr = ; $('.unknown-number-of-elements').each(function(){ var keyNumber = $(this).val(); var valToPush = "foo"+counter; if(keyNumber in arr){ arr[keyNumber].push(["'"+ valToPush +"'"]); }else{ arr[keyNumber] = valToPush; } counter++; }); console.log(arr); The code above is giving the following error: Uncaught TypeError: arr[keyNumber].push is not a function Basically if the array key already exists I would like to create a sub array and add values to that sub array. Check this, there is no in operator in javascript – Durga ...

Trying to get PHP responce on ajax

Image
Clash Royale CLAN TAG #URR8PPP Trying to get PHP responce on ajax here I am trying to update the MSQL table using jquery , both PHP code and jquery script is written on the same page, the code working fine to update my tables but the response msg is not getting by the ajax so it always shows me the default message "Some problem occurred, please try again.". here is the code: <!-- HTML code to display msg --> <p class="statusMsg_post"></p> <script> $(document).ready(function(){ $('#btn_publish').click( function(){ var obj_post_postID="<?php echo $post_id; ?>"; var publish_post="publish"; $.ajax({ type:'POST', // url:'post_view.php', data:{ "post_status_update":publish_post, "obj_post_status":obj_post_postID, }, success:function(res){ if(res==...

Restrict user input in HTML

Image
Clash Royale CLAN TAG #URR8PPP Restrict user input in HTML Hello guys I want to restrict user from entering date manually in an input field in HTML. I want user to select date from the date-picker provided to avoid input date entry Here is the my code in which I've used date-picker. <!DOCTYPE html> <html class="html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script> <script> $(function() { $("#datepicker").datepicker( { dateFormat:'dd-mm-yy', changeMonth: true, ...

Trouble in consuming API having security?

Image
Clash Royale CLAN TAG #URR8PPP Trouble in consuming API having security? API Document : To access the service, you must pass a valid Authorization: header in every request.Requests that originate from your own server via a script, HTTP proxy, etc. should include a private key, which you should keep secure, as you would a password. The complete Authorization: header with your private key is: Authorization: privateKey ******** Requests that originate from a web browser will be blocked if they include a private key Requests that originate from a web browser should include a public key, not a private key. Public keys do not need to be protected, and can be distributed freely to your users. The complete Authorization: header with your public key is: Authorization: publicKey *************** To make requests with a public key from a web browser, the origin domain must also be whitelisted. We have whitelisted these domains for you: *.****.com API CURL: HTTP GET: /body/{bodyId}/render Renders t...

Jquery hide / show div but to keep toggle link from “hiding” too

Image
Clash Royale CLAN TAG #URR8PPP Jquery hide / show div but to keep toggle link from “hiding” too I've just posted a question on stackoverflow about a hide/show issue I was having but that's been resolved, though this is a follow up on that as I have come across another issue. Ok, so I've got a sticky footer nav and there is a link just above the nav (also "sticky") that says "Toggle menu" ... when I click to hide the menu, the link that I've just clicked also hides. So basically there is no way to make the menu visible again cos the toggle button has also disappeared! Javascript: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#stickyfooter").show(); $(".show_hide").show(); $('.show_hide').click(function(){ $("#stickyfooter").slideToggle...

SyntaxError: unterminated string literal error

Image
Clash Royale CLAN TAG #URR8PPP SyntaxError: unterminated string literal error I found error like this SyntaxError: unterminated string literal description: '<div><span class="cal-tar">Patient NationalId :</span> 4376 is anything mistake in this if (count($doctor_dates) > 0) { foreach ($doctor_dates as $doctor_date) { ?> { id: '<?php echo $doctor_date->bookingRef; ?>', title: '<?php echo $doctor_date->name; ?>', description: '<?php echo nl2br('<div><span class="cal-tar">Patient NationalId :</span> ' . $doctor_date->nationalID . '</div>'); echo nl2br('<div><span class="cal-tar">Patient Name : </span>' . $doctor_date->bkPatientName . '</div>'); echo nl2br('<div><...

Fill Selectize optgroup columns with AJAX in Laravel

Image
Clash Royale CLAN TAG #URR8PPP Fill Selectize optgroup columns with AJAX in Laravel I'm trying to assign attributes to product at client-side using Selectize . In Laravel , against Ajax request, I'm returning a JSON object from Controller as shown below: Selectize Laravel Ajax JSON $attribs = AttributeClass::find($request->id)->attributes; $attributes = array(); foreach($attribs as $attrib){ $options = array(); foreach($attrib->options as $opt){ $options = array( 'id' => $opt->id, 'name' => $opt->name ); } $attributes = array( 'id' => $attrib->id, 'name' => $attrib->name, 'options' => $options ); } return response()->json([ 'attributes' => $attributes ]); The JSON output looks something like this: JSON "{"attributes...

How to get particular lines string length from DOM element by using javascript/jquery

Image
Clash Royale CLAN TAG #URR8PPP How to get particular lines string length from DOM element by using javascript/jquery I have a string like this ( hello how are you? hello how are you? hello how are you? hello how are you? ). I am rendering this string in DOM element with 80px of width. I am counting number of string lines by using below code. Now it returns number of lines displayed in UI. Now i need to count second line's string length. How to get second line's string length? is there any possible solution to do this? function numberOfLines() { var divHeight = document.getElementById('content').offsetHeight var lineHeight = parseInt(document.getElementById('content').style.lineHeight); var lines = divHeight / lineHeight; alert("Lines: " + Math.round(lines)); } <body onload="numberOfLines();"> <div id="content" style="width: 80px; line-height: 20px"> hello how are you? hello how are you? hello how...

How can I select ID and get a value of it in input data in this row?

Image
Clash Royale CLAN TAG #URR8PPP How can I select ID and get a value of it in input data in this row? here is what I want to do. When I click the modify button, I wish div that contains role of 'ucomment' changes into in-line input form with its original value typed. But I can't even start with selecting the div. I thought the code here would work and could select what I aimed, but it didn't. $(this).closest("div[role='ucomment']") How can I select the div here? <ul id="comments" class="list-group"> <script id="commentTemplate" type="text/x-handlebars-template"> {{#each list}} <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="row w-100"> <div class="col-2" name="uid">{{uid}}</div> <div class="col-8" role="ucomment" name="ucomment...

Save value in dropdown using javascript

Image
Clash Royale CLAN TAG #URR8PPP Save value in dropdown using javascript I want to set default values in nested dropdowns of Country > State > City > Zone @ the time of form editing. All data are filled in all dropdowns but the value is not set. I have used select2 dropdown and filling data using jquery ajax in asp.net form. ======================================================================= function Edit() { selCountryId = $(this).find("intCountryId").text(); $("#select2-selCountry-container").text($(this).find("strCountryName").text()); $('#selCountry').trigger('change'); selStateId = $(this).find("intStateId").text(); $('#selState').trigger('change'); $("#select2-selState-container").text($(this).find("strStateName").text()); selCityId = $(this).find("intCityId").text(); $('#selCity').trigger('change'); $("#select2-...

Hide dropdown when adding new row in JQuery

Image
Clash Royale CLAN TAG #URR8PPP Hide dropdown when adding new row in JQuery In my Application, I can add a new row by clicking on the '+' sign. When clicked on '+' sign new row got created but I want some particular field to be hidden when clicking on '+' sign and those hidden fields will be shown by satisfying some conditions. How can I achieve this feature when creating the new row? Code for adding new row: $("#addRow").click(function() { openSearchdiv = true; $("#searchTable").append(' <tr> <td> <select class="lovs" id="field" > <option value="select"></option> <option value="rowid_system">Source System Name</option> <option value="rule_num">Rule No</option> </select> </td> <td> <select class="lovs" id="operator"> <opt...

Avoid the redirect action bind by previous javscript code

Image
Clash Royale CLAN TAG #URR8PPP Avoid the redirect action bind by previous javscript code I use easyautocomplete plugin(http://easyautocomplete.com/guide), I use some custom JavaScript to bind keydown event to search input which redirect the page to suggestion page when user click enter, But it also redirect the page when user select any item from suggestion list that appear and press Enter. easyautocomplete provides a "onKeyEnter" event which only triggers when we press "Enter" after selecting any item from suggestions So this is the custom code I added $(document).keypress(function(e) { if(e.which == 13) { document.location = "/search_results.php"; } }); So I need to stop this redirection when we press Enter after choosing any item from suggestion list by up arrow and down arrow key . easyautocomplete has already a event handler to capture the "Enter" press on for list suggestions only, i.e that event function will not be captured wh...

How to prevent the user from leaving my page [duplicate]

Image
Clash Royale CLAN TAG #URR8PPP How to prevent the user from leaving my page [duplicate] This question already has an answer here: I'm trying to make an online test using spring-mvc and html, css, jquery and I want to prevent the user that is doing the test from leave the test screen while doing the test. Does anybody know how I can do that? This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. since it's from a web browser, no you cant. the user can make new tabs. close the browser and do many other things. – IbraHim M. Nada 10 mins ago disable the user to leave my screen please elaborate it. Do you mean by closing browser window OR just switch the window OR minimize the window? – VicJordan ...